首页 > 代码库 > 常用CSS

常用CSS

2024-07-15 02:28:34   220人阅读

css:ellipsis省略号

1 <style>2 .news{width:320px; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url(‘ellipsis.xml#ellipsis‘); -ms-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; overflow:hidden;}3 .news a{white-space:nowrap;}4 </style>  5 6 <div class="news">7     <a href="javascript:void(0);">你好，我是个css省略号，支持各种浏览器，包括大IE6</a>8     <a href="javascript:void(0);">你好，我是个css省略号，支持各种浏览器，包括大IE6</a>9 </div>

鼠标移过去图片慢慢变暗（亮）一点

1 <style>2 .link_img{display:inline-block; width:auto; height:auto;}3 .link_img:hover{  background-color:#000;}4 .link_img:hover img{ display:block; filter:alpha(opacity=80); opacity:0.8; transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out;}5 </style>6 7 <a href="javascript:void(0);" class="link_img"><img src="images/zy_19.jpg" /></a>8 <a href="javascript:void(0);" class="link_img"><img src="images/pro3.jpg" /></a>

css:border实现的三角形

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css制作三角形</title> 6 <style type="text/css">   7 body{background-color:#E8E8E8;} 8 .triangle1{ display:inline-block; width:20px; height:20px;  border-width:20px 30px 40px 50px; border-style:solid; border-color:green yellow blue red;} 9 .triangle2{ display:inline-block; width:0; height:0;  border-width:20px 30px 40px 50px; border-style:solid; border-color:transparent yellow blue red;}10 .triangle3{ display:inline-block; width:0; height:0;  border-width:20px 30px 40px 50px; border-style:dashed solid solid solid; border-color:transparent yellow blue red;}11 .triangle4{ display:inline-block; width:0; height:0; _line-height:0;  border-width:20px 30px 40px 50px; border-style:dashed solid solid solid; border-color:transparent yellow blue red;}/*对于ie6要设置一下line-height，以及透明的border-style要设置成dashed*/12 13 .rightdirection{ display:inline-block; width:0;height:0; _line-height:0; border-width:20px; border-style:dashed dashed dashed solid;   border-color:transparent transparent transparent #333;  }  14 .bottomdirection{ display:inline-block; width:0;height:0;  border-width:20px; border-style:solid dashed dashed dashed; border-color: #333 transparent transparent transparent;  }  15 .leftdirection{ display:inline-block; width:0;height:0; _line-height:0; border-width:20px; border-style:dashed solid dashed dashed;  border-color: transparent #333 transparent transparent;  }  16 .topdirection{ display:inline-block; width:0;height:0;  border-width:20px; border-style:dashed dashed solid dashed;  border-color: transparent transparent #333 transparent;  } 17  18 .dome{ margin-top:10px; width:200px; padding:10px; text-align:center; background-color:#ccc; border:1px solid #666; position:relative; left:30px;}19 .dome:before{ display:block; content:""; border-width:8px 10px; border-style:dashed solid dashed dashed; border-color:transparent #666 transparent transparent; position:absolute; top:10px; left:-20px; z-index:1; }20 .dome:after{ display:block; content:""; border-width:8px 10px; border-style:dashed solid dashed dashed; border-color:transparent #ccc transparent transparent; position:absolute; top:10px; left:-19px; z-index:2;}21 </style>  22 </head>23 <body>24 <em class="triangle1"></em>25 <em class="triangle2"></em>26 <em class="triangle3"></em>27 <em class="triangle4"></em>28 29 <em class="rightdirection"></em>30 <em class="bottomdirection"></em>31 <em class="leftdirection"></em>32 <em class="topdirection"></em>33 34 <div class="dome">hello world</div>35 </body>36 </html>

背景透明

{filter:alpha(opacity=50);/*IE*/-moz-opacity:0.5;/*moz+ff*/opacity:0.5;}

字体设置

1 font{font-family: Georgia, "Times New Roman", 2                  "Microsoft YaHei", "微软雅黑", 3                  STXihei, "华文细黑", 4                  serif;}

 


联系
我们