Home > Developer > JavaScript
Css notes, css
Css notes
First: common global CSS attribute settings // refer to large websites, such as Phoenix (1) Clear all the internal and external margins of the TAG body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin: 0; padding: 0} (2) Project symbol ul, ol, li {list-style: none;} (3) Global font color settings body {font-size: 12px; color: #444;} (4) set common titles h1, h2, h3, h4, h5, h6 {font-size: 100%} h1 {padding: 11px 0 0; margin-bottom: 4px; font: normal 20px/30px; text-align: center;} h2 {padding: 6px 0 0; margin-bottom: 4px; font: normal 20px/30px; text-align: center;} h3 {font-size: 12px} h4 {font-size: 12px; font-weight: normal} (5) global link a {text-decoration: none; cursor: pointer} a: link, a: visited {color: #004276} a: hover {text-decoration: underline; color: # ba2636} (6) img {border: none;} ie6: The image has a border, which causes compatibility issues. Go to border (7) float and clear. float1 {float: left ;}. float2 {float: right }. clear {clear: both ;}. blank10 {height: 10px; clear: both;} Add a blank div to solve the problem that the upper and lower margins of div margin will be merged. compatibility problem (8) color. red {color: # FF0000 ;}. blue {color: # 0000FF ;}. green {color: #00ff00;} install IETEST to test the center of ie 6 (1) ie5 web page center IE5. This should be added to body {text-align: center, add {text-align: left;} to the center in the largest div, which should be: margin: 0px auto; body {text-align: center ;}. box {margin: 0 auto; text-align: left ;}< body> <div class = "box"> xx </div> </body> (2) vertical Div {height: 80px; line-height: 80px;} (3) When elements in IE are floating, the problem about doubling margin is solved: Display: inline; margin: 0 auto; ie6 still does not work (1) solve the problem that the margin of margin is doubled under Ie6, the margin is merged, the margin is merged due to compatibility issues, and the div {height: 10px ;}. div1 {width: 200px; height: 200px; background-color: # 0000FF; margin: 50px; float: left; display: inline ;} // display of the first div solves the problem of intra-row style. "The left and right margin of margin will be doubled under ie6 ". div2 {width: 200px; height: 200px; background-color: # 0000FF; margin: 50px; float: left ;} <body> <div class = "div1"> </div> <div class = "div2"> </div> (4) solution to achieving 1px height <div> in IE6: overflow: hidden; // hide all the parts beyond 1px <div style = "width: 100px; height: 1px; overflow: hidden; "> </div> // hide the excess part.
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
