Day2-CSS- 图片廊

一、以下是使用 CSS 创建图片廊：

效果就是“这样的点击图片之后，就可以打开新的页面显示高清图片了”

    <div class="responsive">
        <div class="img">
            <a href="../image/view1.jpg" target="_blank">
            <img src="../image/view1.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view2.jpg" target="_blank">
            <img src="../image/view2.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view6.jpg" target="_blank">
            <img src="../image/view6.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
HTML
 <style>
        div.img{
            margin: 5px;/**/
            border: 1px solid #ccc;
            float: left;
            width: 180px;
        }
        div.img:hover{
            border: 1px solid #777;
        }
        img{
            width: 100%;/*由于给外面的div.img设置了宽度，
                        所有就让里面的图片直接占满，高度就自适应到和这个
                         宽度匹配的地方即可了*/
            height: auto;
        }
        div.desc{
            padding: 15px;
            text-align: center;
        }
    </style>
CSS

二、响应式图片廊

效果图：开始的时候四个一行，缩小陆续变成两个、一个一行

 

<style>
        div.img{
            border: 1px solid #ccc;
        }
        div.img:hover{
            border: 1px solid #777;
        }
        div.img img{
            width: 100%;
            height: auto;
        }
        div.desc{
            padding: 15px;
            text-align: center;
        }
        *{
            box-sizing: border-box;
            /*为了页面的美观，宽度自适应了*/
        }
        .responsive{
            padding: 0 6px;
            float: left;
            width: 24.999999%;
            /* 这里表示的就是开始的时候4个图片放一行的 */
        }
            
        @media only screen and (max-width:700px){
            .responsive{
                width: 49.99999%;
                margin: 6px 0;
            }
            /* 这里就是当页面是700px的时候一行就是两个图片了
            并且要记住代码第一行 and后面一定要空格才行的 */
        }
        @media only screen and (max-width:500px)
        {
            .responsive{
                width: 100%;
            }
        }
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        /* :after表示的是在选定的标签后面加东西，content表示的就是要加的东西了
        display就是把这个标签作为块级元素，然后前面和后面都是由换行符的
        clear表示的是把左边或者右边是能由浮动的元素，both表示的就是两边都
        没有浮动的元素了 */
    </style>
<body>
    <h2 style="text-align:center">响应式图片相册</h2>
    <div class="responsive">
        <div class="img">
            <a href="../image/view1.jpg" target="_blank">
            <img src="../image/view1.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view9.jpg" target="_blank">
            <img src="../image/view9.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view10.jpg" target="_blank">
            <img src="../image/view10.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view5.jpg" target="_blank">
            <img src="../image/view5.jpg" alt="图片文本表述">
            </a>
            <div class="desc">这里添加图片文本描述</div>
        </div>
    </div>

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

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>
</body>
HTML

 

posted @ 2020-06-10 10:18  SCAU-gogocj  阅读(192)  评论(0)  编辑  收藏  举报