小白到大神之相关经典案例
Posted 君临天下丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白到大神之相关经典案例相关的知识，希望对你有一定的参考价值。
一.滑动门制作导航栏
代码：
<!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.
以上是关于小白到大神之相关经典案例的主要内容，如果未能解决你的问题，请参考以下文章
从小白到大神程序员必读15本经典电子书免费送第二季（先到先得）
经典排序算法系列之插入排序和希尔排序----小白理解(python)