网页固定侧栏的做法

简介: <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共同学习! 

目录
相关文章
|
8月前
|
存储 缓存
百度搜索:蓝易云 ,CPU、内存、缓存的关系详细解释!
总结起来,CPU、内存和缓存之间的关系可以概括为:CPU是计算机的处理器,内存是用于存储数据的设备,缓存则是位于CPU和内存之间的高速存储器,用于提高数据的读取速度。它们共同协作,以提供高效的计算机性能。
87 0
|
1天前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
|
前端开发
给大家科普一泛二级程序前端几十套模板随机切换
​ 今天给大家分享几个小旋风蜘蛛池的泛二级程序网站站群模板,是无备案 新域名都可以用 老域名备案域名效果更好, 文章自动配图 关键词自动配图 泛二级程序模板是一款专门为了要从事相关工程方面工作的
99 0
|
UED
网站性能:不同加载类型的差别
网站性能:不同加载类型的差别
56 0
网站性能:不同加载类型的差别
|
搜索推荐 5G 数据安全/隐私保护
想要网站流量好,这一步不可少
想要网站流量好,这一步不可少
151 0
想要网站流量好,这一步不可少
Python实现自动访问网页
Python实现自动访问网页
|
存储 负载均衡 前端开发
网站选择什么样配置的服务器合适?
网站选择什么样配置的服务器合适?
159 0