练习(黄冈中学布局)

最新推荐文章于 2024-09-20 16:06:21 发布

weixin_34377065

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量119

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/93wei/archive/2011/11/07/2238792.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>
<style type="text/css">
div{
width:1000px;
margin:0 auto;
background-color:#fff;
}
#nav{
width:1000px;
height:30px;
background:#F9F;
}
#top{
width:1000px;
height:70px;
background:#F6F;
}
#nav1{
width:1000px;
height:130px;
background:#F3F;
}
#content{
width:1000px;
height:1480px;
background:#FFC;
}
#bottom{
width:1000px;
height:90px;
background:#CCC;
}
#c-l{
width:900px;
height:1480px;
background:#0F0;
float:left;
}
.c-t{
width:900px;
height:910px;
float:left;
}
.c-t-l{
width:200px;
height:910px;
background:#9FF;
float:left;
}
.c-t-m{
width:500px;
height:910px;
background:#CFF;
float:left;
}
.c-t-r{
width:200px;
height:910px;
background:#9FF;
float:right;
}
.c-b{
width:900px;
height:570px;
background:#6F9;
float:left;
}
#d-r{
width:100px;
height:1480px;
background:#fff;
float:right;
}
#kuang{
width:198px;
height:170px;
margin:0 auto;
background:#ccc;
float:left;
border:1px solid #666;
}
h3{
width:198px;
height:40px;
background:#0F6;
float:left;
margin:0px;
}
p.a{
width:198px;
height:130px;
background:#093;
float:left;
margin:0px;
}
#shi{
width:198px;
height:60px;
background:#fff;
float:left;
border:1px dotted #000;
}
#dkuang{
width:198px;
height:380px;
margin:0 auto;
background:#ccc;
float:left;
border:1px solid #666;
}
.dbt{
width:198px;
height:50px;
background:#CC0;
float:left;
}
.dnr{
width:198px;
height:330px;
background:#F69;
float:left;
}
#m1{
width:338px;
height:150px;
float:left;
background:#CF0;
}
#m2{
width:160px;
height:148px;
border:1px solid #f00;
float:left;
background:#CF0;
}
#m3{
width:500px;
height:80px;
border-bottom:2px solid #F60;
border-top:2px solid #F60;
float:left;
background:#CF0;
}
#m4{
width:130px;
height:188px;
border:1px solid #f60;
float:left;
background:#CF0;
}
#m5{
width:368px;
height:190px;
float:left;
background:#CF0;
}
#m6{
width:500px;
height:140px;
border-top:2px solid #F60;
float:left;
background:#CF0;
}
#m7{
width:500px;
height:30px;
border-top:solid 1px #F00;
border-left:4px solid #f00;
border-bottom:1px dotted #CCC;
float:left;
background:#CF0;
}
#m8{
width:500px;
height:180px;
border:2px solid #F9F;
float:left;
background:#CF0;
}
#m9{
width:500px;
height:30px;
border-left:4px solid #f00;
border-bottom:1px dotted #CCC;
float:left;
background:#CF0;
}
#m10{
width:500px;
height:60px;
border:2px solid #f9f;
float:left;
background:#CF0;
}
#b{
width:285px;
height:280px;
margin:5px 0 0 12px;
float:left;
}
.bbt{
width:285px;
height:50px;
background:#FF9;
float:left;
}
i{
display:block;
width:285px;
height:50px;
background:#FF6;
float:left;
margin-top:10px;
}
p{
width:285px;
height:170px;
background:#fff;
float:left;
}
</style>
</head>

            </div>
            <div id="b">
            <div class="bbt">黄冈密卷
                <i>图片</i>
                <p>内容</p>
                </div>
            </div>
            <div id="b">
            <div class="bbt">学法指导
                <i>图片</i>
                <p>内容</p>
                </div>
            </div>
            <div id="b">
            <div class="bbt">黄冈擂台
                <i>图片</i>
                <p>内容</p>
                </div>
            </div>
            <div id="b">
            <div class="bbt">家长学校
                <i>图片</i>
                <p>内容</p>
                </div>
            </div>
            <div id="b">
            <div class="bbt">新教师版
                <i>图片</i>
                <p>内容</p>
                </div>
            </div>
        </div>
    </div>
    <div id="d-r"></div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>