CSS简单的网页布局

  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 
 90 
 91 
 92 
 93 
 94 
 95 
 96 
 97 
 98 
 99 
100 
101 
102 
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>