网页布局
<!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:4em;
}
#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{
margin-bottom:5px;
}
#right_top{
height:25px;
background:url(image/right_bj.jpg) repeat-x;
}
#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;
}
#bottom a:hover{
color:#999;
}
#bottom1{
height:80px;
padding-top:15px;
background:#fff;
border:1px solid #cc9966;
margin-bottom:0px;
}
</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="#">st 无法替代</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><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/left.gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (1).gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (2).gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (5).gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (6).gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx.gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (4).gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/left.gif" width="84" height="62" /></div><br /><a href="#">你永远值得</a></div>
<div id="bottom"><div id="bottom1"><img src="image/xx (8).gif" width="84" height="62" /></div><br /><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"></div>
</body>
</html>
