小白到大神之相關經典案例
一.滑動門制作導航欄
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li,nav{
margin: 0;
padding: 0;
}
.nav{
height: 75px;
background: url(weixin_bg1d20af.jpg);
}
.nav-con{
width:600px;
/*height: 75px;不需要設置高度,自動繼承*/
margin: 0 auto;//定位盒子居中(導航欄居中)
}
li{
float: left;
list-style: none;
margin-right: 50px;
height: 75px;
line-height: 75px;//設置高度和行高為父盒子的高度可以讓垂直居中於父盒子
}
a{
text-decoration: none;
display: inline-block;
height: 33px;
line-height: 33px;
background: url(bg.png) no-repeat 0 -144px;
color: #fff;
padding-left: 15px;
}
a span{
background: url(bg.png) right -144px;
display: inline-block;
height: 33px;
padding-right: 15px;
}
a:hover{
background: url(bg.png) 0 -192px;
}
a span:hover{
background: url(bg.png) right -192px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-con">
<ul>
<li><a href="#"><span>新浪</span></a></li>
<li><a href="#"><span>百度</span></a></li>
<li><a href="#"><span>阿裏巴巴</span></a></li>
</ul>
</div>
</div>
</body>
</html>
效果圖：
會填充，更換了背景圖片。
相關知識：
1.使用height和line-height可以使得文本在垂直方向中居中，常用在在導航欄中讓鏈接在垂直方向中居中
比如說，有一行20px大小的文字，如果設置為line-height:50px，那就是說，這行文字的高度會占50px。
顯然，每個字的大小只有20px，那怎麽邊呢？於是呢，瀏覽器就把多出來的30px（50px-20px）在這行文字的上面加上了15px，
下面加上了15px。這樣的話，那文字就在這50px的空間內是居中的了（這個就是瀏覽器規定的，
它就這個分配空間）。這樣的話，如果你的DIV是50px，那麽巧了，正好這行文字也就相對於DIV居中了
所以，這樣一來呢，就有了“把line-height設置為容器div的高度就能使文字垂直居中”。
2.
小白到大神之相關經典案例