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