请您使用CSS+DIV设计一个个人博客的首页页面，在下面画出它的布局结构并标注上元素名称。

html-css022

请您使用CSS+DIV设计一个个人博客的首页页面，在下面画出它的布局结构并标注上元素名称。,第1张

比如你这个首页分为三大部分：header、main、footer然后main里包含main_left和main_right，就是把每个一块都写出来，其实就像拼图游戏一样。网页就是拼起来的。推荐去任务中国网接点活做，练练手就知道是怎么回事了。

<style type="text/css">

.main{background-color:#f90padding:5px 20px 10px}

.leftClum{float:leftfont-size:24pxwidth:24px}

.rightClum{margin:0padding:0}

.rightClum li {display:inlinewidth:33%list-style-type:noneline-height:2}

/**####Link Style####**/

a{color:whitetext-decoration:none}

.aFocus{ color:yellow}

/**###clear both###**/

.cl{clear:bothline-height:0font-size:0}

</style>

<div class="main">

<div class="leftClum">

首页

</div>

<ul class="rightClum">

<li><a href="#" class="aFocus">联系我们</a></li>

<li><a href="#" class="aFocus">>联系我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">联系我们</a></li>

</ul>

<div class="cl"></div>

</div>

因为是直接看着你的图，在这个输入框里写的代码，所以木有调试，不保证代码错对，但是实现思路大体就这样了。

这种结构用table是最简单的,用div+css反而容易乱

如果你确实要用div+css结构的话,一楼正解

想实现自适应居中,#main{width:675px}可以加一句改成这样: #main{width:675pxmargin:0 auto}

或者在<main>标签外面套一个<center>标签,你不想居中都不行(所有内容都会自动居中的)

图片间距最好是用.img{padding:3px 8px 3px 7px}而不用margin-right