实现布局效果
因为没有图片，暂时用背景颜色替代
头部部分+nav部分
需要在body里面设置最大宽度最小宽度，头部其实没什么好写的，就是伸缩的时候设置宽度为100%
1 2 body { 3 min- 320px; 4 max- 540px; 5 margin: 0 auto; 6 } 7 /*头部部分*/ 8 div { 9 background-color: deepskyblue; 10 100%; 11 height: 100%; 12 } 13 14 header { 15 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 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);
底部部分
同样的思路制作底部，最终整个效果
