整理了一下之前用到过的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>

css代码整理、收集的更多相关文章

  1. css代码整理

    width:(宽度) height:(高度) border:1px solid red:(边框 :边框粗细 显示 颜色) border-radius:10deg:(边框变圆角) box-shadow: ...

  2. 转载网易博客：整理各大网站让网站变灰的css代码

    2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部 ...

  3. 在sublimen中整理CSS代码及其兼容性问题

    1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换  点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...

  4. html Css PC 移动端 公用部分样式代码整理

    css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li ...

  5. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  6. 整理及优化CSS代码的7个原则

    作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞 ...

  7. [No00007B]DreamweaverCC 的CSS代码格式化

    Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...

  8. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  9. 如何写出优雅的CSS代码 ？(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

随机推荐

  1. 一次不是事故的SSH闪断问题

    从前一天下午的一个瞬间,公司内所有的ssh 连接在没有任何征兆的情况下,全部开始闪断. 折腾了一天,关闭过SELinux, 清空过Iptables,软硬重启过服务器,交换机,路由,重新配置过sshd文 ...

  2. CSS jQuery 图片全屏切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. yarn资源调度（网络搜集）

    本文转自:http://www.itweet.cn/2015/07/24/yarn-resources-manager-allocation/ Hadoop YARN同时支持内存和CPU两种资源的调度 ...

  4. 【GoLang】golang 微服务框架 go-kit

    golang-Microservice Go kit - A toolkit for microservices kubernetes go-kit_百度搜索 Peter Bourgon谈使用Go和& ...

  5. angularJs项目实战！04：angularjs的性能问题

    上一篇文章中我花了很多口舌去介绍angularjs是一个中型框架,面对大型应用时少不了第三方类库的配合.而我的核心议题是:如何以angularjs的思路使用其他类库,这里jquery是最好的例子了,谁 ...

  6. C51系列RAM寄存器表

    特殊功能寄存器地址表 SFR 符号 字节 地址 位地址和位名称 D7 D6 D5 D4 D3 D2 D1 D0 P0口 P0 80H P0.7 P0.6 P0.5 P0.4 P0.3 P0.2 P0. ...

  7. hdu5136：组合计数、dp

    题目大意: 求直径长度为N的无根二叉树的个数(同构的只算一种) 分析: 分析发现直径长度不好处理!因此考虑把问题转化一下: 假设要求直径为N的二叉树 (1) 若N为偶数,将树从直径中点的边断开,则分成 ...

  8. Onlylady介绍

    Onlylady介绍 Onlylady介绍

  9. http常见错误

    100:继续  客户端应当继续发送请求.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应. 101: 转换协议  在发送完这个响应最后的空行后,服务器将会切换到在Upgrade 消 ...

  10. Android文字的复制和粘贴

    Android中提供了简单的额复制粘贴功能.代码很简单 复制文字的代码: ClipboardManager cbm= (ClipboardManager) MainActivity.this .get ...