网站制作页脚如何自适应布局
网页设计是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。下面小编给大家分享的是学习网站制作页脚如何自适应布局,在这里详细的介绍了学习网站制作页脚如何自适应布局 ,希望对大家有所帮助.
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%; }2、因为上面提到的问题,所以为了让布局自适应高度,我们要加上 min-height: 100%;,虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用:
#wrapper { min-height: 100%; } * html #wrapper { height: 100%; } 这样,一个最简单的最小高度满一屏的自适应布局就做好了。
-
ASP.NET新型的投票结果显示方法
一个投票功能模块少不了查看投票结果,用进度条显示各个投票结果可以起到一目了然的效果。以下是我的方法,请大家不吝赐教:1:做一张图片用于做进度条,只需要很小的一个图片就可以了,如高20px,宽1px。2:在要显示进度条的单元格中插入image控件,其imageUrl设置为已做好的...
-
如何获取PHP数组的键与值呢
array_keys($array);//获取数组(字典)的所有键值,返回一个键值数组。array_values($array)://获取数组的所有value值,饭回一个数组。<?php$json='{"a":1,"b":2,"c":3,"d":4,"e":5}';//注明:value不带双引号时,其值只能是数字。【!!!注意:大括号两边只能是单引号,...
-
Dreamweaver技巧详解
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。下面给大家介绍Dreamweaver技巧,一起来学习吧!Dreamweaver技巧详解1、灵活运用样式熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择CustonStyle来调用Style...
-
关于jQuery实现鼠标单击网页文字后在文本框显示的方法介绍
本文实例讲述了jQuery实现鼠标单击网页文字后在文本框显示的方法。分享给大家供大家参考。具体实现方法如下:张三李四王五赵六选择姓名$("ulli")k(function(){vartext=$(this)();$("input")("");$("input:checked")nts("td")ings("td")dren("input")(text);})希...