文档章节

h5-携程页面小案例-伸缩盒子

o
 osc_wws45aot
发布于 2019/08/20 15:21
字数 666
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  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">&copy;2015 携程旅行</p>
177     </footer>
178 </div>
179 </body>
180 </html>

效果图

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

物联网开发服务开发虚拟设备需要几步?

云栖号快速入门:【点击查看更多云产品快速入门】 不知道怎么入门?这里分分钟解决新手入门等基础问题,可快速完成产品配置操作! 物联网平台设备的正常开发流程是:设备端开发完成,设备上报...

osc_2axit9df
51分钟前
18
0
互联网互联网必看文章墙裂推荐

后端必看文章系列 大型项目架构演进过程及思考的点

code-ortaerc
51分钟前
20
0
ACL2020论文整理 - 知乎

ACL2020录取文章已经放出,链接如下: ACL2020论文集合 www.aclweb.org 为了以后更加方便地阅读论文,也本着一颗开源之心,花一个下午的时间整理了一下相关论文。鉴于本人精力有限,并且也只...

osc_5w65ebjo
52分钟前
10
0
SU(N) Hubbard 模型平均场

osc_31d5oo2i
54分钟前
18
0
Python语言及其应用PDF高清完整版百度云盘免费下载|python基础教程PDF电子书推荐

编辑推荐 本书内容易于理解,而且读起来生动有趣,是编程和Python初学者不可多得的教程。书中首先介绍了Python的基础知识,然后逐渐深入多种主题,结合教程和攻略式风格来讲解Python 3中的概...

osc_nbg2lo7i
55分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部