页面布局的实现

页面布局的实现

ID:38359753

大小:556.00 KB

页数:5页

时间:2019-06-11

页面布局的实现_第1页
页面布局的实现_第2页
页面布局的实现_第3页
页面布局的实现_第4页
页面布局的实现_第5页
资源描述:

《页面布局的实现》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、DIV+CSS网页布局前言:关于css2.0的模型。以上文件是对单个元素而言的层次示意图,如果对于多个元素而言,这时就用到一个属性:z-index:(int),这个属性的意思是:int的值越大就越在上层。如下图:当然,有一个声明属性可以控制元素的应用优先权,不受z-index属性的限制,那就是!important属性。如果两个!important就要看两个属性的元素的样式在样式表的位置,位置靠后的覆盖靠前的。第一步:规划网站对页面进行布局,我们可以分为5部分,pageTop

2、ivclass="pagebody">//这部分作为父容器,不作为一部分。pageHeader

//这部分作为父容器,不作为一部分。pageLeft
pageMeddle
pageRight做成效果图如下:第二步:开始布局1、我们先给body加上样式:b

3、ody{font-size:30px;text-align:center;background-color:#CC9;}效果图:2、编辑pageTop的样式.pageTop{background-color:#090;width:100%;height:40px;position:fixed;top:0px;left:0px;right:0px;}效果图:3、添加pagebody样式.pagebody{width:900px;margin:0250px;}4、编辑pageheader样式:.pageHeader{backgrou

4、nd-color:#3FF;width:900px;height:120px;margin-top:40px;}效果图:5、添加meddle的样式。.meddle{width:900px;height:auto;min-height:600px;}6、编辑pageLeft样式.pageLeft{float:left;width:200px;background-color:#F99;height:auto;min-height:600px;}效果图:7、编辑pageMeddle和pageRight.pageMeddle{floa

5、t:left;background-color:#C69;width:500px;height:auto;min-height:600px;}.pageRight{float:right;background-color:#6F9;width:200px;height:auto;min-height:600px;}效果图如下;这里看不见pageHeader,那是因为pageTop遮挡了它:给pageHeader添加:margin-top:40px;这时就成了:刚开始的样式。

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。