当前位置：首页 > article >正文

web前端第五次作业---制作菜单

article 2025/1/14 1:15:16

制作菜单

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ol,ul{
            list-style: none;/*  list-style: none 去掉ol(有序列表)ul(无序列表)前面的点*/
        }

        ul.box{
            width: 1400px;
            height: 65px;
            border: 0px solid rgb(213, 53, 181);
            margin: auto; /*margin:auto 将box自动居中*/
            background-color: rgb(27, 26, 26);
            color: rgba(206, 212, 218, 0.724);
        }

        ul.box > li{
            width: 140px;
            height: 65px;
            border: 0px solid rgb(213, 53, 181);
            float: left;/* float: left 使标签向左聚集*/
            cursor: pointer; /*cursor: pointer 将光标变为pointer(手势)*/
            text-align: center; /* text-align: center 将文字居中*/
            line-height:60px ; /* 设置行高*/

        }

        ul.box > li:hover{
            background-color: rgb(92, 91, 91);
            font-size: 19px;/* 将鼠标放到a链接上时字变化大小*/
        }

        a{
            color: rgba(206, 212, 218, 0.724);
            text-decoration: none;/* 去掉a链接下的下划线*/
        }
       

    </style>
</head>
<body>
    
    <ul class="box">
        <li><a href="https://www.bilibili.com/">哔站</a></li>
        <li><a href="https://v.qq.com/">腾讯视频</a></li>
        <li><a href="https://www.youku.com/">优酷视频</a></li>
        <li><a href="https://www.douyin.com/">抖音</a></li>
        <li><a href="https://www.iqiyi.com/">爱奇艺</a></li>
        <li><a href="https://www.czzy77.com/">厂长资源</a></li>
        <li><a href="https://www.mgtv.com/">芒果TV</a></li>
        <li><a href="https://www.kuaishou.cn/?isHome=1">快手</a></li>
        <li>菜单九</li>
        <li>菜单十</li>
        
    </ul>
    
</body>
</html>

运行结果: