源代码 :
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 网页布局 - 开源教程(ossoft.cn)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; } /* 头部样式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 导航条 */ .topnav { overflow: hidden; background-color: #333; } /* 导航链接 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 链接 - 修改颜色 */ .topnav a:hover { background-color: #ddd; color: black; } /* 创建三个相等的列 */ .column { float: left; width: 33.33%; } /* 列后清除浮动 */ .row:after { content: ""; display: table; clear: both; } /* 响应式布局 - 小于 600 px 时改为上下布局 */ @media screen and (max-width: 600px) { .column { width: 100%; } } </style> </head> <body> <div class="header"> <h1>头部区域</h1> <p>重置浏览器大小查看效果。</p> </div> <div class="topnav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> </div> <div class="row"> <div class="column"> <h2>第一列</h2> <p>开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!</p> </div> <div class="column"> <h2>第二列</h2> <p>开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!</p> </div> <div class="column"> <h2>第三列</h2> <p>开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!开源教程 - 学的不仅是技术,更是梦想!</p> </div> </div> </body> </html>
运行结果