CSS实现下拉列表

最新推荐文章于 2024-07-25 16:45:46 发布

因为我是ZR

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量1w

点赞数 13

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45822805/article/details/123351268

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文提供两种方法

方法一：
1.首先写好结构，常用 ul 和 li 结合

<ul class="content">
    <a >服装</a>
    <ul class="plat">
        <li><a>外套</a></li>
        <li><a>棉袄</a></li>
        <li><a>裤子</a></li>
    </ul>
</ul>

2.添加css样式

 ul,a{
            font-size: 20px;  /*字体大小*/
            background-color: #pink;  /*背景颜色*/
            color: #fff;  /*字体颜色*/
            width: 100px;  /*宽度*/
            text-align: center;  /*水平位置*/
        }
        a{
            display: block;
        }

3…plat部分隐藏

.plat{
            display: none;
        }

4.第一个a标签用:hover选择器。
实现功能:当鼠标停在上方时，显示隐藏部分。

.content:hover .plat{
            display: block;
            clear: both;
        }

至此基本功能完成。结果如下：
在这里插入图片描述

相关优化

1.改变下拉列表框颜色。

.content:hover li a{
            background-color: wheat;
        }

效果：
在这里插入图片描述
总体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }/*界面初始化*/
        ul,a{
            font-size: 20px;  /*字体大小*/
            background-color: pink;  /*背景颜色*/
            color: #fff;  /*字体颜色*/
            width: 100px;  /*宽度*/
            text-align: center;  /*水平位置*/
        }
        a{
            display: block;
        }
        .plat{
            display: none;
        }

        .content:hover .plat{
            display: block;
            clear: both;
        }
        .content:hover li a{
            background-color: wheat;
        }
    </style>
</head>
<body>
    <ul class="content">
        <a >服装</a>
        <ul class="plat">
            <li><a>外套</a></li>
            <li><a>棉袄</a></li>
            <li><a>裤子</a></li>
        </ul>
    </ul>
</body>
</html>

方法二：
1.首先写好结构

    <div class="content">
        <form class="form1w">
            <select>
                <option>外套</option>
                <option>棉袄</option>
                <option>裤子</option>
            </select>
        </form>
    </div>

2.添加css样式

        form select{
            width: 160px;      /*宽*/
            height: 40px;     /*高*/
            background-color: #a3b5bb;  /*元素背景颜色*/
            border: 2px solid #333;  /*边框线*/
            color: #fff;             /*字体颜色*/
            font-size: 16px;              /*字体大小*/
            }
            form option{
                width: 156px;
                height: 40px;
                }

< select >是下拉列表标签，< option >是下拉列表项目标签，分别进行设置

至此基本功能完成。结果如下：
在这里插入图片描述

相关优化

1.下拉列表增加分组。

    <div class="content">
        <form class="form1w">
            <select>
                <optgroup label="上衣">
                    <option>外套</option>
                    <option>棉袄</option>
                </optgroup>
                <optgroup label="下衣">
                    <option>裤子</option>
                    <option>短裙</option>
                </optgroup>
            </select>
        </form>
    </div>

效果：
在这里插入图片描述
总体代码：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            }/*界面初始化*/
        form select{
            width: 160px;      /*宽*/

            background-color: #a3b5bb;  /*元素背景颜色*/
            border: 2px solid #333;  /*边框线*/
            color: #fff;             /*字体颜色*/
            font-size: 16px;              /*字体大小*/
            }
            form option{
                width: 156px;
                height: 40px;
                }
    </style>
</head>
<body>
    <div class="content">
        <form class="form1w">
            <select>
                <optgroup label="上衣">
                    <option>外套</option>
                    <option>棉袄</option>
                </optgroup>
                <optgroup label="下衣">
                    <option>裤子</option>
                    <option>短裙</option>
                </optgroup>
            </select>
        </form>
    </div>
</body>
</html>

未完待续……

因为我是ZR

关注

13
点赞
踩
113

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS实现下拉列表

方法一：1.首先写好结构，常用 ul 和 li 结合<ul class="content"> <a >服装</a> <ul class="plat"> <li><a>外套</a></li> <li><a>棉袄</a></li> <li><a>裤衩</a></
复制链接

扫一扫