网页固定側栏的做法
固定側边的做法有非常多种，今天为大家介绍一种非常简单的做法。
整个html文档仅仅有23行代码就搞定了。
网上也有非常多做法，可是都太过复杂。一大堆代码。并且有的非常採用一些jquery的一些插件。
側栏的做法和顶部、页脚都大致雷同。
掌握当中的一种，其它的都非常easy实现。常见的样例有：新浪微博的菜单条，新浪体育的右側二维码扫描等功能都是这种实现。
这种固定特定部位，而不随滚动栏滚动的做法，见以下代码：
<!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>
执行效果例如以下：![]()
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />欢迎大家关注我的博客。如有疑问,请加QQ群：454796847共同学习！?
原文地址：https://www.cnblogs.com/llguanli/p/8520305.html
时间： 2024-08-01 06:09:00
网页固定側栏的做法的相关文章
这节我们要实现的目的只有一个,就是一栏固定一栏自适应. 1.使用div,这样就可以自动填满父标签宽度,设想方案如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> body{padding: 0;margin:0;} #wrap{ overflow:
固定导航栏 前言:很多网站都有这种网页的效果:滑动浏览器右侧的滚动条,导航栏会一直处于最上方 下面我就来简单实现以下这个功能 一.首先我们来写一下html的结构: 1 <div class="top" id="top"></div> 2 <div class="nav" id="nav"></div> 3 <div class="main" id=&qu
效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-
chrome 网页 左侧导航栏不展开 现象 代码 <li class="one"> <a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">菜单 </span><span class="fa arrow"></span></a>
固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法.整个html文档只有23行代码就搞定了. 网上也有很多做法,但是都太过复杂,一大堆代码.而且有的很采用一些jquery的一些插件. 侧栏的做法和顶部.页脚都大致雷同.掌握其中的一种,其他的都很容易实现.常见的例子有:新浪微博的菜单栏,新浪体育的右侧二维码扫描等功能都是这样的实现. 这种固定特定部位,而不随滚动条滚动的做法,见下面代码: <!DOCTYPE html> <html> <head> <title
现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML
视差滚动效果近年来很受大家的欢迎,但实现这个功能一般都需要javaScript,而且实现做起来有一定的难度.就这个问题,我们跟大家分享另外一种比较简单的视差滚动效果技术,只需要CSS就可以实现了.一起来看看吧. 该滚动效果特点是使用固定背景与色块内容交替,当访客向下滚动时,背景是fixed固定的.可学习HTML高级教程了解. 从上图可以看出,内容向上滚动时,第一张背景是固定的,不会跟着向上滚动.即:固定背景 + 色块内容 + 固定背景 + 色块内容…这样的交替方式,从而产生视差效果. 兼容性 I
文字导航栏 示例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .wrap {
