仿百度总结

最新推荐文章于 2025-12-12 11:10:07 发布

原创最新推荐文章于 2025-12-12 11:10:07 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍了一种利用CSS实现自定义下拉菜单的方法，并详细解释了如何通过:hover伪类来展示下拉内容，同时提供了关于尺寸调整及颜色选择的实用建议。

仿百度总结

不能用<select>标签做更多的下拉，默认值也会被放入下拉列表中。
制作下拉菜单应该采用以下方法：

<style>
//修改下拉按钮样式
    .button {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
        //cursor is 表示一些不同的光标
        //属性值：default(默认箭头)  crosshair(十字)   pointer（表示一只手）
            cursor: pointer;

    }
    //给容器div定位
   .down {
        position:relative;
        display:inline-block;
    }
    //设置下拉内容默认隐藏
    .down-content {
        position:absolute;(子绝父相)
        display：none;
          //复习：display：none;隐藏对象并不再保留原来位置（脱标）
          //     visibility:hidden; 元素隐藏并保留原来位置(不脱标)
        top:500px;
        left:50px;
    }
     //设置下拉菜单链接
    .down-content a {
        color: black;
        padding:12px 16px;
        text-decoration:none;
        display:none;
    }
    //鼠标移上去后显示下拉菜单
    .down:hover .down-content {
        display:block;
        // visibility用visible显示
    }
    //修改下拉菜单样式
    .dropdown:hover .down-content{
        background-color:green;
    }
</style>
<body>
    <div class="down">
        <button class="button">下拉菜单</button>
        <div class="down-content">
            <a href="#">图片</a>
            <a href="#">网盘</a>
            <a href="#">文库</a>
        </div>
    </div>
</body>

摆放盒子很困难，尺寸大小拿不准. 解决方法：不断的试验不同值（方法需改进）
感觉定位比浮动好用，页面大量使用定位，当浮动和定位同时存在时，样式会执行定位
颜色不知道多少合适解决方法：去看百度页面的style中的设置
当给链接写css伪类时，必须标签中没有style属性，否则设置的伪类不起作用

补充：
- min-width属性：设置段落的最小宽度
常用值：length：定义元素的最小宽度值。

%：定义基于包含它的块级对象的百分比最小宽度。

inherit：规定应该从父元素继承 min-width 属性的值。
- max-height属性：设置段落的最大高度
常用值：none :默认。定义对元素被允许的最大高度没有限制。

其他与min-width属性值相同

4.<span>标签里可以放<a>,<a>里也可以放<span>.用标签前要思考好到底用谁；加类名时最好用能理解的类名

否则修改时容易搞错.