1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *
{
8 margin: 0
;
9 padding: 0
;
10 }
11
12 a {
13 text-
decoration: none;
14 color: black;
15 }
16
17 /*头部*/
18 header {
19 width: 100%
;
20 display: flex;
21 }
22
23 header >
a {
24 flex: 1
;
25 }
26
27 header > a >
img {
28 width: 100%
;
29 }
30
31 /*主要内容*/
32 main {
33 width: 100%
;
34 padding: 0
10px;
35 /*background-color: red;*/
36 box-sizing: border-
box;
37 }
38
39 main >
.item {
40 width: 100%
;
41 height: 100px;
42 margin-
top: 10px;
43 border-
radius: 10px;
44 /*伸缩布局*/
45 display: flex;
46 }
47
48 main > .item:nth-child(1
) {
49 background-color: rgb(78, 50, 182
);
50 }
51
52 main > .item:nth-child(2
) {
53 background-color: rgb(31, 153, 209
);
54 }
55
56 main > .item:nth-child(3
) {
57 background-color: rgb(240, 147, 7
);
58 }
59
60 main > .item:nth-child(4
) {
61 background-color: rgb(187, 19, 131
);
62 }
63
64 .item >
.left {
65 flex: 1
;
66 }
67
68 .item >
.right {
69 flex: 2
;
70 /*伸缩布局*/
71 display: flex;
72 /*换行*/
73 flex-
wrap: wrap;
74 }
75
76 .item > .right >
a {
77 display: flex;
78 /*居中*/
79 justify-
content: center;
80 align-
items: center;
81 width: 50%
;
82 color: #fff;
83
84 box-sizing: border-
box;
85 border-
left: 1px solid #cccccc;
86 border-
bottom: 1px solid #cccccc;
87 }
88
89 .item > .right > a:nth-last-child(-n+2
) {
90 border-
bottom: none;
91 /* 最后的两个a标签不需要下划线 */
92 }
93
94 .extra {
95 width: 100%
;
96 display: flex;
97 }
98
99 .extra >
a {
100 flex: 1
;
101 }
102
103 .extra > a >
img {
104 width: 100%
;
105 }
106
107 /*尾部*/
108 footer {
109 width: 100%
;
110 }
111
112 footer >
.nav {
113 width: 100%
;
114 height: 30px;
115 border-
top: 1px solid #cccccc;
116 border-
bottom: 1px solid #cccccc;
117 display: flex;
118 }
119
120 footer > .nav >
a{
121 flex: 1
;
122 display: flex;
123 justify-
content: center;
124 align-
items: center;
125 }
126
127 footer >
.link{
128 text-
align: center;
129 margin: 5px 0
;
130 }
131
132 footer >
.copyright{
133 text-
align: center;
134 margin-
bottom: 5px;
135 }
136
137 </style>
138 </head>
139 <body>
140 <div class="container">
141 <!--头部-->
142 <header>
143 <a href="javascript:;">
144 <img src="./images/banner.png" alt="">
145 </a>
146 </header>
147 <!--主要内容-->
148 <main>
149 <section class="item">
150 <div class="left"></div>
151 <div class="right">
152 <a href="">海外酒店</a>
153 <a href="">团购</a>
154 <a href="">特价机票</a>
155 <a href="">民宿客栈</a>
156 </div>
157 </section>
158 <section class="item">
159 <div class="left"></div>
160 <div class="right">
161 <a href="">海外酒店</a>
162 <a href="">团购</a>
163 <a href="">特价机票</a>
164 <a href="">民宿客栈</a>
165 </div>
166 </section>
167 <section class="item">
168 <div class="left"></div>
169 <div class="right">
170 <a href="">海外酒店</a>
171 <a href="">团购</a>
172 <a href="">特价机票</a>
173 <a href="">民宿客栈</a>
174 </div>
175 </section>
176 <section class="item">
177 <div class="left"></div>
178 <div class="right">
179 <a href="">海外酒店</a>
180 <a href="">团购</a>
181 <a href="">特价机票</a>
182 <a href="">民宿客栈</a>
183 </div>
184 </section>
185 <section class="extra">
186 <a href="javascript:;"><img src="./images/extra_1.jpg" alt=""></a>
187 <a href="javascript:;"><img src="./images/extra_2.jpg" alt=""></a>
188 </section>
189 </main>
190 <!--尾部-->
191 <footer>
192 <div class="nav">
193 <a href="">电话预定</a>
194 <a href="">下载客户端</a>
195 <a href="">我的</a>
196 </div>
197 <p class="link">
198 <a href="">网站地图</a>
199 <a href="">English</a>
200 <a href="">电脑版</a>
201 </p>
202 <p class="copyright">©携程旅行</p>
203 </footer>
204 </div>
205 </body>
206 </html>
day-6
转载于:https://www.cnblogs.com/zhangzhengyang/p/11109470.html
相关资源：微信界面布局效果
