整理了一下之前用到过的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. MySQL 学习笔记 (它执行的步骤)

    基本步骤是 : (不是很准,请看完这篇) 1.from 2.join on 3.where 4.group by 5.having 6.order by 7.select 8.distinct ,su ...

  2. Android——在活动中使用Menu

    ADT在HelloWorldActivity中自动创建了一个onCreateOptionsMenu()方法.这个方法是用于在活动中创建菜单的,现在我们来仔细分析一下了.手机毕竟和电脑不同,它的屏幕空间 ...

  3. char和int的转换

    import java.util.Scanner; public class test7 { public static void main(String[] args) { // TODO Auto ...

  4. lesson3.1:java公平锁和非公平锁及读写锁

    关于这四种锁的各自情况,网上有很多文章做了介绍,本不想单独开章节介绍,本章只介绍这四种锁的一些源码特点及注意事项. demo 源码:https://github.com/mantuliu/javaAd ...

  5. UITextView换行问题解决办法

    在UITextView中输入数据时常会遇到换行显示问题,不要再xib中输入text内容,要通过代码输入,换行处加上\r\n,即可以实现换行

  6. DB2 错误编码 查询（一）（转）

    size=medium][/size]本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码 类代码含义 要获得 ...

  7. Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现

    UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...

  8. JDK版本错误：Unsupported major.minor version 51.0

    错误原因 有时候把项目从本机编译文件部署到服务器,或者发给别人使用时,会报如下异常: java.lang.UnsupportedClassVersionError: test_hello_world ...

  9. 深入浅出 RPC - 浅出篇

    近几年的项目中,服务化和微服务化渐渐成为中大型分布式系统架构的主流方式,而 RPC 在其中扮演着关键的作用.在平时的日常开发中我们都在隐式或显式的使用 RPC,一些刚入行的程序员会感觉 RPC 比较神 ...

  10. Intent 意图 结构 简介

    Intent简介 官方解释: An intent is an abstract description of an operation操作 to be performed展示.表演. It can b ...