正在阅读：CSS制作网页详细步骤图解CSS制作网页详细步骤图解

2009-04-27 10:24 出处：作者：cutecool 责任编辑：lizhiyan

　　第五步：

　　到目前为止我们的代码所需的CSS：

body {
margin:0px; padding:0px;
background-color:#11090a;
font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
}
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
}

　　一条一条来看：

　　首先我们重新定义了body标签。我差不多总是会先做这件事。我们除去默认的margin和padding，设置页面背景颜色和字体。注意，这里的背景颜色实际上也是footer的背景颜色。如前所述，这样做是为了让你在纵向拉伸窗口时也能一直看到footer。

　　然后，我用那张窄条背景图片填充outside_container标签，图片只沿x轴（即从左向右）重复，没有背景图的地方我们会直接看到黑色 (#000000)。由于我们只横向平铺，页面拉长时我们不会看到向下延续的图片，而是看到黑色的背景。渐变成黑色的平铺图片让这一切表现完美！

　　接下来轮到container了。我们将大背景图设为不重复的，它只出现一次。注意，因为这个<div>标签在前一个的内部，会伸展至将其填满，所以我们没有指定背景颜色。如果指定的话它将覆盖我们的outside_container，而不是像现在这样，在页面顶部的背景图外围你仍可以看到outside_container的背景。

　　我还赋予了container一个最小高度，这样我们可以大致看到有内容的网页会是什么样子。稍后这个最小高度可以由我们的内容来产生。

　　footer基本上只有一个单线border加一些padding，没必要再赋予它背景颜色，因为我们已经在<body>里设置过了。记住，padding的定义方法如下padding: top right bottom left（顺时针方向！）

　　我们现在到这儿了...

　　第六步：

　　接下来我们加上其他一些样式来结束footer的定义：

/*
Footer
*/
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
color:#674f5d;
font-size:9px;
line-height:14px;
}
#footer img {
float:left;
margin-right:10px;
}
#footer span {
display:block;
float:left;
width:250px;
}
#footer a {
color:#9e8292;
text-decoration:none;
}
#footer a:hover { color:#ffffff; }

　　如上，我在#footer样式里加了点东西并创建了几个新的样式。还是一条一条来看：

　　首先，位于/*和*/之间的这些玩意儿是CSS注释。添加注释有利于划分CSS文件使其便于理解。实际上我发现如果不加注意，大型项目中的CSS文件相当可能变得失去控制。尽早形成好习惯吧：正确命名你的选择器，添加注释，聚合相似的样式，为大型项目拆分出多个CSS文件等等。

　　在#footer中，我在之前的定义上添加了font color（字体颜色）、font size（字体尺寸）和line-height（行间距）。line-height是非常有用的文本属性，它可以帮你间隔文本。没有定义好行间距的文本看上去挤成一团难以阅读。但过大的行间距也会让文本隔得太开，看上去怪怪的。你可能要多试试看不同的字体和尺寸适合多大的行距。本例中14px似乎刚刚好。

　　接下来我把#footer img和#footer span都设为float:left，从而使两个标签紧挨着排成两列。我将在下文中深入探讨浮动和列的问题。
最后，我们告诉浏览器怎么处理出现在footer里的<a>标签（即链接）：没有下划线，在鼠标悬停时要变色。

　　加上这些后我们到了这里：

图4

　　第七步

　　解决了footer部分，现在我们来给主container区域加入更多内容。首先我们需要两张来自PSD图档的新图片。

图5

图6

　　注意，我使用了图片来表现文本块。一般说来，直接用文字是最好的，这样能让网页更容易被搜索到同时也被实践证明是比较好的做法。但如果要用文字实现图中的效果我们必须使用一些难得多的Flash和SIRr技术。既然本文是篇简明易懂的教程，我还是宁愿用一副大图片。:-）

　　下面是一小段HTML代码，只有container部分的：

<div id="outside_container">
<div id="container">

<a href="#"><img src="images/logo.jpg" id="logo" /></a>

<ul id="menu">
<li><a href="#">Retouching</a></li>
<li><a href="#">Digital Effects</a></li>
<li><a href="#">Web Work</a></li>
</ul>

<ul id="right_menu">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="images/panel_home.jpg" id="panel" />
<div id="content">



</div>
</div>
</div>

　　在container区域我们加了五项内容：

　　我们的logo：加了链接，点击可到达首页，id=“logo”

　　主菜：很简单的一个无序列表，id="menu"

　　右侧菜单：除了id="right_menu"外，和前一个菜单没两样

　　大文本图片：这是我们主要的头部文本，存成了图片, id="panel"

　　Content（内容） Div：我们待会儿要把页面的所有内容放在这里。但现在我只写了一句HTML注释，先让它留空。

　　在我们开始设计样式前，现在的页面值得一看，所有的内容像这样堆在一起：

图7

　　你也看见了，我们得来个乾坤大挪移好让一切归位。你还应该想起来，我们要用绝对定位来简单快捷地完成这个任务。