CSS简单的网页布局

时间：2020-08-11 09:17:06 收藏：0 阅读：86
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>CSS 网页布局</title>
  6     <meta name="viewport" content="width=device-width,initial-scale=1">
  7     <style>
  8         * {
  9             box-sizing: border-box;/* 创建三个不相等的列，要添加这个盒子模型 */
 10         }
 11         body{margin: 0;}
 12         .header{/* 头部样式 */
 13             background-color: #f1f1f1;
 14             padding: 20px;
 15             text-align: center;
 16         }
 17         .topnav{/* 导航条 */
 18             overflow: hidden;
 19             background-color: #333;
 20         }
 21         .topnav a{/* 导航链接 */
 22             float: left;
 23             display: block;
 24             color: #f2f2f2;
 25             text-align: center;
 26             padding: 14px 16px;
 27             text-decoration: none;
 28         }
 29         .topnav a:hover{/* 链接 - 修改颜色 */
 30             background-color: #ddd;
 31             color: black;
 32         }
 33 
 34         /* 将创建一个 3 列布局 */
 35         /*.column{!* 创建三个相等的列 *!*/
 36         /*    float: left;*/
 37         /*    width: 33.33%;*/
 38         /*}*/
 39         /*.row:after{!* 列后清除浮动 *!*/
 40         /*    content: "";*/
 41         /*    display: table;*/
 42         /*    clear: both;*/
 43         /*}*/
 44         /*@media screen and (max-width: 600px) {!* 将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式） *!*/
 45         /*    .column{*/
 46         /*        width: 100%;*/
 47         /*    }*/
 48         /*}*/
 49 
 50         /* 将创建一个 3 列不相等的列布局 */
 51         .column{/* 创建三个不相等的列 ，要添加这个盒子模型 box-sizing: border-box;*/
 52             float: left;
 53             padding: 10px;
 54         }
 55         .column.side{/* 左右两侧宽度 */
 56             width: 25%;
 57         }
 58         .column.middle{/* 中间区域宽度 */
 59             width: 50%;
 60         }
 61         .row:after{/* 列后面清除浮动 */
 62             content: "";
 63             display: table;
 64             clear: both;
 65         }
 66         @media screen and (max-width: 600px){
 67             .column.side, .column.middle{
 68                 width: 100%;
 69             }
 70         }
 71         .footer{/* 底部样式 */
 72             background-color: #f1f1f1;
 73             padding: 10px;
 74             text-align: center;
 75         }
 76     </style>
 77 </head>
 78 <body>
 79     <div class="header">
 80         <h1>头部区域</h1>
 81     </div>
 82 
 83     <div class="topnav">
 84         <a href="#">链接</a>
 85         <a href="#">链接</a>
 86         <a href="#">链接</a>
 87     </div>
 88 <!--    /* 将创建一个 三个相等的列布局 */-->
 89 <!--    <div class="row">-->
 90 <!--        <div class="column">-->
 91 <!--            <h2>第一列</h2>-->
 92 <!--            <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>-->
 93 <!--        </div>-->
 94 <!--        <div class="column">-->
 95 <!--            <h2>第二列</h2>-->
 96 <!--            <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>-->
 97 <!--        </div>-->
 98 <!--        <div class="column">-->
 99 <!--            <h2>第三列</h2>-->
100 <!--            <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>-->
101 <!--        </div>-->
102 <!--    </div>-->
103 <!--    /* 将创建一个 三个不相等的列布局 */-->
104     <div class="row">
105         <div class="column side">
106             <h2>左侧栏</h2>
107             <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
108         </div>
109         <div class="column middle">
110             <h2>主区域内容</h2>
111             <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
112             <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
113         </div>
114         <div class="column side">
115             <h2>右侧栏</h2>
116             <p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落</p>
117         </div>
118     </div>
119 
120     <div class="footer">
121         <p>底部区域</p>
122     </div>
123 
124 
125 
126 
127 
128 
129 </body>
130 </html>