CSS常见技巧写法

最新推荐文章于 2022-04-17 18:38:39 发布

weixin_34212189

最新推荐文章于 2022-04-17 18:38:39 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/blogscn/archive/2010/04/16/1713413.html

版权

1.给DIV加滚动条

内容区当设定的显示范围,容纳不了显示的内容的时候,就会出现滚动条,可根据自己的需要适当的改进width,height,overflow-x,overflow-y的属性,即可达到iframe的效果airzen整理

</div>

2.文字链接样式

(A)<a class="menu" href="#">机构职能</a>

a.menu:link {COLOR: #F30;TEXT-DECORATION: none;}
a.menu:visited {COLOR: #F30;TEXT-DECORATION: none;}
a.menu:hover {COLOR: #06C;TEXT-DECORATION: underline;}

(B)<div class="menu">)<a href="#">机构职能</a></div>

.menu a:link {COLOR: #F30;TEXT-DECORATION: none;}
.menu a:visited {COLOR: #F30;TEXT-DECORATION: none;}
.menu a:hover {COLOR: #06C;TEXT-DECORATION: underline;}

3.文字溢出自动判断裁切显示

以前我们在做新闻列表的时候，都会对字符进行长度判断，考虑到中英文字符长度问题，还用专用函数进行判断输出，耗费一定的程序处理资源，现有以下CSS样式，你可以直接输出。本人使用比较爽，所以贴出来同各位WEB 开发者共享！

<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">请务必尊重知识产权，杜绝侵权行为。鼓励原创，谴责未经允许的转贴。</TD>
</TR>
</TABLE>

TD中显示的东西您可以无限长，他的长度是由TABLE容器的width 进行控制，还有 TD的 nowrap属性一定不要漏airzen

4.CSS样式控制图片裁切显示

我们在论坛新闻系统的时候，其中的有些图片会比较大破坏了整体布局的美观，现通过CSS定义方式使图片进行裁切显示，即，当图片的容器不足以显示整个图片时，会以左上角为开始显示，不足显示的将会隐藏。相关各位同仁也有此想法。现有以下CSS样式，所以贴出来同各位WEB 开发者共享！

当然有人用img 的onload 事件对其宽高进行js控制，不过经招有时会因网页加载过快，或过慢而来不及执行，现向大家推荐代码如下，自行研究。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.divClass{height:100%;width:100%;overflow:hidden;Margin-bottom:5px}
</style>
<title>COPY数据到ID群集中by ID | 图片CSS定义裁切显示| 文字的宽度自适应缩放</title>
</head>

5.内容页大图片按例缩小合适大小样式

.main img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

6.CSS用省略号实现文字自动截断<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css文字截断____dowhatyouwant</title>
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
</head>

<body>
<div class="test">我来测试一下这个文字截断是不是真的有效果</div>
</body>
</html>

7.LI背景变化样式
样式：
.tab {background-color:#9FF;}
.tab li:hover{background-color:#F60;}
内容：
<ul class="tab">
<li></li>
<li></li>
<li></li>
</ul>
8.CSS渐变背景色,css滤镜渐变背景色,css代替背景图片

单元格(表格)标签中加简单的滤镜样式，实现背景图片的效果
效果：
代码：
<table>
<tr>
<td style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#F3D3DB,endColorStr=#FF0000)"> </td>
</tr>
</table>

9.CSS背景透明-跨浏览器

#snake{
backgournd: #666;
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.5; /*MOZ , FF*/
opacity:0.5;/*CSS3, FF1.5*/
}

<div id="snake" >背景透明效果</div>

10.min-height和height(ie6，ie7和ff中都可以自适应高度 )

如果你只需要兼容ie6那么你完全不需要注意min-height这个样式，因为ie6根本就不支持这个样式。但是当你的页面需要照顾到ie7和ff的时候，这个样式一定要注意。因为很多在ie6下设置了height=固定值的样式，当容器被里面的东西撑的大于这个高度的时候，ie7和ff是不会自适应高度的。从而导致布局的混乱。要想在ie6，ie7和ff中都可以自适应高度，正确的做法是设置min-height和用cssHack设置height。例如：
min-height:600px;
_height:600px;
这样，在容器里面的东西很少的时候，它显示固定高度600px，但当里面的东西很多的时候，它也会自适应的增长高度。
对于height的设置一定要特别注意，如果是布局用的容器的height则需要特别的注意，否则在ff中会导致无法浮起，从而使布局混乱

min-height:86px; height:auto ! important; height:86px;

转载于:https://www.cnblogs.com/blogscn/archive/2010/04/16/1713413.html