Web入门：CSS下拉图片-CFANZ编程社区

Web入门：CSS下拉图片

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

案例内容

利用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 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 2、display 属性规定元素应该生成的框的类型 none ：此元素不会被显示 inline-block ：行内块元素 3、box-shadow属性可以设置一个或多个下拉阴影的框

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

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

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