超链接导航栏案例

设置一个基本网页的导航栏就是可以在居中显示并且是浏览的时候可以变颜色的

就是这种样式的

html结构：

<body>
<div class="nav">
    <ul>
        <li>
            <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="">网站导航</a>
        </li>
    </ul>

</div>
</body>

写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面

首先我们要做导航栏，并排显示元素，第一想 浮动，想到使用浮动之后，一定记得清除浮动元素。

 

css代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;  /*去除li前的黑点*/
        }
        .nav{
            width:1000px;
            overflow: hidden;/*清空浮动*/
            margin:100px auto;/*居中*/
            background-color: gray;
            border-radius:5px;  /*圆角*/

        }
        .nav ul li{
            float:left;
            width:160px;
            height:40px;
            line-height:40px;
            text-align: center; /*字体居中*/
        }
        .nav ul li a{
            display:block; /*转化为块标签*/
            width:160px;
            height:40px;
            color:white;
            font-size: 20px;
            text-decoration: none;  /*清除a标签下的横线*/
            font-family: "宋体";
        }
        /*设置经过时的a的颜色字体*/
        .nav ul li a:hover{
            background-color:yellow;
            font-size:22px;
        }
    </style>
</head>

 

posted @ 2018-05-25 19:19  可爱的红领巾  阅读(473)  评论(0)  编辑  收藏  举报