码迷,mamicode.com
首页 > Web开发 > 详细

HTML-CSS的几种布局

时间:2019-03-17 15:35:48      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:主题   部分   属性   contain   htm   over   width   code   src   

第一种  两栏式布局

 1 <body>
 2     <!-- 两栏式布局 -->
 3     <!-- 想要的效果是左边图片右边文字 拉伸盒子文字的高度宽度自动改变 -->
 4     <div class="box">
 5         <div class="left">
 6             <img src="./img/头像.png" alt="">
 7         </div>
 8         <div class="right">
 9             测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
10             测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
11             测试文字测试文字测试文字测试文字测试文字测试文字测测试文字测试文字测试文字测试文字测试文
12             字测试文字测试文字测试文字测试文字测试文字
13             
14         </div>
15     </div>
16 </body>
 1  <style>
 2         .box {
 3             width: 500px;
 4             background-color: #eee;
 5             overflow: auto;
 6             /* 下方这个属性可以配合overflow让用户控制div的宽度的大小 */
 7             /* none    用户无法调整元素的尺寸 */
 8             /* both    用户可调整元素的高度和宽度 */
 9             /* vertical    用户可调整元素的高度 */
10             resize: horizontal;
11         }
12 
13         .left {
14             width: 200px;
15             height: 200px;
16             float: left;
17         }
18 
19         .left img {
20             width: 200px;
21             height: 200px;
22         }
23 
24         .right {
25             margin-left: 210px;
26             /* 不要加这个不然文字会下来 */
27             /* float: left; */
28         }
29     </style>

技术图片

2、移动端布局

 1 <body>
 2     <div class="container">
 3         <!-- 头部内容 -->
 4         <header></header>
 5         <!-- 主题内容 -->
 6         <main>
 7             <!-- 主题内容中的导航条 -->
 8             <div class="title"></div>
 9             <!-- 主题内容中的重复样式区域 -->
10             <div class="list">
11                 <div class="one"></div>
12                 <div class="one"></div>
13                 <div class="one"></div>
14                 <div class="one"></div>
15                 <div class="one"></div>
16                 <div class="one"></div>
17                 <div class="one"></div>
18                 <div class="one"></div>
19                 <div class="one"></div>
20                 <div class="one"></div>
21                 <div class="one"></div>
22                 <div class="one"></div>
23                 <div class="one"></div>
24             </div>
25             <div class="box"></div>
26             <div class="box"></div>
27             <div class="box"></div>
28             <div class="box"></div>
29             <div class="box"></div>
30         </main>
31         <!-- 尾部 -->
32         <footer></footer>
33     </div>
34 </body>
 1 * {
 2   margin: 0;
 3   padding: 0;
 4 }
 5 /* 设置宽高充满整个手机屏幕 */
 6 html,
 7 body {
 8   width: 100%;
 9   height: 100%;
10 }
11 /* 设置最外层大盒子宽高 然后开弹性盒 设置弹性盒内容的排列顺序 为竖向 */
12 .container {
13   width: 100%;
14   height: 100%;
15   display: flex;
16   flex-direction: column;
17 }
18 /* 头部设置成宽百分百 高度为定高 */
19 header {
20   width: 100%;
21   height: 1.33333rem;
22   background: red;
23 }
24 /* 主体部分设置成flex :1  宽百分百 加上overflow: auto;让其主体部分的内容可以滚动 而头部尾部固定不变 */
25 main {
26   width: 100%;
27   flex: 1;
28   overflow: auto;
29 }
30 
31 main .title {
32   width: 100%;
33   height: 1.2rem;
34   background: blue;
35 }
36 /* 给主体部分的列表也就是重复性区域加上overflow: auto;可以让其滚动 而主体的标题部分不滚动 */
37 main .list {
38   width: 100%;
39   height: 100%;
40   background: #ccc;
41   overflow: auto;
42 }
43 
44 main .list .one {
45   width: 100%;
46   height: 2.13333rem;
47   margin-top: 0.53333rem;
48   background: pink;
49 }
50 
51 main .box {
52   width: 100%;
53   height: 2.13333rem;
54   background: maroon;
55 }
56 /* 尾部也要设置成定高 */
57 footer {
58   width: 100%;
59   height: 1.12rem;
60   background: green;
61 }

 

HTML-CSS的几种布局

标签:主题   部分   属性   contain   htm   over   width   code   src   

原文地址:https://www.cnblogs.com/cq1715584439/p/10547097.html

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