金魚都能懂的網頁設計入門-排個稀飯版

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第十六天 -排個稀飯版

排個稀飯版 : 排個簡單的版面

一個簡單的版面會有 ： 導覽列 「選單」、logo、二欄畫面、三欄畫面、頁尾。
簡單架構一下

步驟：

  1. 固定寬度版面，會有一個 wrap

  2. 會有一個 logo 區塊，利用假圖來做，並加上超連結。

  3. logo旁有導覽列 nav，通常會放在滿版的區塊「header」

  4. 導覽列 , 做6個超連結

  5. 滿版內容區 banner, 做一個滿版圖片 1200px * 300px

  6. 用ul li 做一個路徑 path 「麵包屑」

  7. 畫面出現後，可以加入 reset.css

  8. path 底下加上 關於我們

  9. 關於我們底下做 三欄畫面

  10. 再來用CSS先裝飾一下

  11. 依續設定: .header , .hdader .logo, .header nav, .header nav a,
    .header nav a:hover , .banner img,
    .path , .path li, .path li a, .path li 偽類加上 ‘/‘「 利用relative absolute 來放’/‘的位置 」
    .about , .about .wrap .item,
    .about > h2 , .about > p

  12. 三欄畫面底下做 一個二欄畫面「.products」

  13. .products .wrap 做横向排列,display: flex

  14. 設定二欄的寬度為 50%

  15. 設定 .products .item img 的寬度為左邊欄的版面 width: 100% ，如果圖片底下有小小空白，可以利用
    vertical-align: bottom 這樣的設定。

  16. 文字置中對齊： display: flex , 裏面資料可以直排 flex-direction: column; 直排後設定垂直置中
    justify-content: center

  17. 做頁尾 .footer

  18. 頁尾上方再加入一個四欄的版面 .service

  19. 裝飾 .service

  20. 完成

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金魚都能懂的網頁設計入門-第十六天 -排個稀飯版</title>
    <link rel="stylesheet" href="./reset.css">

    <style>
        .header{
            display:flex;
            padding: 6px 10px;
            background-color: #000;

        }
        /* 因為logo 跟超連結沒有對齊, 所以要在logo 的超連結加上一個class logo */

        .header .logo {
            /* line-height: 52px;  因為圖片沒有置中 換別的方式*/
            display:inline-block;
            padding: 6px 0; 
            /* 計算方式: 圖片高 40px ＋ 上下padding 6px*2 = 52px 就等於超連結的 line-height: 52px 這樣就可以置中 */
        }
        .header nav{
            text-align: right;  /* flex 要設定寬度 ，才能對齊*/
            width: 100%;
            font-size: 0;  /* 為了讓超連結之間不要有間隙  */
           
        } 


        .header nav a{
            font-size:16px;
            color: #fff;
            text-decoration: none;   
            display: inline-block;
            line-height: 52px;  
            padding: 0px 10px;    /* 這樣選單就出現了 */
              
        }
        .header nav a:hover{
            background-color: #fa0;
        }

        /* banner 的圖片沒有滿版, 所以要設定寬度 */
        .banner img{
            width: 100%;
            /* 高度等比例去跑就好了 */
        }
        .path{
            display: flex;
 
        }
        .path li{
            padding: 6px 8px;
            position: relative;
        }
        .path li a{
   
            color: #aaa;
            text-decoration: none;
            font-size: 14px;
        }
        /* 缺斜線，使用偽類 ,通常路徑為淡灰色 */
        .path li + li::before {
            content:'/';
            color: #aaa;
            position: absolute;  /* 定位在li的左邊  */
            left: 0 ;
            
        }
        .item h3{
            font-size: 36px;
            padding: 0px 0px 30px;
        }
        /* 再來做 about 就是 wrap, wrap 是固定寬的容器 */
        .wrap{
            width: 960px;
            margin: auto;
        }
        .about {
            padding: 40px 0px 60px;
        }

        .about .item img{
            border-radius: 50%; /* 圓型圖片 */ 
        }
        .about .wrap{
            display: flex;
        }
        .about .wrap .item{
            width: 300px; 
            /* 如果設定超過300，系統會自動更改寬度至最適合的寬度 */
            margin: 0 10px;
            text-align: center;
        }
        .about > h2{
            width: 960px;
            font-size: 42px;
            margin: auto;
            text-align: center;  /* 要設定寬度，才能置中 */
            padding: 20px 0;
        }
        .about > p{
            width: 660px;  /* 做小一點，強制它換行 */
            margin: auto;
            padding: 0px 0px  40px;
            text-align: center;
        }
        
        .products{
            background-color: #aaa ;
            margin-top: 20px;
        }
        .products .wrap{
            display: flex;
        }
        .products .item{
            width: 50%;
        }
        .products .item img{
            width: 100%;   /*寬度佔滿左欄 */    
           /* 頁尾有一個小小的瑕疵，一點點空白，所以要設定 vertical-align: bottom 就可以解決*/
           vertical-align: bottom;
        }
        .products .text{
            display: flex;
            flex-direction: column; /* 要設定 flex-direction:column 直排， 才能做垂直置中 */
            justify-content: center; 
            padding: 10px 20px;
            text-align: center;
            
        }

        .service{
            padding: 40px 0px;
            background-color: #edbbbb;
        }
        .service > h2{
            width: 960px;
            margin: auto;
            text-align: center; 
            font-size: 42px; 
            padding: 20px 0px;              
        }
        .service > p{
            width: 960px;
            margin: auto;
            text-align: center;
            padding-bottom: 40px;
        }
        .service .wrap{
            display: flex;
        }
        .service .item{
            margin: 0px 10px;
            width: 300px; 
            /* 如果 display: flex ， 寬度可以設定超過，它會自動做調整 */
            text-align: center;
        }
        .service .item img{
            width: 100%;
        }

        /* 頁尾 */
        .footer{
            text-align: center;
            background-color: #000;
            color: #888;  /* 文字不要太搶眼 */
            padding: 20px 0px;
            
        }

    </style>
</head>
<body>
    <!-- 做個固定寬度的版面 -->
    <!-- 需要 導覽列 logo banner 二欄畫面 頁尾區塊  -->
    <!-- 導覽列 通常會做在滿版的區塊中 ，所以外面要一個 header -->

    <div class="header">
        <!-- logo 區 通常是80*40px , 加超連結-->

        <a href="#" class=logo ><img src="https://picsum.photos/80/40/?random=5" alt="網站名稱"> </a>

        <nav>
            <a href="#">關於我們</a>
            <a href="#">最新消息</a>
            <a href="#">產品</a>
            <a href="#">服務</a>
            <a href="#">聯絡我們</a>
            <a href="#">網站地圖</a>
        </nav>
    </div>

    <!-- 滿版內容區 -->
    <div class="banner">
        <!-- 圖片要蠻大張的 1200*300px -->
        <img src="https://picsum.photos/1200/300/?random=2" alt="banner">

    </div>
    <!-- 固定寬的麵包屑 ： 就是網站路徑列 ,就是糖果屋延路灑麵包屑來知道回家的路徑-->
    <ul class="path">
        <li><a href="#">首頁</a></li>
        <li><a href="#">最新消息</a></li>
        <li><a href="#">首頁</a></li>
    </ul>
    
    <!-- 關於我的介紹-->
    <div class="about">
        
        <h2>關於我們</h2>  
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quia, voluptas autem consequuntur neque harum molestias pariatur iure quod reiciendis?</p>
        <div class="wrap">
            <!-- 做三欄的畫面小小的icon  50*50px -->
            <div class="item">
                <img src="https://picsum.photos/50/50/?random=1" alt="item">
                <h3>title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eveniet facere magnam voluptatibus mollitia maxime adipisci ducimus nulla nam tempora!</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/50/50/?random=2" alt="item">
                <h3>title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eveniet facere magnam voluptatibus mollitia maxime adipisci ducimus nulla nam tempora!</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/50/50/?random=3" alt="item">
                <h3>title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eveniet facere magnam voluptatibus mollitia maxime adipisci ducimus nulla nam tempora!</p>
            </div>
        </div>
    </div>
    <div class="products">
        <div class="wrap">
            <!-- 做二欄的畫面 ，左圖右說明 -->
            <div class="item img">
                <img src="https://picsum.photos/300/200/?random=1" alt="item">
            </div>
            <div class="item text">
                <h3>title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eveniet facere magnam voluptatibus mollitia maxime adipisci ducimus nulla nam tempora!</p>
            </div>
        </div>
    </div>

    <!-- 再來做一個四欄的項目 -->
    <div class="service">
        <h2>服務項目</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi, quam!</p>
        <div class="wrap">
            <div class="item">
                <img src="https://picsum.photos/300/200/?random=3" alt="item">
                <h3>title</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/200/?random=5" alt="item">
                <h3>title</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/200/?random=7" alt="item">
                <h3>title</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/200/?random=9" alt="item">
                <h3>title</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
            </div>
        </div>
    </div>

    <div class="footer">
        &copy; copyright 2018 by lily
    </div>
</body>
</html>

文獻連結:
金魚都能懂的網頁設計入門-第十六天 -排個稀飯版
https://www.youtube.com/watch?v=bxnZArACzuU&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=16 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos