万能兼容所有浏览器导航条-学习笔记

最新推荐文章于 2022-04-21 15:05:13 发布

芝芝小笼包

最新推荐文章于 2022-04-21 15:05:13 发布

阅读量1.2k

点赞数

分类专栏：前端笔记文章标签：导航

本文链接：https://blog.csdn.net/sh0109/article/details/51412865

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

兼容所有浏览器的万能浏览器，很多漂亮的导航基本都是由此导航条演化而来，多多练习几遍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style>
    body,div,ul,li{margin: 0;padding:0;}
    ul{
        list-style:none;
            height:45px;
            line-height: 45px; /*垂直居中，子元素均会继承该样式*/
            background:#00f;
        }
        ul li{float:left;}
        ul li a{
            color:#fff;
            display: block;  /*块元素设置高度才有效*/
            height: 45px;
            float:left;  /*兼容IE6*/
            text-decoration: none;
            padding: 0 20px;
        }
        ul li a:hover{background: #ccc;}
    </style>
</head>

<body>
    <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
    </ul>
</body>
</html>