CSS使用小记

定义竖版格式：

例：

<div style="layout-flow:vertical-ideographic;height:399;float:right;">

文字特效：

1、发光效果

<font style="filter:glow(color=#ff0000,strength=3);height:1px;"face="楷体" color="#ffffff" size="4">天生我才必有用</font>

2、阴影效果

<font style="color:#990099;filter:shadow(color=blue);font-family:方正舒体;font-size:20px;width:100%;"><b>人不是为了失败而生的</b></font>

3、渐变效果

<font style="font-size:30pt;filter;alpha(opacity=100,style=1);width:100%;color:red;line-height:100%;font-family:华文行楷"><b>为伊消的人憔悴</b></font>

最适合网页正文显示的字体大小为12磅左右，当内容比较多的时候用9磅的字号

滑动门技术：

嵌套两个元素，各自使用一个背景图像，二者中间部分重叠，两段不重叠，分别显示左端的背景和右端的背景，中间部分自动适应：

例：

  <style type="text/css">

h1{

font-size:18px;

text-align:center;

width:500px;

background:url(1.jpg)no-repeat;

padding-left:40px;

}

span{

display:block;

padding-right:40px;

background:url(1.jpg)no-repeat right;

}

  </style>

使用：

<h1><span>Oracle数据库afdsfdsfdsf</span></h1>

css文件中使用<!--  -->标签：

这样的作用是：不引起低版本浏览器(不支持css的浏览器)的错误

实现表格鼠标经过整行变色

Firefox和IE9中实现鼠标指针经过整行时整行变色：

tr:hover{

background-color:green;

color:red;

}

IE6中实现该效果：

1、在css中添加.hover类选择器：

tr:hover,tr.hover{

background-color:green;

color:red;

}

2、</table>标签后添加JavaScript代码

<script language="javascript">

var rows = document.getElementsByTagName('tr');

for(var i=0;i<rows.length;i++){

rows[i].onmouseover = function(){

this.className ='hover';

}

rows[i].onmouseout = function(){

this.className ='';

}

}

</script>

不能把块元素混在行元素中

将多个div靠边

左侧：修改margin为：0 auto 0 0;   只保留右侧一根弹簧

右侧：修改margin为：0 0 0 auto; 只保留左侧一根弹资

div布局中通过比例计算的宽度有时候小于100%，可以避免由于舍入误差造成总宽度大于容器宽度，而将div挤到下一行

优先级问题：

margin-top:3.5em !important;

margin-top:2em;

!important:获得绝对的优先级

设置悬停的返回顶部按钮：

设置a标签的背景图片为固定的即可

background-attachment:fixed:

设置透明效果：

filter:alpha(opacity:40);

opacity:0.9;//设置透明度

/*谷歌浏览器中设置为全屏显示*/

oAllbox.webkitRequestFullScreen();

高度的值不能设置为100%数，除非父控件设置了高度，当父控件没有设置宽度的时候，body默认是屏幕宽度，所以子控件设置宽度为100%的时候，可以显示屏幕的宽度

设置边框阴影：

box-shadow: 0 0 6px #ccc;