Div+CSS 规则整理 提高效率

2020-05-08 08:40:24易采站长站整理


针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”


 


7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:


.pictures img {


filter: alpha(opacity=45); }


.pictures a:hover img {


filter: alpha(opacity=90); }


 


8)层在浏览器中居中对齐问题


 body { text-align: center }


#content { text-align: left; width: 700px; margin: 0 auto }


 


9)单行内容在层中垂直对齐问题


# content{height:19px; line-height:19px; }缺点是要内容不要换行。


 


10)层在浏览器中垂直居中对齐问题


    缺点是:水平、垂直方向上不能出现滚动条,只能是在一屏的情况下


其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。


如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。


 请看实例代码:


div {


    position:absolute;


    top:50%;


    left:50%;


    margin:-150px 0 0 -200px;


    width:400px;


    height:300px;


    border:1px solid red;


    }


 


11)CSS控制图片自适应大小


div img {


 max-width:600px;


 width:600px;


 width:expression(document.body.clientWidth>600?”600px”:”auto”);