标签：字符串 实例 大小 四舍五入 lang join() 星期几 转换 可变
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>
标签：字符串 实例 大小 四舍五入 lang join() 星期几 转换 可变
原文地址：https://www.cnblogs.com/Bianco/p/13470069.html
