网页固定侧栏的做法

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

目录
相关文章
|
6月前
每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧
每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧
43 1
|
12月前
|
前端开发
给大家科普一泛二级程序前端几十套模板随机切换
​ 今天给大家分享几个小旋风蜘蛛池的泛二级程序网站站群模板,是无备案 新域名都可以用 老域名备案域名效果更好, 文章自动配图 关键词自动配图 泛二级程序模板是一款专门为了要从事相关工程方面工作的
93 0
|
UED
网站性能:不同加载类型的差别
网站性能:不同加载类型的差别
48 0
网站性能:不同加载类型的差别
|
搜索推荐 5G 数据安全/隐私保护
想要网站流量好,这一步不可少
想要网站流量好,这一步不可少
135 0
想要网站流量好,这一步不可少
html+css实战157-定位-固定
html+css实战157-定位-固定
104 0
html+css实战157-定位-固定
网页宽度一般设置多少才合适?
许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800600尺寸及1024768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.网页设计标准尺寸: 阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
3647 0