美化
本套教程已经修订，请大家阅读修订版本，谢谢
新手专题教程第一期修订版（1）
新手专题教程第一期修订版（2）
新手专题教程第一期修订版（3）
新手专题教程第一期修订版（4）
新手专题教程第一期修订版（5）
刚刚闲下来没几天，期末考试强势逼来，时间马上紧得不行，结果后边的教程也是越写越仓促，不足之处，希望大家谅解。对照着前面三章的教程，相信大家的专题的雏形已经出来了，我猜大部分没做过专题的新手此刻是又喜又急。喜的是眼看着一个专题就这么作出来了，急得是专题做到后面，难看得不行。现在，我们就进入最后一个环节：美化。
考虑到大多数网编在美工方面不在行，美化这节的教程主要教大家如何借用互联网上的资源。分析html部分不做详细介绍，要求阅读者对html有一定的了解，如果不了解，请先阅读本版相关教程，或者直接跳过分析，只阅读、照搬代码练习。
第一期教程不要求大家一次性学会div+css制作专题，只是想让大家先熟悉一下这个制作流程，为下一期的教程打下基础。所以本期教程只要求大家记住这些步骤和一些固定不变的代码，如两列布局和三列布局等等。至于如何理解这些代码，大家在初步熟悉流程以后，在阅读不同教程的过程中，会慢慢理解的。
在开始之前，先对全局做个美化：每个行容器之间没有间隙，都是紧贴着得。这里给它们一个间隙：
复制内容到剪贴板
代码:
margin-top:3px; margin-bottom:3px;加在每个行容器里边(任一个分号后面):#header{}、#menu{}、#base{}、#advanced{}、#other{}、#footer{}
其中
#header{}只需要加margin-bottom:3px;
#footer{}只需要加margin-top:3px;
首先是#menu，这里使用论坛的菜单样式。
在ie里打开bbs.bianews.com
这个菜单怎么做出来的呢？：
1、在浏览器里：【查看】－【源文件】，可以看到用记事本打开的网页源代码
2、挑选论坛菜单里的个别关键词，例如“短信息”、“会员”、“搜索”等，在源文件里搜索其中一个关键词(ctrl+f)，找到菜单代码所在位置
3、一行一行往上分析该代码，看它被嵌套在哪个div里，经分析，菜单代码所在的div为：<div id="menu">
4、找到css链接：
复制内容到剪贴板
代码:
<link rel="stylesheet" type="text/css" href="forumdata/cache/style_1.css" />
<link rel="stylesheet" type="text/css" href="forumdata/cache/style_1_append.css" />如果熟悉dz论坛的话，就会知道style_1.css才是我们说要找的css，另外一个是空的（不知道的话就全部试一下，hoho）
href后面的就是该css的相对地址。即完整地址是：
http://bbs.bianews.com/forumdata/cache/style_1.css
在ie地址栏输入以上网址，默认会用dw打开
5、在dw里ctrl+f,搜索#menu，在所有搜索结果中，挑选出以下代码：
引用:
#menu { height: 31px; border: 1px solid #CAD9EA; background: #FFF url("../../images/default/menu_bg.gif"); background-repeat:
repeat-x; }
#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid #FFF; }
#menu li { float: left; }
#menu li a { text-decoration: none; float: left; color: #333; padding: 4px 8px 3px; background: url
(../../images/default/menu_itemline.gif) no-repeat 0 6px; }
挑个别解释下吧：
#menu{}里边的
复制内容到剪贴板
代码:
background: #FFF url("../../images/default/menu_bg.gif");是背景，我们得把它下载下来（把鼠标停留在菜单的空白位置，【鼠标右键单击】－【背景另存为】），保存到桌面上的bianews/images
6、我们可以挑选其中部分，放到index.css，最终效果如下：：
引用:
#menu { margin-left:auto; margin-right:auto;width:778px;height: 31px; border: 1px solid #CAD9EA; background: #FFF url
("images/menu_bg.gif"); background-repeat: repeat-x; margin-top:3px; margin-bottom:3px;}
#menu ul { float: left; padding: 4px 10px 0; border-right: 1px solid #FFF; }
#menu li { float: left; }
#menu li a { text-decoration: none; float: left; color: #333; padding: 4px 8px 3px;}
[
本帖最后由 乌龙 于 2008-8-17 08:10 编辑 ]
