前段时间刚踩过的坑,拿出来与大家一起分享。
如下图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>
ps: 图片可自己替换,我这里不提供。因为重点在代码。(不同分辨率,效果都一样,亲测有效。)
大家可以看到css样式中,所有元素都没有设置固定的高度。效果图,如图2所示。
图2
最后补充一点,做响应式,也可以用这种方法。