互动导航条

摘自《网页开发手记》

1、效果图：

2、html代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>互动导航条布局</title>
    <style type="text/css">
        *{
            margin: 0px; padding: 0px
        }
        ul{
            list-style: none;
        }
        #nav{
            width: 425px;
            height: 22px;
            margin: 0px auto;
            background-color: #dddddd;
        }
        li{
            width: 98px;
            height: 20px;
            border: 1px solid #d00;
            margin-left: 5px;
            text-align: center;
            color: #333;
            background-color: #cf3;
            float: left;
        }
        li:hover{
            background-color: #69c;
            color: #fff;
        }
        li:active{
            background-color: #f00;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>
            <a href="#" title="这是首页的链接">首页</a>
        </li>
        <li>
            <a href="#" title="这是产品的链接">产品</a>
        </li>
        <li>
            <a href="#" title="这是企业文化的链接">企业文化</a>
        </li>
        <li>
            <a href="#" title="这是留言区的链接">留言区</a>
        </li>
    </ul>
</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/dszgf5717/article/details/47048939
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-09-04 16:16:04
阅读 ( 1028 )
分类：

互动导航条

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看