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
