屏幕自适应

最新推荐文章于 2023-06-02 10:50:42 发布

weixin_30763397

最新推荐文章于 2023-06-02 10:50:42 发布

阅读量48

点赞数

原文链接：http://www.cnblogs.com/shujie/p/7074006.html

版权

屏幕自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画面自适应</title>

    <link rel="stylesheet" href="css/pic480.css" media="(max-width:480px)">
    <link rel="stylesheet" href="css/pic800.css" media="(min-width:480px) and (max-width:800px)">
    <link rel="stylesheet" href="css/pic800+.css" media="(min-width:800px) and (max-width:1200px)">
    <link rel="stylesheet" href="css/pic1200.css" media="(min-width:1200px)">
    <style>
        .pic{
            text-align: center;
            width: 100%;
            overflow: hidden;
        }
        .pic>div>img{
            padding: 1px;
        }
        .pic>div>img:hover{
            border: 1px solid grey;
            padding: 0;
        }
    </style>

</head>
<body>
<p>

</p>
<div class="pic">
    <div>
        <img src="css响应式效果/images/pic6.jpg" alt="加载失败">
        <div>时尚风格</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic7.jpg" alt="加载失败">
        <div>风格时尚</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic8.jpg" alt="加载失败">
        <div>时尚风格</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic9.jpg" alt="加载失败">
        <div>风格时尚</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic10.jpg" alt="加载失败">
        <div>时尚风格</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic11.jpg" alt="加载失败">
        <div>风格时尚</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic12.jpg" alt="加载失败">
        <div>时尚风格</div>
    </div>
    <div>
        <img src="css响应式效果/images/pic13.jpg" alt="加载失败">
        <div>风格时尚</div>
    </div>
</div>
</body>
</html>

posted on 2017-06-24 17:57 大师放放阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/shujie/p/7074006.html

weixin_30763397

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
屏幕自适应

屏幕自适应 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画面自适应</title> <link rel="stylesheet" href="css/pic4...
复制链接

扫一扫