HTML+CSS+JavaScript实现简易下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布

置顶

王大锤子呦

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量3.6k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/darongzi1314/article/details/52539059

版权

这篇博客展示了如何使用HTML、CSS和JavaScript来实现一个简单的下拉菜单。通过CSS设置样式，JavaScript处理交互，创建了一个包含省份选择的下拉列表。用户点击后，会显示一个可选的省份列表，再次点击则隐藏列表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #333;
            font: 16px/32px "微软雅黑";
        }
        #box{
            width: 500px;
            height: 326px;
            border: 3px solid #000;
            background: #ffffff;
            /*margin: 40px auto;*/
            /*本身是一个层*/
            position: absolute;
            left: 50%;
            top:50%;
            margin: -163px 0 0 -250px;
        }
        .province{
            width: 320px;
            height: 42px;
            background: #c00;
            margin: 80px auto;
            position: relative;
        }
        .province strong{
            width: 64px;
            height: 42px;
            line-height: 42px;
            display: block;
            float: left;
            color: #ffffff;
            padding-left: 10px;
        }
        #selectProvince{
            display: block;
            float: left;
            width: 200px;
            height: 28

最低0.47元/天解锁文章

王大锤子呦

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript实现简易下拉菜单

html lang="en">head> meta charset="UTF-8"> title>下拉列表title> link rel="stylesheet" href="css/reset.css" type="text/css"> style type="text/css"> *{ padding: 0;
复制链接

扫一扫

专栏目录