欢迎来到天天文库
浏览记录
ID：9414839
大小：53.50 KB
页数：4页
时间：2018-04-30
《web标准设计之第9天-第一个css布局实例》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、web标准设计之第9天:第一个CSS布局实例>>edu.5151doc.教育资源库接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关ages/bg_logo.gif)#FEFEFEno-repeatrightbottom;FONT-FAMILY:'LucidaGrande','LucidaSansUnicode','宋体','新宋体',arial,verdana,sans-serif;COLOR:#666;FONT-SIZE:12px;LINE-HEIGHT:150%;}以上代码的作用在上一天的教程有详细说
2、明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。3.定义主要的div初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:/*定义页面左列样式*/#left{ARGIN:0px;PADDING:0px;BACKGROUND:#CDCDCD;}/*定义页面中列样式*/#middle{POSITION:abs
3、olute;LEFT:200px;TOP:0px;ARGIN:0px;PADDING:0px;BACKGROUND:#DADADA;}/*定义页面右列样式*/#right{POSITION:absolute;LEFT:500px;TOP:0px;ARGIN:0px;PADDING:0px;BACKGROUND:#FFF;}注意：定义中列和右列div我都采用了POSITION:absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列
4、距离页面左边框500px，距离顶部0px；。这时候整个页面的代码是：<!DOCTYPEhtmlPUBLIC"-//L1.0Transitional//EN""favicon.ico"type="image/x-icon"/><linkrel="stylesheet"rev="stylesheet"href="css/style01.css"type="text/css"media="all"/></head><body><divid="left">页面左列</div><divid="middle">页面中列</div><divid=
5、"right">页面右列</div></body></html>这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？4.100%自适应高度?为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被tab
6、le思维禁锢太深了，这个办法在下一节的学习中详细介绍。标准设计之第1天:选择什么样的DOCTYPE标准设计之第2天:什么是名字空间标准设计之第3天:定义语言编码标准设计之第4天:调用样式表标准设计之第5天:head区的其他标准设计之第6天:XHTML代码规标准设计之第7天:CSS入门标准设计之第8天:CSS布局入门标准设计之第9天:第一个CSS布标准设计第10天:自适应高度标准设计之第11天:不用表格的标准之第12天:校验及常见错误[这篇文章来自..，]
此文档下载收益归作者所有
