常用CSS技巧(2)

解释:
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式,从0开始,1.2.3....有均匀透明啊,放射形状透明啊...
StartX=开始透明的X坐标,基本上为图片、层的左上角(0)
StartY= 开始透明的Y坐标,基本上也为图片、层的左上角(0)
FinishX=结束透明的X坐标,基本上也图片、层的右下(图片、层的宽度)
FinishY=结束透明的Y坐标,基本上也为图片、层的右下角(图片、层的高度)

再谈一下关于清除浮动(闭合浮动元素)最简单的方法
最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签,来清除浮动(clear),浏览器兼容性好,没有HACKS,缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.
先看代码

 

<div>
    <div>
      <p>......</p>
    </div>
    <div>
    <p>......</p>
    </div>
    <div>
      <address>
      
      </address>
    </div>
  </div>


其中WRAP是父级容器,sideright和sideleft是左、右部分的内容,foot里放了内容,在左、右内容的下面,并在父级容器里面,起到了清除浮动DIV的作用。

 

有什么能控制滚动条大小的吗?

 

<div>
<div>
有什么能控制滚动条大小的吗
</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);

 

 

<strong>各浏览器padding、margin的差异</strong>
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该写法的浏览器有幸读到了这一句
}

 

关于W3C检验时候的DIV元素封闭

所有的标记都必须要有一个相应的结束标记
以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:

 

 

<br /><img alt="网页设计师" src="https://blog.csdn.net/kof820/article/details/images/logo_w3cn_200x80.gif" />

 

成对的标签应有打开标签和关闭标签,例如:

 

<table><tr><td> </td></tr></table>

 

没有成对关闭标签的元素 都要加 /

 

如:
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/19655.html