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>
原文地址：https://www.cnblogs.com/zhangzhengyang/p/11109470.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。