css代码整理、收集

2022-10-11 13:29:38

整理了一下之前用到过的css代码，实现一种效果或许有许多种写法，我这里整理了一下我个人认为兼容性比较好，结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下，小弟不胜感激！此学习笔记是动态的——我日后发现有好的代码段会陆陆续续整理添加上去。

css:ellipsis省略号

<style>

.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;}

.news a{white-space:nowrap;}

</style>  

<div class="news">

    <a href="javascript:void(0);">你好，我是个css省略号，支持各种浏览器，包括大IE6</a>

    <a href="javascript:void(0);">你好，我是个css省略号，支持各种浏览器，包括大IE6</a>

</div>

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

也就是用到了透明（opacity），渐变（transition）实现，如下是变暗的情况:

<style>

.link_img{display:inline-block; width:auto; height:auto;}

.link_img:hover{  background-color:#000;}

.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;}

</style>

<a href="javascript:void(0);" class="link_img"><img src="data:images/zy_19.jpg" /></a>

<a href="javascript:void(0);" class="link_img"><img src="data:images/pro3.jpg" /></a>

css:border实现的三角形

如要实现汽包，如新浪微博里的，新浪里用到的是的是特殊字符“◆”，，能实现兼容到IE6，html代码结构上不简洁了，在html里要多写了class为”WB_arrow“的一层代码，如图：

要简洁点，只能用border与伪类before，after了，附代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>css制作三角形</title>

 <style type="text/css">

 body{background-color:#E8E8E8;}

 .triangle1{ display:inline-block; width:20px; height:20px;  border-width:20px 30px 40px 50px; border-style:solid; border-color:green yellow blue red;}

 .triangle2{ display:inline-block; width:0; height:0;  border-width:20px 30px 40px 50px; border-style:solid; border-color:transparent yellow blue red;}

 .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;}

 .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*/

 .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;  }

 .bottomdirection{ display:inline-block; width:0;height:0;  border-width:20px; border-style:solid dashed dashed dashed; border-color: #333 transparent transparent transparent;  }

 .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;  }

 .topdirection{ display:inline-block; width:0;height:0;  border-width:20px; border-style:dashed dashed solid dashed;  border-color: transparent transparent #333 transparent;  } 

 .dome{ margin-top:10px; width:200px; padding:10px; text-align:center; background-color:#ccc; border:1px solid #666; position:relative; left:30px;}

 .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; }

 .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;}

 </style>

 </head>

 <body>

 <em class="triangle1"></em>

 <em class="triangle2"></em>

 <em class="triangle3"></em>

 <em class="triangle4"></em>

 <em class="rightdirection"></em>

 <em class="bottomdirection"></em>

 <em class="leftdirection"></em>

 <em class="topdirection"></em>

 <div class="dome">hello world</div>

 </body>

 </html>

运行结果如下图：

IE6的截图：

但是用伪类before，after的border在大IE6里不能做出三角形来，如要兼容IE6还得用新浪里的方法，或者用与新浪的相似，不过不是用特殊字符，而是也是用border做三角形，如下：

 <style>

 .dome{width:300px; padding:30px 20px; border:1px solid #beceeb; position:relative;}

 .dome .triangle{ position:absolute; bottom:0px; left:50px;}

 .dome .triangle .bot{

     _display:block;

     _line-height:0px;

     border-width:20px;

     border-style:solid dashed dashed dashed;

     border-color:#beceeb transparent transparent transparent;

     position:absolute;

     bottom:-40px;

 }

 .dome .triangle .top{

     _display:block;

     _line-height:0px;

     border-width:20px;

     border-style:solid dashed  dashed dashed;

     border-color:#FFF transparent transparent transparent;

     position:absolute;

     bottom:-39px;

 }

 </style>

 <div class="dome">

   <div class="triangle">

       <em class="bot"></em>

       <em class="top"></em>

   </div>

   <div class="txtBox">

      我是用border实现的三角形，html结构上跟新浪微博上的结构相似

   </div>

 </div>

码农公寓

相关文章