web布局最实用的12条css技巧

  1：Rounded corners without images

效果图——

Rounded corners without images

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom { display : block }
.rtop *, .rbottom * { display :  block ;  height :  1px ;  overflow :  hidden }
.r1 { margin :  0 5px }
.r2 { margin :  0 3px }
.r3 { margin :  0 2px }
.r4 { margin :  0 1px ;  height :  2px }  

2：Style your order list

效果图——

Style your order list

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol  {
font :  italic 1em Georgia, Times, serif ;
color :  #999999 ;
}
ol p  {
font :  normal .8em Arial, Helvetica, sans-serif ;
color :  #000000 ;
}  

3：Tableless forms

效果图——

Tableless forms

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input  {
display :  block ;
width :  150px ;
float :  left ;
margin-bottom :  10px ;
}

label  {
text-align :  right ;
width :  75px ;
padding-right :  20px ;
}

br  {
clear :  left ;
}  

4：Double blockquote

效果图——

Double blockquote

blockquote:first-letter  {
background :  url(images/open-quote.gif) no-repeat left top ;
padding-left :  18px ;
font :  italic 1.4em Georgia, “Times New Roman”, Times, serif ;
}  

5：Gradient text effect

效果图——

Double blockquote

<h1><span></span>CSS Gradient Text</h1>

h1  {
font :  bold 330%/100% “Lucida Grande” ;
position :  relative ;
color :  #464646 ;
}
h1 span  {
background :  url(gradient.png) repeat-x ;
position :  absolute ;
display :  block ;
width :  100% ;
height :  31px ;
}

<!–[if lt IE 7]>
<style>
h1 span  {
background :  none ;
filter :  progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’) ;
}
</style>

6：Vertical centering with line-height

效果图——

Vertical centering with line-height

div {
height : 100px ;
}
div * {
margin : 0 ;
}
div p {
line-height : 100px ;
}
<p>Content here</p> 

7：Rounded corners with images

效果图——

Rounded corners with images

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>

CONTENT

<div class=”roundbottom”>
<img src=”bl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>

.roundcont  {
width :  250px ;
background-color :  #f90 ;
color :  #fff ;
}

.roundcont p  {
margin :  0 10px ;
}

.roundtop  {
background :  url(tr.gif) no-repeat top right ;
}

.roundbottom  {
background :  url(br.gif) no-repeat top right ;
}

img.corner  {
width :  15px ;
height :  15px ;
border :  none ;
display :  block !important ;
}

8：Multiple class name

<img src="image.gif" class="class1 class2" alt="" />

.class1  {  border : 2px solid #666 ;   }
.class2  {
padding : 2px ;
background : #ff0 ;
}  

9：Center horizontally

效果图——

Center horizontally

<div id=”container”></div>
#container  {
margin : 0px auto ;
}  

10：CSS Drop Caps

效果图——

CSS Drop Caps

<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>

p.introduction:first-letter  {
font-size  :  300% ;
font-weight  :  bold ;
float  :  left ;
width  :  1em ;
}  

11：Prevent line breaks in links, oversized content to brake

a {
white-space : nowrap ;
}

#main {
overflow : hidden ;
}

12：Show firefox scrollbar, remove textarea scrollbar in IE

html {
overflow : -moz-scrollbars-vertical ;
}

textarea {
overflow : auto ;
}