码迷,mamicode.com
首页 > 其他好文 > 详细

页面伸缩布局实例

时间:2019-06-30 14:15:13      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:otto   ati   color   img   last   black   meta   电脑   col   

  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" >
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" ></a>
187             <a href="javascript:;"><img src="./images/extra_2.jpg" ></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">&copy;携程旅行</p>
203     </footer>
204 </div>
205 </body>
206 </html>

 技术图片

 day-6

页面伸缩布局实例

标签:otto   ati   color   img   last   black   meta   电脑   col   

原文地址:https://www.cnblogs.com/zhangzhengyang/p/11109470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!