JS实习生

导航

天梯导航栏 

<!DOCTYPE html>
<html>
<head>
    <title>天梯导航栏</title>
    <meta charset="utf-8">
    <meta name='keyname' centent='关键字'>
    <meta name='description' centent='内容1'>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box{
            position:fixed;/*以浏览器窗口定位元素*/
            bottom:50px;
            width:36px;
            height:370px;
        }
        .box ul.box-a > li{
            width:24px;
            height:24px;
            margin-bottom:1px;
            padding:6px;
            background-color:#D9D9D9;
            text-align:center;
            font-size:12px;
            line-height:12px;
        }
        .box ul.box-a li.nav{
            line-height:24px;
            background-color:#ff0034;
        }
        .box ul.box-a li.top{
            line-height: 24px;
            background-color:#ababab;
        }
    </style>
</head>

<body>
    <div class='box'>
        <ul class='box-a'>
            <li class='nav'>导航</li>
            <li class='market'>天猫超市</li>
            <li class='international'>天猫国际</li>
            <li class='life'>美丽人生</li>
            <li class='play'>潮电酷玩</li>
            <li class='live'>居家生活</li>
            <li class='love'>打造爱巢</li>
            <li class='outside'>户外出行</li>
            <li class='enjoy'>猜你喜欢</li>
            <li class='top'>顶部</li>
        </ul>
    </div>
</body>
</html>

1.盒子box定位,这个盒子是以浏览器为参考物所以设置position:fixed;

2.让字体自动换行,需要改变li盒子的内边距(padding),把padding设置为6px

3.导航和顶部垂直居中,需要单独去设置它们的内边距,因为li盒子的内边距(padding)为6px,让li盒子高度变为了24px,所以只需要把line-height设置为24px即可

posted on 2018-04-03 18:10  多特  阅读(122)  评论(0)  编辑  收藏  举报