css代码整理、收集

整理了一下之前用到过的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代码整理、收集的更多相关文章

css代码整理
width:(宽度) height:(高度) border:1px solid red:(边框 :边框粗细显示颜色) border-radius:10deg:(边框变圆角) box-shadow: ...
转载网易博客：整理各大网站让网站变灰的css代码
2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部 ...
在sublimen中整理CSS代码及其兼容性问题
1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...
html Css PC 移动端公用部分样式代码整理
css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li ...
div+css通用兼容性代码整理
一.Div+css通用兼容性代码你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...
整理及优化CSS代码的7个原则
作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞 ...
[No00007B]DreamweaverCC 的CSS代码格式化
Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...
30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...
如何写出优雅的CSS代码？(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

随机推荐

导入表 IMPORT_DESCRIPTOR
typedef struct _IMAGE_IMPORT_DESCRIPTOR { union { DWORD Characteristics; // 0 for terminating null i ...
[LeetCode 112 113] - 路径和I & II (Path Sum I & II)
问题给出一棵二叉树及一个和值,检查该树是否存在一条根到叶子的路径,该路径经过的所有节点值的和等于给出的和值. 例如, 给出以下二叉树及和值22: 5 / \ 4 8 ...
Android开发程序获取GPS信息步骤
1.获取LOCATION_SERVICE系统服务.2.创建Criteria对象,调用该对象的set方法设置查询条件.3.调用LocationManager.getBestProvider(Criter ...
理解ATL中的一些汇编代码（通过Thunk技术来调用类成员函数）
我们知道ATL(活动模板库)是一套很小巧高效的COM开发库,它本身的核心文件其实没几个,COM相关的(主要是atlbase.h, atlcom.h),另外还有一个窗口相关的(atlwin.h), 所以 ...
POJ 2135 Farm Tour
题目大意:有一个无向图..农夫从1号点出发..要到达N号点..然后回到1号点..来回不能走相同的路径..问最短的距离是多少. 题解:又是不能走重复路径!基本图论算法直接扔掉上网络流.不能相同就边限1, ...
Jquery伪选择器学习笔记
对于我这个半路出家的前端,使用jquery已经很长时间了,对于选择器,一直都局限在id,class,element选择器.每次写一个元素都得想一个id,一个页面写下来想id名都想的累的慌.最近手头项目 ...
POJ-2386(深广搜基础)
Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 25322 Accepted: 12759 D ...
Engineering Economics
相关简介工程经济学 –-研究各种技术在使用过程中如何以最小的投入获得预期产出或者说如何以等量的投入获得最大的产出: –-如何用最低的寿命周期成本实现产品.作业以及服务的必要功能. 软件工程经济学工 ...
数据库和linq中的 join（连接）操作
sql中的连接 sql中的表连接有inner join,left join(left outer join),right join(right outer join),full join(full o ...
parcel write boolean值
http://stackoverflow.com/questions/6201311/how-to-read-write-a-boolean-when-implementing-the-parcela ...

css代码整理、收集

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

随机推荐

热门专题