如何使用css代码实现简单的图片自适应UI模板

😉 阿里云幸运红包,戳我领取

如何使用css代码实现简单的图片自适应UI模板

效果预览

2072312413-1024x581-1

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css实现图片排版效果</title>
        <link rel="stylesheet" href="./ceshi.css">
    </head>
    <body>
<!--
css图片自适应模板
苏画-博客:qemao.com
-->
        <div class="centent">
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/2021-04-22-15_03_36.jpg" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="http://sh.qemao.com/tools/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" >
                </div>
            </div>
        </div>
    </body>
</html>

css代码


👋 感谢您的观看,对您有用就分享出去吧 !

如您有好的资源/素材,可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录,即可获得 1-10元/篇奖励。(重复内容无奖励)
© 版权声明
THE END
喜欢本站内容,请点【分享】【赞】和【收藏】
点赞8打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容