网站上全屏显示banner的方法
网站上全屏显示banner的方法(即实现不同宽度及分辨率的显示器的全屏效果图)1. 在要设置的banner容器的最外面加一个层,设置宽度为100%,高度为想要固定高,如365px;并设计为相对定位2. 在banner容器如 li 标签设置样式:宽度100%,高365px;绝对定位,left: 0px; top:0 px;background-position: 50% 50%;
网站上全屏显示banner的方法
(即实现不同宽度及分辨率的显示器的全屏效果图)
1. 在要设置的banner容器的最外面加一个层,设置宽度为100%,高度为想要固定高,如365px;并设计为相对定位
2. 在banner容器如 li 标签设置样式:宽度100%,高365px;绝对定位,left: 0px; top:0 px;background-position: 50% 50%; text-align: center; overflow: hidden;
3. 图片是用背景图的形式来展示的,以方便图片上面能再加其他层。背景图片大小我看到的这个研究网站 http://www.thankyou99.com/ 制作的大小为为2500*398px;另外我看了其他的网站,也有些是1920px,页面代码如下:
<html>
<head>
<meta charset="utf-8">
<title>尚客优连锁酒店管理集团官方网站 - 三线城市连锁酒店加盟第一品牌</title>
<meta name="description"content="连锁酒店加盟选择中国十大连锁酒店、三线城市连锁酒店加盟第一品牌尚客优连锁酒店,中国连锁酒店加盟第一品牌,致力于打造三线城市最大的连锁酒店加盟品牌。酒店加盟咨询电话:4006-168-169。"/>
<meta name="keywords"content="酒店加盟,连锁酒店加盟,快捷酒店加盟,尚客优城际酒店管理有限公司" />
<style type="text/css">
.box {width:100%;
height:395px;
position:relative;
}
ul.ad li {
position: absolute;
background-position: 50% 50%;
text-align: center;
overflow: hidden;
height: 395px;
width: 100%;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box">
<ul class="ad">
<li>
<a href="#" target="_blank">
<div style="background:url(http://www.thankyou99.com/Attach/Images/rotate_29950.jpg)center center; height:396px;"></div>
</a>
</li>
<li>
<a href="#" target="_blank"style="display:none;">
<div style="background:url(http://www.thankyou99.com/Attach/Images/rotate_73985.jpg) center center; height:396px;"></div>
</a>
</li>
<li>
<a href="#" target="_blank" style="display:none;">
<div style="background:url(http://www.thankyou99.com/Attach/Images/rotate_40818.jpg) center center; height:396px;"></div>
</a>
</li>
</ul>
</div>
</body>
</html>
更多推荐
所有评论(0)