【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )

news2024/11/13 10:01:55

文章目录

  • 一、开发要点分析
  • 二、代码示例





一、开发要点分析



实现下图样式 : 中间部分是网页内容 , 左右两侧是 固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ;
在这里插入图片描述


标签结构分析 : 上述页面中 , 中心的版心盒子 与 左侧广告栏 / 右侧广告栏 是兄弟关系 ;

	<div class="left"></div>
	<div class="right"></div>
	<div class="box">
		<div class="center"></div>
	</div>

左侧广告栏 使用 固定定位 , 该盒子在浏览器左侧 , 距离顶部 100 像素 ; 右侧广告栏 与 左侧广告栏基本相同 , 只是将 左边偏移 改为 右边偏移 ;

		/* 固定定位 - 浏览器左侧元素 */
		.left {
			position: fixed;
			/* 该盒子在浏览器左侧 */
			/* 上边偏移 0 紧贴顶部 */
			top: 100;
			/* 左边偏移 0 紧贴左侧 */
			left: 0;

			/* 内容尺寸 */
			width: 100px;
			height: 300px;

			background-color: blue;
		}




二、代码示例



完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位示例</title>
	<style>
		/* 设置高度 1000 像素, 方便滚动设置 */
		body{
			height: 1000px;
		}

		/* 最外层 父容器盒子 */
		.box {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: relative;

			/* 内容尺寸 通过测量图片获得 */
			width: 300px;
			height: 200px;

			/* 边框 1 像素实线 */
			border: 1px solid #ccc;
			/* 上下设置 100 像素外边距 水平居中 */
			margin: 100px auto;
			/* 子元素与 */
			padding: 10px;

			background-color: pink;
		}

		/* 固定定位元素 */
		.center {
			width: 300px;
			height: 200px;

			background-color: purple;
		}

		/* 固定定位 - 浏览器左侧元素 */
		.left {
			position: fixed;
			/* 该盒子在浏览器左侧 */
			/* 上边偏移 0 紧贴顶部 */
			top: 100;
			/* 左边偏移 0 紧贴左侧 */
			left: 0;

			/* 内容尺寸 */
			width: 100px;
			height: 300px;

			background-color: blue;
		}

		/* 固定定位 - 浏览器右侧元素 */
		.right {
			position: fixed;
			/* 该盒子在浏览器右侧 */
			/* 上边偏移 0 紧贴顶部 */
			top: 100;
			/* 右边偏移 0 紧贴右侧 */
			right: 0;

			/* 内容尺寸 */
			width: 100px;
			height: 300px;

			background-color: red;
		}
	</style>
</head>
<body>
	<div class="left"></div>
	<div class="right"></div>
	<div class="box">
		<div class="center"></div>
	</div>
</body>
</html>

显示效果 :

  • 初始效果 :
    在这里插入图片描述

  • 滚动效果 : 滚动后两侧广告栏位置不变 ;

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/417233.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在rust中使用泛型,trait对象的总结以及kv sever(3)

可以说在 Rust 开发中&#xff0c;泛型编程是我们必须掌握的一项技能。在你构建每一个数据结构或者函数时&#xff0c;最好都问问自己&#xff1a;**我是否有必要在此刻就把类型定死&#xff1f;**是不是可以把这个决策延迟到尽可能靠后的时刻&#xff0c;这样可以为未来留有余…

谷歌的Bard和OpenAI的GPT4的对比

前言 随着上个月21日谷歌面向公众开放人工智能聊天机器人Bard的访问权限&#xff0c;同样是上个月的14日OpenAI为聊天机器人ChatGPT发布的最新语言模型&#xff1a;GPT-4的问世&#xff0c;可以说关于ChatGPT应用的推出进入了百家争鸣的情况&#xff0c;而且竞争变得激烈起来&a…

手把手教你Temporal Fusion Transformer——Pytorch实战

建立了一个关于能源需求预测的端到端项目&#xff1a; 如何为 TFT 格式准备我们的数据。 如何构建、训练和评估 TFT 模型。 如何获取对验证数据和样本外预测的预测。 如何使用built-in model的可解释注意力机制计算特征重要性、季节性模式和极端事件鲁棒性。 什么是Temporal F…

Prophet学习(二) 时序预测开源工具包Prophet介绍

目录 一、Prophet 简介 二、Prophet 适用场景 三、Prophet 算法的输入输出 四、Prophet 算法原理 五、与机器学习算法的对比 六、代码 6.1 依赖安装 6.2 预测demo 七、参考资料 八、官方链接&#xff1a; 九、案例链接&#xff1a; 一、Prophet 简介 Prophet是Faceb…

C++学习 Day1

目录 1. C关键字(C98) 2.命名空间 3. C输入&输出 1. C关键字(C98) C总计63个关键字&#xff0c;C语言32个关键字 目前只是初学阶段&#xff0c;只是大致的了解&#xff0c;以后再深入研究。 2.命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&am…

C++中的类模版

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C &#x1f525;座右铭&#xff1a;“不要等到什么都没有了&#xff0c;才下…

Linux驱动开发——高级I/O操作(一)

一个设备除了能通过读写操作来收发数据或返回、保存数据&#xff0c;还应该有很多其他的操作。比如一个串口设备还应该具备波特率获取和设置、帧格式获取和设置的操作;一个LED设备甚至不应该有读写操作&#xff0c;而应该具备点灯和灭灯的操作。硬件设备是如此众多&#xff0c;…

PDF怎么转CAD文件?(免费!高效转换方法汇总)

一般而言&#xff0c;PDF图纸是不能修改的。若需修改&#xff0c;则需将PDF转CAD&#xff0c;此时如何满足PDF转CAD的需求呢&#xff1f;今天&#xff0c;我将教你两种免费的PDF转CAD的方法&#xff0c;助力高效办公。 1.本地软件转换法 这是用本地软件转换方法&#xff0c;支…

【系统集成项目管理工程师】项目管理一般知识

&#x1f4a5;项目管理一般知识 一、什么是项目 1、项目定义 项目是为达到特定的目的&#xff0c;使用一定资源&#xff0c;在确定的期间内&#xff0c;为特定发起人提供独特的产品、服务或成果而进行的一系列相互关联的活动的集合。项目有完整的生命周期&#xff0c;有开始…

Dubbo(超级无敌认真好用,万字收藏篇!!!!)

文章目录Dubbo前言大型互联网架构目标集群和分布式集群分布式架构演进1 Dubbo概述1.1 Dubbo概念1.2 Dubbo架构图2 Dubbo快速入门2.1 Zookeeper的安装2.2 springBoot整合DubboZookeeper2.2.1 创建项目Dubbo--provider2.2.2 创建项目Dubbo--consumer2.2.3 测试3 Dubbo高级特性3.1…

可视化 | Flask+Pyecharts可视化模板

文章目录&#x1f3f3;️‍&#x1f308; 1. 系统说明界面&#x1f3f3;️‍&#x1f308; 2. 柱状图示例界面&#x1f3f3;️‍&#x1f308; 3. 饼状图示例界面&#x1f3f3;️‍&#x1f308; 4. 折现图示例界面&#x1f3f3;️‍&#x1f308; 5. 散点图示例界面&#x1f3…

人工智能(Pytorch)搭建transformer模型,真正跑通transformer模型,深刻了解transformer的架构

大家好&#xff0c;我是微学AI&#xff0c;今天给大家讲述一下人工智能(Pytorch)搭建transformer模型&#xff0c;手动搭建transformer模型&#xff0c;我们知道transformer模型是相对复杂的模型&#xff0c;它是一种利用自注意力机制进行序列建模的深度学习模型。相较于 RNN 和…

【数据结构Java】--图、BFS、DFS、拓扑结构

目录 一、图&#xff08;Graph&#xff09; 1.概念 2.有向图 3.出度、入度 4.无向图 5.简单图、多重图 6.无向完全图 7.有向完全图 8.有权图 9.连通图 10.连通分量&#xff08;无向图&#xff09; 11.强连通图&#xff08;有向图&#xff09; 12.强连通分量 13.邻接矩…

微服务架构-服务网关(Gateway)-权限认证(分布式session替代方案)

权限认证-分布式session替代方案 前面我们了解了Gateway组件的过滤器&#xff0c;这一节我们就探讨一下Gateway在分布式环境中的一个具体用例-用户鉴权。 1、传统单应用的用户鉴权 从我们开始学JavaEE的时候&#xff0c;就被洗脑式灌输了一种权限验证的标准做法&#xff0c;…

Adobe全新AI工具引关注,Adobe firefly助力创作更高效、更有创意

原标题&#xff1a;Adobe全新AI工具引关注&#xff0c;Adobe firefly&#xff08;萤火虫&#xff09;助力创作更高效、更有创意。 以ChatGPT为首的生成式AI、AIGC等工具的战局正如火如荼的进行中..... 除了微软、百度的聊天机器人和一些初创公司的AI画图工具令人惊艳&#xff…

Greenplum数据库执行器——PartitionSelector执行节点

为了能够对分区表有优异的处理能力&#xff0c;对于查询优化系统来说一个最基本的能力就是做分区裁剪partition pruning&#xff0c;将query中并不涉及的分区提前排除掉。如下执行计划所示&#xff0c;由于单表谓词在parititon key上&#xff0c;在优化期间即可确定哪些可以分区…

003:Mapbox GL设定不同的投影方式

第003个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中设定不同的投影方式 。默认情况下为Mercator投影,或者设置为null或者undefined时候,显示为Mercator投影。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源…

【分享】维格表集成易聊实现线索自动化,减少流失率

公司•介绍 北京某职业教育公司专注行业发展、国际就业、留学、移民咨询。秉承专业性至上的原则&#xff0c;与行业内专家、高等学府以及产业集团合作&#xff0c;并邀请各领域专家组建了强大的专委会团队&#xff0c;为公司的业务开展提供专业性支持。 客户•遇到的问题 作为…

【Java面试八股文宝典之MySQL篇】备战2023 查缺补漏 你越早准备 越早成功!!!——Day23

大家好&#xff0c;我是陶然同学&#xff0c;软件工程大三即将实习。认识我的朋友们知道&#xff0c;我是科班出身&#xff0c;学的还行&#xff0c;但是对面试掌握不够&#xff0c;所以我将用这100多天更新Java面试题&#x1f643;&#x1f643;。 不敢苟同&#xff0c;相信大…

用Spring Doc代替Swagger

1 OpenApi OpenApi 是一个业界的 API 文档标准&#xff0c;是一个规范&#xff0c;这个规范目前有两大实现&#xff0c;分别是&#xff1a; SpringFoxSpringDoc 其中 SpringFox 其实也就是我们之前所说的 Swagger&#xff0c;SpringDoc 则是我们今天要说的内容。 OpenApi 就…