简单的CSS网页布局--一二列布局

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的CSS网页布局--一二列布局相关的知识，希望对你有一定的参考价值。

1.一列布局

　　(一)一列自适应

　　自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一列布局自适应</title>
    <style type="text/css">
        body{
            margin: 0;      /*清除浏览器默认样式*/
            padding: 0;
        }
        div{
            text-align: center;  /*字体居中*/
            font-size: 30px;
            font-weight: bold;
        }
       .head,.middle,.foot{
            width: 50%;          /*百分比宽度*/
            margin: 0 auto;      /* 典型的设置居中*/
        }
        .head{
            height: 200px;
            background: #F0B6CF;
        }
        .middle{
            height: 500px;
            background: tan;
        }
        .foot{
            height: 200px;
            background-color: #57A9D1;
        }
    </style>
</head>
<body>
        <div class="head">head</div>
        <div class="middle">middle</div>
         <div class="foot">foot</div>
</body>
</html>

　　(二)一列固定

　　顾名思义，固定布局的宽度，设置固定的PX值。

　　只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。

2.二列布局

　　(一)二列自适应

　　　二列的自适应，这时候要用到float属性。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>二列自适应</title>
    <style type="text/css">
        body{
            margin: 0;      /*清除浏览器默认样式*/
            padding: 0;
        }
        div{
            text-align: center;  /*字体居中*/
            font-size: 30px;
            font-weight: bold;
        }
        .left{
            width: 30%;                 
            background-color: #CCFF00;
            height: 500px;
            float: left;         /*先左浮动，使之靠浏览器左侧*/
        }
        .right{
            width: 70%;
            height: 500px;
            background-color: bisque;
            float: right;       /*先右浮动，使之靠浏览器右侧*/
        }
    </style>
</head>
<body>
        <div class="left">left</div>
        <div class="right">right</div>
</body>
</html>

注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。

　　(二)二列居中自适应

　　在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>二列居中自适应</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0;      /*清除浏览器默认样式*/
 9             padding: 0;
10         }
11         div{
12             text-align: center;  /*字体居中*/
13             font-size: 30px;
14             font-weight: bold;
15         }
16         .main{
17             width:80%;
18             height: 500px;
19             margin: 0 auto;      /*居中*/
20         }
21         .left{
22             width: 30%;
23             background-color: #CCFF00;
24             height: 500px;
25             float: left;         /*先左浮动，使之靠浏览器左侧*/
26         }
27         .right{
28             width: 70%;
29             height: 500px;
30             background-color: bisque;
31             float: right;       /*先右浮动，使之靠浏览器右侧*/
32         }
33     </style>
34 </head>
35 <body>
36     <div class="main">
37         <div class="left">left</div>
38         <div class="right">right</div>
39     </div>
40 </body>
41 </html>

　　(三)二列居中固定

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>二列居中固定宽度</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0;      /*清除浏览器默认样式*/
 9             padding: 0;
10         }
11         div{
12             text-align: center;  /*字体居中*/
13             font-size: 30px;
14             font-weight: bold;
15         }
16         .main{
17             width:960px;
18             height: 500px;
19             margin: 0 auto;
20         }
21         .left{
22             width: 360px;
23             background-color: #CCFF00;
24             height: 500px;
25             float: left;         /*先左浮动，使之靠浏览器左侧*/
26         }
27         .right{
28             width: 600px;
29             height: 500px;
30             background-color: bisque;
31             float: right;       /*先右浮动，使之靠浏览器右侧*/
32         }
33     </style>
34 </head>
35 <body>
36     <div class="main">
37         <div class="left">left</div>
38         <div class="right">right</div>
39     </div>
40 </body>
41 </html>

以上是关于简单的CSS网页布局--一二列布局的主要内容，如果未能解决你的问题，请参考以下文章