实现布局效果

因为没有图片，暂时用背景颜色替代

 

头部部分+nav部分

需要在body里面设置最大宽度最小宽度，头部其实没什么好写的，就是伸缩的时候设置宽度为100%

 1  
 2  body {
 3             min-width: 320px;
 4             max-width: 540px;
 5             margin: 0 auto;
 6         }
 7 /*头部部分*/
 8         div {
 9             background-color: deepskyblue;
10             width: 100%;
11             height: 100%;
12         }
13 
14         header {
15             width: 100%;
16             height: 100px;
17         }
18 
19 
20 
21 
22 
23 <body>
24  <header>
25         <div></div>
26     </header>
27 </body>

 

nav部分思路

设置一个大的nav部分，其中有四个小的div （class为row），在那个div里面添加三个div的部分（class为row3）

伸缩布局是设置给父级盒子的，因此在row里面display: flex;

在需要再次划分的div里面声明一个hotel，然后在hotel里面

display: flex; 其中a标签里面flex:1即可

盒子垂直排列使用 flex-direction: column; 

CSS代码如下

 1  /*nav部分*/
 2         nav {
 3             padding: 5px;
 4         }
 5 
 6         .row {
 7             height: 90px;
 8             width: 100%;
 9             background-color: #ff697a;
10             border-radius: 10px;
11             display: flex; /*伸缩布局 给父亲加*/
12             margin: 5px;
13         }
14 
15         .row3 {
16             flex: 1; /*每个占据1分*/
17             border-left: 1px solid #fff;
18         }
19 
20         .row div:first-child {
21             border: 0;
22         }
23 
24         .hotel {
25             display: flex;
26             flex-direction: column; /*垂直排列*/
27         }
28 
29             .hotel a {
30                 flex: 1;
31                 font-size: 16px;
32                 text-align: center;
33                 line-height: 45px;
34                 text-decoration: none;
35                 color: white;
36             }
37 
38                 .hotel a:first-child {
39                     border-bottom: 1px solid #fff;
40                 }
41 
42         .navover {
43             display: flex;
44             flex-direction: column; /*垂直排列*/
45         }
46 
47             .navover a:first-child {
48                 border-bottom: 1px solid #fff;
49             }
50 
51             .navover a {
52                 flex: 1;
53                 font-size: 16px;
54                 text-align: center;
55                 line-height: 45px;
56                 text-decoration: none;
57                 color: white;
58             }

HTML代码如下

 1  <nav>
 2         <div class="row">
 3             <div class="row3"></div>
 4             <div class="row3 hotel">
 5                 <a href="#">海外酒店</a>
 6                 <a href="#">特价酒店</a>
 7             </div>
 8             <div class="row3 hotel">
 9                 <a href="#">团购</a>
10                 <a href="#">民宿客栈</a>
11             </div>
12         </div>
13 
14         <div class="row" style="background-color: #3995ff">
16             <div class="row3"></div>
17             <div class="row3 hotel">
18                 <a href="#">火车票•抢票</a>
19                 <a href="#">特价机票</a>
20             </div>
21             <div class="row3 hotel">
22                 <a href="#">汽车票•船票</a>
23                 <a href="#">民宿客栈</a>
24             </div>
25         </div>
26 
27         <div class="row" style=" background-color: #42c21f">
29             <div class="row3"></div>
30             <div class="row3 hotel">
31                 <a href="#">目的地攻略</a>
32                 <a href="#">周边游</a>
33             </div>
34             <div class="row3 hotel">
35                 <a href="#">邮轮旅行</a>
36                 <a href="#">定制旅行</a>
37             </div>
38         </div>
39 
40         <div class="row" style="background-color: #fe9519">
42             <div class="row3 navover">
43                 <a href="#">景点•玩乐</a>
44                 <a href="#">礼品卡</a>
45             </div>
46             <div class="row3 hotel">
47                 <a href="#">美食林</a>
48                 <a href="#">WiFi•电话卡</a>
49             </div>
50             <div class="row3 hotel">
51                 <a href="#">购物•外汇</a>
52                 <a href="#">保险•签证</a>
53 
54             </div>
55         </div>
56     </nav>

 

网页实现效果

 

背景颜色的修改可以像我使用行内样式

<div class="row" style="" style="color: rgb(0, 0, 255);">
也可以在css里面进行修改
nav .row:nth-child(n){backrgound0color: ;}

文字添加了一个阴影

 text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);

 

底部部分

 同样的思路制作底部，最终整个效果