就最近制作的一个BLOG系统经验共享 - 第一部分:CSS布局

(图在最下面)
最近在网上网站重构被炒得沸沸泱泱，小弟我经过一段时间的学习后在自己的作品中也用上了CSS布局，下面举几个具体的例子：

1,下图是用户浏览的其中的其中一个界面：

图的最外层布局由top和container构成，即网页上部的logo放置处和下部网页的主体。html网页代码如下:

<div id="top">
</div>
<div id="container">
</div>

其中的相应CSS代码如下:

#top{
WIDTH:800px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto; 
PADDING: 0px;
background-color:#999999;
color:#CCCCCC;
HEIGHT:90px;
TEXT-ALIGN: left;
}
#container{
width:800px;
margin-left:auto;
margin-right:auto;
}

由于我在body属性中申明了text-align:center属性，这是的top和container在页面中均可以居中显示。
Container中的布局又分为left,right,和footer三部分，他们的html代码如下:

<div id="container">
    <div id="right"></div>    [b]注意，一定要先放右边的[/b] 
    <div id="left"></div>
    <div id="footer"></div>
</div>

由于CSS布局和TABLE布局是相反的，所以CSS必须先右后左，而且这里要注意的一点就是如果右边的DIV太宽的话，就会把左边的DIV挤到下面去，所以设计的时候一定要倍加小心。
相应的CSS代码如下:

#right{
float:right;
margin:2px 1px 2px 0px;
padding:0px;
width:575px;
background-color:#FFFFFF;
text-align:left;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
}
#left{
float: left;
margin:2px 2px 0px 0px;
padding:0px;
background-color:#efefef;
width:215px;
text-align:left;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
}
#right_element_footer{
width:100%;
height:15px;
margin:0px;
padding:0px;
float:right;
background-color:#efefef;
border-top:1px solid #999;
text-align:right;
}

其中text-align属性是指DIV中的文字对齐属性，border是边框，格式为: 宽度 样式 颜色，CSS中的颜色可以缩写，比如说颜色为#FFFFFF的话，就可以缩写为#FFF,而#EFEFEF则不能缩写。float属性指的是DIV的显示位置。也可以用绝对定位来实现，下面就是一个例子:

#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}

position:absolute 表明middle用绝对定位，left和top则表示其具体位置。

(图在最下面)

做好具体布局后，现在看点比较细致的CSS设计:
如下图的文章分类和链接，这里没有采用TABLE来设计，而完全是用DIV和UL设计完成的。具体的html代码如下:

<div id="left">
    <div id="left_element">
        <ul>
             <font class="省略">文章分类:</font>
             <li>网站设计</li>
             <li>生活点滴</li>
             省略
        </ul>
    </div>
</div>

其中的CSS代码如下:

#left_element{
width:205px;
margin:2px 2px 2px 2px;
padding:0px;
float:left;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
}
#left_element ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none;
LINE-HEIGHT: normal; 
LIST-STYLE-TYPE: none;
}
#left_element ul li {
BORDER-TOP: #FFF 1px solid;
margin:0px;
padding-left:10px;
}

其中,left_element的属性margin:2px 2px 2px 2px设定了其在left中上下左右的间隔,border属性则是边框。而left_element ul 的格式则是表明只有在<div id="left_element"></div>嵌套中的ul样式，由于这里我们需要li是竖直显示，所以没有设置display:inline的属性。在以后的例子中会详细说明，如第一副图就是一个例子。在li属性中我们设置了BORDER-TOP: #FFF 1px solid;属性，这个属性则就是每行上面都有条白线的原因，而padding-left:10px属性则帮助我们是<li>中的内容对左边都有10px的距离。
为了设置其中超链接的样式我们可以用下面的CSS代码:

#left_element ul li a {
color:#09c;
text-decoration:none;
}
#left_element ul li a:hover {
color:#FFFFFF;
font-weight:bold;
}

原理就不说明了，和上面是一样的。

下面设计right中的内容，如最后一图中的文章内容部分也是采用了CSS布局设计,html代码如下:

<div id="right_element">
      <div id="right_element_top">文章标题</div>
      <div id="right_element_middle">文章内容</div>
      <div id="right_element_footer">发表时间和评论数目</div>
</div>

这里采用了top,middle,footer三个div作为right_element中的相应显示区，CSS代码如下:

#right_element{
width:550px;
height:60px;
margin:25px 5px 25px 5px;
padding:0px;
float:right;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
}
#right_element_top{
width:100%;
height:15px;
margin:0px;
padding:0px;
float:right;
font-weight:bold;
background-color:#efefef;
border-bottom:1px solid #999;
text-align:left;
}
#right_element_middle{
width:100%;
height:30px;
margin:0px;
padding:0px;
float:right;
text-align:center;
}
#right_element_footer{
width:100%;
height:15px;
margin:0px;
padding:0px;
float:right;
background-color:#efefef;
border-top:1px solid #999;
text-align:right;
}

但是这里有个小问题就是我们可以使<div>中的文字居中显示，但如何垂直显示呢，我没有找到比较好的答案，所以在里面还是嵌入了TABLE作为辅助。还有一个要注意的是，如果DIV中的内容太长的话你会发现他无法自动带你换行，结果就是撑宽了DIV使页面变形，相应的处理方法用这个:word-break:break-all;这个属性强制内容换行.
有了这个例子做下面的评论提交框也就不成问题了，这里就不说了．

这样子，一个页面就布局好了，哦对了，还有footer，实际上很简单，html代码如下:

<div id="footer">
    <table width="100%" height="100%">
        <tr><td align="center" valign="middle">
               <font color="#CCCCCC">JCBLOG www.jcblog.org cjyzpcl@hotmail.com</font>
        </td></tr>
    </table>
</div>

今天就说到这里，明天具体上面那个横向ul的制作介绍。

为什么不用table呢？table应付你这种布局绰绰有余。

只要简单的css+table就行了。

我想一开始就用CSS布局对以后更新网站有好处吧,而且也符合WEB标准。

to cjyzpcl:
div的命名有一些问题, 不应该是用位置来命名, 这样就又把样式和内容混在一起了, 比如

可以改成:

<div id="title">
</div>

这样清楚地表明了: 在这个div里面的内容是标题, 至于它放在top, left还是最下面, 交给css来处理, 不需要用div的名字来表示排版的位置


不明白是什么意思, 偶实际上也没有遇到你说的这个先右后左的怪问题, 举个具体的对比例子看看?


to xiaoyu:
用css做排版并不是意味着简单地用div, ul, li来取代掉table, tr, td, 它的目的是为了把内容和显示的样式分离开, 能够以不同的css, 展现出不同的排版输出. html和css在这里的关系, 有点像xml和xslt之间的关系类似.

to readonly:
你说的对啊,确实先排左边的也一样,谢谢啊!我是看了教程上说要先排右边的才这样说的.

嗯.readonly一言道醒了.

但我还是要实践一下再说,嘻(因为一直是用table 定位(相对位),然后+css显示)

但table不能轻易地改变自己的上下位置,但用css也不见得改位置比较容易(这点是我不喜欢用css定位的原因),因为它的工具支持也不太好.(我上面指的都是重新排版),倒觉得用table重新画一个还要快一点.

最大的遗憾就是缺乏合适的工具支持.但从分离角度讲,div+css确实不错.

楼主的css还可以再简化简化哦，把一些默认的去掉，把一些可以合并的合并起来，看起来就更清爽了。