您当前的位置: 首页 > 技术文章 > 前端开发

DIV+CSS布局积累

作者:licqi 时间:2011-01-21阅读数:人阅读
滚动条的颜色定义­ ­ [css]scrollbar-face-color: #E0D5BE;<!--//滚动条页面颜色设定--> ­ scrollbar-track-color: #EBE4D3;<!--//滚动条底版颜色设定--> ­ scrollbar-highlight-color: #ffffff;<!--//滚动条斜面和左面颜色设定--> ­ scrollbar-shadow-color: #ffffff;<!--//滚动条下斜面和右面颜色设定--> ­ scrollbar-3dlight-color: #ffffff;<!--//滚动条上边和左边的边沿颜色设定--> ­ scrollbar-dark-shadow-color: #ffffff;<!--//滚动条下边和右边的边沿颜色设定--> ­ scrollbar-arrow-color: #978C71;<!--//滚动条两端箭头颜色设定-->[/css] ­ ­ 给图片加边框­ 在CSS文件中对img定义边界(border),例如我在CSS中定义了:­ ­ [css]img.framed { ­ padding: 6px; ­ border: 1px solid #CCC; ­ background-color: #FFF; } [/css] ­ 那么在HTML文件中,针对嵌入的图片定义class="framed"就会有相应的边框效果。­ ­ [html]<img src="......" class="framed" > [/html] ­ 在FF下一个自适应高度的简单做法­ ­ 加上­ [css]height: 100%;­ overflow: auto; [/css] ­ 自动换行的简单做法­ ­ [css]table-layout: fixed;­ WORD-BREAK: break-all;­ WORD-WRAP: break-word; [/css] ­ 怎样用CSS把层做成半透明?­ ­ 用下面的样式表定义你的层 ­ [css].alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100}[/css] ­ 解释:­ Opacity=开始的不透明度(100的话就不透明了) ­ FinishOpacity=结束的不透明度(100的话就不透明了) ­ Style=样式,从0开始,1.2.3....有均匀透明啊,放射形状透明啊... ­ StartX=开始透明的X坐标,基本上为图片、层的左上角(0) ­ StartY= 开始透明的Y坐标,基本上也为图片、层的左上角(0) ­ FinishX=结束透明的X坐标,基本上也图片、层的右下(图片、层的宽度) ­ FinishY=结束透明的Y坐标,基本上也为图片、层的右下角(图片、层的高度) ­ ­ 再谈一下关于清除浮动(闭合浮动元素)最简单的方法­ 最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签,来清除浮动(clear),浏览器兼容性好,没有HACKS,缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.­ 先看代码­ ­ [html]<div>­ <div id="sideright">­ <p>......</p>­ </div>­ <div id="sideleft">­ <p>......</p>­ </div>­ <div id="foot">­ <address>­ http://www.forest53.com­ </address>­ </div>­ </div> [html] ­ 其中WRAP是父级容器,sideright和sideleft是左、右部分的内容,foot里放了内容,在左、右内容的下面,并在父级容器里面,起到了清除浮动DIV的作用。­ ­ ­ ­ 有什么能控制滚动条大小的吗?­ ­ [html]<div style="overflow:auto;width:200px; height:150px; zoom:0.5;">­ <div style="width:2000px; height:1500px; zoom:2;"> 有什么能控制滚动条大小的吗­ </div>­ </div> [/html] ­ 同时调用几个地方的外部CSS­ ­ main.css­ ­ [css]@import url(font.css);­ @import url(nav.css);­ @import url(form.css);­ @import url(footer.css);­ @import url(ad.css); [/css] ­ 各浏览器padding、margin的差异­ margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:­ IE 6.0 Firefox Opera等是­ 真实宽度=width+padding+border+margin­ IE5.X­ 真实宽度=width-padding-border-margin­ ­ 解决的方法是:­ ­ [css]div.content { ­ width:400px; //这个是错误的width,所有浏览器都读到了­ voice-family: ""}""; //IE5.X/win忽略了""}""后的内容­ voice-family:inherit;­ width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的­ } ­ html>body .content { //html>body是CSS2的写法­ width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句­ } ­ ­ div.content { ­ width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值­ width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用­ } ­ html>body .content { //html>body是CSS2的写法­ width:300px; //支持CSS2该写法的浏览器有幸读到了这一句­ } [/css] 附上:HACK总表­

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦