相关资源
搜索
广告是为了发展
学习DIV+CSS布局的一些常用资料整理
作者:不详 来源:网络 编辑:阿志
页面上所有图片自动缩放的代码
滚动条的颜色定义
给图片加边框
在CSS文件中对img定义边界（border），例如我在CSS中定义了：
那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。
在FF下一个自适应高度的简单做法
自动换行的简单做法
怎样用CSS把层做成半透明？
再谈一下关于清除浮动(闭合浮动元素)最简单的方法
最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.
先看代码
其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用。
有什么能控制滚动条大小的吗？
同时调用几个地方的外部CSS
各浏览器padding、margin的差异
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
解决的方法是:
<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为500，值可以自己修改
{
imgObj.height=500
}
if (imgObj.width>700) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
{
imgObj.width=700
}
}
}
</script>
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为500，值可以自己修改
{
imgObj.height=500
}
if (imgObj.width>700) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
{
imgObj.width=700
}
}
}
</script>
滚动条的颜色定义
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;<!--//滚动条两端箭头颜色设定-->
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文件中对img定义边界（border），例如我在CSS中定义了：
img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }
那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。
<img src="......" class="framed" >
在FF下一个自适应高度的简单做法
加上
height: 100%;
overflow: auto;
height: 100%;
overflow: auto;
自动换行的简单做法
table-layout: fixed;
WORD-BREAK: break-all;
WORD-WRAP: break-word;
WORD-BREAK: break-all;
WORD-WRAP: break-word;
怎样用CSS把层做成半透明？
用下面的样式表定义你的层
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝
解释：
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊...
StartX=开始透明的X坐标，基本上为图片、层的左上角（0）
StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）
FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）
FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝
解释：
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊...
StartX=开始透明的X坐标，基本上为图片、层的左上角（0）
StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）
FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）
FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）
再谈一下关于清除浮动(闭合浮动元素)最简单的方法
最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.
先看代码
<div class="wrap">
<div id="sideright">
<p>......</p>
</div>
<div id="sideleft">
<p>......</p>
</div>
<div id="foot">
<address>
http://www.forest53.com
</address>
</div>
</div>
<div id="sideright">
<p>......</p>
</div>
<div id="sideleft">
<p>......</p>
</div>
<div id="foot">
<address>
http://www.forest53.com
</address>
</div>
</div>
其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用。
有什么能控制滚动条大小的吗？
<div style="overflow:auto;width:200px; height:150px; zoom:0.5;">
<div style="width:2000px; height:1500px; zoom:2;">
有什么能控制滚动条大小的吗
</div>
</div>
<div style="width:2000px; height:1500px; zoom:2;">
有什么能控制滚动条大小的吗
</div>
</div>
同时调用几个地方的外部CSS
main.css
@import url(font.css);
@import url(nav.css);
@import url(form.css);
@import url(footer.css);
@import url(ad.css);
@import url(font.css);
@import url(nav.css);
@import url(form.css);
@import url(footer.css);
@import url(ad.css);
各浏览器padding、margin的差异
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
解决的方法是:
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该写法的浏览器有幸读到了这一句
}
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该写法的浏览器有幸读到了这一句
}
附上：HACK总表
关于W3C检验时候的DIV元素封闭
所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />
成对的标签应有打开标签和关闭标签,例如：
<table><tr><td> </td></tr></table>
没有成对关闭标签的元素 都要加 /
如：
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>
请问如何设置img标签图片自动适应高度？
想请教一下，倘若我设定了img的宽度一定值，我想保持纵横比不变，高度自动适应，该如何设置CSS，能否实现？
<style type="text/css">
img {
max-width: 200px;
width:expression(this.width > 200 ? "200px" : (this.width+"px"));
}
</style>
<img src="/UpLoadFiles/NewsPhoto/iabanner.jpg"/>
[从此长大]img {
max-width: 200px;
width:expression(this.width > 200 ? "200px" : (this.width+"px"));
}
</style>
<img src="/UpLoadFiles/NewsPhoto/iabanner.jpg"/>
--------------------------------------------------------------------------www.Cbcz.com