注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

★柳暗花明★

似水年华,诠释着无力的永恒······

 
 
 

日志

 
 

几个比较实用的CSS  

2010-11-15 17:07:56|  分类: CSS经典 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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;}
  评论这张
 
阅读(279)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017