小白到大神之相关经典案例

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)

0基础小白如何学接口测试?一文讲解接口自动化之python案例脚本

打怪升级之小白的大数据之旅(七十)<Hive旅程终点站:Hive的综合案例>