在制作页面有这样一种现象：当一个HTML页面中含有较少的内容时，Web页面的&footer&部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。　　那么如何将Web页面的 &footer&部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，　　换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。　　方法：　　1. HTML结构：&div id="container"&
&div id="header"&Header Section&/div&
&div id="page" class="clearfix"&
页面容容部分
&div id="footer"&Footer Section&/div&&/div&　　实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了 div#header（头部），div#page（页面主体部分），div#footer（页脚部分）　　2. CSS代码：html,body {
margin: 0;
padding:0;
height: 100%;}#container {
min-height:<span style="color: #%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;}#header {
background: #ff0;
padding: 10px;}#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/}#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/
background: #6cf;
clear:both;}原理：&html&和&body&标签：html和body标签中必须将高度(height)设置为&100%&,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；div#container容器：div#container容器必须设 置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度。另外我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器；div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值；div#footer容器：div#footer容器必须设置一个固定高度。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。&
最新教程周点击榜
微信扫一扫通过href简单实现点击a链接跳到页面中指定的地方
作者：佚名
字体：[ ] 来源：互联网 时间：10-30 16:33:26
当点击a标签后，要使其跳到页面里面相应的地方，方法很简单，a标签里面href属性便可轻松做到，将href中的内容和你要跳到这个区域的id同名即可，需要的朋友可以参考下
在页面中点击a标签后，要使其跳到页面里面相应的地方，方法很简单，就是在a标签里面href中的内容和你要跳到这个区域的id同名即可，例如： 代码如下: &a href="#jump"&点我看看&/a& &p id=&jump&&我是该区域的相应内容&/p& 若跳到其它页面相应的地方，只需在href中#jump的前面加上链接地址即可，即：&a href=&链接地址#jump&&点我看看&/a& 这样就可以了，是不是很简单呢
大家感兴趣的内容
12345678910
最近更新的内容这就是前端模板引擎的标志性代码。那么，就这种情况，我先提出几个疑问：a，请问当页面有大量这样的代码需要处理和维护时，页面中的js到底怎么布置才是合理的呢？b，你不觉得，这样的模板维护起来是不太容易吗？直接放置在页面上，如果这个页面要经常变动（首页显然是变动频率比较高的），前端后端都可能有人来维护这份代码，请问冲突了怎么解决呢？有没有办法将冲突风险降到最低？c，请问如果我们不把这些文件直接放在页面上，比如将它们弄到在某个js里面，这样做可以吗？d，如果要这样做，如何让前端开发人员容易维护这样的代码，比如保存即可看到效果，需要怎样一种前端架构设计来完成这需求呢？严重声明：1. 这里并不是想拿VIP开刷，而是我真的一时半会找不到更合适、更有代表性的对象了。这些问题涉及前端开发模式选择的问题，这个章节我不打算展开，留给后面的前端架构分析来补充！2. 虽然我觉得VIP的做法还有更好的选择，但并不是说换我去实施就一定比现在负责这一块的同行做得更好，真心不是这样的。电商这一个领域，很多时候业务的实现都是有时限的，特别是VIP这种高速发展的电商，因此这里只是一种局外人的视角，随便说说罢了。先解决这个问题——为什么我会说电商喜欢将js放在页面的尾部是因为业务优化的需要呢？至少我已经找到了3家（就是前面对比的），因此这不是个例。这里要搞清楚“电商的业务优化需要”是什么？首先，我们要知道，电商其实就是和钱打交道的网站，卖东西，然后收钱，本质上和你我他家门口的小卖部没啥两样，只是我们通过网络来进行，而网络这种东西是不透明的，你不知道卖东西的是不是一条狗还是一只猫，当然买东西的一样，大家相互信任的基础是非常薄弱的。好在淘宝等一大批先驱将网络支付的这种文化或习惯培养了起来，我们后进场的电商玩家就要基于各种在线支付手段来完成买卖，但是玩家人数很多啊，而且都不是BAT级别的，本来用户对于这种电商的信任度就比较低，大家对于任何可以提高用户体验的细节都要做到斤斤计较，能有多完美就要多完美。还有很多，但必须打住...我只是为了照顾部分客官，打了这么多废话出来，其实就是想说明电商的竞争非常激烈，极致的用户体验是分出胜负手的关键，这就是前端技术发挥余力的地方了。比如，尽快输出首屏幕的页面内容，尽快地让用户可以进行交互，等等吧。首页首屏秒开已经是电商的最低要求了，秒开，你懂吧？那么，电商的首页首屏都有啥内容呢？如何以极限的速度呈现给用户呢？咱们是前端，我只能限制在前端的范畴。假设html文档都是150Kb左右，gzip之后是30Kb左右，网络带宽一样，而用户获得文档的时间基本是一致的。在这些前提下，我们同时获得文档之后，如何根据html结构布置js及其交互逻辑，才能以最快速度呈现首屏内容并提供交互呢？这里就以考拉网为例，其首屏内容如下图：其首屏内容可细分为header部分（包括topbar、logo、搜索框和导航）slider广告幻灯片（多图）四个优势提醒（网易自营，低价保障，闪电发货，全场包邮）一个通栏广告（就是App下载的那个）由于浏览器线性加载的特点，首屏内容看到之前，我们至少会得到文档内容和css样式，如果我们第一时间让用户看到页面，那么，这里就应该只有首屏的图片就可以了，比如logo、购物侧图标、banner大图，四个优势对应的图标以及广告图片。如果我们将js布置在head里面，那么碰到js就要第一时间去加载js，这里就要消耗浏览器加载资源，对吗？而且js是阻塞方式加载的，即便是加载足够快，但也阻挡了首屏的内容！也就是，将js放在这里是不合适的。但是，我们将js放到文档的后面，如果前面有很多很多的图片资源，那么浏览器发起js加载请求可能就要等这些图片加载之后，那么首屏的页面却需要js提供交互了，比如幻灯片就是这种情况，那么首屏之后的内容就不能干扰js的加载，否则用户体验就很差，因为发生了TTI延迟问题（这个TTI兄弟，它有很多可以诉说的故事，切莫着急，俺会慢慢道来滴）。事实上，网易考拉网的首页首屏内容的呈现的优化空间，至少有两点：第1点：导航里面有很多“热卖大牌”，带有logo的，这些logo图片是直接用src发请求的，这是完全没有必要的，因为第一次进来用户没有触发导航下拉之前看不到这些东西，或者他可能从来到这里到离开，都不会点击打开下拉列表。比如我就是一个案例，在没有写这个文章之前，也不知道导航里面有那么多图片的，研究了源代码才发现这里还有那么多精彩，因此建议用js控制起来，用户没有触发之前就不要发起请求了。第2点：首屏内容中轮播大图在用户进来之后就全部加载了，这也是没有必要的，只需要其中的一张即可。也就是，进入页面后用img的scr发起一个下载请求，其他img不要即刻去发起下载，而是等到js加载之后，用js来发起其他图片请求，等待所有轮播图片都加载完成之后，再执行轮播的逻辑。但是，如果要用js控制轮播图的加载就会有一个技术上的难点，如何知道轮播图片加载完成了呢？是全部完成之后再提供轮播切换交互，还是出现加载完一张就多一个切换，抑或是当加载到第n张之后就开始提供可交互，而不管n张以后的是否加载完成呢？此外，如果是要兼容IE6/7/8，坑很多。按照这个思路，在兼顾SEO的前提下，PC端电商首页首屏要以极限的速度呈现给用户，我的做法是：也就是说，电商网站PC端做极限的性能优化，其精髓就是——将浏览器基本无序的资源加载请求有序地控制起来，包括js本身，这就是js要放在脚步的缘由。除了首屏看得见的资源（主要是图片资源）外，其他资源一律需要通过js来控制，而不能随意地发起http请求（包括首屏看不到的资源）。按照这个原则，js只能放在body标签闭合之前，并且js逻辑不能随意书写！其实这样做是有代价的，图片资源无法被搜索引擎正常抓取！但是这个对于电商来说，重要吗？大家都是要通过购买流量来PK的，所以不太重要。不同版本的浏览器下，对于资源下载都有一定优化，webkit内核的浏览器表现好很多，其他浏览器尤其是老版本的IE表现有时候让人搞不明。以考拉网为案例，说明电商网站喜欢将js放在底部，其缘由其实是因为业务优化需要，但并不是每一家都会这么做，典型的代表例如Tmall、VIP等，为什么有还是有不少电商是不放在底部的呢？其实很多时候还是要看业务需要，以及和一开始的技术选型有关，这个真不是一时半会可以说得清楚的，这里就不展开了。-----编辑于 09:12:23-----（三）逆向分析考拉网的前端架构方案这里分享的是根据别人将js放在底部，并且只能看到一大堆压缩优化后的代码，如何去学习别人前端架构设计的一种方法或途径。当然，我经常这么做，收获颇大，有时候想偷窥别人的源代码，这样才是最接近真实情况的，有时候确实也能瞎猫撞上死耗子。不管怎样，我觉得这种方法还是可行的，分享给大家。还是以考拉网为例。我先把首页html框架抽出来，梳理出大致页面结构，然后结合js，来看看别人是怎么做的。考拉的首页html框架如下：
&&& span=''& charset='utf-8' /&
网易考拉海购
rel='stylesheet' href='http://mm.bst.126.net/build/combo_f0ae46c.css?v=' /&
rel='stylesheet' href='http://mm.bst.126.net/build/combo_935bd74.css?v=' /&&&& span=''& class='indexPage'&
&&& span=''& id='topNav'&
&&& span=''& class='hide'&网易考拉海购
&&& span=''& id='docHead'&
&&& span=''& id='topTabBox'&
&&& span=''& class='wrap'&
&&& span=''& class='topBgWrap clearfix'&
&&& span=''& class='m-slogan'&
&&& span=''& class='mainBgWrap clearfix'&
&&& span=''& class='m-recomds'&
&&& span=''& class='m-halfbanner'&
&&& span=''& class='w-tit1'&&&& span=''& class='big'&今日限时特卖&&
&&& span=''& id='hotsaleblock'&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&& span=''& class='m-recomds m-recomds-next'&
&&& span=''& class='w-tit2'&&&& span=''& class='big'&下期特卖预告&&
&&& span=''& class='w-tit1'&&&& span=''& class='big'&全球精选&&
&&& span=''& class='m-hslist clearfix'&
TA的最新馆藏查看: 3661|回复: 9
网页填表.网页_滚动条固定 (, )正确用法
阅读权限20
在线时间 小时
结帖率： (3/8)
.支持库 HtmlView
.支持库 spec
超文本浏览框1.跳转 (“”, , )
.判断循环首 (超文本浏览框1.是否正在下载 () ＝ 真)
& & i ＝ i ＋ 1
& & 延迟 (1000)
& & .如果真 (i ≥ 30)
& && &&&结束 ()
& & .如果真结束
.判断循环尾 ()
超文本浏览框1.取窗口句柄 ()
网页填表.网页_滚动条固定 (, )
这么写怎么不起作用呀
急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急
.子程序 _超文本浏览框1_载入完毕
.局部变量 x, 整数型
.局部变量 y, 整数型
网页填表.就绪判断_文本关键字 (超文本浏览框1.取窗口句柄 (), “关于百度”, , , 5000)
网页填表.初始化 (超文本浏览框1.取窗口句柄 ())
' 网页填表.滚动条取位置 (x, y)
' 调试输出 (x, y)'先自己把滚动条拉到指定位置,然后用这个命令取出来.
网页填表.滚动条固定 (105, 42)
' 然后再记住这个位置,.用这个命令. 移动到相应 ...
回答提醒：如果本帖被关闭无法回复，您有更好的答案帮助楼主解决，请发表至
可获得加分喔。友情提醒：本版被采纳的主题可在
帖子申请荣誉值，获得 1点 荣誉值,荣誉值可兑换终身vip用户组哦。快捷通道： →
本帖被以下淘专辑推荐:
& |主题: 1294, 订阅: 2
阅读权限255
在线时间 小时
签到天数: 3 天结帖率： (2/4)
&&_超文本浏览框1_载入完毕&&x整数型&&y整数型&&网页填表.就绪判断_文本关键字 (超文本浏览框1.取窗口句柄 (), “关于百度”, , , 5000)网页填表.初始化 (超文本浏览框1.取窗口句柄 ()) ' 网页填表.滚动条取位置 (x, y) ' 调试输出 (x, y)'先自己把滚动条拉到指定位置,然后用这个命令取出来.网页填表.滚动条固定 (105, 42)&&' 然后再记住这个位置,.用这个命令. 移动到相应的位置.版本 2
.子程序 _超文本浏览框1_载入完毕
.局部变量 x, 整数型
.局部变量 y, 整数型
网页填表.就绪判断_文本关键字 (超文本浏览框1.取窗口句柄 (), “关于百度”, , , 5000)
网页填表.初始化 (超文本浏览框1.取窗口句柄 ())
' 网页填表.滚动条取位置 (x, y)
' 调试输出 (x, y)'先自己把滚动条拉到指定位置,然后用这个命令取出来.
网页填表.滚动条固定 (105, 42)&&' 然后再记住这个位置,.用这个命令. 移动到相应的位置
您可以选择打赏方式支持他
阅读权限255
在线时间 小时
签到天数: 3 天结帖率： (4/4)
固定里有参数的 你按F1&&看提示& & 把参数填写上
您可以选择打赏方式支持他
阅读权限20
在线时间 小时
结帖率： (3/8)
我写了，但是还是没反映
您可以选择打赏方式支持他
阅读权限20
在线时间 小时
结帖率： (3/8)
或者， 告诉我怎么把超文本浏览框的纵向滚动条 自动拉到最下面
您可以选择打赏方式支持他
阅读权限20
在线时间 小时
结帖率： (3/8)
冰点 发表于
这段源码，放到易语言的任意位置都行么？
您可以选择打赏方式支持他
阅读权限255
在线时间 小时
签到天数: 3 天结帖率： (2/4)
我这个是 放到 超文本浏览框 的 载入完毕事件里面. 理论上说放其他子程序下面都没问题的,当然,这个是针对 百度 .
您可以选择打赏方式支持他
阅读权限10
在线时间 小时
您可以选择打赏方式支持他
阅读权限20
在线时间 小时
结帖率： (3/8)
嗯哪， 好了， 研究出来咋用的了，，
您可以选择打赏方式支持他
阅读权限20
在线时间 小时
结帖率： (3/8)
.支持库 spec
& & 对象_标题 ＝ 对象.对象型方法 (“getElementsByName”, “title”).对象型方法 (“item”, )
& & 对象_标题.写属性 (“value”, 标题)
& & 延迟 (500)
& & getElementByClass (“tb-editor-editarea”).写属性 (“innerText”, 文本_取随机字母 (取随机数 (10, 30)) ＋ 编辑框7.内容 ＋ 文本_取随机字母 (取随机数 (10, 30)) ＋ 文章)
& & 延迟 (500)
& & getElementByClass (“pt_valid_code”).对象型方法 (“firstChild”, ).写属性 (“value”, 编辑框3.内容)
& & 延迟 (1000)
& & 网页填表.按钮_点击 (“2”)
哥们， 这个是百度贴吧填表发帖用的， 这个能不能帮我解决一下， 这个源码是我 下载别人的直接拿来用了， 一点不懂啥意思呀？& &这里面的内些英文的都是什么东西？&&在哪取到的？ 用什么工具？ 我还剩把这个问题， 放最佳了以后， 我就还剩下300+精币了，&&300精币能不能帮忙解决 这个填表的问题
您可以选择打赏方式支持他
精易论坛 - 有你更精彩 /1
来围观微软.net的强大？
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论，本站内容均为会员发表，并不代表精易立场!
揭阳精易科技有限公司申明:我公司所有的培训课程版权归精易所有，任何人以任何方式翻录、盗版、破解本站培训课程，我们必将通过法律途径解决！
公司简介：揭阳市揭东区精易科技有限公司致力于易语言教学培训/易语言学习交流社区的建设与软件开发，多年来为中小企业编写过许许多多各式软件，并把多年积累的开发经验逐步录制成视频课程供学员学习，让学员全面系统化学习易语言编程，少走弯路，减少对相关技术的研究与摸索时间，从而加快了学习进度！
防范网络诈骗，远离网络犯罪
违法和不良信息举报电话，企业QQ： ，邮箱：@
Powered by
粤公网安备 25