网页固定侧栏的做法

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

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

时间: 2024-07-29 10:26:51

网页固定侧栏的做法的相关文章

一组网页边栏过渡动画,创意无限!【附源码下载】

今天我们想与大家分享另一套过渡效果.这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的.我们的想法是,以细微的 过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推到一边.这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给 你一些启示. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 立即下载      在线演示 因为我们希望能够在一个页面上展现所有的效果,因此我们示

创意无限!一组网页边栏过渡动画【附源码下载】

今天我们想与大家分享另一套过渡效果.这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的.我们的想法是,以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推到一边.这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给你一些启示. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 立即下载      在线演示 因为我们希望能够在一个页面上展现所有的效果,因此我们示例的

关于网页导航栏制作的几种方法与常见问题解决(新人向)

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

网页固定側栏的做法

固定側边的做法有非常多种,今天为大家介绍一种非常简单的做法. 整个html文档仅仅有23行代码就搞定了. 网上也有非常多做法,可是都太过复杂.一大堆代码.并且有的非常採用一些jquery的一些插件. 側栏的做法和顶部.页脚都大致雷同. 掌握当中的一种,其它的都非常easy实现.常见的样例有:新浪微博的菜单条,新浪体育的右側二维码扫描等功能都是这种实现. 这种固定特定部位,而不随滚动栏滚动的做法,见以下代码: <!DOCTYPE html> <html> <head> &

文字导航栏的做法

文字导航栏 示例: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <style>         * {             margin: 0;             padding: 0;         }         .wrap {

网页title栏文字滚动

<script type="text/javascript"> var text = document.title var timerID function newtext() { clearTimeout(timerID) document.title = text.substring(1, text.length) + text.substring(0, 1) text = document.title.substring(0, text.length) timerID

网页边栏过渡动画

在线演示      源码下载

用scrollTop制作一个滚动栏

我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollTop就行. scrollTop:返回或设置匹配元素的滚动条的垂直位置. 1 <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-co

利用jquery制作网页导航定位

我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品.那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息.例如图中所示,左侧是商品列表,右侧是商品分类导航栏. 我们现在需要做到的效果是: 1.点击某个商品分类,自动跳转至具体的商品列表. 2.在鼠标滚动浏览商品的同时,根据左侧的商品信息的变化情况,右侧的分类名称会自动标红.表示现在浏览的商品正是该分类下的商品. 实现的基本思路: 1.设置锚点.在导航栏的<a>标签中,设置"href"属性为