黄冈中学首页布局(自己做的)
这是仿照黄冈中学的首页自己做的一个，第一次做，代码很啰嗦，很乱，我觉得越改越乱，我也就不改了，效果图和黄冈中学首页差不多，有待提高，但这毕竟是第一次的做品，保留一下。
<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
margin:0;
height:1024px;
background-color:#fdd563;
}
#header,#dh,#logo,#contenter,#footer{
padding:0;
margin:0 auto;
width:649px;
}
#header{
height:60px;
background:url(image/header_bj.gif) repeat-x;
}
#header img{
margin-top:14px;
margin-left:17px;
}
#header p{
margin-left:50px;
margin-top:-26px;
color:#f1f0f5;
font-family:"黑体";
font-size:20px;
}
#dh{
background:#471400;
border-top:3px solid #fa6103;
}
#dh a{
background:#471400;
font-family:"黑体";
font-size:12px;
display:block;
float:left;
text-decoration:none;
color:#fff;
text-align:center;
border-right:1px solid #6b1903;
padding:4px 20px 0px 12px;
height:3em;
}
#special a{
border-right:0px solid #471400;
}
#dh a:hover{
color:#ffdb4c;
background:url(image/dhbj.jpg) repeat-x;
}
#special a:hover{
}
#logo{
}
#contenter{
height:800px;
margin-top:3px;
}
#footer{
height:80px;
background:url(image/footer.jpg) repeat-x;
}
#left{
width:140px;
border:2px solid #984c0e;
background:#fce7ba;
height:600px;
float:left;
}
#left1,#left2,#left3,#left4{
background:url(image/tu_bj.gif) repeat-x;
}
#left1 span,#left2 span,#left3 span,#left4 span{
text-align:center;
color:#dd9c62;
font-family:"黑体";
font-size:14px;
}
#left1{
height:190px;
}
#left3{
height:85px;
}
#left span{
margin-top:-15px;
}
#bk p,#bk4 p{
padding-left:10px;
margin-top:4px;
margin-bottom:4px;
}
#bk p a{
text-decoration:none;
font-size:9px;
color:#8c5c46;
font-family:"Arial Black", Gadget, sans-serif;
}
#bk p a:hover{
text-decoration:underline;
}
#bk{
border:3px solid #feb849;
}
#tp{
height:20px;
}
#left2{
height:50px;
padding-right:4px;
padding-bottom:8px;
}
#bk2{
margin-left:7px;
margin-top:8px;
width:82px;
height:10px;
background:#fff;
border:1px solid #7b4b3d;
}
#ss{
background:#530a04;
margin-left:105px;
display:block;
}
#ss a{
text-decoration:none;
font-size:12px;
color:#fbfbf3;
}
#ss a:hover{
text-decoration:underline;
}
#lx{
padding:4px 10px 4px 4px;
border-top:3px solid #9f5319;
font-size:15px;
color:#330000;
font-family:"幼圆";
}
#left4{
height:230px;
}
#bk4 p a{
text-decoration:none;
font-size:9px;
color:#8c5c46;
font-family:"Arial Black", Gadget, sans-serif;
}
#bk4 p a:hover{
text-decoration:underline;
}
#lx h4{
margin-top:4px;
margin-left:3px;
margin-bottom:2px;
}
#lx p{
font-size:9px;
color:#8c5c46;
font-family:"Arial Black", Gadget, sans-serif;
}
#tp span,#tp2 span,#tp3 span,#tp4 span{
color:#fff;
}
#right{
width:498px;
height:800px;
float:right;
}
#right1,#right2,#right3,#right4{
}
#right_top,#right_top3{
height:25px;
background:url(image/right_bj.jpg) repeat-x;
margin-bottom:5px;
margin-top:5px;
}
#right_top span{
font-size:12px;
color:#663300;
margin-right:416px;
margin-left:8px;
}
#right_bottom{
height:240px;
}
#right_top3{
background:url(image/right_bj.jpg) repeat-x;
}
#right_top3 span{
font-size:12px;
color:#663300;
margin-right:370px;
}
#right_bottom,#right_bottom2,#right_bottom3,#right_bottom4{
border:1px solid #cc9966;
background:#f8d488;
}
#right_bottom2 h3,#right_bottom3 h3,#right_bottom4 h3{
margin-top:10px;
margin-left:7px;
margin-bottom:3px;
font-size:14px;
color:#632d13;
}
#right_bottom2 p,#right_bottom4 p,#right_bottom3 p{
margin-top:4px;
margin-left:7px;
margin-right:7px;
font-size:12px;
color:#632d13;
}
#right_bottom2 span,#right_bottom3 span,#right_bottom4 span{
text-indent:2em;
display:block;
font-size:12px;
color:#632d13;
margin-left:7px;
margin-right:7px;
}
#bottom{
margin-left:4px;
margin-top:6px;
margin-right:7px;
height:110px;
width:86px;
text-align:center;
float:left;
}
#bottom a{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
color:#75431e;
text-decoration:none;
margin-top:0px;
}
#bottom a:hover{
color:#999;
}
#bottom1{
height:80px;
padding-top:15px;
background:#fff;
border:1px solid #cc9966;
margin-bottom:5px;
}
#footer{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
}
#footer span{
display:block;
margin-top:8px;
margin-bottom:5px;
color:#fff;
}
#footer p{
color:#8c5715;
margin:4px;
}
</style>
<body>
<div id="header"><img src="image/logo.gif" /><p>云南天佑有限公司</p></div>
<div id="dh">
<a href="#">网站首页<br />HOME</a>
<a href="#">供应产品<br />GONGYING</a>
<a href="#">公司简介<br />JIANJIE</a>
<a href="#">诚信档案<br />CHENGX</a>
<a href="#">技术文章<br />JISHU</a>
<a href="#">公司动态<br />DONGTAI</a>
<a href="#">招聘中心<br />ZHAOPI</a>
<div id="special"><a href="#">联系我们<br />SFDD</a></div>
</div>
<div id="logo"><img src="image/tup.gif" /></div>
<div id="contenter">
<div id="left">
<div id="left1">
<div id="tp"><img src="image/tu.gif" align="absbottom" />
<span>产品分类</span></div>
<div id="bk">
<p><a href="#">如啼眼供应计划</a></p>
<p><a href="#">上的风格</a></p>
<p><a href="#">大发光火风光好规划</a></p>
<p><a href="#">电饭锅购房计划</a></p>
<p><a href="#">肺结核购房计划</a></p>
<p><a href="#">大发光火</a></p>
<p><a href="#">的规划规划</a></p>
<p><a href="#">大发光火恢复供货</a></p>
<p><a href="#">大发光火大发光火</a></p>
<p><a href="#">沃尔特发的规划</a></p>
<p><a href="#">而台湾人</a></p>
</div>
</div>
<div id="left2">
<div id="tp2"><img src="image/tu.gif" align="absbottom" />
<span>站内搜索</span></div>
<div id="bk2">
</div>
<span id="ss"><a href="#">搜索</a></span>
</div>
<div id="left3">
<div id="tp3"><img src="image/tu.gif" align="absbottom" />
<span>反馈信息</span></div>
<div id="bk">
<p><a href="#">如啼眼供应计划</a></p>
<p><a href="#">上的风格</a></p>
<p><a href="#">大发光火风光好规划</a></p>
<p><a href="#">电饭锅购房计划</a></p>
<p><a href="#">肺结核购房计划</a></p>
<p><a href="#">大发光火</a></p>
<p><a href="#">的规划规划</a></p>
<p><a href="#">大发光火恢复供货</a></p>
<p><a href="#">大发光火大发光火</a></p>
<p><a href="#">沃尔特发的规划</a></p>
<p><a href="#">而台湾人</a></p>
</div>
</div>
<div id="left4">
<div id="tp4"><img src="image/tu.gif" align="absbottom" />
<span>有情链接</span></div>
<div id="bk4">
<p><a href="#">如啼眼供应计划</a></p>
<p><a href="#">上的风格</a></p>
<p><a href="#">大发光火风光好规划</a></p>
<p><a href="#">电饭锅购房计划</a></p>
<p><a href="#">肺结核购房计划</a></p>
<p><a href="#">大发光火</a></p>
<div id="lx"><h4>联系我们</h4>
<p>电 话: 0516-83097549</p>
<p>传 真: 0516-83097549</p>
<p>手 机: 224324234234</p>
<p>网 址: www.ksn.com</p>
<p>联系人: 张小姐</p>
<p>地 址: 江苏徐州经济开发区</p>
</div>
</div>
</div>
</div>
<div id="right">
<div id="right1">
<div id="right_top"><img src="image/dh_left.jpg" align="absbottom" /><span>推荐产品</span><img src="image/dh_right.jpg" align="absbottom" /></div>
<div id="right_bottom">
<div id="bottom"><div id="bottom1"><img src="image/xx (3).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/left.gif" width="84" height="62" /></div><a href="#">理论课卡计划</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (1).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (2).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (5).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (6).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx.gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (4).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/left.gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (8).gif" width="84" height="62" /></div><a href="#">了空间的空间说的话</a></div>
</div>
</div>
<div id="right2">
<div id="right_top"><img src="image/dh_left.jpg" align="absbottom" /><span>公司简介</span><img src="image/dh_right.jpg" align="absbottom" /></div>
</div>
<div id="right_bottom2">
<h3>主营产品:</h3><p>框架控件客家、客家话、本科计划</p>
<span>在一个宴会中，两个太太在密谈。 “站在窗边的那个男人真奇怪，”一位太太说， “你还没有来的时候，他尽是朝我看，现在却一眼都不瞧我了。” “他是我的丈夫。”另一位太太说。一天中午，一位长相动人的小姐，匆匆跑到警察局报案：“刚才我在公园散步时，被一个不认识的人偷吻了。” “那是个什么样的人？” “不知道。” “现在是白天，你怎么会看不清？”警官又问。 “因为我每次被人吻时都会闭上眼睛的。”不是因为有些事情难以做到，我们才失去自信；而是因为我们失去了自信，有些事情才显得难以做到。 明日的命运，纵然你聪明，你却无法预言，也无法揣测；因此，莫虚度今天，因为它再不回来。
你可以用爱得到全世界，你也可以用恨失去全世界。贫穷是不需要计划的，致富才需要一个周密的计划——并去实践它。记得认真看待这个世界。杀了公鸡，也阻止不了天亮。历史将会记录，在这个社会转型期，最大的悲哀不是坏人的嚣张，而是好人的过度沉默。出来混，迟早是要还的。 </span>
</div>
<div id="right3">
<div id="right_top3"><img src="image/dh_left.jpg" align="absbottom" /><span>公司主营产品/服务</span><img src="image/dh_right.jpg" align="absbottom" /></div>
<div id="right_bottom3">
<h3>主营产品:</h3><p>框架控件客家、客家话、本科计划</p>
<span>在一个宴会中，两个太太在密谈。 “站在窗边的那个男人真奇怪，”一位太太说， “你还没有来的时候，他尽是朝我看，现在却一眼都不瞧我了。”嫉妒的发生，与时间和空间的距离成反比。人们嫉妒的不是远远超过自己的人，往往是身边的略微比自己强的人。难道全世界的鸡蛋联合起来就能打破石头吗？！所以做人还是要现实些
</span>
</div>
</div>
<div id="right4">
<div id="right_top"><img src="image/dh_left.jpg" align="absbottom" /><span>诚信档案</span><img src="image/dh_right.jpg" align="absbottom" /></div>
</div>
<div id="right_bottom4">
<h3>主营产品:</h3><p>框架控件客家、客家话、本科计划</p>
<span>从明星成功的经验看，豁出去的精神是事业成功的性格基础。好的想法是十分钱一打，真正无价的是能够实现这些想法的人。驴子说：我会磨面。母鸡说：我会下蛋！松鼠说：我会采果！狮子忧郁的说：你们干的我都不会，我只会分配这些东西！难道全世界的鸡蛋联合起来就能打破石头吗？！所以做人还是要现实些
</span>
</div>
</div>
</div>
<div id="footer">
<span>免费申明:以上所提供的信息由企业自行提供,内容的真实性、准确性和合法性有发布企业负责。Goope对此不承担任何责任。</span>
<p>苏州是高品检测仪器有限公司</p>
<p>联系人：张小姐 联系电话：0512-45128879 传真：0512-548661265 联系地址：苏州市吴中经济开发区</p>
<p>中国环保设备网-环保设备网站群：www.goope.com 设计制作</p></div>
</body>
</html>
效果图：
