1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{box-sizing: border-box;} 8 body{ 9 font-family: Arial; 10 padding: 10px; 11 background: #f1f1f1; 12 } 13 /*头部标题*/ 14 .header{ 15 padding: 30px; 16 text-align: center; 17 background: white; 18 } 19 .header h1{font-size: 50px;} 20 /*导航条*/ 21 .topnav{ 22 overflow: hidden; 23 background-color: #333; 24 } 25 /*导航条链接*/ 26 .topnav a{ 27 float: left; 28 display: block; 29 color: #f2f2f2; 30 text-align: center; 31 padding: 14px 16px; 32 text-decoration: none; 33 } 34 /*链接颜色修改*/ 35 .topnav a:hover{ 36 background-color: #ddd; 37 color: black; 38 } 39 /*创建两列*/ 40 /*左侧栏*/ 41 .leftcolumn{ 42 float: left; 43 width: 75%; 44 } 45 /*右侧栏*/ 46 .rightcolumn{ 47 float: left; 48 width: 25%; 49 } 50 /*图像部分*/ 51 .fakeimg{ 52 background-color: #aaa; 53 width: 100%; 54 padding: 20px; 55 } 56 /*文章卡片效果*/ 57 .card{ 58 background-color: white; 59 padding: 20px; 60 margin-top: 20px; 61 } 62 /*列后面清除浮动*/ 63 .row:after{ 64 content: ""; 65 display: table; 66 clear: both; 67 } 68 /*底部*/ 69 .footer{ 70 padding: 20px; 71 text-align: center; 72 background: #ddd; 73 margin-top: 20px; 74 } 75 /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */ 76 @media screen and (max-width: 800px) { 77 .leftcolumn,.rightcolumn{ 78 width: 100%; 79 padding: 0; 80 } 81 } 82 /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */ 83 @media screen and (max-width: 400px){ 84 .topnav a{ 85 float: none; 86 width: 100%; 87 } 88 } 89 </style> 90 </head> 91 <body> 92 <div class="header"> 93 <h1>我的网页</h1> 94 <p>重置浏览器大小查看效果</p> 95 </div> 96 97 <div class="topnav"> 98 <a href="#">首页</a> 99 <a href="#">新闻</a> 100 <a href="#">图片</a> 101 <a href="#" style="float: right">关于</a> 102 </div> 103 104 <div class="row"> 105 <div class="leftcolumn"> 106 <div class="card"> 107 <h2>文章标题</h2> 108 <h5>2020年4月17日</h5> 109 <div class="fakeimg" style="height: 200px;">图片</div> 110 <p>一些文本...</p> 111 <p>这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架</p> 112 </div> 113 <div class="card"> 114 <h2>文章标题</h2> 115 <h5>2020年4月17日</h5> 116 <div class="fakeimg" style="height: 200px;">图片</div> 117 <p>一些文本...</p> 118 <p>这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架，这是一个较为完整的页面测试框架</p> 119 </div> 120 </div> 121 <div class="rightcolumn"> 122 <div class="card"> 123 <h2>关于我</h2> 124 <div class="fakeimg" style="height: 100px;">图片</div> 125 <p>关于我的一些信息...</p> 126 </div> 127 <div class="card"> 128 <h2>热门文章</h2> 129 <div class="fakeimg">图片</div> 130 <div class="fakeimg">图片</div> 131 <div class="fakeimg">图片</div> 132 </div> 133 <div class="card"> 134 <h2>关注我</h2> 135 <p>一些文本...</p> 136 </div> 137 </div> 138 </div> 139 <div class="footer"> 140 <h2>底部区域</h2> 141 </div> 142 </body> 143 </html>