效果一样，不知道这样好不好

源自：3-7 编程练习

效果一样，不知道这样好不好

提问者：ConsoleDot 2015-02-24 18:09

个回答

honpery: 2015-02-24 20:16:00

其实我也是自学的，有很多的地方也不知道好不好，前段时间自己研究了下，遇到有分割线的导航栏或者横向的列表，贴出来了，互相学习哈，求指点~

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        /* reset */
        body,ul,li { margin:0; padding:0; list-style:none; }
        a { text-decoration:none; }
        /* reset end */

        /* common */
        .clear {
            clear:both;
        }
        .clear:after {
            content:"";
            display:block;
            zoom:1;
        }
        /* common end */

        /* nav */
        .nav {
            /* 便于观察 */
            border:1px solid #eee;
            float:left;
        }
        .nav li {
            float:left;
            width:100px;
            height:50px;
            text-align:center;
        }
        .nav a {
            display:block;
            height:16px;
            border-left:1px solid #000;
            color:#000;
            font-size:16px;
            margin-top:17px;
        }
        .nav .first a {
            border:0;
        }
        .nav a:hover {
            color:#aca;
        }
        /* nav end */
    </style>
</head>
<body>
    <!-- nav -->
    <ul class="nav clear">
        <li class="first"><a href="#">你</a></li>
        <li><a href="#">我</a></li>
        <li><a href="#">他</a></li>
        <li><a href="#">她</a></li>
        <li><a href="#">它</a></li>
    </ul>
    <!-- nav end -->
</body>
</html>