CSS布局实例：用CSS布局网站首页
- 格式：doc
- 大小：268.50 KB
- 文档页数：19
CSS布局实例：用CSS布局网站首页第一步下面是我们将要动手制作的设计图。
如前所述，你可以阅读PSDTUTS上的这篇教程来学习如何做出这样的设计图。
在这篇教程里我们只制作首页，不过你可以以此为基础用相同的布局制作内页。
第二步首先要做的是确定页面结构。
随着你对CSS布局的逐步学习，这个过程会变得越来越简单。
通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。
什么是绝对定位？一个HTML元素（比如<div>、<p>等等）被放入页面时具有一个天生的位置，这个位置是由之前放入的元素确定的。
例如，你放入一个填充了文字的<p></p>标签，接着放入另一个<p></p>，它会自然出现在第一个<p>下方。
每个元素相对于上一个元素流动。
绝对定位则不同，它给一个对象指定精确的位置使它脱离常规的元素流。
如果你像之前一样放入第一个<p></p>，然后绝对定位第二个<p></p>为left:500px; top:500px，那它就会无视第一个<p>准确无误地出现在指定的位置。
你可以像这样设置绝对定位：.className {position:absolute;top:0px;left:0px;}绝对定位的缺点使用绝对定位的主要问题是你的元素们不会真正地相互关联。
例如，你在靠近页面顶端的地方放置了一个文本块，然后稍靠下放置另一个，当每一个块的文本都较短时这看上去很好。
但如果顶部的块内是一篇长文，它就会越过第二个块，而不是把第二个块推向下方。
所以绝对定位只对那些尺寸固定并且不需要与其他元素互动的元素真正有效。
为什么本例中我们要用绝对定位？因为绝对定位的好处就在于，它真的、真的非常简单！你告诉浏览器东西往哪儿放它就往哪儿放！更棒的是，当你使用绝对定位时，浏览器兼容性问题会大大减少。
毕竟不管你用的是Firefox、Internet Explorer还是Safari，100px总归是100px。
嗯...该开始我们的布局了我们将要制作网站的方法是：∙使用大尺寸的背景图片∙绝对定位Logo、菜单和头部面板，让它们精确地出现该出现的地方∙将content（内容）放入惯用的<div>标签，但设置很高的padding-top（顶部内边距）好让content向下推到该出现的地方∙让footer（页脚）坐镇底部如果上述说明还不能让你有一个整体的感觉，先别着急，当你看到网站成型的时候就会了解了！第三步现在，我们需要两张背景图片。
一张大的，存成JPG后大约56kb。
这个尺寸在过去稍嫌太大，不过现在这不足为道。
另一张窄条图片，作为主体区域的背景，将不断重复向右，拖动浏览器窗口时它也会随之向外平铺。
（注意：下图中的Logo不应该显示在背景图片里，抱歉这是张不太好的截图）你可以分别在这里和这里看到我创建的两张图片。
第四步好了，我们现在开始写HTML。
首先我们列出一些基本代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><title>PSD vs NET</title><link rel="stylesheet" href="step1_style.css" type="text/css" media="screen" /> </head><body><div id="outside_container"><div id="container"><!-- The Main Area --></div></div><div id="footer"><img src="images/footer_logo.jpg" /><span id="footer_text">Made for a PSDTUTS and NETTUTS tutorial by Collis!See the <a href="Photoshop'>">Photoshop Tutorial</a>,see the <a href="Web'>">Web Tutorial</a></span></div></body></html>通常，我们最好由外向内进行布局。
我在这里置入3个主要的<div>，前两个是outside_container / container，另外一个是footer. 这需要一些说明：1.我同时创建outside_container 和container是为了实现双重背景图像——一张小图平铺，一张大图置顶。
在outside_container里我将放入平铺背景，在container 里我将放入大幅的主背景图，而container将出现在outside_container顶部。
2.footer需要置于两个container之外，是为了让footer在浏览器窗口纵向延伸时不停向下。
既然它自己有一个背景，就不能在container之内，若非如此，你可能会在把窗口拉到某个程度时看到container的背景而不是footer的！你还看到我在footer里加了一些内容——小logo和一段文字。
我把这段文字包在一个<span>标签里以便后续操作。
而既然footer里只有一张图片，我们没理由再给<img>标签一个id或class，只要称之为#footer img就可以了。
这样可以让我们的HTML更简单一些。
第五步到目前为止我们的代码所需的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;}一条一条来看：1.首先我们重新定义了body标签。
我差不多总是会先做这件事。
我们除去默认的margin和padding，设置页面背景颜色和字体。
注意，这里的背景颜色实际上也是footer的背景颜色。
如前所述，这样做是为了让你在纵向拉伸窗口时也能一直看到footer。
2.然后，我用那张窄条背景图片填充outside_container标签，图片只沿x轴（即从左向右）重复，没有背景图的地方我们会直接看到黑色(#000000)。
由于我们只横向平铺，页面拉长时我们不会看到向下延续的图片，而是看到黑色的背景。
渐变成黑色的平铺图片让这一切表现完美！3.接下来轮到container了。
我们将大背景图设为不重复的，它只出现一次。
注意，因为这个<div>标签在前一个的内部，会伸展至将其填满，所以我们没有指定背景颜色。
如果指定的话它将覆盖我们的outside_container，而不是像现在这样，在页面顶部的背景图外围你仍可以看到outside_container的背景。
4.我还赋予了container一个最小高度，这样我们可以大致看到有内容的网页会是什么样子。
稍后这个最小高度可以由我们的内容来产生。
5.footer基本上只有一个单线border加一些padding，没必要再赋予它背景颜色，因为我们已经在<body>里设置过了。
记住，padding的定义方法如下padding: top rightbottom 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，从而使两个标签紧挨着排成两列。
