网站上全屏显示banner的方法

最新推荐文章于 2022-03-14 17:14:50 发布

lzq_jz

最新推荐文章于 2022-03-14 17:14:50 发布

阅读量4.6k

点赞数 1

本文链接：https://blog.csdn.net/u012418217/article/details/19335575

版权

网站上全屏显示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>

<title>尚客优连锁酒店管理集团官方网站 - 三线城市连锁酒店加盟第一品牌</title>

.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>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

</body>

</html>

lzq_jz

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网站上全屏显示banner的方法

网站上全屏显示banner的方法（即实现不同宽度及分辨率的显示器的全屏效果图）1. 在要设置的banner容器的最外面加一个层，设置宽度为100%，高度为想要固定高，如365px；并设计为相对定位2. 在banner容器如 li 标签设置样式：宽度100%，高365px；绝对定位，left: 0px; top:0 px;background-position: 50% 50%;
复制链接

扫一扫