码迷,mamicode.com
首页 > Web开发 > 详细

网页固定側栏的做法

时间:2018-03-07 10:32:03      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:tis   文档   简单的   fill   固定   doc   qq群   order   jquery   

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

整个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共同学习!?

网页固定側栏的做法

标签:tis   文档   简单的   fill   固定   doc   qq群   order   jquery   

原文地址:https://www.cnblogs.com/llguanli/p/8520305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!