练习(黄冈中学布局)

本例是根据上三例子的原理来做的。用的最多的也就是浮动和定位。

效果图：

代码如下：

<!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>

转载于:https://www.cnblogs.com/93wei/archive/2011/11/07/2238792.html

练习(黄冈中学布局)相关推荐

黄冈中学首页布局(自己做的)
这是仿照黄冈中学的首页自己做的一个,第一次做,代码很啰嗦,很乱,我觉得越改越乱,我也就不改了,效果图和黄冈中学首页差不多,有待提高,但这毕竟是第一次的做品,保留一下. <!DOCTYPE htm ...
湖北黄冈中学2021年高考成绩查询,【喜报】2020年黄冈中学高考成绩出炉，600分以上人数556人...
原标题:[喜报]2020年黄冈中学高考成绩出炉,600分以上人数556人 2020年7月23日,湖北省高考成绩已经出炉,但是黄冈中学2020年高考喜报却在今天才姗姗来迟,让大家久等了,赶紧先来一睹为快 ...
2021广州黄冈中学高考成绩查询,黄冈中学广州学校2019高考成绩喜报、本科重本上线人数情况...
黄冈中学广州学校2019届两名学子获北大/清华入读资格,高优(重本)率跃升至81.5% 尊敬的黄冈中学广州学校高三老师: 你们好! 作为毕业班孩子的父母,我们每一位高三学生家长都十分关注广东高考情况. ...
仅用1天，为湖北黄冈中学搭建直播课堂！
一场突如其来的新冠病毒肺炎疫情,让在无数在备考阶段的高三学子陷入苦恼.为了阻断疫情蔓延,减少人员聚集,教育部下发"关于2020年春季延期开学的通知".距离高考仅剩120多天,虽停课 ...
黄冈中学2021高考成绩查询,清华公布2021丘班录取名单，黄冈中学表现尴尬，衡中无人上榜...
每个学生心中都有个清华和北大梦,只不过后来发现自己能力有限,清华北大更是遥不可及,学生眼下的想法只是纠结能不能考上重点大学,但是这也并不妨碍大家对名牌院校的好奇心. 清华大学一直是理科学生梦寐以求的高 ...
湖北黄冈中学2021年高考成绩查询,黄冈中学2020年高考喜报 2020年黄冈中学高考成绩...
在高考的时候,高考生在考场上意气风发,考完之后成绩出来,学生分数高的学校同样在行业里出尽风头,来年招生会格外的火爆.今天我们来说说黄冈中学,看看这所学校今年的高考喜报会怎样?一起来了解一下吧.E0T答 ...
黄冈中学2021高考成绩查询,黄冈中学2019高考喜报成绩、一本二本上线人数情况...
黄冈中学2019高考喜报成绩.一本二本上线人数情况 2019年黄冈中学又报优异成绩 2019年黄冈中学高考分数 1.理科满分高三(6)班夏君豪686分,文科满分高三(2)班汪悦652分 2.文.理科报 ...
黄冈中学2021高考成绩查询,2021年黄冈高考状元名单公布今年黄冈高考状元是谁资料和分数...
从考场踏出来的那一刻,是一个人生阶段的结束.但更多的却是下一段更精彩人生的开始.一年一度的高考季刚刚结束,相信每一位黄冈的考生都很关心自己是否榜上有名.每年高考放日时,便是状元"群星闪耀&q ...
宜春市黄冈中学2021高考成绩查询,湖北2021新高考模拟考试赋分预测来了！请对照你的分数分析一下！...
湖北省高考,一直走在全国的前列,也一直在全国闻名遐迩.以前的"黄冈兵法""黄冈密卷",相信很多人记忆犹新啊. 湖北省的优秀高中学校多少?难以三言两语说清楚. 现 ...

练习(黄冈中学布局)

练习(黄冈中学布局)相关推荐

最新文章

热门文章