本学期期末考如图所示，我们主要靠css样式的应用。div虽然很烦，但是和css搭配好就很简单哦！

如图，首先打开编译软件，比如我下的vscode,这个软件还要搭配谷歌浏览器一起使用。（就我个人而言下了谷歌，当然还可以搭配其他的一起，目前没看见360浏览器

首先映入眼帘的是一个导航栏，如上图橙色部分

nav代码：

/*nav 代码如下*/

<div class="nav">

    <ul>

       <li><a href="https://news.sina.com.cn" target="_blank">新闻</a></li>

    <li><a href="https://finance.sina.com.cn" target="_blank">财经</a></li>

    <li><a href="https://tech.sina.com.cn" target="_blank">科技</a></li>

    <li><a href="http://sports.sina.com.cn" target="_blank">体育</a></li>

    <li><a href="https://ent.sina.com.cn" target="_blank">娱乐</a></li>

    <li><a href="https://auto.sina.com.cn" target="_blank">汽车</a></li>

    <li><a href="https://nc.leju.com" target="_blank">房产</a></li>

    <li><a href="http://edu.sina.com.cn" target="_blank">教育</a></li>

        <li><a href="http://travel.sina.com.cn" target="_blank">旅游</a></li>

    </ul>

</div>

/*修饰CSS代码部分*/

@charset "utf-8";

/* CSS Document */

*

{/*几乎每个css开头一定要写，目的是内边距和外边距都设置为0，且0 可以不用打px哈*/

     padding:0;

     margin:0;  

}

.nav

{/*宽度是百分比，也就是按照显示屏的比例来，不论放大或者缩小页面都可以看到宽度是一整个；当然也可以设置具体的像素值*/

     width:100%;

/*宽度是五十个像素值*/

     height:50px;

/*背景色默认橙色*/

     background-color:#996;

/*此时nav的上下边距10px ,左右自动*/

     margin:10px auto;

}

.nav ul

{

    width:900px;

    height:50px;

    margin:0 auto;

}

.nav ul li

{

    width:100px;

    height:50px;    

    float:left;

    list-style:none;

    text-align:center;

    line-height:50px;

    position:relative;

    z-index:99;

}

.nav ul li:before

{

    content:"";

    width:80px;

    height:40px;    

    background-color:#09C;

    border-radius:20px;

    position:absolute;

    top:6px;

    left:10px;

    z-index:-99;

    display:none;  

}

.nav ul li:hover::before

{

    display:block;

}

.nav ul li a

{

     color:#333;

     text-decoration:none;  

}

.nav ul li a:hover

{

     color:#FFF;    

}

.nav ul li:first-child::after

{

     content:url(img/saojiao.png);

     position:absolute;

     top:-7px;

     left:40px;

     display:none;  

}

.nav ul li:first-child:hover::after

{

    display:block;

}