web前端开发导航栏的简单实现

最新推荐文章于 2024-03-19 20:09:28 发布

小黄小黄干啥都黄

最新推荐文章于 2024-03-19 20:09:28 发布

阅读量6.7k

点赞数 13

文章标签： web html css

本文链接：https://blog.csdn.net/huangxiansheng29/article/details/106179135

版权

制做一个简单的导航栏

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
	<!--<meta charset="utf-8" />-->
</head>
<body>
    <div id="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>
            <li class="last"><a href="#">留言反馈</a></li>
        </ul>
    </div>
</body>
</html>

<style>

      *{
        margin:0px;
        padding:0px;
    }
    body{
        width:867px;
        margin:0px auto;
        background:#ffffff url(../images/bg.gif);
    }
    #top{
        /*border:1px solid #F00;*/
        width:867px;
        height:323px;
    }
    #nav{
       
        width:1000px;
        height:51px;
        background:url(../images/linkbg.jpg);
    }

    #nav ul{
        list-style:none;
    }
    #nav ul li{
        /*border:1px solid #0F0;*/
        width:123px;
        float:left;
        height:51px;
        line-height:51px;
        text-align:center;
        background:url(../images/linkr.gif);
        background-repeat:no-repeat;
        background-position:right center;
    }
    #nav .last{
        background:none;
    }
    #nav a{
        color:#FFF;
        text-decoration:none;
        /*border:1px solid #FFF; */
        display:block;
        width:123px;
    }
    #nav a:hover{
        color:#FF0;
        text-decoration:underline;
        font-weight:bold;
    }



</style>

在这里插入图片描述效果图

小黄小黄干啥都黄

关注

13
点赞
踩
60

收藏

觉得还不错? 一键收藏
0
评论
web前端开发导航栏的简单实现

做一个简单的导航栏html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <!--<meta charset="utf-8" />--&gt
复制链接

扫一扫