网页固定侧栏的做法

原创 2015年07月09日 15:13:16

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

实现侧栏固定宽度,内容栏宽度自适应

常用侧栏固定宽度,内容栏的宽度自适应,在不同的分辨率下实现宽度自适应。下面是我根据工作实践总结的一些实现方法的demo。方法一:固定宽度区浮动 float,自适应区宽度自适应设置 marginhtml...
  • zfangls
  • zfangls
  • 2016年12月03日 17:15
  • 173

怎么给网页写一个侧栏(横向两列布局-使用绝对定位和相对定位的方法)

像是一个这样的网页 他有3个主栏,1个侧栏。这个应该怎么来实现? ………………………………………………………………………………………………………………………… 我觉得是这样的,就是我们在写一个网页...

点击相应网页链接,左侧导航栏变色做法

如何做到点击左侧导航栏,右侧出现相应网页,同时导航栏相应位置变色? 用 a:link{color: #blue; TEXT-DECORATION: none;} a:visited {C...

jQuery展开折叠侧栏导航菜单

< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目, < /dd>用来创建列表中最下层项目, < dt>< /dt>和< dd>< /dd>都必须放在< d...
  • mqy1023
  • mqy1023
  • 2017年05月25日 09:27
  • 507

IOS仿网易新闻客户端左右侧栏

左右侧栏已经是当前APP最流行的布局,很多客户端软件都使用了左右侧栏,例如网易新闻,人人网,Weico等等。 这篇博客以当前网易新闻客户端的模式为例仿写了一个左右侧栏架构实现。 先看一下Demo的...
  • ran0809
  • ran0809
  • 2013年10月11日 00:12
  • 5445

Android知识点四:侧栏滑动效果

首先准备工作:mframework.jar包(SlidingMenu)     MainActivity.java     private SlidingMenu menu; private M...

用WP短代码在侧栏小工具中调用不同分类的文章

本文介绍如何简单的在Wordpress主题中用短代码(shortcode)在侧栏的小工具里调用不同分类的若干最新文章。 This article allow you know how to us...

iOS UI设计: 仿QQ左边抽屉侧栏侧拉效果

tips:  实现原理:   1.  了解整个ui层次组成, 主视图控制器是一个viewcontroller嵌入的一个navicontroller. 为了使它能整体移动缩放(包括tabbar), ...

Merit价值和成果管理系统——1侧栏与iframe

Merit成果登记系统—4、侧栏菜单和iframe联动 今晚开不了工了,记录一下昨晚到今天凌晨的成果吧。 应该是前天晚上到凌晨,总算搞定了一个小小功能。著名的ztree树状菜单拥有a href=*...

【笔记】通讯录使用侧栏字母索引

侧边字母索引在通讯录、地区选择之类的长listview中比较实用。 自定义View public class SectionIndexBar extends View { //索引 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页固定侧栏的做法
举报原因:
原因补充:

(最多只允许输入30个字)