您的位置：首页 > Web前端 > CSS

CSS学习笔记8：实操——运用浮动简单布局网页

2017-02-12 19:58 666 查看
学习完浮动，我们就可以利用已学的知识做一个初级的网页布局了。下面我们布局成下图所示的网页：

如图：



思路：由大到小拆分盒子

1.先看上下分成3大部分，头部，中间和尾部3个大盒子。三个大盒子按照标准文档流上下排列，无需浮动。

2.拆分头部第一个大盒子：头部可拆分成1个红色盒子和2个绿色盒子。红色盒子左浮动，2个绿色盒子右浮动。思考：为什么较长的绿色盒子没有贴在较短的绿色盒子后面，与之并排在第一行？那是因为，第一行绿色盒子和红色盒子中间的空间较小，较长的绿色盒子自动跌落贴右墙。

3.拆分中间的盒子，中间的盒子分为左右2个小盒子，并使两个盒子左浮动。右边的盒子右可继续拆分为上下两个盒子，无需浮动。上面的盒子可拆分成左右两个盒子，都左浮动。左边的盒子可拆分3个天蓝的盒子，不浮动。思考为什么天蓝色的3个盒子不需要浮动？因为，天蓝色的父亲盒子已经左浮动了。

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*自动居中*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}

.content{
width: 970px;
height: 435px;
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: navy;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">logo</div>
<div class="language">语言选择</div>
<div class="nav">导航条</div>
</div>

<!-- 主要内容 -->
<div class="content">
<div class="banner">大广告</div>
<div class="rightPart">
<div class="main">
<div class="news">
<div class="news1"></div>
<div class="news2"></div>
<div class="news3"></div>
</div>
<div class="hotpic"></div>
</div>
<div class="links"></div>
</div>
</div>

<!-- 页尾 -->
<div class="footer"></div>
</body>
</html>


运行代码网页效果（哈哈哈，颜色差异请忽略~）：



注意：为了便于更容易看到效果，可在拆分大盒子之前，给大盒子设置一个背景颜色，等效果做好，再去掉。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 布局
相关文章推荐
新的分享
章节导航