h5-携程页面小案例-伸缩盒子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div,header,img,main,section,a,nav,p{ 8 padding: 0; 9 margin: 0; 10 } 11 /*顶部块样式*/ 12 header{ 13 width: 100%; 14 display: flex; 15 } 16 header > a{ 17 flex: 1; 18 } 19 header > a >img{ 20 width: 100%; 21 } 22 /*主题内容块*/ 23 main{ 24 width: 100%; 25 padding: 0 10px; 26 box-sizing: border-box; 27 } 28 main > .item{ 29 width: 100%; 30 height: 100px; 31 background-color: #57c3ae; 32 border-radius: 10px; 33 margin-top: 10px; 34 display: flex; 35 } 36 main > .item:nth-of-type(2){ 37 background-color: #68cc1a; 38 }main > .item:nth-of-type(3){ 39 background-color: #cc1c23; 40 }main > .item:nth-of-type(4){ 41 background-color: #274ccc; 42 } 43 main > .item > .left{ 44 flex: 1; 45 } 46 main > .item > .right{ 47 flex: 2; 48 /*换行显示*/ 49 flex-wrap: wrap; 50 display: flex; 51 } 52 53 main > .item > .right > a{ 54 width: 50%; 55 box-sizing: border-box; 56 border-left: 1px solid #fff; 57 border-bottom: 1px solid #fff; 58 display: block; 59 line-height: 50px; 60 text-align: center; 61 text-decoration: none; 62 } 63 64 main > .item > .right > a:nth-last-of-type(-n+2){ 65 border-bottom:none; 66 } 67 68 main > .extra{ 69 width: 100%; 70 display: flex; 71 } 72 main >.extra > a{ 73 flex: 1; 74 } 75 main > .extra >a >img{ 76 width: 100%; 77 } 78 79 /*底部快样式*/ 80 footer{ 81 width: 100%; 82 font-size: 13px; 83 } 84 footer > nav { 85 width: 100%; 86 display: flex; 87 border-top: 1px solid #ccc; 88 border-bottom: 1px solid #ccc; 89 } 90 footer > nav > a{ 91 flex: 1; 92 line-height: 30px; 93 text-align: center; 94 color: #888; 95 text-decoration: none; 96 } 97 98 footer > .link { 99 text-align: center; 100 line-height: 25px; 101 } 102 footer > .copyRight{ 103 text-align: center; 104 } 105 106 extra > a > img { 107 width: 250px; 108 height: 150px; 109 } 110 </style> 111 </head> 112 <body> 113 <div class="container"> 114 <header> 115 <a href=""> 116 <img src="https://dimg04.c-ctrip.com/images/7009170000010vksx4641_1920_340_17.jpg" alt=""> 117 </a> 118 </header> 119 <main> 120 <section class="item"> 121 <div class="left"></div> 122 <div class="right"> 123 <a href="">海外酒店</a> 124 <a href="">团购</a> 125 <a href="">特惠酒店</a> 126 <a href="">客栈公寓</a> 127 </div> 128 </section> 129 <section class="item"> 130 <div class="left"></div> 131 <div class="right"> 132 <a href="">海外酒店</a> 133 <a href="">团购</a> 134 <a href="">特惠酒店</a> 135 <a href="">客栈公寓</a> 136 </div> 137 </section> 138 <section class="item"> 139 <div class="left"></div> 140 <div class="right"> 141 <a href="">海外酒店</a> 142 <a href="">团购</a> 143 <a href="">特惠酒店</a> 144 <a href="">客栈公寓</a> 145 </div> 146 </section> 147 <section class="item"> 148 <div class="left"></div> 149 <div class="right"> 150 <a href="">海外酒店</a> 151 <a href="">团购</a> 152 <a href="">特惠酒店</a> 153 <a href="">客栈公寓</a> 154 </div> 155 </section> 156 <section class="extra"> 157 <a href=""> 158 <img src="../img/xie1.jpg" alt=""> 159 </a> 160 <a href=""> 161 <img src="../img/xie2.jpg" alt=""> 162 </a> 163 </section> 164 </main> 165 <footer> 166 <nav> 167 <a href="">电话预定</a> 168 <a href="">下载客户端</a> 169 <a href="">我的订单</a> 170 </nav> 171 <p class="link"> 172 <a href="">网上地图</a> 173 <a href="">ENGLISH</a> 174 <a href="">电脑版</a> 175 </p> 176 <p class="copyRight">©2015 携程旅行</p> 177 </footer> 178 </div> 179 </body> 180 </html>
效果图
