CSS之responsive image gallery

最新推荐文章于 2024-06-10 09:42:46 发布

晨识草

最新推荐文章于 2024-06-10 09:42:46 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： css web image responsive

本文链接：https://blog.csdn.net/lichen_yun/article/details/75194183

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

responsive image gallery

这次实例主要是练习如何讲不同的图片设置为一个栏目，并且能够根据屏幕的大小进行自适应的变换。需要注意的是，本次实例中运用到的重要的关键的内容是：float-left；box-sizing; @media screen and (max-width:700px)
本实例的显示效果为:

（1）屏幕大小<=500px

这里写图片描述

（2）屏幕大小500px < width <= 700px

这里写图片描述

（3）屏幕大小>700px

这里写图片描述
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="utf-8" content="width=device-width,initial-scale=1.0">
</head>
<body>
    <h1>Flower Gallery</h1>
    <p>It is a responsive image gallery, resize the browser to see the different effect please.</p>
    <div class="responsive">
        <div class="flower">
            <a href="image/rose.jpg" target="_blank">
                <img src="image/rose.jpg" alt="rose">
            </a>
            <p>
                A rose is a woody perennial flowering plant of the genus Rosa, 
                in the family Rosaceae, or the flower it bears. 
            </p>
        </div>
    </div>
    <div class="responsive">
        <div class="flower">
            <a href="image/daisy.jpg" target="_blank"> 
                <img src="image/daisy.jpg" alt="daisy">
            </a>
            <p>
                Daisy, fresh, wholesome, and energetic, is one of the flower names that 
                burst back into bloom after a century's hibernation. 
            </p>
        </div>
    </div>
    <div class="responsive">
        <div class="flower">
            <a href="image/Phalaenopsis.jpg" target="_blank">
                <img src="image/Phalaenopsis.jpg" alt="rose flower">
            </a>
            <p>
                Phalaenopsis, known as moth orchids, abbreviated Phal in the horticultural trade, is an orchid genus of
                 approximately 60 species. 
            </p>
        </div>
    </div>
    <div class="responsive">
        <div class="flower">
            <a href="image/jasmine.jpg" target="_blank">
                <img src="image/jasmine.jpg" alt="jasmine">
            </a>
            <p>
                he Jasmine is a very popular flower around the world especially in the tropics because of its unique fragrance. 
            </p>
        </div>
    </div>
</body>
</html>

style.css

/* 
* @Author: Lin
* @Date:   2017-07-15 20:05:05
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-15 21:26:48
*/
/*
 注：当没有出现预期的效果时，需要检查单词的拼写是否正确，特别是class或者是id的名字在css和html中是否一致
 在这份练习中，图片用ps调成了统一的大小：300px*200px
*/
div.flower {
    border:1px solid lightgrey;
}

div.flower:hover {
    border-color:#999999;
}
div.flower img {
    width:100%;
}
/*注意这一行代码，在之前的练习中没有遇到过*/
* {
    box-sizing: border-box;
}
/*注意float:left的使用*/
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.9%;
    height:auto;
}
div.flower p {
    padding:10px 15px;
    font-family:Georgia;
    font-size:18px;
}
/*用于设置responsive的代码*/
@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.9%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px) {
    .responsive {
        width:100%;
    }
}

素材：
rose.jpg
这里写图片描述
daisy.jpg

Phalaenopsis.jpg

jasmine.jpg

晨识草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之responsive image gallery

responsive image gallery这次实例主要是练习如何讲不同的图片设置为一个栏目，并且能够根据屏幕的大小进行自适应的变换。需要注意的是，本次实例中运用到的重要的关键的内容是：float-left；box-sizing; @media screen and (max-width:700px) 本实例的显示效果为: （1）屏幕大小<=500px （2）屏幕大小500px < wi
复制链接

扫一扫