考试题

第一题

代码：
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;

    }
    .nav{
        list-style: none;
        width: 960px;
        height: 22px;
        /*background-color: skyblue;*/
        margin: 50px auto;
        padding: 10px 0px;
        border: 1px solid #dddddd;
        
    }
    li{
        float: left;
        /*padding: 2px 0px;*/
        width: 10%;
    }
    
     a{
        display: block;
        width: 100%;
        text-align: center;
        line-height: 22px;
        text-decoration: none;
        /*padding: 5px 0px;*/
        display: block;
        color: #333333;
        font: 14px "雅黑" #333；
        padding: 10px 0px;
        border-right: 1px solid #d19133;
        /*border-left: 1px solid #6eb1ec;*/

    }
    a:hover{

        color: #ff0000;
    }
    li.b{
        visibility: hidden;
    }
</style>
</head>
<body>
<ul class="nav">
    <li class="b"><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">网站建设</a></li>
    <li><a href="#">程序开发</a></li>
    <li><a href="#">网络营销</a></li>
    <li><a href="#">企业VI</a></li>
    <li><a href="#">案例展示</a></li>
    <li><a href="#">联系我们</a></li>
    <li class="b"><a href="#">联系我们</a></li>
</ul>
</body>
</html>

效果：

image.png

第二题

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        
        height: 20px;
        width: 33px;
        background-image: url(1.png);

        /*background-repeat: no-repeat;*/
        /*margin: 0px auto;*/
        margin: 0px 525px;
        /*margin: 0px auto;*/
        position: relative;
        top: 10px;
        z-index: 100;

        /*
        background-position: 435px 36px;
        background-repeat: no-repeat;*/
    /*  background-color: skyblue;*/
    }
    .nov{
        position: relative;
        list-style: none;
        width: 960px;
        height: 40px;
        background-color: #52a6ec;
        margin: 0px auto;
        /*padding: 1px 0px;*/
        /*background-image: url(1.png);
        background-position: 435px -5px;
        background-repeat: no-repeat;*/

    }
    li{
        width: 100px;
        float: left;
    /*  margin: 5px 0px;*/
    }
    li:hover{
        background-color: #0060a4;
    }
    a{
        display: block;
        width: 100%;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        color: #fbfbef;
        font: 14px "雅黑" #fff;
    }
/*  li.b a{
        background-image: url(1.png);
        background-position: 435px -5px;
        background-repeat: no-repeat;

    }*/
</style>
</head>
<body>
<div></div>
<ul class="nov">
    <li><a href="">首页</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">程序开发</a></li>
    <li><a href="">网络营销</a></li>
    <li class="b"><a href="">企业VI</a></li>
    <li><a href="">案例展示</a></li>
    <li><a href="">联系我们</a></li>
</ul>
</body>
</html>

效果：

image.png