html - 自适应

最新推荐文章于 2023-10-26 17:57:56 发布

weixin_30902251

最新推荐文章于 2023-10-26 17:57:56 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lafitewu/p/8033645.html

前段时间刚踩过的坑，拿出来与大家一起分享。

如下图1，所示，大家做网页时有没有遇到过呢？因为不同电脑有不同的分辨率，当在浏览器浏览时，可以通过Ctrl+滚动滚轮，调节大小，来模拟不同的分辨率。

图1

当使用固定高度时，就会出现如图1所示的问题，或者图片会变形。

那么闲话不多说，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应（不设高度）- demo </title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
        .nav {
            position: relative;
            padding: 10px 0;
            width: 100%;
            display: inline-block;
            background: gray;
        }
            .nav_con {
                display: inline-block;
                margin-left: 50px;
                line-height: 30px;
            }
                .nav_con ul {
                    width: 100%;
                }
                    .nav_con ul li {
                        float: left;
                        list-style: none;
                        margin-left: 60px;
                    }
        .lunbo {
            position: relative;
            width: 100%;
        }
            .lunbo img {
                width: 100%;
            }
        .lun_nav {
            position: relative;
            width: 100%;
        }
            .lun_nav a {
                float: left;
                width: 33.33333%;
                overflow: hidden;
            }
                .lun_nav a img {
                    width: 100%;
                    transition: .4s;
                }
                .lun_nav a img:hover {
                    transform: scale(1.1);
                }
</style>
<body>
    <div class="nav">
        <div class="nav_con">
            <ul>
                <li>首页</li>
                <li>导航</li>
                <li>联系我们</li>
                <li>资料</li>
                <li>个人中心</li>
                <li>游戏</li>
                <li>相册</li>
            </ul>
        </div>
    </div>
    <div class="lunbo">
        <img src="images/banner1.jpg"/>
    </div>
    <div class="lun_nav">
        <a href="#">
            <img src="images/nav1.jpg"/>
        </a>
        <a href="#">
            <img src="images/nav2.jpg"/>
        </a>
        <a href="#">
            <img src="images/nav3.jpg"/>
        </a>
    </div>
</body>
</html>