A-A+

8条css技巧

2018年11月02日 HTML 暂无评论 阅读 11 views 次

1、兼容所有浏览器显示半透明效果的方法

<div class="transparent"></div>
.transparent { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: .5; width: 200px; height: 200px; margin: 0 auto; background: url("../img/pic.jpg");
}

2、_height,_width的作用

使用_height解决float的div不闭合的问题,可以将_height属性去掉就可以达到效果。

<div id="wrap"> <div class="column_left"> <h1>Float left</h1> </div> <div class="column_right"> <h1>Float right</h1> </div> </div>
#wrap { border: 6px solid #ccc; overflow: auto; _height: 1%;
} .column_left { width: 20%; padding: 10px; float: left;
} .column_right { float: right; width: 75%; padding: 10px; border-left: 6px solid #ccc;
}

3、使用min-height min-width解决div,或者span的固定高度问题

有时候我们需要设定某个元素固定高度,但是在firefox或者opera下面只设置高度,在内容不够多的时候,达不到预想的效果,这时候我们可以使用min-height

4、 使用media指令引入两种css:打印版本的css和屏幕显示的css

<link type="text/css" rel="stylesheet" href="url" media="screen" charset="utf-8">
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8">

5、用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr标签实现隐藏

6、可以使用page-break-after,page-break-before控制打印时的分页

7、*html{}的作用是为了兼容6.0以下的IE版本,对html节点的选取,其他的浏览器都认为html标签是文档的根节点,而ie6以下的ie版本却认为在html标签的上面还有一个根节点

8、使用text-indent显示图片,而隐藏文字

h1 { background: url(../img/pic.jpg) no-repeat; width: 200px; height: 200px; text-indent: -2000px }
打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: