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

CSS_DIV学习记录2(用背景颜色实现一个网页的完整布局)

2012-01-28 20:28 996 查看
最近几天我试着用CSS+DIV完成了几个静态页面的布局，通过总结，我发现对于一个初学者来说，一开始就用CSS+DIV实现完整的实际效果布局有点难度，而且在这个过程中一旦出现错误，排错很难，应该一步一步来。我认为首先，可以单纯的使用网页背景颜色的方式来实现完整布局，然后再局部细化，实现最终效果。

1.最终效果：





2.本实验所实现的初步效果：





3.default.html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="default.css" media="all" />
</head>
<body>
<div id="banner"></div>
<div id="main">
<div id="left">
<div id="left1"></div>
<div id="left2"></div>
<div id="left3"></div>
<div id="left4"></div>
</div>
<div id="right">
<div id="right1">
<div id="right1_left"></div>
<div id="right1_right"></div>
</div>
<div id="right2"></div>
<div id="right3"></div>
<div id="right4"></div>
<div id="right5"></div>
<div id="right6"></div>
<div id="right7">
<div id="right7_left"></div>
<div id="right7_right"></div>
</div>
</div>
</div>
<div id="banquan"></div>
</div>
</body>
</html>

4.default.css:

#banner{
width:960px;
height:303px;
margin:0 auto;
background-color:#f00;
}
#main{
width:960px;
height:911px;
background-color:#0f0;
margin:0 auto;
}
#banquan{
width:960px;
height:89px;
background-color:#00f;
margin:0 auto;
}
#left{
width:321px;
height:911px;
background-color:#0ff;
float:left;
}
#right{
width:639px;
height:911px;
background-color:#0aa;
float:left;
}
#left1{
width:321px;
height:151px;
background-color:#03f;
}
#left2{
width:321px;
height:347px;
background-color:#06f;
}
#left3{
width:321px;
height:219px;
background-color:#09f;
}
#left4{
width:321px;
height:194px;
background-color:#0cf;
}
#right1{
width:639px;
height:59px;
background-color:#23a;
}
#right2{
width:639px;
height:51px;
background-color:#43a;
}
#right3{
width:639px;
height:164px;
background-color:#63a;
}
#right4{
width:639px;
height:69px;
background-color:#83a;
}
#right5{
width:639px;
height:51px;
background-color:#a6a;
}
#right6{
width:639px;
height:176px;
background-color:#c3a;
}
#right7{
width:639px;
height:341px;
background-color:#e3a;
}
#right1_left{
width:388px;
height:59px;
background-color:#26a;
}
#right1_right{
width:388px;
height:251px;
background-color:#29a;
}
#right7_left{
width:388px;
height:341px;
background-color:#e6a;
float:left;
}
#right7_right{
width:251px;
height:341px;
background-color:#e9a;
float:left;
}


本文出自 “求学路” 博客，请务必保留此出处http://zbliangc.blog.51cto.com/655801/768016
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航