Css code sorting and collection and css code collection

Css code sorting and collection and css code collection

I have sorted out the css code that I have used before, and there may be many ways to implement one effect. Here I have sorted out the code that I personally think is compatible and has a simple structure ...... If you have written something wrong, please give me some advice from our elders. Thank you! This learning note is dynamic-I found a good piece of code later in my day, which will be added in succession.

 

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);"> Hi, I am a css ellipsis and support various browsers, including IE6 </a> <a href = "javascript: void (0);"> Hi, I am a css ellipsis and support various browsers, including Internet Explorer 6 </a> </div>

 

Move the mouse over and the image fades in a bit.

That is, the opacity and transition Implementation are used. The following is the case of Darkness:

<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"></a><a href="javascript:void(0);" class="link_img"></a>

 

Css: triangle implemented by border

For example, Sina Weibo uses the special character "◆", which is compatible with IE6. the html code structure is not concise, in html, you need to write an additional layer of Code whose class is "WB_arrow,

To be concise, only border and pseudo class before and after can be used. The following code is included:

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

The running result is as follows:

IE6:

However, with the pseudo-class before, after border cannot make triangles in IE6. To be compatible with IE6, you must use Sina's method or use a method similar to Sina's, instead of using special characters, border is used as a triangle, as shown below:

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; 9 border-color: # beceeb 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; 18 border-color: # FFF 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. I use a triangle implemented by border, the html structure is similar to that on Sina Weibo 31 </div> 32 </div>

 

Who can help me sort out the css code?

I sorted the CSS selector by class, element, and ID, sorted the attributes by W3C CSS Level 2.0, and merged the same attributes, removing repeated definitions, this is the absolute value of 200 points! ========================================================== =========, A: link, A: visited, # set_cs td {COLOR: #000000;}. modact: hover,. modtit: hover,. 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 -...... remaining full text>


Do some common css code have been sorted out?

Common Code? What does it mean?
All the selectors and their attributes of CSS are common code.