Let's Coding
0%

Posted on Edited on In

介紹

成品
使用css來製作一個一頁式的網站，將網站分為表頭、特色區塊、食物照片區、訂餐方法介紹…等，從不同區塊，去操作字型、文字排版、圖片處理。

首先，文字字型的選擇

先用Normalize.css，下載並連結
字型：使用google font > lato

text-rendering告訴渲染引擎工作時如何優化顯示文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  background-color: #fff;
  color: #555;
  font-family: 'Lato', 'Arial',sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  /* 繪制文本時易讀性優先，會啟用字距調整和連字 */
}

/* content will be in rows */
.row{
  /* 只有這邊是用px，之後的margin等設定都會用% */
 max-width: 1140px; 
 margin:0 auto;
/* 讓左右的距離能夠平均分散，使其置中 */

}



head區塊

表頭的製作

1
2
3
4
5
6
7
8
<div class="hero-text-box">
     <h1>Goodbye junk food. Hello super healthy meals.
     </h1>
     <a href="#">I’m hungry</a>
     <a href="#">Show me more</a>

   </div>

  • 利用background-image插入圖片後，往上滑會出現上方的空白處
    • 是因為h1的margin（因設置normalize.css）
  • 此時照片也還沒有填滿、置中


調整背景圖位置

讓h1文字置中

透過使用絕對定位，讓文字可以置中

1
2
3
4
5
6
.hero-text-box{
  position: absolute;
 
  width: 1140px;
  top: 50%;
  left:}

  • transform: translate(-50%,-50%);

文字放在圖片上使得看不清楚

  • 將背景圖調成深色
    1
    2
    background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.5)) center center,
       url(./Omnifood\ Contents/hero.jpg) no-repeat center center/cover ;

h1文字區的細節調整

  • 調整字的顏色、大小
  • 字母、單字之間的間距
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .hero-text-box h1{
    margin: 0;
    color: #fff;
    /* 這裏的字體大小用百分比，是為了相對於一開始設定font-size: 20px;，以他的百分比來計算 */
    font-size: 240%;
    font-weight: 400;
    letter-spacing: 1px;
     text-transform: uppercase; /*將字母改為大寫 */
     word-spacing: 3px;
    }

文字區下面的按鈕

html結構是使用<a>來製作連結的點選
將型態改為inline-block

1
2
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost " href="#">Show me more</a>
  • 希望連結與被點選的樣式都是一樣
  • 顏色是到：UI flat color tool ; 要找尋顏色深淺 0 to 255
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.btn:link,.btn:visited{
  display: inline-block;
  text-decoration: none;
padding: 10px 15px;
border-radius: 200px;

}

.btn-full:link,.btn-full:visited{
  /* UI flat color tool */
  background-color: #e67e22;
  /* border: 1px solid #e67e22 ; */
  color: #fff;
}

.btn-ghost:link,.btn-ghost:visited{
  border: 1px solid #e67e22 ;
  color:#e67e22;

}

按鈕的觸碰與點選

:active 滑鼠按下的樣式; :focus 鍵盤聚焦的樣式 ;:hover 滑鼠滑過

.btn:link,.btn:visited{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  /* transition 放在這裡！ */
 transition: background-color 0.5s,border 0.5s,color 0.5s;

}

.btn:hover,.btn:active{

 background-color: #cf6d17;
}
.btn-full:hover,.btn-full:active{ 
  border: 1px solid #cf6d17 ;
  color: #fff;
}

.btn-ghost:hover,.btn-ghost:active{
  border: 1px solid #cf6d17 ;
  color:#fff;

}

表頭導覽列的製作

金魚都能懂的這個網頁畫面怎麼切 : 導覽列

  • header裡面的nav，html架構：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    <nav>
      <div class="row">
        <img src="./Omnifood Contents/logo-white.png" alt="Omnifood logo" class="logo">
        <ul class="main-nav">
          <li> <a href="#">Food delivery</a></li>
          <li><a href="#">How it works</a></li>
          <li><a href="#">Our cities</a></li>
          <li><a href="#">Sign up</a></li>

        </ul>

      </div>
    </nav>

  • logo

    1
    2
    3
    4
    5
    header .logo{
    height: 100px;
    width: auto;
    float: left;  
    }

  • 讓nav區靠右
  • 為了讓四個連結區塊可以橫向排列，設定inline-box
  • 針對字型、顏色等做調整
  • 並於連結下方增加線的動畫效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40

    .main-nav{
    float: right;
    margin-top: 55px;

    }
    .main-nav li{
    display: inline-block;
    margin-left: 20px;

    }
    .main-nav li a:link,.main-nav li a:visited{
    text-decoration: none;
    font-weight: 400;
    font-size: 90%; /*想要18px，18px / 20px=0.9*/
    color: #fff;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;

    }

    .main-nav a::after{
      content: '';
      width: 100%;
      position: absolute;
      border: solid .5px rgba(230, 126, 34,.6);
      left: 0;
      bottom:0 ;
      margin-top: 5px;
      transform: scale(0);
      transition: 0.5s;
      
    }

    .main-nav li:hover a::after,.main-nav li:active a::after{
    transform: scale(1);

    }

特色區塊

  • — 用html符號 –> &mdash;

    更多…HTML Entity List
  • features這部分，使用section標籤來包覆，而其中的不同區塊則使用.row來包覆內容(並用來固定寬度)
  • 這裏的html運用grid來配置欄位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section class="section-features">
    <div class="row">

      <h2>Get food fast &mdash; not fast food</h2>
      <p class="long-copy">Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. we promise!</p>
    </div>
<div class="row">
      <!-- 第二區塊：features，這裏要開始應用grid -->
      <div class="col span-1-of-4">
        <h3>Up to 365 days/year</h3>
        <p>Never cook again! We really mean that. Our subscript </p>
      </div>
      <div class="col span-1-of-4">
        <h3>Ready in 20 minutes</h3>
        <p>You're only twenty minutes away from your delicious ant chefs in each town to ensure that you're 100% happy.
        </p>
      </div>
      <div class="col span-1-of-4">
        <h3>100% organic</h3>
        <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotbetter!</p>
      </div>
      <div class="col span-1-of-4">
        <h3>Order anything</h3>
        <p>We don't limit your creativity, which means you cacious meals. It's up to you!</p>
      </div>
    </div>
  </section>

icon

使用ionicon:ionicon

1
<script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>`
  • 讓他斷行排列使用block
  • 字的大小適用比例設置
1
2
3
4
5
6
7
8
.section-features .icon-big{
display: block;
  font-size: 350%;
  color: #e67e22;
  margin-bottom: 10px;
  font-weight: 100;

}

h2的文字與p

1
2
3
4
5
6
7
8
9
.section-features .long-copy{
width: 70%;
/* 總寬100%,左邊設置15%，就會平均 */
margin-left: 15%;

/* line-height: 1.3; */
line-height: 145%; /*120-145%最合適 */
/* word-spacing: 1px; */
}

欄位col的處理（class=”items”）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.section-features h3{
  font-weight: 300;
  font-size: 110%;
  text-transform: uppercase;
  
  margin-bottom: 15px;
}
.section-features .items {
  padding:1% ;

}

.section-features .items p{
  line-height: 145%;
  font-size:90% ;
}

食物照片區

  • 這裏的內容不適用.row來包覆，因為我們希望它的寬度可以站滿橫向的視窗

html結構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<section class="section-maels">
  <!-- 要製作2列各4格的食物照片，這裏使用ul,li的方式排列 -->
  <ul class="meals-showcase">
    <li>
      <figure>
        <img src="./Omnifood Contents/1.jpg" alt="Korean bibimbap with egg and vegetables">
      </figure>
    </li>
    <li>
      <figure>
        <img src="./Omnifood Contents/2.jpg" alt="Simple italian pizza with cherry tomatoes">
      </figure>
    </li>
    <li>
      <figure>
        <img src="./Omnifood Contents/3.jpg" alt="Chicken breast steak with vegetables">
      </figure>
    </li>
    <li>
      <figure>
        <img src="./Omnifood Contents/4.jpg" alt="Autumn pumpkin soup">
      </figure>
    </li>


  </ul>

  <ul class="meals-showcase">
    <li>
      <figure>
        <img src="./Omnifood Contents/5.jpg" alt="Paleo beef steak with vegetables">
      </figure>
    </li>
    <li>
      <figure>
        <img src="./Omnifood Contents/6.jpg" alt="Healthy baguette with egg and vegetables">
      </figure>
    </li>
    <li>
      <figure>
        <img src="./Omnifood Contents/7.jpg" alt="Burger with cheddar and bacon">
      </figure>
    </li>
    <li>
      <figure>
        <img src="./Omnifood Contents/8.jpg" alt="Granola with cherries and strawberries">
      </figure>
    </li>

  </ul>


</section>

  • 設定此區塊滿版，並讓他們設定為區塊
  • 讓li，每個設定寬度為25%(4個共100％)，並利用float使他們比鄰排列
1
2
3
4
5
6
7
8
9
10
.meals-showcase{
  list-style: none; /* 去除ul的預設樣式*/
  display: block;
  width: 100%;

}
.meals-showcase li{
  float: left;
  width: 25%;
}

  • 上面的照片並未合乎大小，以及置中
1
2
3
4
5
6
7
8
9
.meals-showcase figure{
  width: 100%;

}
.meals-showcase figure img{
  width: 100%;
  

}

  • 去除上圖的空隙vertical-align: middle;
1
2
3
4
5
.meals-showcase figure img{
  width: 100%;
  vertical-align: middle;}

加入文字區在圖片上方

製作圖片被摸到，有圖片縮放的動畫

1
2
3
4
5
6
7
8
9
10
.meals-showcase figure img{
  width: 100%;
  vertical-align: middle;
transform: scale(1.15);
transition: transform .5s;

}
.meals-showcase figure:hover img{
  transform: scale(1);
}

  • 讓圖片有黑色透明效果

    • 在圖片本身img設定透明度，在figure放圖標籤裡設定背景為黑色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.meals-showcase figure{
  width: 100%;
  overflow: hidden;
  background-color:#000;

}
.meals-showcase figure img{
  width: 100%;
  vertical-align: middle;
transform: scale(1.15);
transition: transform .5s ,opicity .5s;
opacity: 0.7;
}
.meals-showcase figure:hover img{
  transform: scale(1);
  opacity: 1;
}

訂餐方法介紹 的介面

  • html的結構
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<section class="meal-steps">
    <!-- 在row裡面，放一個h2標題，在增加一個row的div，使用grid兩欄的class -->
    <div class="row">
      <h2>How it works - Simple as 1, 2, 3</h2>

    </div>
    <div class="row">
      <!-- 左欄 -->
      <div class="col span-2-of-4">
        <img src="./Omnifood Contents/app-iPhone.png" alt="Omnifood-app" class="app-screen">
      </div>
      <!-------- 右欄 ------>
      <div class="col span-2-of-4">
        <div class="work-step">
          <div>1</div>
          <p>Choose the subscription plan that best fits your needs and sign up today.</p>
        </div>
        <div class="work-step">
          <div>2</div>
          <p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
        </div>
        <div class="work-step">
          <div>3</div>
          <p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
        </div>
<!------- 與步驟同一欄，下載的按鈕使用<a> ------>

        <a href="#"><img src="./Omnifood Contents/download-app.svg" alt="apple store button"></a>
        <a href="#"><img src="./Omnifood Contents/download-app-android.png" alt="play store button"></a>

      </div>
    </div>


  </section>



  • 標題調整

:first-child

圖片靠右：text-align: right;

右欄文字區

在數字部分：要讓他與文字區能夠排列，使用inline-block,float
數字的外圈：參考以下css

1
2
3
4
5
6
7
8
9
10
11
12
.work-step{
  display: inline-block;
  margin-bottom: 50px;
}

  .work-step div{
 
  float: left;
  color:#e67e22 ;
  border: 2px solid #e67e22;
  border-radius: 50%;
  }

讓圓形變圓，增加寬高

1
2
3
4
5
6
.work-step div{
height: 55px;
  width: 55px;
  text-align: center;
  padding: 5px;
  font-size: 150%;}

  • margin-right: 25px;

按鈕的處理

1
2
3
4
5
.btn-app img{
  height: 50px;
  width: auto;
  margin-right: 10px;
}

地點資訊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<section class="section-cities">
    <div class="row">
      <h2>We're currently in these cities</h2>
    </div>
    <div class="row">
      <!-- 第一個地點 -->
      <div class="col span-1-of-4 items">
        <img src="./Omnifood Contents/lisbon-3.jpg" alt="">
        <h3>Lisbon</h3>
        <div class="city-features">
          <ion-icon name="person" class="person"></ion-icon>
          1600+ happy eaters
        </div>
        <div class="city-features">
          <ion-icon name="star" class="star"></ion-icon>
          60+ top chefs
        </div>
        <div class="city-features">
          <ion-icon name="logo-twitter" class="logo-twitter"></ion-icon>
          @omnifood_lx
        </div>
      </div>
      <!-- 第二個地點 -->
      <div class="col span-1-of-4 items">
        <img src="./Omnifood Contents/san-francisco.jpg" alt="">
        <h3>San Francisco</h3>
        <div class="city-features">
          <ion-icon name="person" class="person"></ion-icon>
          3700+ happy eaters
        </div>
        <div class="city-features">
          <ion-icon name="star" class="star"></ion-icon>
          160+ top chefs
        </div>
        <div class="city-features">
          <ion-icon name="logo-twitter" class="logo-twitter"></ion-icon>
          @omnifood_sf
        </div>
      </div>
      <!-- 第三個地點 -->
      <div class="col span-1-of-4 items">
        <img src="./Omnifood Contents/berlin.jpg" alt="">
        <h3>Berlin</h3>
        <div class="city-features">
          <ion-icon name="person" class="person"></ion-icon>
          2300+ happy eaters
        </div>
        <div class="city-features">
          <ion-icon name="star" class="star"></ion-icon>
          110+ top chefs
        </div>
        <div class="city-features">
          <ion-icon name="logo-twitter" class="logo-twitter"></ion-icon>
          @omnifood_berlin
        </div>
      </div>
      <!-- 第四個地點 -->
      <div class="col span-1-of-4 items">
        <img src="./Omnifood Contents/london.jpg" alt="">
        <h3>London</h3>
        <div class="city-features">
          <ion-icon name="person" class="person"></ion-icon>
          1200+ happy eaters
        </div>
        <div class="city-features">
          <ion-icon name="star" class="star"></ion-icon>
          50+ top chefs
        </div>
        <div class="city-features">
          <ion-icon name="logo-twitter" class="logo-twitter"></ion-icon>
          @omnifood_london
        </div>

      </div>

  </section>

1
2
3
4
5
.section-cities img{
  width: 100%;
  vertical-align: middle;
  margin-bottom: 15px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
.section-cities .icon-small{
  color: #e67e22;
 display: inline-block;
 text-align: center;
 font-size: 120%;
 margin-right: 10px;
 
/*讓icon與文字，置中、對其*/
 line-height: 120%;
 vertical-align: middle;
 margin-top: -5px;
  
}

顧客回饋區

  • 區分為三個區塊，一列三欄的方式劃分
  • 用<blockquote>來包顧客的回饋文字
  • 並加入顧客的頭像以及姓名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<section class="section-testimonials">
    <div class="row">
      <h2>Our customers can't live without us</h2>
    </div>
    <div class="row">
      <div class="col span-1-of-3">

        <blockquote>
          Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a
          life-saver. Now that I got used to it, I couldn't live without my daily meals!
          <cite><img src="./Omnifood Contents/customer-1.jpg" alt="">Alberto Duncan</cite>
        </blockquote>

      </div>
      <div class="col span-1-of-3">

        <blockquote>
          Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here
          in Lisbon,
          but no one comes even close to Omifood. Me and my family are so in love!
          <cite><img src="./Omnifood Contents/customer-2.jpg" alt="">Joana Silva</cite>
        </blockquote>

      </div>

      <div class="col span-1-of-3">

        <blockquote>
          I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up
          with
          Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
          <cite><img src="./Omnifood Contents/customer-3.jpg" alt="">Milton Chapman</cite>
        </blockquote>

      </div>

    </div>



  </section>

  • 先做背景的處理
1
2
3
4
5
.section-testimonials {
  background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.7)) center center, url(./Omnifood\ Contents/back-customers.jpg)no-repeat center center/cover ;
  color: #fff;
  background-attachment: fixed;
}

  • 增加相片背景
  • 可以看到文字與，照片相

  • 在.section-testimonials img 增加vertical-align: middle;

增加上面逗點符號

符號表

1
2
3
4
5
6
7
8
9
10
11
.section-testimonials blockquote:before{
 content:"\201C";
 font-size:500%;
 display: block;

position: absolute;
top: -5px;
left: -5px;
}

}

訂購方案介紹區

  • span標籤的應用
  • 當全部設定寬度100%，會出現問題
    • 要利用篩選器，來選擇指定框

  • 解決方式，在html的標籤增加空行

頁尾表單的建構

footer

  • 放入相關連結的icon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<footer>
    <div class="row">
      <div class="col span-1-of-2">
        <ul class="footer-nav">

          <li><a href="#">About us</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Press</a></li>
          <li><a href="#">Android App</a></li>

        </ul>
      </div>

      <div class="col span-1-of-2 ">

        <ul class="socilmedia-link">
          <li><a href="#">
              <ion-icon name="logo-facebook" class="logo-facebook"></ion-icon>
            </a></li>
          <li><a href="#">
              <ion-icon name="logo-twitter" class="logo-twitte"></ion-icon>
            </a></li>
          <li><a href="#">
              <ion-icon name="logo-google" class="logo-google"></ion-icon>
            </a></li>
          <li><a href="#">
              <ion-icon name="logo-instagram" class="logo-instagram"></ion-icon>
            </a></li>

        </ul>


      </div>
      <div class="row">

        <p>
          copyright &copy; 2020 by Omnifood. All right reserved.
        </p>

      </div>



    </div>





  </footer>

  • 使用float來使物件放置左右側
  • footer-nav li使用inline-block
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 footer{
  background-color: #333;
  padding: 50px;
  font-size: 80%;
}
footer .footer-nav{
  list-style: none;
  float: left;
}
.socilmedia-link{
  list-style: none;
  float: right;
}
.footer-nav li,.socilmedia-link li{
  display: inline-block;
  margin-right: 20px;
}

連結顏色調整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.footer-nav li:last-child,.socilmedia-link li:last-child{
  margin-right: 0px;
}

.footer-nav li a:link ,.footer-nav li a:visited, .socilmedia-link li a:link ,.socilmedia-link li a:visited{
 text-decoration: none;
 border: none;
 color: #888;
 transition: color .3s;
}


.footer-nav li a:hover ,.footer-nav li a:active{
  color: #ddd;

}

.socilmedia-link li a:link,.socilmedia-link  li a:visited{
 font-size: 160%;
 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
footer p{
  color:#888;
  text-align: center;
  
  margin-top: 20px;
}

.logo-instagram,
.logo-google,
.logo-twitte,
.logo-facebook{
transition: color .3s;
}

.logo-instagram:hover{
  color: #517fa4;
}
.logo-google:hover{
  color: #dd4b39;
}
.logo-twitte:hover{
  color: #00aced;
}
.logo-facebook:hover{
  color: #3b5998;
}

補充

background與background-imge之差別

1
2
3
4
5
6
7
8
9
10
background属性是整體設置的，background image是background的属性之一，background的屬性包括
background-color
background-image
background-repeat
background-attachment
background-position，
你看不到圖片是因为設置錯，不能加no-repeat屬性，應改為：
background-image:url("some.jpg"); background-repeat:no-repeat;分開寫

[background和background-image什么区别](https://bbs.csdn.net/topics/310167508)
1
2
3
4
5
6
7
8
9
10
.header{
background-image:url(./Omnifood\ Contents/hero.jpg) ;

background-size: cover;
background-position: center;
}
/********我改為下面這樣*******/
.header{
background: url(./Omnifood\ Contents/hero.jpg) no-repeat
 center center/cover;}

文字框置中（區塊（div）的垂直置中）

pjchender

Position + Transform（常用）:先利用 position: absolute 把 top: 50% 設在 50%；接著再透過 transform: translateY(-50%) 把超過的部分修正回來，達到垂直置中。

1
2
3
4
5
6
7
8
9
.hero-text-box{
  display: flex;
  width: 1140px;
  height: 100%;
  flex-direction: column; 
  
   align-items: center; 
  justify-content: center;
}

參考：
pjchender

Button versus Link

1
2
3
4
From a semantics and accessibility viewpoint:
Links ``(<a>) ``are for "going someplace" such as "jumping to a different section of a page, going to another URL, etc.
Whereas
Buttons ``<button> ``are for "doing something" such as a function on the page to expand/collapse a menu, submit a form or etc.

grid參考資料

Spectacularly Easy Responsive Design
關於 Grid Layout 的使用姿勢
六角學院 - Bootstrap Grid System 原理介紹

margin 與 paggimg

製作steps區塊時，因設定section的margin距離
使得想在此區塊多加上背景色彩，有了中間的空白處

1
2
3
.meal-steps{
  background: #f4f4f4;
}
  • 這裏應該改為padding
    1
    2
    3
    4
    section{
      padding: 80px 0; 
      /*margin: 80px 0;*/
    }

練習後的小心得：

1.在html建構會使用.row
2.應用grid,css
3.內部，字的大小用百分比
4.有一些可以共用的區塊，可以放在reuse區塊，並設一樣的class名稱，在建構時，可以更快速

Posted on Edited on In

My page

HTML架構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>

  <div class="side-menu">
    <form action="">
      <input type="search">
      <button><i class="fa fa-search"></i></button>

    </form>
    <nav>

      <a href="#" id=""><i class="fa fa-users" aria-hidden="true"></i>鐵人賽</a>
      <a href="#" id=""><i class="fa fa-gavel" aria-hidden="true"></i>暴力班</a>
      <a href="#" id=""><i class="fa fa-object-group" aria-hidden="true"></i>RWD 醬子</a>
      <a href="#" id=""><i class="fa fa-globe" aria-hidden="true"></i>金魚網頁</a>
      <a href="#" id=""><i class="fa fa-cutlery" aria-hidden="true"></i>金魚切版</a>
    </nav>


  </div>

</body>

.side-menu

  • 設定寬度、背景色彩
  • 利用flex排列，並設定直向
    1
    2
    3
    4
    5
    6
    7
    .side-menu {
        width: 300px;
        height: 100%;
        background-image: linear-gradient(0deg, #13547a, #80d0c7);
        display: flex;
        flex-direction: column;

側邊選單裡的選項（nav）

1
2
3
4
5
6
7
8
9
10
11
12


nav a {
   /* 讓a可以一行一行排列 */
   display: block;
   padding: 10px;
   text-decoration: none;
   color: #fff;
   position: relative;
 }


  • 設定底線，利用＋篩選器

1
2
3
4
nav a+a {
      border-top: 1px solid #fff;
    }
  • 使用此方式，會讓線滿版，無法單獨調整間距
1
2
3
4
5
6
7
8
nav a+a::before {
      content: '';
      position: absolute;
      border-top: 1px solid rgba(255, 255, 255, .4);
      left: 10px;
      right: 10px;
      top: 0;
    }

form 搜尋表

  • 讓inpt與button可以緊密並排
1
2
3
.side-menu form {
      display: flex;
      margin: 0 10px 50px;}

1
2
3
4
5
.side-menu form input,
   .side-menu form button {
     border: none;
     padding: 5px 10px;
     }

  • 讓form增加框線
    1
    2
    3
    4
    5
    6
    .side-menu form {
         
         /* 設定表單外框形狀有圓弧形 */
         border-radius: 100px;
         border: 1px solid rgba(255, 255, 255, .4);
       }

  • 調整寬度
  • 但要注意的是，如此調整後就蓋住了form的框線
1
2
3
4
5
6
7
8
9
10
/* 寬度300，左右2邊有10px，剩下280，希望左邊選單大一點點 */


    .side-menu form input {
      width: 230px;
    }

    .side-menu form button {
      width: 50px;
    }

  • 設背景顏色為透明
1
2
3
4
5
6
7
8
9
10
.side-menu form input,
    .side-menu form button {
      border: none;
      padding: 5px 10px;

      /* 設定透明才會讓，form表單的框顯示清楚 */
      background-color: transparent;
      color: #fff;
    }

  • 取消focus的外框
1
2
3
4
.side-menu form input:focus,
    .side-menu form button:focus {
      outline: none;
    }

動畫

1
2
3
4
5
6
7
8
9
10
11
/* 動畫：讓icon消失，文字左縮 */
   nav a .fa {
     margin-right: -1.1em;
     transform: scale(0);
     transition: .3s;
   }

   nav a:hover .fa {
     margin-right: 0em;
     transform: scale(1);
   }`

Posted on Edited on In

my_page

此切版主要是針對footer區域的切版練習，有四個欄位，最下方有copy right區域。

我製作時遇到的問題：

  • copyright一直跟左邊的item並行，是因為container的範圍應該只要涵蓋四個item就好

  • 設定nav的display:flex;並讓設定方向為colum

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<body>
  <div class="main-footer">
    <div class="container">
      <div class="footer-item">
        <h4>關於暴力課程</h4>
        <nav>
          <a href="#"><i class="fa fa-angle-right"></i> 課程目標</a>
          <a href="#"><i class="fa fa-angle-right"></i> 辦學理念</a>
          <a href="#"><i class="fa fa-angle-right"></i> 課程宗旨</a>
        </nav>
      </div>
      <div class="footer-item">
        <h4>課程列表</h4>
        <nav>
          <a href="#"><i class="fa fa-angle-right"></i> 暴力網頁入門班</a>
          <a href="#"><i class="fa fa-angle-right"></i> RWD網頁深入理解</a>
          <a href="#"><i class="fa fa-angle-right"></i> CSS3互動動畫設計</a>
          <a href="#"><i class="fa fa-angle-right"></i> Bootstrap框架實務</a>
        </nav>
      </div>
      <div class="footer-item">
        <h4>服務項目</h4>
        <nav>
          <a href="#"><i class="fa fa-angle-right"></i> 網站建置顧問</a>
          <a href="#"><i class="fa fa-angle-right"></i> 網站設計建置</a>
          <a href="#"><i class="fa fa-angle-right"></i> 網站規劃</a>
          <a href="#"><i class="fa fa-angle-right"></i> 企業教育訓練</a>
        </nav>
      </div>
      <div class="footer-item footer-subs">
        <h4>訂閱電子報</h4>
        <form>
          <input type="text" name="">
          <input type="submit" value="訂閱">
        </form>
      </div>
    </div>
    <div class="copyright">
      Copyright &copy; 2019 金魚都能懂得這個網頁畫面怎麼切
    </div>
  </div>
</body>
  • 在大區塊先訂出寬度，並讓他們橫向排列
1
2
3
4
5
6
7
8
9
10
11
12
.main-footer {
     /* 讓上面有距離出來 */
     padding: 150px 0 0 0;
     background: linear-gradient(-20deg, #3f5494, #08c7a5);
   }

   .main-footer .container {
     display: flex;
     width: 1200px;
     margin: auto;
   }

1
2
3
4
5
6
7
.footer-item {
  /* 使用flex的排版特性，來進行欄位大小的配置 */
  width: 0;
  flex-grow: 1;
  margin: 0 20px;

}

1
2
3
4
5
6
7
8
9
10
11
12
.copyright {
      text-align: center;

      /* 這裡也加距離 */
      margin: 150px;
      padding: 10px 0;
      background-color: #3e5293;
      color: #70f6df;
      width: 100%;
      /* 左方有一個空格，沒有填滿 */

    }

1
2
3
4
5
.footer-item nav {
     /* 設定直向排列之後，裡面的小項目就會排列整齊 */
     display: flex;
     flex-direction: column;
   }

訂閱電子報的區域

  • 再給予一個class名稱，在設定css時比較有指向性
1
2
3
4
5
6
7
<div class="footer-item footer-subs">
        <h4>訂閱電子報</h4>
        <form>
          <input type="text" name="">
          <input type="submit" value="訂閱">
        </form>
      </div>

訂閱電子報的居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* footer-item是flex的項目，所以他的高度和其他地方等高，但這個訂閱電子報欄位內容，並沒有等高<所以讓footer-item設定flex，設定直排，讓表單上下的距離能夠撐開 */
.footer-subs {
  display: flex;
  flex-direction: column;

}


.footer-subs form {
  /* 這裏的flex是為了讓輸入框與訂閱紐能夠並排 */
  display: flex;
  /* 這裏的margin與寬度的設定是為了讓輸入框能夠整個居中   */
  margin: auto 0;
  width: 100%;

}

最後的調整

  • 因為copyright的margin:150px; > 應該修改為margin: 150px 0 0 ;(只有上面有margin)

t_page

Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis
HTML中button和input button的區別

Posted on Edited on

成品

會員登入

製作會員登入頁面，使用form表單，製作標籤、輸入框，以及登入按鈕。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <div class="login">
    <form class="form" action="">
      <h2>會員登入</h2>
      <!-- 用群組來分帳號與密碼 -->
      <div class="group">
        <label for="user_id">帳號</label>
        <input type="text" name="" id="user_id">
        <!-- for,與input的名字設一樣，才能在點到label時，會直接把插入點帶進去 -->
      </div>
      <div class="grop">

        <label for="user_password">密碼</label>
        <input type="text" name="" id="user_password">

      </div>
      <div class="gtn-group">
        <button class="btn">登入</button>
        <button class="btn">取消</button>
      </div>
    </form>
  </div>




</body>

HTML,body 背景照片

要讓畫面整個垂直置中，首先需要讓畫面高度是夠高的！（預設的body,html是由內容所撐開，所以預設不是100%的高）

1
2
3
4
5
6
7
8
html,
   body {
     height: 100%;
   }
body {
     background: url('/img/office.jpg') no-repeat
center center/cover;
   }

登入區

1
2
3
4
5
6
7
.login {
      width: 600px;
      height: 400px;
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 10px solid #fff;
    }

  • 讓此login區置中於版面
    • 在body設display:flex

陰影、模糊

1
2
box-shadow: x y blur spread color inset;
常用box-shadow多半用在區塊的光暈，來達成陰影的效果

補充

  • x：水平位移
  • y：垂直位移
  • blur：模糊程度，預設為0
  • spread：擴散程度，預設為0
  • color：顏色
  • inset：內陰影
毛玻璃特效 (注意：這是透過瀏覽器在處理特效，會比較耗效能)
1
backdrop-filter: blur(5px);

更多相關…純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹,Secret 18: 毛玻璃效果

調整文字、排版細節

1
2
3
4
.form input {
    /* 讓輸入框設定100%，就會撐開 */
    width: 100%;
  }

  • 使用line-height，讓輸入框的高度撐開
1
2
3
4
5
6
.form input {
      /* 讓輸入框設定100%，就會撐開 */
      width: 100%;
      border: 1px solid #aaa;
      line-height: 3;
    }

  • 將帳號、密碼的間距拉開，以及h2的調整
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.form h2 {
      margin-bottom: 20px;
      border-bottom: 1px solid #fff;
      padding-bottom: 10px;


    }

    .form .group {
      margin-bottom: 20px;
    }

    .form label {
      line-height: 2;
    }

    .form input {
      /* 讓輸入框設定100%，就會撐開 */
      width: 100%;
      border: 1px solid #aaa;
      line-height: 3;
      border-radius: 5px;
    }

按鈕的調整

  • btn並排中建出現空隙，在父元素div上加上 font-size:0;
  • .form .btn+.btn，選取到『緊跟在對象 A 同層後方的 B』
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.form .btn-group {
      font-size: 0px;
      /* 讓按鈕區塊與上方有些距離，首先將原本wrap，height: 400px;改為500px ，再調整按鈕的margin*/
      margin-top: 50px;
    }

    .form .btn {
      font-size: 20px;
      border-radius: 5px;
      border: none;
      background-color: #6ab4fe;
      width: 190px;
      padding: 10px 0;
      color: #fff;

    }

    .form .btn+.btn {
      margin-left: 15px;
    }

Tutoria page

w3schools
CSS 實現背景圖尺寸不隨瀏覽器縮放而變化
應用CSS3 box-shadow複製圖型
css3_buttons
input標籤和button放在一行寫:inline元素的空白間隙問題
親代選取器之妹妹選取器與鞭炮串選取器

Posted on Edited on In

練習使用float排版

成品

HTML架構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="wrap">
	<div class="item">
		<img src="https://picsum.photos/500/500?random=10">
		<div class="txt">
			<h3>金魚都懂切版</h3>
			<p>金魚都懂的這個網頁怎麼切，是 IThome 鐵人賽的主題，主要訴求在簡。</p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=20">
		<div class="txt">
			<h3>金魚也懂CSS</h3>
			<p>金魚都能懂的 CSS 選取器，是 IThome 鐵人賽的主題之一，</p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=30">
		<div class="txt">
			<h3>金魚還會HTML</h3>
			<p></p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=40">
		<div class="txt">
			<h3>阿你會甚麼?</h3>
			<p></p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=66">
		<div class="txt">
			<h3>對不起我又嗆人了</h3>
			<p> CSScoke 的直播，趁現在趕快去定閱一波阿!</p>
		</div>
	</div>
</div>

調整版面

  • 1.在wrap來訂出畫面尺寸大小
  • 2.使用float
  • 3.在第一個的item去設定，佔畫面的50%;而另外四個則是以25％去放置在畫面中
  • 4.蚯蚓選取器：『對象 A 同層後方的所有 B』
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 先將畫面尺寸定出來 */
    .wrap {
      width: 960px;
      margin: auto;
      /* 在父層設置這個，就可以讓父層抓到所有子層的高度 */
      overflow: hidden;
    }

    .item {
      float: left;
    }

    .item img {
      width: 100%;
      vertical-align: middle;
    }


    .item:first-child {
      width: 50%;
    }

    .item:first-child~.item {
      width: 25%;
    }
  • 設定.item .txt區塊的寬為100%，以及paddimg:15px，這會使得文字區塊超出div。
  • 要使用 box-sizing: border-box;

互動效果的設定

  • 設定文字被摸到出現或消失

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .item .txt {
          
          /* 調整兩個段落的垂直居中 */
          /* display: flex; */
          flex-direction: column;
          justify-content: center;
          align-items: center;

          /* 要設定互動，display: flex;要去掉 */
          display: none;

        }
        .item:hover .txt {
          display: flex;
        }
         /* ******************************/
        /* ***或是以透明度的方式來做顯示互動的效果*** */
      .item .txt {  
          opacity: 0;
          transition: .5s;

        }

        .item:hover .txt {
          opacity: 1;
        }

  • 也可將互動改唯有縮放效果的方式

  • scale()用於修改元素大小

1
2
3
4
5
6
7
8
9
10
11
.item .txt {  
     opacity: 0;
     transform: scale(0);
     transition: .5s;

   }

   .item:hover .txt {
     opacity: 1;
     transform: scale(1);
   }

補充教學-float 浮動

  • 以圖片與段落文字為例
    1
    2
    3
    4
    5
    6
    7
    8

    <img src="https://picsum.photos/500/500?random=6">
    <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    </p>


  • 當將img設定浮動之後，他會浮上來一層，在p之上，與裡面的文字同一層（所以會擠壓到文字）
  • float:left; float:right; 沒有center

示意圖：

形成文繞圖：

  • 讓圖片與文字有些距離，可以在img設定margin

float排版

  • 設定三個欄位

  • 子物件設定為浮動之後，父層就會抓不到子物件的高度

  • 物件設定float之後，物件會排排站
  • 再將三個欄位設定margin，且增加ooxx的div
  • 並將ooxx，設定clear：both; 讓父層抓到高度

父層其實是被ooxx所拉開高度，而不是被內容的float物件所撐開
clear作用是散開浮動物件，跑到所有浮動物件後方(最下方) 圖二，紅色。

Day 19 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 1
親代選取器之妹妹選取器與鞭炮串選取器
【DAY24】transform，進入視覺系的CSS第一步，網頁要動起來了！（一）
Transform變形
[CSS] 浮動 (float) 與清除浮動 (clear)

Posted on Edited on In

成品

  • 基本網頁的架構
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <body>
      <!-- 大區塊 wrap -->
      <div class="wrap">
        <!-- 區塊一 -->
        <div class="item">
          <div class="icon">

          </div>
          <div class="txt">
            <h3></h3>
            <p></p>
          </div>
        </div>
        <!-- 區塊二 -->
        <div class="item">
          <div class="icon">

          </div>


          <div class="txt">
            <h3></h3>
            <p></p>
          </div>
        </div>
        <!-- 區塊三 -->
        <div class="item">
          <div class="icon">

          </div>
          <div class="txt">
            <h3></h3>
            <p></p>
          </div>
        </div>

      </div>



    </body>

wrap 的處理

1
2
3
4
5
6
7
.wrap {
      display: flex;
      max-width: 1200px;
      margin: auto;


    }

三個item的處理

  • 方框的角是圓弧border-radius: 5px;，參考
  • 方框背後有陰影box-shadow，參考
1
2
3
4
5
6
7
8
9
10
11
.item {

      width: 340px;
      align-items: center;
      text-align: center;
      margin: 10px 15px;
      padding: 10px;
      border: 5px solid #F8D0CD;
      border-radius: 5px;
      box-shadow: 2px 2px 10px 1px #F8D0CD;
    }

破格

  • 設置margin凸出去，就設置負的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item .icon {
      width: 150px;
      height: 150px;
      /* 將整個div放中間，不是用text-align */
      margin: -75px auto 0;
      background-color: blue;
      font-size: 85px;
      color: #f5afac;
      line-height: 150px;
      /* line-height可以用來做單航文字的垂直居中 */
      line-height: 150px;
      /* **** */
      position: relative;
      border-radius: 50%;

    }
  • 先是方形的，後來加了radious

在icon前加一個物件，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.item .icon::before {
      content: '';
      position: absolute;
      border: 10px solid #f5afac;
      width: 100%;
      height: 100%;
      /* left: 0; right: 0;  要注意有border*/
      left: -10px;
      right: -10px;
      border-radius: 50%;
      margin: -15px auto 0;
      
      /*下一張圖，加上框線的處理*/
      border-top: 10px solid #f9cec2;
      border-right: 10px solid #f9cec2;
      border-bottom: 10px solid transparent;
      border-left: 10px solid transparent;
      transform: rotate(-45deg);
      margin: -10px auto 0;
     
    }
  • 先讓外框變原形，給予線條
  • 設計線的上下左右，顏色與透明度（是以原本正方形的上下左右去看）
  • 接著選轉，讓它到正上方

  • 要注意突出去的部分已經超過wrap的範圍，會影響專案後續的呈現

  • wrap要做調整

icon的動畫

  • @keyframes ＋ 動畫名稱 動畫內容（劇本） 關鍵影格的設定(0-100%(結束) or from-to )一段動畫在一個連續時間軸上進行著
  • animation ＋ 動畫名稱 播放時間 延遲執行的時間（要等多久才播放） 速度 次數 方向 填充模式(起點狀態) 播放狀態（播放\暫停）

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

完整解析 CSS 動畫 ( CSS Animation )
金魚都能懂網頁設計入門 : Animation 網頁動畫 - 鐵人賽第十九天
動畫效果

  • animation-duration:5s;指的是「播放一次」動畫需要的時間
  • animation-iteration-count:infinite;表示動畫播放的次數，預設值為 1 次，如果設定為 infinite 動畫就會無止盡的播放下去。
  • animation-timing-function 動畫加速度函式:
    • linear:線性，沒有任何加速減速
    • ease、ease-in、ease-out、ease-in-out:具有加速減速的動畫
  • animation-direction 動畫播放方向
    • normal：正常播放，從 0% 到 100% ( 預設值 )。
    • reverse：反轉播放，從 100% 到 0%。
    • alternate：正反轉輪流播放，奇數次為 0% 到 100%，偶數次為 100% 到 0%，若動畫播放次數只有一次就只會正常播放。
    • alternate-reverse：alternate 的相反，奇數次為 100% 到 0%，偶數次為 0% 到 100%，若動畫播放次數只有一次就只會反轉播放。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* item被摸到，然後搖裡面的icon */
    .item:hover .fas {
      animation: shake .2s linear infinite alternate;
    }

    @keyframes shake {
      0% {
        transform: rotate(-10deg);
      }

      100% {
        transform: rotate(10deg);
      }
    }

Font Awesome

  • 使用前可以在官網創造帳戶
  • 點選右上角的 ” Copy Kit Code ”
  • 將剛剛複製的這串程式碼放入我們網站 HTML 程式碼中的 <head> 之中。
  • 接下來就可以找自己享用的icon

@import “URI” 插入到 CSS 檔中

@import 開心的結構化 CSS

Posted on Edited on In

一開始我的製作方式是

  • 一個區塊放圖片
  • 一個區塊放h1,下標
  • 最後在一個區塊h2,p
  • 想讓文字與圖的區塊疊住再去做調整，不過失敗…

Amos老師製作方式

  • 用一個取名為banner的區塊
  • 裡面放一個container的容器，作為來設定裝下裡面文字的容器
  • 此container中，再放一個banner-txt，用來放置文字區塊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <div class="banner">
    <div class="container">
      <!-- 設定固定寬度的容器 -->
      <div class="banner-txt">
        <h1>金魚都能懂的
          <small>這個網頁畫面怎麼切</small>
        </h1>
        <h2>圖文滿版區塊</h2>
        <p>這畫面實在常見，在各種樣版網站可說是設計常客
          金魚切不出來實在說不過去阿</p>

      </div>
    </div>
  </div>

</body>

1.css的簡單解析

  • 在banner的地方會去設定填滿整個視窗
  • container用來設定所放入文字的容器，他的寬與高，並讓他置中
  • banner-txt的地方，將高度設定和container一樣，並設定flex讓內容文字能夠依照想要的方式來進行排列

將幾個大重點放於下方說明：

2.CSS Reset

金魚都能懂網頁設計入門 : CSS Reset
meyerweb.com
計網頁時重要的起手式，主要是為了讓各家瀏覽器的網頁外觀維持一致。
不同瀏覽器，在一開始，會有預設的部分，會導致在做css時和預想的設置會有差異，所以要記得reset。

3.flex 的使用

玩轉CSS 

1
2
3
4
display: flex;
flex-direction: column; 垂直
justify-content: center; 
align-items:flex-start

此網頁flex排列的過程

  • display: flex;

  • .banner-txt small { display: block;}

  • .banner-txt { flex-direction: column;}

  • .banner-txt { flex-direction: column;justify-content: center;}

在金魚…此h1下面 加上分隔線

  • 以邊框來設，線變成滿版一條
  • 因為我們前面使用了flex的特性，讓他們的排列變成直排（主軸變直的）
  • 故’次軸’變成橫的，所以在預設情形下，次軸會填滿主軸的寬或高
    1
    2
    3
    4
    .banner-txt h1 {
          font-size: 80px;
          border-bottom: 1px solid #333;
        }

  • 在剛剛設置flex的那邊設置
1
.banner-txt{ align-items: flex-start;}

多重背景

  • 整個版面是將此背景圖放在banner區塊
  • 用線性方式
1
2
/* 多重背景的使用 */
      background: linear-gradient(115deg, darksalmon 50%, transparent 50%)center center /100% 100%, url(https://picsum.photos/seed/picsum/1200/600)right center /auto 100%;

linear gradient(顏色漸變方向 <開始方向 結束方向>, 色碼1 位置1 ,色碼 2 位置2,….) fixed (位置：固定) center center(背景：位置，x軸 y軸) / 100% 100% (背景：尺寸，寬、高)

Day26：小事之 多重背景與漸層背景 CSS3 Gradients
你真的理解CSS的linear-gradient？

margin 與 padding

可用假圖產生圖片，尺寸大小或是隨機出圖都可以在網址上設定。
假圖產生網址 1：https://fakeimg.pl/
假圖產生網址 2：https://picsum.photos/

參考資料
金魚都能懂的網頁設計-雜記

Posted on Edited on In

在freeCodeCamp上，可以免費學習到程式語言的課程，除了提供基礎的介紹外，也有一些實作範本可以練習，此次，主要練習css切版的基礎，製作一個一頁的頁面

頁面分析

先試著自己動手做

我區分的：

1
2
3
4
<div class="header">
    <h1>Dr. Norman Borlaug</h1>
    <p>The man who saved a billion lives</p>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
   <img src="https://picsum.photos/500/400?random=1" alt="">
   <p>Dr. Norman Borease wheat yields - part of his
     life-long war on hunger.</p>
     </div>
   <div class="list">
     <h2>Here's a time line of Dr. Borlaug's life:</h2>
     <ul>
      li*16--
     </ul>
     <p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering
       intellect,
       persistence and scientific vision can make to human peace and progress."
       <br>
       -- Indian Prime Minister Manmohan Singh</p>
     <h3><strong>If you have time, you should read more about this incredible human being on his a
         <a href="https://en.wikipedia.org/wiki/Norman_Borlaug">Wikipedia entry</a> .</strong></h3>


   </div>

自己切的時候，遇到的問題

  • img 在網頁縮放時，沒有好好的跟著容器變化大小，會凸出去。
    • 一開始，是設定固定寬度、高度去調整
    • 解決：使用max-width
    • 另外img的display也要調整為block或inline-block，比較好調整置中
      • 在中間很多列表的表頭，上下空間與置中一直沒有調整好
      • 發現區段沒有設置h3，讓他形成一個區塊
      • 解決：使用開發者工作，去看margin、padding產生空間

解法：

1.在最上面的區塊，使用main去包

1
2
3
4
<main id="main">
 <h1>..</h1>
    <p>Ts</p>
  </main>

style的部分要注意置中\字的大小

  • margin,padding 做了些調整
    1
    2
    3
    4
    5
    6
    7
    8
    h1 {
       font-size: 2.5em;
     }
      #main {
       margin: 30px 8px;
       padding: 15px;

     }

2.圖片區塊

使用<figure>用來引用任何內容像是文字段落、圖片、圖表或程式碼片段。<figure> 中還可以有一個 <figcaption> 標籤用來說明該 figure 區塊的標題。

1
2
3
4
5
6
<figure id="img-div"><img src="/img/tribute-cover.jpg" alt="">

    <figcaption id="imd-cap">
      ar on hunger.
    </figcaption>
  </figure>

style的部分

  • img要記得設最大寬度，讓他置中
  • #img-div，是包含照片的容器，注意原本版面左右是有留白,以及灰色，所以設定padding:10px
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    img {
       max-width: 100%;
       display: inline-block;
       height: auto;
       margin: 0 auto;
     }
    #img-div {
       background: white;
       padding: 10px;
       margin: 0;
     }

    3.u1資訊的部分

  • 以section做區塊
  • 使用blockquote，用來引用段落文字，如果引用的內容來自於網路，還可以用 cite 屬性指定引用來源 (URL)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section id="tribute-info">
<h3 id="headline">

</h3>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<blockquote>
  <p></p>
  <cite></cite>
</blockquote>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#headline {
    margin: 50px 0;
    text-align: center;
  }

  ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
  }

  li {
    margin: 16px 0;
  }

4.最下面一段

  • 以h3作為最後一段文字的區塊
1
2
3
<h3>
<a></a>
</h3>
1
2
3
4
5
6
7
8
9
10
11
12
13
 a {
    color: #477ca7;
  }

  a:visited {
    color: #74638f;
  }
blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
  }

完成的網址

我製作的網頁
codpen的解法

參考資料：

假圖
金魚都能懂的網頁設計-雜記
CSS垂直置中技巧，我只會23個，你會幾個

Posted on Edited on In

1.本地端創建資料夾

在自己的user底下，mkdir my_projects

2.GitHub上創建專案(repo)

  • 因為本地端的專案沒有下過git init，所以選用 ….…or create a new repository on the command line;但如果本地端的資料夾已經 git init過之後，…or push an existing repository from the command line

3.本地端>照著GitHub上的建議複製過去終端機

4.GitHub重新整理，出現專案資料夾

5.建立分支，來存放之後上傳的網頁

git checkout -b gh-pages：創建新分支(gh-pages)並同時移到此新分支上

git branch gh-pages:創建新分支(gh-pages)
git checkout gh-pages:移到(gh-pages)分支上

6.測試檔案上傳

開啟Visual Studio Code內建的終端機(Terminal)快速鍵為Ctrl + ~（鍵盤左上角的那顆，在 Esc 下面），或 功能選單-> View -> Integrated Terminal 。

  • 終端機 git push
  • 第一次push失敗，意指遠端還沒有建立這個branch，所以就依照它的指令操作

  • 重新整理之後～就會看到本地端的檔案傳上去了

Posted on Edited on

Ｇit是用來，讓大家對於自己的程式碼做版本控制「Version Control System」

也如同：save load 大法
S是Save 存檔，L是Load 讀取;如：每天的工作可能都是每天新增、編輯、修改許多檔案，而git會紀錄每次檔案的修改資料

另外也是分散式控制系統「Distributed Version Control Systems」

可以和不同群組的人使用不同的方式，在同一個專案內協同合作。可讓專案主導者更精準的控制大專案內的小專案。

安裝Git圖形介面工具

透過圖形介面工具（GUI, Graphic User Interface）可以幫助使用者熟悉Git的操作指令。常見的有SourceTree 以及 GitHub Desktop 這兩款。
這裏以SourceTree作為範例：
下載點
Sourcetree的下載與操作
載完後的介面

創建第一個 Git Repository

先呈現終端機的指令

  • 先確認狀態 git status(表示還沒有git)
  • 創建資料夾 mkdir hello_git
  • 進入資料夾(hello_git)，並初始化 git init
  • 初始完成囉，出現 master標籤
  • 再次確認狀態


可以詳細看一下資料夾內部

  • 透過ls -a可以看到git的隱藏檔

創建完成的同時，SourceTree也會有圖形介面可以看喔

以上就是創建Git Repository 的最初步驟

熟悉 Git 基本指令

創建hello_git資料夾後，在裡面建立hello.txt

進入vs code，輸入hello world

注意檔案變綠色

查看git status,會是紅色

接下來 git add

  • 使用git add ＋檔案，並看狀態後會發現變成綠色
  • 或git add. 加入資料夾內所有的檔案

接下來 git commit

git commit -m “add new file hello.txt”

  • 要注意 -m，以免進入vim
  • “ “引號內輸入這次要儲存的動作說明，如新增檔案、修改資料等說明
  • 有一個檔案改變,一行的資料修正*

查看狀態
nothing to commit, working tree clean，表示已把檔案加入完成

Sourcetree

可以看到歷史紀錄

再來練習一次

在vs code裡，輸入hello,linda



同樣sourcetree 也會有紀錄