网页菜单栏的两种方法

最新推荐文章于 2021-11-25 20:17:09 发布

卢晶晶

最新推荐文章于 2021-11-25 20:17:09 发布

阅读量4.5k

点赞数

分类专栏： Web前端 CSS 文章标签： CSS

本文链接：https://blog.csdn.net/Lucrecia666/article/details/82355778

版权

Web前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

网页菜单栏的两种方法

方法一：inline

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        li{

            float: left;

        }

        ul{

            list-style-type: none;

            margin: 0px;

            padding: 0px;

        }

        a{

            text-decoration: none;

            width: 50px;

        }

        a:link,a:visited{

            background-color: lightgreen;

            display: block;

        }

        a:hover, a:active{

            background-color: lightblue;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="">菜单1</li>

        <li><a href="">菜单1</li>

        <li><a href="">菜单1</li>

        <li><a href="">菜单1</li>

        <li><a href="">菜单1</li>

        <li><a href="">菜单1</li>

    </ul>

</body>

</html>

方法二：float

        li{
            display: inline;
            background: pink;

        }
        ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
            width: 50px;
        }
        a:link,a:visited{
            background-color: lightgreen;
        }
        a:hover, a:active{
            background-color: lightblue;
        }

卢晶晶

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
网页菜单栏的两种方法

网页菜单栏的两种方法方法一：inline <!DOCTYPE html><html><head> <title></title> <style type="text/css"> li{ float: left; ...
复制链接

扫一扫