金魚都能懂的網頁設計入門- RWD 試排版

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第二十一天 - RWD 試排版

RWD 試排步驟:

  1. 先做滿版區塊，banner裹面放一個圖片
  2. 再來做一個about 關於我們區塊 ，會是固定寬，有主標題，底下有幾個欄。
  3. 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔
  4. about關於我們 會有三欄的畫面
  5. 關於我們底下會有一個 service 區塊，有一張圖及一段文字，於桌機版顯示時要橫排顯示，左圖片 右文字 ，文字垂直置中
  6. 在service 底下 ,會有四欄的區塊，格式與 about 一欄，於是 copy about下來，再增加一個 item即可。
  7. 最後底下會有一個 footer.
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
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 金魚都能懂的網頁設計入門-第二十一天 - RWD 試排版</title>
   
</head>
<body>
    <!-- 1. 先做滿版區塊，banner裹面放一個圖片 -->
    <div class="banner">
        <img src="https://picsum.photos/1400/500/?random=3"> 
    </div>
    <!-- 2. 再來做一個about 區塊 ，會是固定寬，有主標題，底下有幾個欄-->
    <div class="about">
        <!-- 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔 -->
        <div class="wrap"> 
            <div class="title">
                <h2>關於我們</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A numquam maxime et debitis, eveniet fugit molestiae illum at facilis incidunt?</p>
            </div>
            <!-- 三欄區埤，裹面有 假圖 h3標題 簡單內文 -->
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=3">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=4">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=5">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- service 區塊，於桌機版會橫排顯示： 左圖片 ，右文字, 文字垂直置中 -->
    <div class="service">
        <div class="wrap">
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=5">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="about">
        <!-- 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔 -->
        <div class="wrap"> 
            <div class="title">
                <h2>關於我們</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A numquam maxime et debitis, eveniet fugit molestiae illum at facilis incidunt?</p>
            </div>
            <!-- 四欄區埤，裹面有 假圖 h3標題 簡單內文 -->
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=31">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=41">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=51">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=61">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


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

</body>
</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
55
56
57
58
59
<style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 因為圖片垂直對齊方式是base-line,所以圖片下面會有一點點空白，解決方式就是： 把圖片先抓出來單獨設定垂直對齊方式，可以是bottom top middle , 就是不要 base-line ,這樣圖片就會黏緊緊*/
        
        img{
            vertical-align: bottom;
        }
        .banner img{
            width: 100%;
        }
        .title{
            margin: 0 0px 20px;
            padding: 30px 10px;
            background-color: #ccc;
        }
        .title h2{
            text-align: center;
            font-size: 46px;
        }
        .title p{
            font-size: 22px;
            text-align: center;
        }
        .item{
            margin: 0 10px 40px;
        }
        .item h3{
            font-size: 24px;
            text-align: center;
        }
        .item .pic img{
            width: 100%;
        }
        .footer{
            background-color: #333;
            color: #aaa;
            text-align: center;
            padding: 10px 0px;
        }
        .item-group{
            width: 100%;
            /* 為了桌機版設定最大寬度 */
            max-width: 1400px;
            margin: auto;
        }

        .service{
            margin: 60px 0px;
            background-color:#ffa ;
        }
        /* 以上為手機版設定
        再來用 media query 來設定桌機版
        */
     
    </style>

手機版裝飾後的樣子:

再來用 media query 來裝飾 桌機版

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

/* 以上為手機版設定
    再來用 media query 來設定桌機版
    */
    /* 先設定平版  768px */
    @media screen and (min-width: 768px){
        .item-group{
    display: flex;}
        .service .item{
            display: flex;
        }
        .service .item .pic,
        .service .item .text{
            width:50%;
            margin: 0;
        }
        /* 手機版的 margin ok 但到桌機版下方會多出來，所以要單獨設定 margin */
        .service .item{margin: 0px;}
        
        .service .item .text{
            /* 設定右邊文字區土戈心一為橫排，文字置中 先以column 顯示，才能置中flex-direction: column; */
            display: flex;
            padding: 0px 20px;
            flex-direction: column;
            justify-content: center;
            /* 因為整個service 有點偏左歪去，所以要設定 box-size: border-box */
            box-sizing: border-box;

        }

    }

最後排完的RWD:

文獻連結:
金魚都能懂的網頁設計入門-第二十一天 - RWD 試排版
https://www.youtube.com/watch?v=tEavVrEPBlA&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=22 by CSScoke Amos

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