电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

CSS布局实例:用CSS布局网站首页

CSS布局实例:用CSS布局网站首页_第1页
1/19
CSS布局实例:用CSS布局网站首页_第2页
2/19
CSS布局实例:用CSS布局网站首页_第3页
3/19
CSS布局实例:用CSS布局网站首页 第一步 下面是我们将要动手制作的设计图。如前所述,你可以阅读 PSDTUTS 上的这篇教程 来学习如何做出这样的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对 CSS 布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML 元素(比如

等等)被放入页面时具有一个天生的位置,这个位置是由之前放入的元素确定的。例如,你放入一个填充了文字的

标签,接着放入另一个

,它会自然出现在第一个

下方。每个元素相对于上一个元素流动。 绝对定位则不同,它给一个对象指定精确的位置使它脱离常规的元素流。如果你像之前一样放入第一个

,然后绝对定位第二个

为 left:500px; top:500px,那它就会无视第一个

准确无误地出现在指定的位置。 你可以像这样设置绝对定位: .className { position:absolute; top:0px; left:0px; } 绝对定位的缺点 使用绝对定位的主要问题是你的元素们不会真正地相互关联。例如,你在靠近页面顶端的地方放置了一个文本块,然后稍靠下放置另一个,当每一个块的文本都较短时这看上去很好。但如果顶部的块内是一篇长文,它就会越过第二个块,而不是把第二个块推向下方。 所以绝对定位只对那些尺寸固定并且不需要与其他元素互动的元素真正有效。 为什么本例中我们要用绝对定位? 因为绝对定位的好处就在于,它真的、真的非常简单!你告诉浏览器东西往哪儿放它就往哪儿放!更棒的是,当你使用绝对定位时,浏览器兼容性问题会大大减少。毕竟不管你用的是Firefox、Internet Explorer 还是 Safari,100px 总归是 100px。 嗯...该开始我们的布局了 我们将要制作网站的方法是:  使用大尺寸的背景图片  绝对定位 Logo、菜单和头部面板,让它们精确地出现该出现的地方  将 content(内容)放入惯用的

标签,但设置很高的 padding-top(顶部内边距)好让 content 向下推到该出现的地方  让 footer(页脚)坐镇底部 如果上述说明还不能让你有一个整体的感觉,先别着急,当你看到网站成型的时候就会了解了! 第三步 现在,我们需要两张背景图片。一张大的,存成JPG 后大约 56kb。这个尺寸在过去稍嫌太大,不过现在这不足为道。 另一...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

CSS布局实例:用CSS布局网站首页

确认删除?