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 、 Explorer 还是 Safari , 100px 总归是 100px 。嗯... 该开始我们的布局了我们将要制作网站的方法是: ?使用大尺寸的背景图片?绝对定位 Logo 、菜单和头部面板,让它们精确地出现该出现的地方?将 content ( 内容) 放入惯用的<div> 标签, 但设置很高的 padding-top ( 顶部内边距) 好让 content 向下推到该出现的地方?让 footer (页脚)坐镇底部如果上述说明还不能让你有一个整体的感觉, 先别着急, 当你看到网站成型的时候就会了解了! 第三步现在,我们需要两张背景图片。一张大的,存成 JPG 后大约 56kb 。这个尺寸在过去稍嫌太大,不过现在这不足为道。另一张窄条图片, 作为主体区域的背景, 将不断重复向右, 拖动浏览器窗口时它也会随之向外平铺。(注意:下图中的 Logo 不应该显示在背景图片里,抱歉这是张不太好的截图) 你可以分别在这里和这里看到我创建的两张图片。第四步好了,我们现在开始写 HTML 。首先我们列出一些基本代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml" xml:lang="en" lang="en"> <head> <title>PSD </title> <link rel="stylesheet" href="" 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/" /> <span id="footer_text"> Made for a PSDTUTS TUTS 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 和 containe r 是为了实现双重背景图像
css布局实例：用css布局网站首页 来自淘豆网m.daumloan.com转载请标明出处.
