基于盒模型的网页布局
2020-03-15 本文已影响0人
Game0ver
布局的传统解决方案是基于盒状模型的，依赖display属性+position属性+float属性。以下内容主要参考了文章：css布局 | 菜鸟教程
实现效果图：
网页布局.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 10px;
background-color: #f1f1f1;
}
/* 头部样式 */
#header{
width: 100%;
padding: 30px;
background-color: white;
text-align: center;
}
#header h1{
font-size: 50px;
margin-bottom: 15px;
}
/* 菜单导航样式 */
/* 导航条 */
#top-nav{
overflow: hidden;
background-color: #333333;
}
/* 导航条链接 */
#top-nav a{
float: left;
color: white;
padding: 13px 15px;
text-decoration: none;
display: block;
text-align: center;
}
/* 链接颜色修改 */
#top-nav a:hover{
color: #333333;
background-color: #f1f1f1;
}
/* 内容区域样式 */
/* 创建两列 */
.left-column{
width: 75%;
float: left;
}
.right-column{
width: 25%;
float: left;
padding-left: 20px;
}
/* 左侧栏样式 */
/* 卡片部分 */
.card{
padding: 20px;
background-color: white;
margin-top: 20px;
}
.card h3, .card h5, .card p, .card div{
padding-bottom: 15px;
}
/* 图像部分 */
.fake-img{
width: 100%;
background-color: #aaa;
padding: 10px;
}
/* 列后清除浮动 */
#main:after{
content: "";
display: table;
clear: both;
}
/* 底部区域样式 */
#footer{
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 20px;
background-color: #dddddd;
}
/* 响应式布局 - 屏幕尺寸小于800px时，两列布局改为上下布局 */
@media screen and (max-width: 800px){
.left-column,.right-column{
width: 100%;
padding: 0;
}
}
/* 响应式布局 - 屏幕尺寸小于400px时，导航等布局改为上下布局 */
@media screen and (max-width: 400px){
#top-nav a{
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<!-- 头部区域 -->
<div id="header">
<h1>网页布局</h1>
<p>重置浏览器大小查看效果</p>
</div>
<!-- 菜单导航区域 -->
<div id="top-nav">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#" style="float: right">链接</a>
</div>
<!-- 内容区域 -->
<div id="main">
<div class="left-column">
<div class="card">
<h3>文章标题</h3>
<h5>2020年03月15日</h5>
<div class="fake-img" style="height: 200px">picture</div>
<p>一些描述</p>
<p>扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉</p>
</div>
<div class="card">
<h3>文章标题</h3>
<h5>2020年03月15日</h5>
<div class="fake-img" style="height: 200px">picture</div>
<p>一些描述</p>
<p>扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉扒拉</p>
</div>
</div>
<div class="right-column">
<div class="card">
<h3>关于我</h3>
<div class="fake-img" style="height: 100px">picture</div>
<p>关于我的一些信息</p>
</div>
<div class="card">
<h3>热门文章</h3>
<div class="fake-img" style="height: 100px">picture</div>
<div class="fake-img" style="height: 100px">picture</div>
<div class="fake-img" style="height: 100px">picture</div>
</div>
<div class="card">
<h3>关注我</h3>
<p>一些文本</p>
</div>
</div>
</div>
<!-- 底部区域 -->
<div id="footer">
<h1>底部区域</h1>
</div>
</body>
</html>
总结：
-
清除浮动的方法
☞ 父元素设置 overflow: hidden || auto，可消除浮动
☞ 父元素设置 父元素:after{ content: " "; display: table; clear: both; }，可消除浮动
☞ 在浮动元素父元素下方添加多余元素，并设置 clear : both; ，可消除浮动 -
布局种类
该布局是圣杯布局，网页中最常使用一种布局
3.响应式布局
这里使用到了响应式布局，具体使用方法，参考多媒体查询 | 菜鸟教程
