上一节:
下一节:

  CSS 图库

  • 图库

    使用CSS创建以下图库：

    <!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                          <title>菜鸟教程（cainiaoya.com）</title>
                        <style>
                        div.gallery {
                          margin: 5px;
                          border: 1px solid #ccc;
                          float: left;
                          width: 180px;
                        }

                        div.gallery:hover {
                          border: 1px solid #777;
                        }

                        div.gallery img {
                          width: 100%;
                          height: auto;
                        }

                        div.desc {
                          padding: 15px;
                          text-align: center;
                        }
                        </style>
                        </head>
                        <body>

                        <div class="gallery">
                          <a target="_blank" href="/images/fj1.jpg">
                            <img src="/images/fj1.jpg" alt="5Terre" width="600" height="400">
                          </a>
                          <div class="desc">在这里添加图像的描述</div>
                        </div>

                        <div class="gallery">
                          <a target="_blank" href="/images/fj2.jpg">
                            <img src="/images/fj2.jpg" alt="Forest" width="600" height="400">
                          </a>
                          <div class="desc">在这里添加图像的描述</div>
                        </div>

                        <div class="gallery">
                          <a target="_blank" href="/images/fj3.jpg">
                            <img src="/images/fj3.jpg" alt="Northern Lights" width="600" height="400">
                          </a>
                          <div class="desc">在这里添加图像的描述</div>
                        </div>

                        <div class="gallery">
                          <a target="_blank" href="/images/sbs.jpg">
                            <img src="/images/sbs.jpg" alt="Mountains" width="600" height="400">
                          </a>
                          <div class="desc">在这里添加图像的描述</div>
                        </div>

                        </body>
                        </html>
    尝试一下

  • 响应式图库

    如何使用CSS媒体查询创建一个响应式图库，在桌面，平板电脑和智能手机上看起来不错。

    <!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                          <title>菜鸟教程（cainiaoya.com）</title>
                        <style>
                        div.gallery {
                          border: 1px solid #ccc;
                        }

                        div.gallery:hover {
                          border: 1px solid #777;
                        }

                        div.gallery img {
                          width: 100%;
                          height: auto;
                        }

                        div.desc {
                          padding: 15px;
                          text-align: center;
                        }

                        * {
                          box-sizing: border-box;
                        }

                        .responsive {
                          padding: 0 6px;
                          float: left;
                          width: 24.99999%;
                        }

                        @media only screen and (max-width: 700px) {
                          .responsive {
                            width: 49.99999%;
                            margin: 6px 0;
                          }
                        }

                        @media only screen and (max-width: 500px) {
                          .responsive {
                            width: 100%;
                          }
                        }

                        .clearfix:after {
                          content: "";
                          display: table;
                          clear: both;
                        }
                        </style>
                        </head>
                        <body>

                        <h2>响应图片库</h2>
                        <h4>调整浏览器窗口的大小以查看效果。</h4>

                        <div class="responsive">
                          <div class="gallery">
                            <a target="_blank" href="img_5terre.jpg">
                              <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
                            </a>
                            <div class="desc">在这里添加图像的描述</div>
                          </div>
                        </div>


                        <div class="responsive">
                          <div class="gallery">
                            <a target="_blank" href="img_forest.jpg">
                              <img src="img_forest.jpg" alt="Forest" width="600" height="400">
                            </a>
                            <div class="desc">在这里添加图像的描述</div>
                          </div>
                        </div>

                        <div class="responsive">
                          <div class="gallery">
                            <a target="_blank" href="img_lights.jpg">
                              <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
                            </a>
                            <div class="desc">在这里添加图像的描述</div>
                          </div>
                        </div>

                        <div class="responsive">
                          <div class="gallery">
                            <a target="_blank" href="img_mountains.jpg">
                              <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
                            </a>
                            <div class="desc">在这里添加图像的描述</div>
                          </div>
                        </div>

                        <div class="clearfix"></div>

                        <div style="padding:6px;">
                          <p>本例使用媒体查询在不同屏幕大小上重新排列图像:对于大于700px宽的屏幕，它将并排显示4幅图像，对于小于700px的屏幕，它将并排显示2幅图像。对于小于500px的屏幕，图像将垂直叠加(100%)。</p>
                          <p>在我们的CSS教程中，您将了解更多关于媒体查询和响应式web设计的内容。</p>
                        </div>

                        </body>
                        </html>
    尝试一下

  • 相关页面

    HTML教程：HTML样式

上一节:
下一节: