网页固定侧栏的做法

简介: <p>固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个html文档只有23行代码就搞定了。</p><p>网上也有很多做法,但是都太过复杂,一大堆代码。而且有的很采用一些jquery的一些插件。</p><p>侧栏的做法和顶部、页脚都大致雷同。掌握其中的一种,其他的都很容易实现。常见的例子有:新浪微博的菜单栏,新浪体育的右侧二维码扫描等功能都是这样的实现。</p><p>这种固定

固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个html文档只有23行代码就搞定了。

网上也有很多做法,但是都太过复杂,一大堆代码。而且有的很采用一些jquery的一些插件。

侧栏的做法和顶部、页脚都大致雷同。掌握其中的一种,其他的都很容易实现。常见的例子有:新浪微博的菜单栏,新浪体育的右侧二维码扫描等功能都是这样的实现。

这种固定特定部位,而不随滚动条滚动的做法,见下面代码:

<!DOCTYPE html>
<html>
	<head>
		<title>测试</title>
		<style>
			#left{
				position:fixed;
				top:100px;
				right:0px;
			}
			.content{
				height:1700px;
				border:1px solid red;
			}
		</style>
	</head><!-- 欢迎大家关注我的博客!如有疑问,请加QQ群:454796847共同学习! -->
	<body>
		<div id="left">
			<img src="1.png"/>
		</div>
		<div class="content"></div>
	</body>
</html>
运行效果如下: 欢迎大家关注我的博客!如有疑问,请加QQ群:454796847共同学习! 

目录
相关文章
|
3月前
|
网络协议
浅谈网页从请求到显示的过程
浅谈网页从请求到显示的过程
|
6月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
69 0
|
5月前
|
图形学 Android开发 开发者
U3D游戏开发实战:有效策略缩小包体大小,提升加载速度
【7月更文第12天】随着移动设备的普及,Unity 3D(简称U3D)作为一款强大的跨平台游戏开发引擎,成为了众多独立开发者和游戏工作室的首选。然而,面对日益增长的用户需求与有限的设备存储空间,如何在保证游戏质量的同时,有效缩减游戏包体大小,成为了开发者面临的一大挑战。本文将探讨一系列实用技巧和最佳实践,帮助你在U3D开发小游戏时显著减小包体尺寸,从而提升玩家的下载体验与启动速度。
121 12
|
存储 缓存 网络协议
从输入URL到页面加载的全过程?隐藏元素有哪些方式,有什么区别?什么是内存泄漏?
1. 在浏览器地址栏输入url并回车 2. 浏览器查看是否有缓存,比较缓存是否过期,无缓存或过期则重新发起请求 3. DNS解析域名对应的IP 4. 根据IP建立TCP链接,即三次握手 5. 发送http请求 6. 服务器响应并返回结果 7. 关闭TCP链接,即四次挥手 8. 渲染页面,构建DOM树
|
UED
网站性能:不同加载类型的差别
网站性能:不同加载类型的差别
74 0
网站性能:不同加载类型的差别
|
搜索推荐 5G 数据安全/隐私保护
想要网站流量好,这一步不可少
想要网站流量好,这一步不可少
224 0
想要网站流量好,这一步不可少
|
数据采集 消息中间件 大数据
爬虫识别-关键页面最小访问间隔-需求及思路|学习笔记
快速学习爬虫识别-关键页面最小访问间隔-需求及思路
157 0
|
算法 搜索推荐 索引
网页权重和百度快照之间的关系
网页权重和百度快照之间的关系www.20200824.com
122 0
网页宽度一般设置多少才合适?
许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800600尺寸及1024768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.网页设计标准尺寸: 阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
3708 0