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

CSS+DIV网页布局（黄冈网校首页布局）示例代码

2011-11-07 10:56 826 查看
<!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>
<style type="text/css">
#main,#header,#banner,#content,#container,#footer{
background-color:#399;
width:1003px;
border:1px solid red;
}
#main{
width:1003px;
height:29px;
}
#header{
width:1003px;
height:75px;
}
#banner{
width:1003px;
height:129px;
}
#content{
width:1003px;
height:904px;
}
#left{
width:199px;
height:904px;
float:left;
background-color:#096;
}
#left1{
width:199px;
height:173px;
}
#left2{
width:199px;
height:71px;
}
#left3{
width:199px;
height:206px;
}
#left4{
width:199px;
height:338px;
}
#left5{
width:199px;
height:116px;
}
#center{
background-color:#336;
border:1px solid blue;
float:left;
width:501px;
height:904px;
}
#center1{
height:158px;
width:501px;
}
#center2{
width:501px;
height:77px;
}
#center3{
width:501px;
height:194px;
}
#center4{
width:501px;
height:151px;
}
#center5{
width:501px;
height:217px;
}
#center6{
width:501px;
height:107px;
}
#right{
width:300px;
height:906px;
background-color:#339;
float:right;
}
#right1{
width:300px;
height:173px;
}
#right2{
width:300px;
height:62px;
}
#right3{
width:198px;
height:147px;
}
#right4{
width:198px;
height:68px;
}
#right5{
width:198px;
height:59px;
}
#right6{
width:198px;
height:71px;
}
#right7{
width:198px;
height:267px;
}
#right8{
width:198px;
height:57px;
}

#container1{
width:310px;
height:288px;
float:left;
background-color:#069;
}
#container2{
width:298px;
height:288px;
float:left;
background-color:#069;
}
#container3{
width:395px;
height:288px;
float:left;
background-color:#069;
}
#container4{
width:310px;
height:287px;
float:left;
background-color:#069;
}
#container5{
width:298px;
height:287px;
float:left;
background-color:#069;
}
#container6{
width:395px;
height:287px;
float:left;
background-color:#069;
}
#footer{
width:1003px;
height:97px;
background-color:#336;
}

</style>
</head>

<body>
<div id="main">太奇教育</div>
<div id="header">太奇教育旗下品牌网站</div>
<div id="banner">全国第一家复合式网校</div>
<div id="content">
<div id="top"></div>
<div id="left">
<div id="left1">中学课堂</div>
<div id="left2">名师寄语</div>
<div id="left3">黄冈之星</div>
<div id="left4">学员来信</div>
<div id="left5">直播课堂</div>
</div>
<div id="center">
<div id="center1">热点聚焦</div>
<div id="center2">全国分校</div>
<div id="center3">分校动态</div>
<div id="center4">名师风采</div>
<div id="center5">网上课堂演示</div>
<div id="center6">高考冲刺班演示</div>
</div>
<div id="right">
<div id="right1">小学课堂</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>
<div id="right8">高考冲刺班</div>
</div>
</div>
<div id="container">
<div id="container1">互动学习</div>
<div id="container2">黄冈密卷</div>
<div id="container3">学法指导</div>
<div id="container4">黄冈擂台</div>
<div id="container5">家长学校</div>
<div id="container6">新教师版</div>
</div>
<div id="footer">友情链接</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航