1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 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>
Original: https://www.cnblogs.com/chunfang/p/13473580.html
Author: 白月如初12138
Title: CSS一个较为完整的页面布局_可以根据页面屏幕大小调整布局
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/712626/
转载文章受原作者版权保护。转载请注明原作者出处！