CSS实现下拉列表

本文提供两种方法

方法一:
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;
        }

至此基本功能完成。结果如下:
CSS实现下拉列表_第1张图片

相关优化

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

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

效果:
CSS实现下拉列表_第2张图片
总体代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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 >是下拉列表项目标签,分别进行设置

至此基本功能完成。结果如下:
CSS实现下拉列表_第3张图片

相关优化

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>

效果:
CSS实现下拉列表_第4张图片
总体代码:

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>

未完待续……

你可能感兴趣的:(前端,css,html,前端)