31.导航条练习 - 《CSS》

html:
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/62导航条练习.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">HTML/CSS</a>
            </li>
            <li>
                <a href="#">Browser Side</a>
            </li>
            <li>
                <a href="#">Server Side</a>
            </li>
            <li>
                <a href="#">Programming</a>
            </li>
            <li>
                <a href="#">XML</a>
            </li>
            <li>
                <a href="#">Web Building</a>
            </li>
            <li>
                <a href="#">Reference</a>
            </li>
        </ul>
    </div>
</body>
</html>

每一个li元素，包裹a

css:
（1）首先对整个页面进行一个整体的构造
宽高、背景颜色、margin，然后一一修改细节

（2）因为a是一个行内元素，需要无法进行叠加操作，所以使用display:block，将其变为块元素，同时使用float，使其流动，然后因为每个元素中间有空间，采用padding：xpx；使得导航栏分开

（3）最后一个导航栏，无法完全铺满位置，所以对.nav li:last-child a{} 进行单独的padding设置，使得完全铺满整个父元素注意这个伪类的使用在最后一个孩子中，找到a {}

（4）进行一些其他额外的设置，去除下划线，修改颜色，设置行高与height相同，使得文字内容垂直居中，还要设置好hover;
(5)整合padding宽度时，浏览器点F12,点击某个元素之后，再点style，找到想修改的css值,方向键左右修改值的大小即可

代码：

.nav {
    width: 1210px;
    height: 48px;
    background-color: #E8E7E3;
    margin: 100px auto;
}

.nav li a{
    display: block;
    float: left;
    padding: 0 39px;
}

/* .nav li:lastchild a {
    padding: 0 42px 0 42px;
} */
.nav li:last-child a{
    padding: 0 41px 0 41px;
} 

.nav li a:hover {
    background-color: #DEDDD9;
}
.nav li a{
    text-decoration: none;
    color: #868685;
    font-size: 18px;
    height: 48px;
    line-height: 48px;
}