预览加载中，请您耐心等待几秒...

CSS布局实例：用CSS布局网站首页.doc

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共19页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

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、InternetExplorer还是Safari，100px总归是100px。 嗯...该开始我们的布局了 我们将要制作网站的方法是： 使用大尺寸的背景图片 绝对定位Logo、菜单和头部面板，让它们精确地出现该出现的地方 将content（内容）放入惯用的<div>标签，但设置很高的padding-top（顶部内边距）好让content向下推到该出现的地方 让footer（页脚）坐镇底部 如果上述说明还不能让你有一个整体的感觉，先别着急，当你看到网站成型的时候就会了解了！ 第三步 现在，我们需要两张背景图片。一张大的，存成JPG后大约56kb。这个尺寸在过去稍嫌太大，不过现在这不足为道。 另一张窄条图片，作为主体区域的背景，将不断重复向右，拖动浏览器窗口时它也会随之向外平铺。（注意：下图中的Logo不应该显示在背景图片里，抱歉这是张不太好的截图）你可以分别在这里和这里看到我创建的两张图片。 第四步 好了，我们现在开始写HTML。首先我们列出一些基本代码： <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><title>PSDvsNET</title><linkrel="stylesheet"href="step1_style.css"type="text/css"media="screen"/></head><body><divid="outside_container"><divid="container"><!--TheMainArea--></div></div><divid="footer"><imgsrc="images/footer_logo.jpg"/><spanid="footer_text">MadeforaPSDTUTSandNETTUTStutorialbyCollis!Seethe<ahref="Photoshop'>http://psdtuts.com">PhotoshopTutorial</a>,seethe<ahref="Web'>http://nettuts.com">WebTutorial</a></span></div></body></html> 通常，我们最好由外向内进行布局。我在这里置入3个主要的<div>，前两个是outside_container/container，另外一个是footer.这需要一些说明： 我同时创建outside_container和container是为了实现双重背景图像——一张小图平铺，一张大图置顶。在outside_container里我将放入平