学习视频链接:完整的网页布局
网络布局图如下:
最终gif效果图:
中间遇到的问题及解决方案:
问题:缩小网页尺寸时,中间栏内容会串到两侧
解决办法:
中间栏需要加左右边距
修改后效果图:
问题:当尺寸缩小至700px时,竖排排列存在间隙
解决办法:
/* 附加功能:当浏览器宽度小于700时,三个栏进行竖排代替横排*/
@media screen and (max-width:700px){
.lside,.rside,.content{
width: 100%;
/* 解决因为中间栏有左右间距导致的空白 */
margin: 0px;
}
}
缩小为800px时,无法对齐:
解决办法:
.header,.nav,.container,.footer{
float:left;
width: 100%;
/* 内边距会影响整个盒子的实际大小,这里更改使其不影响 */
box-sizing: border-box;
}
解决效果:
问题:左侧标题不对齐
原因:有内边距
解决办法:
.lside,.rside,.content{
padding: 5px;
/* 去掉内边框影响 */
box-sizing: border-box;
}
解决效果:
源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式初始化 */
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.main{
width: 800px;
margin:auto;
}
.header,.nav,.container,.footer{
float:left;
width: 100%;
/* 内边距会影响整个盒子的实际大小,这里更改使其不影响 */
box-sizing: border-box;
}
.header{
background-color:#ccc;
padding: 20px;
text-align: center;
}
.nav{
background-color: #333;
}
.nav a{
color: #fff;
padding: 10px 20px;
/* 让链接以块的形式展示 */
display: inline-block;
}
.nav a:hover{
background-color: #bbb;
color: #000;
}
/* 左边栏和右边栏固定宽度200px */
.lside
{
width: 200px;
float: left;
}
.rside{
width: 200px;
float: right;
}
/* 中间栏需要加左右边距,否则自适应时候会窜到左右栏下方 */
.content{
margin: 0px 205px;
}
/* 远离导航栏 */
.lside,.rside,.content{
padding: 5px;
/* 去掉内边框影响 */
box-sizing: border-box;
}
.footer{
padding: 10px;
background-color: #ccc;
text-align: center;
}
/* 附加功能:当浏览器宽度小于700时,三个栏进行竖排代替横排*/
@media screen and (max-width:700px){
.lside,.rside,.content{
width: 100%;
/* 解决因为中间栏有左右间距导致的空白 */
margin: 0px;
}
}
</style>
</head>
<body>
<div class="mian">
<div class="header">
<h1>我是网页的头部</h1>
<p>这里主要放网页的logo或者banner广告</p>
</div>
<div class="nav">
<a href="#">导航项</a>
<a href="#">导航项</a>
<a href="#">导航项</a>
<a href="#">导航项</a>
</div>
<div class="container">
<!-- 主体中放入三个盒子,左中右 -->
<!-- 因为用margin进行三栏布局,中间的栏自适应,故中间的栏放在第三个 -->
<div class="lside">
<h2>我是左边栏</h2>
<p>
我是左边栏的内容我是左边栏的内容我是左边栏的内容
我是左边栏的内容我是左边栏的内容我是左边栏的内容
我是左边栏的内容我是左边栏的内容我是左边栏的内容
我是左边栏的内容我是左边栏的内容我是左边栏的内容
我是左边栏的内容我是左边栏的内容我是左边栏的内容
</p>
</div>
<div class="rside">
<h2>我是右边栏</h2>
<p>
我是右边栏的内容我是右边栏的内容我是右边栏的内容
我是右边栏的内容我是右边栏的内容我是右边栏的内容
我是右边栏的内容我是右边栏的内容我是右边栏的内容
我是右边栏的内容我是右边栏的内容我是右边栏的内容
我是右边栏的内容我是右边栏的内容我是右边栏的内容
</p>
</div>
<div class="content">
<h2>我是中间栏</h2>
<p>
我是中间栏的内容我是中间栏的内容我是中间栏的内容
我是中间栏的内容我是中间栏的内容我是中间栏的内容
我是中间栏的内容我是中间栏的内容我是中间栏的内容
我是中间栏的内容我是中间栏的内容我是中间栏的内容
我是中间栏的内容我是中间栏的内容我是中间栏的内容
</p>
</div>
</div>
<div class="footer">
<p>我是网页的底部,主要放版权声明,备案信息,联系方式,友情链接等</p>
</div>
</div>
</body>
</html>