轮播图区域定位

最新推荐文章于 2022-10-25 19:08:25 发布

clqxmt

最新推荐文章于 2022-10-25 19:08:25 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签：轮播图区域的定位不会随着浏览器的缩小而发生变化

本文链接：https://blog.csdn.net/weixin_43755513/article/details/97542946

版权

本文探讨如何实现轮播图区域的固定定位，确保其在浏览器尺寸变化时保持不变形，提供稳定展示效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>banner区域定位</title>
		
		<style>
			*{margin:0;padding:0;}
			body{height:10000px;}
			.top1{height:100px;background: #008000;}
			.top2{height:100px;background:#008A45;}
			.nav{/*width:100%;*//*设置定位后如果宽度没有设置，此时其宽度为内容的宽度，如果需要
			宽度为100%，需要手动添加*/height:100px;background:#009966;
			position:sticky/*粘性定位*/;z-index:100;top:0;}
			.banner{height:380px;background:#f00;overflow:hidden/*图片
			分辨率较大会出现滚动条需要把banner以外的图片裁切掉*/; position:relative;}
			.banner .pic{height:380px;width:1900px;background:#ff0;
			position:absolute;/*使用相对定位使其不脱离文档流，可以使banner1在banner中在最左边显示。
			正常显示,如果使用absolute会使其脱离文档流，导致banner1在图片下面显示*/left:50%;margin-left:-950px;/*使图片的和
			浏览器的左边距离为50%，然后设置左边距为其自身宽度的一般使其居中显示*/}
			.banner .pic img{width:100%;}
			.banner1{width:1000px;height:380px;background:#ff0;
			position:relative;/*因为设有margin:auto;所以使用相对定位*/

最低0.47元/天解锁文章

clqxmt

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
轮播图区域定位

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>banner区域定位</title> <style> *{margin:0;padding:0;} body{height:10000px;} .top1{h...
复制链接

扫一扫

专栏目录