网站中的图片对SEO有什么作用
网页设计用DIV布局的原因是什么
资讯>网页设计>自适应网页设计制作页脚方法

自适应网页设计制作页脚方法

文 / NaNa许 / 2016-11-02

现在自适应网页设计备受网页设计师欢迎,页脚是网页不可忽视的一部分,那么今天就分享一下自适应网页设计制作页脚方法。

      现在自适应网页设计备受网页设计师欢迎,页脚是网页不可忽视的一部分,那么今天就分享一下自适应网页设计制作页脚方法。

自适应网页设计

 

   1、让 footer 能够刚好在最下方的方法,可以给footer加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度,即 margin-top: -50px; 。如此当内容超过一屏我们会看到内容会盖在 footer 的上方,因此我们还要给 content-box 和 sidebar 加一个父级元素,设定下方内补丁等于 footer 的高度,强制把 content-box 和 sidebar 向上推一个footer 的高度。同时,因为 content-box 和 sidebar 是浮动元素,所以我们还需要闭合浮动元素 。

     2、加上页头页脚和内容部分,为了让 footer 在最下方,我们当然要把 footer设置wrapper 之外。当然,为了防止高度就超过一屏了,需要照下面做。
#header { background: Green; height: 40px; } #sidebar { float: left; width: 200px; background: Gray; } #content-box { float: right; width: 570px; background: Olive; } #footer { height: 50px; background: Background; width:770px; margin: auto; }
     3、为了让浏览器识别高度100%在设计时需要先给html和body加上一个高度值,同时清除所有元素的margin和padding。此外,html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。
* { margin: 0; padding: 0; } html, body { height: 100%; }
     为了让布局自适应高度,我们要加上 min-height: 100%;,虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用:

#wrapper { min-height: 100%; } * html #wrapper { height: 100%; } 

     这样,页脚最小高度满一屏的自适应布局就做好了。


文章由上海网站建设公司昭歌信息整理发布http://www.zhaoge.net/,转载请注明出处

关注昭歌

热门标签

网站建设 响应式网站建设 网站建设维护 网络营销 SEO SEM 网站制作 网站设计 网站改版 网站建设公司

推荐文章

>从用户搜索习惯角度来谈公司网站制作

>企业归属感是B2B行业网站制作的关键点

>电商平台开发简单化成功几率更高

>这几个优秀的网页设计创意十足!

>响应式网站建设在浏览器中的移动应用测试

>旅游网页设计中要重视搜索、客服和标题和描述

>行业网站制作对企业营销的影响

>电商平台开发前一定要想清楚三个问题

>社交网站设计留住网民才是关键

>寻找房产网站设计公司:昭歌信息

最新专题

三分钟看懂网站建设


喜欢来点赞

分享到:

自适应网页设计制作页脚方法

网页设计

<<
网站中的图片对SEO有什么作用...

>>
网页设计用DIV布局的原因是什么...

相关标签 自适应网页设计

我要提问(*)为必填项 更多问答>
热门资讯最新资讯

扫一扫,关注昭歌微信公众号

分享到微信朋友圈x
打开微信,点击底部“发现”,使用 “扫一扫” 将网页分享到朋友圈。

Call me back

给我回电,多一份方案,多一份选择

4001-101-606
服务热线:4001-101-606业务咨询:1850214766824小时在线客服: 地址:上海市长宁区中山西路179号虹桥世家商务楼12M