首頁 > 開發者 > JavaScript
css代碼整理、收集，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="images/zy_19.jpg" /></a><a href="javascript:void(0);" class="link_img"><img src="images/pro3.jpg" /></a>
css:border實現的三角形
如要實現汽包，如新浪微博裡的，新浪裡用到的是的是特殊字元“◆”，，能實現相容到IE6，html代碼結構上不簡潔了，在html裡要多寫了class為”WB_arrow“的一層代碼，
要簡潔點，只能用border與偽類before，after了，附代碼如下：
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>View Code
運行結果如：
IE6的：
但是用偽類before，after的border在大IE6裡不能做出三角形來，如要相容IE6還得用新浪裡的方法，或者用與新浪的相似，不過不是用特殊字元，而是也是用border做三角形，如下：
1 <style> 2 .dome{width:300px; padding:30px 20px; border:1px solid #beceeb; position:relative;} 3 .dome .triangle{ position:absolute; bottom:0px; left:50px;} 4 .dome .triangle .bot{ 5 _display:block; 6 _line-height:0px; 7 border-width:20px; 8 border-style:solid dashed dashed dashed; 9 border-color:#beceeb transparent transparent transparent;10 position:absolute;11 bottom:-40px;12 }13 .dome .triangle .top{14 _display:block;15 _line-height:0px;16 border-width:20px; 17 border-style:solid dashed dashed dashed; 18 border-color:#FFF transparent transparent transparent;19 position:absolute;20 bottom:-39px; 21 } 22 </style>23 24 <div class="dome">25 <div class="triangle">26 <em class="bot"></em>27 <em class="top"></em>28 </div>29 <div class="txtBox">30 我是用border實現的三角形，html結構上跟新浪微博上的結構相似31 </div>32 </div>
我將此CSS的選擇符按照類、元素、ID分類，將屬性按照W3C CSS Level 2.0進行排序；並且合并了相同的屬性，去掉了重複定義，就是這樣的工作200分絕對值了！================================================A,A:link,A:visited, #set_cs td { COLOR: #000000;}a.modact:hover, a.modtit:hover, a.modtitlink:hover { color: #CCCCCC; text-decoration: underline;}body{ background: url() repeat-x; color: #FFFFFF; background: #222222;}.mod, #m_albumlist .phbox .phimg { margin-bottom: 10px;}.modact, #in_comment div.desc { color: #FFFFFF; font-size: 12px;}.modbc{ background: url(
) repeat-x;}.modbl{ background: url(
) no-repeat top left; line-height: 1px;}.modbox{ border: 1px solid #666666; border-width: 0 1px 0 1px; padding: 10px 10px 0 10px; background: #000000;}.modbr{ background: url(
) no-repeat top right; line-height: 1px;}.modhandle{ cursor: move;}.modhead{ padding: 4px 4px 0 4px;}.modlabel{ color: #FFFFFF; font-size: 14px; font-weight: bold;}.modopt{ padding: 4px 4px 0 0;}.modtc{ background: url(
) repeat-x;}.modth{ height: 24px;}.modtit, .modtitlink { color: #FFFFFF; font-size: 12px; font-weight: bold;}.modtl{ background: url(
) no-repeat top left; line-height: 1px;}.modtr{ background: url(
) no-repeat top right; line-height: 1px;}.stage{ background: #000000;}.stage #layout td{ padding: 0px;}#comm_info{ font-family: Arial; text-align: left;}#comm_info div.line{ border-top: 2px solid #FF3333; margin-bottom: 10px; margin-top: 4px; padding-bottom: 32px; background: url() no-......餘下全文>>
css常用代碼有什 有人整理出來叻嘛？
常用代碼？什麼意思？
CSS所有的選取器及其屬性，都是常用代碼。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
