css技巧

标签（空格分隔）： css

---

1.水平导航栏

html代码

<div class="nav">    <ul>        <li>            <a href="index.htm/">首页</a>        </li>        <li>            <a href="introduce.htm/">业务介绍</a>        </li>        <li>            <a href="agent.htm/">加盟代理</a>        </li>        <li>            <a href="cooperate.htm/">招商合作</a>        </li>        <li>            <a href="partner.htm/">合作伙伴</a>        </li>        <li>            <a href="help.htm/">帮助中心</a>        </li>    </ul></div>

css代码

.nav{    position: relative;    top:-19px;    left: 207px;    width: 791px;}.nav ul{    width: 791px;    overflow:hidden;}ul>li{    float: left;/**这个是重点***/    height: 25px}.nav ul>li>a{    padding-left: 40px;    display:block;    width: 72px;    height: 25px;    font-size: 18px;    text-align:center;    text-decoration:none;}

效果图

2.首行缩进

text-indent:10px;/*****大小根据实际情况*****/

3.无序列表前面有图片

 ul>li{    width: 291px;    height: 21px;    text-indent: 20px;/****空出来显示图标*********/    font-size: 12px;    background: url(../img/li.gif) 0 4px no-repeat;/***设置图标***/}

4.垂直居中

参考自Vertical-centering

line-heigth:

html

<div id="parent">  <div id="child">Text here</div></div>

css

#parent {    line-height: 200px;}#parent #child{    vertical-align: middle;}

效果

table-cell

html

<div id="parent">  <div id="child">Content here</div></div>

css

#parent {display: table;}#child {  display: table-cell;  vertical-align: middle;}

效果

Absolute Positioning and Negative Margin

html

<div id="parent">    <div id="child">Content here</div></div>

css

#parent {position: relative;}#child {    position: absolute;    top: 50%;    left: 50%;    height: 30%;    width: 50%;    margin: -15% 0 0 -25%;}

效果

Equal Top and Bottom Padding

html

<div id="parent">    <div id="child">Content here</div></div>

css

#parent {    padding: 5% 0;}#child {    padding: 10% 0;}

效果

Floater Div

html

<div id="parent">    <div id="child">Content here</div></div>

css

#parent {height: 250px;}#floater {    float: left;    height: 50%;    width: 100%;    margin-bottom: -50px;}#child {    clear: both;    height: 100px;}

效果