我生待明日,万事成蹉跎

三列三行网页基本布局

<html>

<head>

<title>三列三行网页基本布局</title>

<style type=”text/css”>

*{margin:0;padding:0;}

body{font-family:”宋体”,Arial, Helvetica, sans-serif;}

#a{width:960px;overflow:hidden;margin:50px 100px 50px 200px;background-color:#993366;}

#b1{width:960px;height:40px;background-color:#333333;color:#FFFFFF;}

#b5{width:960px;height:10px;background-color:#FFFFFF;padding:7px 0px 7px 600px;clear:both;}

#a1{width:960px;overflow:hidden;background-color:#0000FF;margin-left:0;float:left;display:inline;}

#b2{width:150px;height:551px;background-color:#CCCCCC;margin-left:0px;float:left;display:inline;}

#b3{width:660px;overflow:hidden;background-color:#FFFFFF;margin-left:0px;float:left;display:inline;}

.b4{width:148px;height:551px;overflow:hidden;background-color:#999999;float:right;display:inline;}

.b2{list-style-type:none;}

.xht{color:#FFFFFF;}

</style>

</head>

<body>

<!–容器开始–>

<div id=”a”>

<!–顶部开始–>

<div id=”b1″>

<p><h1>&nbsp;Site name</h1></p>

</div>

<!–顶部结束–>

<!–内容部分开始–>

<div id=”a1″>

<!–左边部分开始–>

<div id=”b2″>

<ul class=”b2″>

<p>&nbsp;</p>

<p>&nbsp;</p>

<li style=”border:1px solid #333333″> Nav item 1</li>

<li style=”border:1px solid #333333″> Nav item 2</li>

<li style=”border:1px solid #333333″> Nav item 3</li>

</ul>

</div>

<!–左边部分结束–>

<!–中间部分开始–>

<div id=”b3″ style=”border:1px solid #CCCCCC;”>

<p>&nbsp;</p>

<p>&nbsp;</p>

 

<h2 style=”color:#003366″>&nbsp;&nbsp;Heading here</h2>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p><align=”center”>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢
你不的想法了被对方心里不觉得心里了境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消费</p>

<p>&nbsp;&nbsp;中举偶记得了科学开发了不好幸福多了你必须得风流快活不了开饭呢你不的想法了被对
方心里不觉得心里了消费环境消</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><a href=”#” style=”border:1px solid #000000″>返回链接</a></p>

</div>

<!–中间部分结束–>

<!–右边部分开始–>

<div class=”b4″>

<p>&nbsp;</p>

<p>&nbsp;</p>

<h3 align=”center” class=”xht”>Fond out more</h3>

<p>&nbsp;</p>

<p>&nbsp;得分能力考念</p>

<p>&nbsp;得分能力考念</p>

<p>&nbsp;得分能力考念</p>

<p>&nbsp;得分能力考的</p>

<p>&nbsp;得分能力考试</p>

</div>

<!–右边部分结束–>

</div>

<!–内容部分结束–>

<!–版权部分开始–>

<div id=”b5″ style=”border:1px solid #666666″>

<a href=”#”>超级链接1</a> <a href=”#”>超级链接2</a> <a href=”#”>超级链接3</a> <a href=”#”>超级链接4</a>

</div>

<!–版权部分结束–>

</div>

<!–容器结束–>

</body>

</html>

未经允许不得转载:徐宏涛博客 » 三列三行网页基本布局

分享到:更多 ()

评论 抢沙发

评论前必须登录!