平时用的东西，有的时候好忘记，呵呵

  1 .b{font-weight: bold } /* 加  粗 */
  2 .u{text-decoration: underline } /* 下划线 */
  3 .i{font-style: italic } /* 斜  体 */
  4 .s{text-decoration: line-through } /* 删除线 */
  5 .l{font-weight:lighter } /* 粗变细 */
  6 .hand{ cursor: hand } /* 手  型 */
  7 .f18    { font-size: 18px } /* 大字 */
  8 
  9 
 10 /* 鼠标的四种状态 */
 11 A:link        默认状态
 12 A:visited  
 13 A:active      点击状态
 14 A:hover      经过状态
 15 
 16 
 17 /* 汉字字体 */
 18 .simsun  {font-family: SimSun } /* 宋体 */
 19 .simhei  {font-family: SimHei } /* 黑体 */
 20 .lisu    {font-family: LiSu } /* 隶书 */
 21 .youyuan {font-family: YouYuan } /* 幼圆 */
 22 
 23 
 24 /* 截取超出规定长度的字段 <有宽度配合>*/
 25 .tof{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
 26 .xf_wb{word-break:break-all;table-layout:fixed}
 27 .ta_1{border-collapse:collapse;}
 28 
 29 
 30 /* 出现下拉的样式  */
 31 overflow:scroll; overflow-x:hidden; overflow-y:auto;
 32 
 33 
 34 /* 网页文字换行问题  */
 35 word-wrap:break-word         只管IE
 36 
 37 
 38 /* 自动换行 */
 39 .ww{word-wrap:break-word;}
 40 
 41 
 42 /* 文字过长时截取，出现省略号 */
 43 overflow:hidden;text-overflow:ellipsis;
 44 
 45 
 46 /* 浮动与定位 */
 47 .hidden    { /* 隐藏 */ visibility: hidden }
 48 
 49 /*段落前空格*/
 50 .space{text-indent: 2em;}
 51 
 52 /*圆角代码*/
 53 .g_no1, .g_no2, .g_no3{display:block; overflow:hidden;}
 54 .g_no1, .g_no2, .g_no3, .g_no4{background:#EEEEEE;}
 55 .g_no1{height:1px;    margin:0 4px;}
 56 .g_no2{height:1px;    margin:0 2px;}
 57 .g_no3{height:2px;    margin:0 1px;}
 58 .g_no4{color:#4E4E4E; padding:1px}
 59 
 60 /*防止标点在前面*/
 61 vertical-align:middle;
 62 
 63 
 64 /* W3C- 十六色色盘 常用颜色 */
 65 .red       { /* 红色 */ color: #FF0000 }
 66 .orange    { /* 橙色 */ color: #FF6600 }
 67 .yellow       { /* 黄色 */ color: #ffff00 }
 68 .green       { /* 绿色 */ color: #00ff00 }
 69 .cyan       { /* 青色 */ color: #00ffff }
 70 .blue       { /* 蓝色 */ color: #0066E6 }
 71 .purple    { /* 紫色 */ color: #800080 }
 72 .black       { /* 黑色 */ color: #000000 }
 73 .white       { /* 白色 */ color: #FEFEFE }
 74 .grey      { /* 灰色 */ color: #898989 }
 75 .gold      { /* 金色 */ color: #C37E00 }
 76 .silver       { /* 银色 */ color: #C0C0C0 }
 77 .brown     { /* 棕色 */ color: #996600 }
 78 .chestnut  { /* 栗色 */ color: #800000 }
 79 .peach     { /* 桃红 */ color: #FF00FF }
 80 .dark      { /* 暗红 */ color: #8B0000 }
 81 .olive     { /* 橄榄 */ color: #808000 }
 82 .deepgreen { /* 深绿 */ color: #008000 }
 83 .lightblue { /* 浅蓝 */ color: #008080 }
 84 .deepblue  { /* 深蓝 */ color: #000080 }
 85 
 86 
 87 /*使背景固定不动而上面的网页是动的*/
 88 body{background:url(images/bg_all01.jpg) fixed;}
 89 
 90 
 91 /*使这个区域有滤镜的效果*/
 92 .beijing{ background:#000; filter:alpha(opacity=75); opacity:0.75; height:800px; color:#FFFFFF; 
 93 
 94 margin:50px 0 0 0}
 95 
 96 
 97 
 98 /*插入的输入框变成横线*/
 99 <input name="" type="text" style="background:#000; border:0; border-bottom:1px solid #fff; 
 
 color:#FFFFFF">
 
 
 /*使表格的1px变细*/
 .bd_grey{border-style:solid; border-collapse:collapse;}
 
 
 /*使png图片去掉背景色，用css*，IE和火狐都可以用/
 .xf_shipin_xia{background:url(../images/xinfang/xf_shipin_xia.png) !important;background: none; 
 
 width:360px; height:70px;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/xinfang/xf_shipin_xia.png' 
 
 ,sizingMethod='crop');}
  火狐 !important; IE
  
 
 /*使网站变灰的代码（写在CSS中）*/
 HTML {
 FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
 }
 
 /*按钮样式*/
 <input type="submit" value="确 认" class="nl_queren" />
 <button class="nl_queren">确 认</button>
 
 
 /*图标和文字对不齐的用的*/
 vertical-align:middle
 
 
 
 /*  美工在做codding的时候，去掉按钮的点击后的虚框，用这个方法完成： */
 
 onfocus="blur()"
 
 
 
 /* 当你点击链接时，Firefox会在链接周围产生一个虚线外框。*/
 
 a{outline:none;}
 
 
 
 /*去掉ie6下的png图片的背景*/
 <style>
 
 .png24 {
     tmp:expression(setPng24(this));
 }
 
 </style>
 
 
 
 <script>
 function setPng24(obj) {
     obj.width=obj.height=1;
     obj.className=obj.className.replace(/\bpng24\b/i,'');
     obj.style.filter =
     "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src
 
 +"',sizingMethod='image');"
     obj.src=''; 
     return '';
 }
 </script>
 
 
 <img class="png24" src="abc123.png" width="169" height="43" border="0"> 
 
 
 
 /*maxlength决定输入框的字符数 size决定输入框的宽度*/
 <input type="text" name="scfg_name" value="" size="20" class="srk"  maxlength="15" />
 
 
 /*javascript:void(0);防止切换跳*/
 <div class="z-fl-left"></div>
     <div class="z-fl-zhong"  id="topic_type">
     <div class="z-xz01"><a href="javascript:void(0);" onfocus="blur();">欧美新品</a></div>
     <div class="z-xz01"><a href="javascript:void(0);" onfocus="blur();">日韩新品</a></div>
     <div class="z-xz01"><a href="javascript:void(0);" onfocus="blur();">国产新品</a></div>
 </div>
 
 
 /*强制转换，用户名、密码 填完用户名 tab到密码*/
 tabindex="1"
 tabindex="2"
 
 /*是ie也有最小宽度*/
 width:expression( documentElement.clientWidth < 778? (documentElement.clientWidth == 0 ? 
 
 (body.clientWidth < 778 ? "778" : "auto") : "778px") : "auto" )
 
 
 /*解决点文字 前面的单选按钮和复选按钮页是选中的*/
 
 前面的单选按钮和复选按钮 id="a"
 后面的字：<label for="a"></label>
 
 
 /*解决图片的垂直居中问题*/
 
 <div class="box"><a href="http://www.howpm.com" target="_blank"><img 
 
 src="http://howpm.com/images/dz7/logo.gif" /></a></div>
 
 CSS:
 .box {display: table-cell;vertical-align:middle;text-align:center;*display: block;*font-size: 
 
 200px;*font-family:Arial;width:200px;height:200px;border: 1px solid #eee; }
 .box img {vertical-align:middle; border:0;}
 
 
 
 /*解决span的宽度问题*/
 span{
    width:150px;
    display:block;/*解决span的宽度问题*/
 }
 
 /*解决IE下文字和数字的链接不整齐的问题 a链接上加*/
 
 vertical-align:baseline
 zoom:111
 
 
 /*解决文本框和文字巨上*/
 vertical-align:text-top;
 
 
 /*当图像不存在时,可用一张通用图片代替显示*/（没用过，嘿嘿）
 <img src="image.gif" onerror="this.src='noimage.gif'" />
 
 
 /*上下左右居中*/
 position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px; width:200px;height:200px;border:1px 
 
 solid red;
 
 
 
 /*若需给 a 标签内内容加上 样式, 需要设置display: block(常见于导航标签)*/
 
 
 /*css控制图片的显示大小         经典*/
 max-width:800px; width:expression(800+"px");
 
 
 
 /*使图片开始的时候是没有的，鼠标经过的时候是出现的         ie6下是不好用的*/
 .commentlist li img { display: none; border:none }
 .commentlist li:hover img { display: inline; border:none}
 
 
 
 /*框的上面有字的效果，挡住了框的一部分*/
 <fieldset>
     <legend>本帖最近评分记录</legend>
     <ul>
         <li>查看评分记录<li>
         <li>查看评分记录<li>
         <li>查看评分记录<li>
         <li>查看评分记录<li>
     </ul>
 </fieldset>
 
 css:fieldset{border:1px solid #B6B6C0;}
 
 /*透明颜色*/
 transparent
 
 
 
 /*是文件始终居底部的样式*/
 min-height: 100%; 
 height: auto !important; 
 height: 100%; 
 margin: 0 auto -30px 0; 
 
 
 /*鼠标放上去和离开的背景切换效果*/
  onmouseout="this.className='list_bg1'" onmouseover="this.className='list_bg2'" 
 
 /*利用这个属性给图片加上矩形、圆形或多边形的像映射中对鼠标敏感的区域*/
 coords 属性
 <area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 
 
 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
 
 下面列出了每种形状的适当值：
 
 圆形：shape="circle"，coords="x,y,z"
 
 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
 
 多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,"
 
 每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；
 
 高纬多边形则需要更多数量的顶点。
 
 多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
 
 矩形：shape="rectangle"，coords="x1,y1,x2,y2"
 
 第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，
 
 定义举行实际上是定义带有四个顶点的多边形的一种简化方法。
 
 例如，下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处，定义了一个对鼠标敏感的区域，并在
 
 图像的正中间定义了一个圆形区域。
 
 
 /*锚点链接*/
 点击<a href="#a">东海通讯简介</a>
 到<a name="a" id="a"></a>
 
 
 
 /*direction 属性设置文本的方向。*/
 direction: rtl       /*right*/
 direction: ltr       /*left*/
 
 
 
 
 /*最小高度*/
 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢
 
 ？办法就是去掉height设置min-height:200px;  这里为了照顾不认识min-height的IE6 可以这样定义：
 {
 height:auto!important;
 height:200px;
 min-height:200px;
 }
 
 
 
 /*不常用，但是需要你知道的标签*/
 1. <cite>  一般，浏览器会用斜体来显示<cite> 标签内的文字
 2. <optgroup>   <optgroup>标签是定义select标签中的选项分组的一种很好的方法
 eg:
 <label for="showtimes">上映时间</label>
 <select id="showtimes" name="showtimes"> <optgroup label="下午一点"><option value="titanic">泰坦尼
 
 克号</option> <option value="nd">贫民窟的百万富翁</option> <option value="wab">怪物史瑞克</option> 
 
 </optgroup> <optgroup label="下午两点"> <option value="bkrw">狮子王</option> <option value="stf">全
 
 民超人</option></optgroup></select>
 
 3. <acronym>  <acronym> 是一种定义或更多解释一组文字的方法。当你用鼠标放到使用<acronym>标签的文字时
 
 ，一个显示title标签的内容的框框将会出现在下边。
 eg:
 微博客网站<acronym title="Founded in 2006"> Twitter</acronym> 最近常常宕机。
 
 4. <address>   <address> 标签是一个非常不起眼的小标签，但是这并不意味着它没有用。顾名思义<address> 
 
 允许你在HTML中语义化标签。这个小巧的标签将默认斜体显示标签内的内容，当然，使用样式可以很容易的改变
 
 默认的样式。
 5. <ins> 和<del>  如果你想使用标签来显示编辑版本，<ins> 和<del> 正好适合。顾名思义，<ins> 用下划线
 
 高亮显示添加进来的内容，而<del> 用删除线显示被移除的信息。
 
 6. <label>  貌似表单元素最容易忘掉何时标记文本。对于表单元素，最常忘记的就是<label> 标签。不仅仅是
 
 一个便捷的标记文本的方式，<label> 标签还能传递一个”for” 属性来指定哪个元素将会被关联。<label> 不
 
 仅易于用样式来控制，还允许你让标题可点击
 eg:
 <label for="username">用户名</label>
 <input id="username" type="text" /> 
 
 7. <fieldset>  Fieldset是一个小巧的标签，你可以用来为你的表单元素添加逻辑分组。<fieldset>标签就会在
 
 其内部的元素周围画一个框。另外一点就是可以在fieldset里面添加<legend> 标签来定义分组的标题。
 eg:
 <form><fieldset>
 <legend>你比5年纪学生聪明吗？</legend>
 当然<input name="yes" type="radio" value="yes" />
 不知道<input name="no" type="radio" value="no" />
 </fieldset>
 </form>
 
 8. <abbr>  <abbr> 标签颇类似于<acronym> 标签，不同的是<abbr> 标签只用于定义缩写单词。就像<acronym>
 
 一样，你可以为这个标签定义一个title属性。当用户将鼠标放到缩写文字上面时，全部内容就会在下面显示。
 
 <abbr> 标签很少用，但是对于屏幕阅读者、拼写检查者以及搜索引擎是非常有用的。
 eg:
 <p><abbr title="脑残">NC</abbr> 是一个不太文明的用语。</p>