css样式之导航条(nav)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*去掉ul的样式*/
        ul{
            list-style:none;
        }
        /*去掉a标签的下划线*/
        a{
            text-decoration: none;
        }
        /*设置.nav的宽高、居中显示、下边框样式*/
        .nav{
            width: 970px;
            height: 25px;
            margin: 0 auto;
            border-bottom: 2px solid #0266A3;
        }
        /*line-height: 25px;与父元素.nav的height一样，使得li居中显示*/
        .nav li{
            padding:0 15px 0 15px;
            line-height: 25px;
            float: left;
            font-size: 14px;
            font-weight: bold;
        }
        /*a标签不能继承父标签的颜色，所以需要单独设置a标签中的字体颜色*/
        .nav li a{
            color: #0266A3;
        }
        /*当鼠标移动到li标签时，背景颜色变成#0266A3*/
        .nav li:hover{
            background-color:#0266A3 ;
        }
        /*当鼠标移动到li标签时，a标签中的字体颜色变成#0266A3*/
        .nav  li:hover  a{
            color: white;
        }
    </style>
</head>
<body>
<div class="nav">
    <!--href="#":阻断a标签跳转刷新页面-->
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">百度</a></li>
        <li><a href="#">联想</a></li>
        <li><a href="#">戴尔</a></li>
    </ul>
</div>
</body>
</html>

ps: CSS中的background和background-color的区别
background可以定义背景的一切内容，包括颜色图片，图片位置

background：red 10px 5px; //设置背景颜色为红色，x方向移动10，y方向5

background：url(path); //path为图片的路径

background-color只可以定义背景颜色

css样式之导航条(nav)

猜你喜欢