Web 入门：CSS 下拉图片

作者：小院里的霍大侠

2022-12-25
河北
本文字数：1009 字
阅读完需：约 3 分钟

欢迎来的我的小院，恭喜你今天又要涨知识了！

案例内容

利用 CSS 实现图片的下拉菜单。

演示

学习

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <title>小院里的霍大侠</title>    <style>      .dropdown{        position: relative;        display: inline-block;      }      .dropdown-content{        display: none;        position: absolute;        background-color: #f9f9f9;        min-width: 160px;        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);      }      .dropdown:hover  .dropdown-content{        display: block;      }      .desc{        padding: 15px;        text-align: center;      }      .back{        width: 500px;        height: 500px;        position: absolute;        top: 0;        right: 0;        bottom: 0;        left: 0;        margin: auto;      }    </style>  </head>  <body>    <div class="back">      <h2>下拉图片</h2>      <div class="dropdown">        <img src="2.png" width="300" height="150">        <div class="dropdown-content">          <img src="2.png" width="400" height="200">          <div class="desc">关注我，每天学习一点点，让你不再枯燥不再孤单</div>        </div>      </div>    </div>  </body></html>

复制代码

总结思考

学习点：

1、position 属性指定了元素的定位类型

relative 定位：相对定位元素的定位是相对其正常位置。

absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

2、display 属性规定元素应该生成的框的类型

none ：此元素不会被显示

inline-block ：行内块元素

3、box-shadow 属性可以设置一个或多个下拉阴影的框

使用 CSS 完成图片的下拉菜单，可以在图片缩略的情况下，不打开的页面，不添加按钮完成图片查看，减少界面按钮，优化界面。

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。

私微信：huodaxia_xfeater

二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg

公众号：有个小院（微信公众号：yougexiaoyuan）

github：yougexiaoyuan (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/b103b29855276a8073415adef】。文章转载请联系作者。

小院里的霍大侠

关注

还未添加个人签名 2020-09-02 加入

还未添加个人简介

发布

暂无评论

创作场景

Web 入门：CSS 下拉图片

案例内容

演示

学习

总结思考

小院里的霍大侠

评论