网页固定側栏的做法

固定側边的做法有非常多种，今天为大家介绍一种非常简单的做法。

整个html文档仅仅有23行代码就搞定了。

网上也有非常多做法，可是都太过复杂。一大堆代码。并且有的非常採用一些jquery的一些插件。

側栏的做法和顶部、页脚都大致雷同。

掌握当中的一种，其它的都非常easy实现。常见的样例有：新浪微博的菜单条，新浪体育的右側二维码扫描等功能都是这种实现。

这种固定特定部位，而不随滚动栏滚动的做法，见以下代码：

<!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共同学习！ 

posted @ 2018-03-07 08:32  llguanli  阅读(287)  评论(0)    收藏  举报