前段时间刚踩过的坑,拿出来与大家一起分享。
如下图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
最后补充一点,做响应式,也可以用这种方法。