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

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;
}