HTML5 如何创建一个菜单栏选择框

最新推荐文章于 2024-04-22 15:36:45 发布

十指流玉

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量1.9k

点赞数

文章标签： HTML 前端

本文链接：https://blog.csdn.net/qq_41886231/article/details/99408539

版权

天呐。。。。。终于终于终于，死磕出来了，其实网上已经有很多能够直接使用的代码了，但是真的不懂为啥，可能对于一个小白来说，很难明白其中的道理，于是我（小白）一直想要自己死磕一下。终于成功了（算是吧）。

最开始自己制作了一个菜单栏选择框，看起来挺好用的，但是如果你放大一下，整个菜单栏的样子就变了。。。。很难受（其实好像不是什么难题）。那我们先看一下失败效果吧。

放大之后：

哇.....巨恶心好吧....那我们再来对比一下修改之后的一些效果：

放大之后：

个人觉得已经很不错了呀......起码不恶心了，虽然...这个配色...有点....emmmm算了算了，反正就测试一下。看代码吧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试网页</title>
    <style type="text/css">
        .title {
            text-shadow: 0.1em 0.1em 0.1em gray;
            /*设置背影效果*/
            font-size: 20px;
            /*字体像素大小*/
            color: black;
            /*字体颜色*/
            font-weight: 900;
            /* normal 为默认值，400 */
            text-align: center;
            /*文本对齐方式*/
        }

        #box {
            /*块状元素居中对齐*/
            line-height: 4em;
            /*设置行高*/
            border-radius: 4px;
            /*设置图片、填充图、颜色框等实现圆角显示*/
            opacity: 0.5;
            /*设置透明度*/
            text-align: center;
            font-size: 10px;
            margin-left: auto;
            /*块状元素居中对齐*/
            margin-right: auto;
            /*块状元素居中对齐*/
            width: auto;
            height: 40px;
            background: rgb(124, 243, 134);
        }

        #menu {
    background: rgb(114, 255, 236);
    /*背景颜色*/
    border-radius: 4px;
    /*圆角显示*/
    padding: auto;
    /*填充自动适应*/
    /*元素块间距*/
    list-style-type: none;
    /*清除项目标记*/
    height: 40px;
    /*框高度*/
    opacity: 0.8;
    /*透明度*/
    display: flex;
    /**/
    width: auto;
    /*宽度自动适应网页*/
    margin: 10px auto;/*设置距上一元素10px，左右自动适应*/
}

#menu li {
    float:center;
    margin:auto;/**/
}
#menu span {
    float: center;
    padding-top: 9px;/*选择框上高度*/
    padding-bottom: 9px;/*选择框下高度*/
    padding-left: 18px;/*选择框左宽度*/
    padding-right: 18px;/*选择框右宽度*/
    background: rgb(61, 165, 250);/*背景颜色*/
    border-radius: 4px;/*圆角显示*/
    transition: all .1s ease-in;/*延迟效果*/
}
#menu li a {
    float: left;
    height: 35px;
    color: grey;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    transition: all .1s ease-in;
}
#menu a:hover {
    color: rgb(238, 255, 80);
    background-position: right bottom;
}

#menu a:hover span {
    background-position: left bottom;
    cursor: pointer;
    cursor: hand;
}
    </style>
</head>

<body>
    <div id="box">
        <p class="title">***测试***</p>
    </div>

    <ul id="menu">
        <li><a href="#"><span>登录</span></a></li>
        <li><a href="#"><span>操作</span></a></li>
        <li><a href="#"><span>登录</span></a></li>
        <li><a href="#"><span>注册</span></a></li>
    </ul>

</body>

</html>

十指流玉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 如何创建一个菜单栏选择框

天呐。。。。。终于终于终于，死磕出来了，其实网上已经有很多能够直接使用的代码了，但是真的不懂为啥，可能对于一个小白来说，很难明白其中的道理，于是我（小白）一直想要自己死磕一下。终于成功了（算是吧）。最开始自己制作了一个菜单栏选择框，看起来挺好用的，但是如果你放大一下，整个菜单栏的样子就变了。。。。很难受（其实好像不是什么难题）。那我们先看一下失败效果吧。放大之后：哇.....巨...
复制链接

扫一扫