【摘要】 CSS简单的网页布局考必过小编为大家整理了关于CSS简单的网页布局的信息,希望可以帮助到大家!
CSS简单的网页布局
标签:hidden content 导航 修改 initial span doc flow display
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 <p class="header"> 80 <h1>头部区域</h1> 81 </p> 82 83 <p class="topnav"> 84 <a href="#">链接</a> 85 <a href="#">链接</a> 86 <a href="#">链接</a> 87 </p> 88 <!-- /* 将创建一个 三个相等的列布局 */--> 89 <!-- <p class="row">--> 90 <!-- <p class="column">--> 91 <!-- <h2>第一列</h2>--> 92 <!-- <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p>--> 93 <!-- </p>--> 94 <!-- <p class="column">--> 95 <!-- <h2>第二列</h2>--> 96 <!-- <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p>--> 97 <!-- </p>--> 98 <!-- <p class="column">--> 99 <!-- <h2>第三列</h2>--> 100 <!-- <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p>--> 101 <!-- </p>--> 102 <!-- </p>--> 103 <!-- /* 将创建一个 三个不相等的列布局 */--> 104 <p class="row"> 105 <p class="column side"> 106 <h2>左侧栏</h2> 107 <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p> 108 </p> 109 <p class="column middle"> 110 <h2>主区域内容</h2> 111 <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p> 112 <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p> 113 </p> 114 <p class="column side"> 115 <h2>右侧栏</h2> 116 <p>这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落,这是一个测试段落</p> 117 </p> 118 </p> 119 120 <p class="footer"> 121 <p>底部区域</p> 122 </p> 123 124 125 126 127 128 129 </body> 130 </html>
CSS简单的网页布局
标签:hidden content 导航 修改 initial span doc flow display
以上就是CSS简单的网页布局的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!