固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个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>
运行效果如下: