2024-06-21 CSS RWD 試排版

發表於 分類於 閱讀次數：
2024-06-21 CSS RWD 試排版

2024-06-21 CSS RWD 試排版:

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
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 金魚都能懂的網頁設計入門-第二十一天 - RWD 試排版</title>
    <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 來設定桌機版
        */
        /* 先設定平版  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;

            }

        }
    
    </style>
</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>


    <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>