网页固定侧栏的做法

标签: 固定导航fixedposition侧栏固定html5
2005人阅读 评论(0) 收藏 举报
分类:

固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个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共同学习! 

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:615897次
    • 积分:9901
    • 等级:
    • 排名:第1758名
    • 原创:159篇
    • 转载:0篇
    • 译文:0篇
    • 评论:303条
    赞助合作
    我的微信公众号
    感谢打赏 支付宝二维码
    支付宝
    感谢打赏 微信二维码
    微信
    我的微博
    友情链接
    博客专栏
    最新评论
    文章分类