1、filter:chroma(color:#FFFFFF);    让指定的背景色透明，例:

<table cellspacing = "0" cellpadding = "0" border = "1">

　　<tbody>

　　　　<tr align = "center" bgcolor = "#cccccc">

　　　　　　<td><img src = "http://www.si58.com/up/pin/s_2007-12-04-1196777365.jpg.jpg“></td>

　　　　　　<td> <img style = "FILTER: chroma(color:#ffffff)" src = "http://www.si58.com/up/pin/s_2007-12-04-1196777365.jpg.jpg"></td>

　　　　</tr>

　　　　<tr align = "center">

　　　　　　<td>未使用该滤镜</td>

　　　　　　<td>使用该滤镜</td>

　　　　 </tr>

　　</tbody>     　

</table>

2、word-break:break-all; 强制换行

<table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">

　　<tbody>

<tr>

　　　　　　<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>

</tr>

</tbody>

</table>

3、writing-mode:tb-rl; 用于设置文本的书写方向，可以有两个取值：
lr-tb：表示左右-上下，

left right - top bottom tb-rl：表示上下-右左，

top bottom - right left 需要 IE 5.5+ 才支持，

例:

<style>

.clsHoriz {             writing-mode: lr-tb             }

</style>

<div style = "writing-mode:tb-rl">

　　第一组垂直文字<span class = "clsHoriz">第一组水平文字</span>

　　第二组水平文字<br/><span style = "writing-mode:lr-tb">第二组水平文字</span>

　　第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>

</div>

4、background-color: transparent; transparent表示透明色，例:
<span style = "background-color: #CCCCCC; padding:20px;">

<textarea style = "background-color: transparent;">

背景透明的TextArea

5、border-collapse:collapse; 它会自动把相同的边框线合并，例:

<style>

.grid    {    border-collapse: collapse;    }

.grid td    {    border: solid 1px #cccccc;    }

.gridNoCollapse td    {    border: solid 1px #cccccc;    }

</style>

不使用border-collapse:collapse;

<table border = "0" cellpadding = "4" cellspacing = "0" width = "200" class = "gridNoCollapse">

<tr>

<td>                 1.1</td>

<td>                 1.2</td>

</tr>

<tr>

<td>                 2.1</td>             <td>                 2.2</td>

</tr>

</table>

使用border-collapse:collapse;

<table border = "0" cellpadding = "4" cellspacing = "0" width = "200" class = "grid">

<tr>

<td>                 1.1</td>

<td>                 1.2</td>

</tr>

<tr>

<td>                 2.1</td>

<td>                 2.2</td>

</tr>

</table>

6、两个表格并排

<table border="1" style="display:inline;">

<tr>

<td>表格1</td>

</tr>

</table>
<table border="1" style="display:inline;">

<tr>

<td>表格2</td>

</tr>

</table>

7、overflow: auto; 自适应表格的高，可以自动加滚动条。

8、font:12px/18px; 字体大小/行高，例: <td><p style="font:12px/18px;">这里的12px就表示字体大小，18px其实就等价于css中的line-height。</p></td>

鼠标移上图片发亮

<style type="text/css">    
.opacityit img{  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);  -moz-opacity: 0.4;  }    
.opacityit:hover img{  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);  -moz-opacity: 1;  }    
</style>    
<a href="http://cnn.com" class="opacityit"><img border="0" src="email.gif" /></a>

鼠标移上有亮边框

<style type="text/css">
.borderit img{ border: 1px solid #ccc; }
.borderit:hover img{ border: 1px solid navy; }
.borderit:hover{ color: red; /* irrelevant definition to overcome IE bug */ }
</style>
<a href="http://cnn.com" class="borderit"><img border="0" src="email.gif" /></a>
 
 
 

用css定义的按钮

 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT="">

</HEAD>

<style>

.btn {  BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid }

.btn1_mouseout {  BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid }

.btn1_mouseover {  BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid }

.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}

.btn3_mouseout {  BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid }

.btn3_mouseover {  BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid }

.btn3_mousedown {  BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid }

.btn3_mouseup {  BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid }

.btn_2k3 {  BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid }

</style>

<body>

<button class="btn" title="好看的按钮">好看的按钮</button>

<P></p>

<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"  onmouseout="this.className='btn1_mouseout'"  title="好看的按钮">好看的按钮</button>  &nbsp;

<button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'"  onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>

<P>

<button class="btn2" title="好看的按钮">好看的按钮</button>

<P>

<button class="btn3_mouseout" onmouseover="this.className='btn3_mouseover'"  onmouseout="this.className='btn3_mouseout'"  onmousedown="this.className='btn3_mousedown'"   onmouseup="this.className='btn3_mouseup'"   title="好看的按钮">好看的按钮</button>

<P>

<button class="btn_2k3" title="好看的按钮">好看的按钮</button>

</BODY>

</HTML>

 
 

用css定义的页面效果（上，左右，下）

 
 

<html>

<head>

<style type="text/css">

body{ text-align:center; background:#999 }

#header{ width:776px; padding:0px; background:#eee; height:60px; text-align:left;}

#contain{ margin-right:auto; margin-left:auto; width:776px}

#right{ float:right; margin:2px 0px 2px 0px; padding:0px; width:574px;
background:#ccd2d3; text-align:left;}

#left{ float:left; margin:2px 2px 0px 0px; padding:0px; background:#f2f3f7; width:200px; text-align:left;}

#footer{ width:776px; margin-right:auto; margin-left:auto; padding:0px; background:#eee; height:60px;}

</style> </head> <body> <div id="header">header</div> <div id="contain">

<div id="right">

right

<p>&nbsp;</p>    <p>&nbsp;</p>   <p>&nbsp;</p>

<p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>     <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>  <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>

</div>

<div id="left">left   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>

</div>

<div id="footer">

</div>

</div>

</div>

</body>

</html>

input的样式

INPUT.button {  BORDER-RIGHT: #909090 3px double; PADDING-RIGHT: 0.25em; BORDER-TOP: #c0c0c0 3px double; PADDING-LEFT: 0.25em; BACKGROUND: url(../fade-butt[2].png); PADDING-BOTTOM: 0.05em; BORDER-LEFT: #c0c0c0 3px double; COLOR: #333; PADDING-TOP: 0.05em; BORDER-BOTTOM: #909090 3px double }

INPUT.text {  BORDER-RIGHT: #909090 3px double; PADDING-RIGHT: 0.25em; BORDER-TOP: #909090 3px double; PADDING-LEFT: 0.25em; BACKGROUND: url(../bg_diag[1].png) repeat-x 50% bottom; PADDING-BOTTOM: 0.2em; BORDER-LEFT: #909090 3px double; WIDTH: 200px; PADDING-TOP: 0.15em; BORDER-BOTTOM: #909090 3px double }
TEXTAREA.text {  BORDER-RIGHT: #909090 3px double; PADDING-RIGHT: 0.25em; BORDER-TOP: #909090 3px double; PADDING-LEFT: 0.25em; BACKGROUND: url(../bg_diag[1].png) repeat-x 50% bottom; PADDING-BOTTOM: 0.2em; BORDER-LEFT: #909090 3px double; WIDTH: 520px; PADDING-TOP: 0.15em; BORDER-BOTTOM: #909090 3px double; HEIGHT: 120px }
 
细线表格  
table{border:1px solid #000;border-width:1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse;}  
td,th{height:20px; border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left;}  
th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4;}

几个比较实用的CSS的更多相关文章

  1. 一些比较实用的css片段

    新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库.先附上该文地址http://segmentfault.com/a/1190000002773955 里面的内容很多我挑了几个经过我验证的 ...

  2. 15个实用的CSS在线实例教程

    前端技术可以说是必须学习的一个技术,现在做网站都需要懂DIV.CSS,在国内很多企业招网页设计师都要求会写基本的前端代码,所以前端技术是 必须了解的,对网页设计师本身也有帮助,今天向大家推荐一些不错的 ...

  3. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 11个实用的CSS学习工具

    1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...

  5. 20个初学者实用的CSS技巧

    过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...

  6. 100个实用的CSS技巧，以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

  7. 实用的 CSS — 贝塞尔曲线(cubic-bezier)

    欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...

  8. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  9. 偏门却又实用的 CSS 样式

    ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...

  10. 一个很实用的css技巧简析

    我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...

随机推荐

  1. 获取所有选中框的ids值

    var os = $("input[name='rec_ids[]']:checked"); var ids = []; os.each(function(i){ ids.push ...

  2. 2013长春网赛1010 hdu 4768 Flyer

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4768 题意:有n个社团发传单,每个社团发给编号为A_i, A_i+C_i,A_i+2*C_i,…A_i ...

  3. javascript面向对象系列第五篇——拖拽的实现

    前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...

  4. python自动化之调试

    #####调试 #####查看日志与断言 ''' 抛出异常使用raise语句.在代码中,raise语句包含以下部分: (1)raise关键字; (2)对Exception函数的调用; (3)传递给Ex ...

  5. 新版POI如何获取日期类型的cell的值

    使用POI读取Excel值的同学,一定为日期类型抓狂过! POI对单元格日期处理很弱,没有针对的类型,日期类型取出来的也是一个double值,所以同样作为数值类型.即使使用cell.setCellTy ...

  6. Fake or True（HNOI2018）

    闲话 或许有人会问博主蒟蒻:ZJOI爆0记呢? 博主太弱了,刚刚去ZJ做了个梦回来,又得马不停蹄地准备HNOI 于是就成了烂坑 不过至少比某某更强更fake的xzz的游记要好一些 其实ZJOI挺值得回 ...

  7. 【题解】 bzoj1191: [HNOI2006]超级英雄Hero （二分图）

    bzoj1191,懒得复制,戳我戳我 Solution: 二分图最大匹配板子题 Attention: 注意题干中的一句话 只有当选手正确回答一道题后,才能进入下一题,否则就被淘汰. Code: //I ...

  8. suoi31 最近公共祖先2 (倍增lca)

    根为r时x.y的公共祖先,就是lca(x,r),lca(x,y),lca(r,y)中深度最大的那一个,不要再在倍增的时候判来判去还判不对了... #include<bits/stdc++.h&g ...

  9. 【bzoj4009】 HNOI2015—接水果

    http://www.lydsy.com/JudgeOnline/problem.php?id=4009 (题目链接) 题意 给出一颗无根树.有一些路径记为$P_i$,这些路径有两个端点和一个权值$W ...

  10. 前端学习 -- Css -- 选择器的优先级

    当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 ...