在CSS实现Footer置底的几种方式

用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部，内容区域，还有底部，一般都是使用三个div，然后id分别设置为header，content，footer，然后在定义每个div的高度，一般来说，header，footer都是公共的，因为高度，内容一般都是固定的，底部的区域，举个例子：

成都创新互联公司是一家专业提供润州企业网站建设,专注与网站设计、成都网站制作、H5页面制作、小程序制作等业务。10年已为润州众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

html

head

style

#header{

width:960px; //通过id来控制

height:200px;

}

@content{

width:960px; //通过id来控制

height:auto; //内容区域的高度一般都是auto的

}

#footer{

width:960px; //通过id来控制

height:200px;

}

/style

/head

body

div id='header'

p我是头部区域/p

/div

div id='content'

p我是内容区域/p

/div

div id='footer'

p我是低部区域/p

/div

/body

/html

这段CSS样式文件代码的意思

a { //定义所有链接(a)的样式

color: #000; //定义文本颜色：黑色

text-decoration: none; //定义下划线样式为：不显示

}

body { //定义body样式，所有body内元素都继承body的样式

background: #CCC url(img/bg.gif) repeat-y fixed bottom center;

//定义背景：灰色 背景图片url地址 横向平铺 背景固定 背景图片位于最下居中

color: #333; margin: 20px 0;

//定义颜色 //定义外边距：上下边距20px 左右边距0

text-align: center; font: normal 0.6em sans-serif,Arial;

//定义文本格式：居中 //定义字体样式：正常（对应加粗、斜体等） 标准字体的0.6倍大小 字库为sans-serif,Arial

//标准字体单位 em的大小根字库有关

}

.gfx a { //定义样式为gfx内的链接(a)：形如div class='gfx'.. a/a ../div这样的结构，对内部的a有效

background: #F5F5F5 url(img/bright_pixel.gif) no-repeat;

//定义背景

display: block; height: 240px;

//定义显示类型：块级 //定义高度为240像素

}

.header { //定义class=header的元素的样式

background: #FFF; //定义背景

border-bottom: 1px solid #E5E5E5; //定义下边框样式：一像素宽，实线，颜色为#E5E5E5

font: bold 2.6em Arial; //定义字体：加粗，2.6倍大小，字库Arial

line-height: 3em; //定义行高：3倍正常字体高度

}

.main { //定义class=main的元素的样式

background: #FFF; //背景

border: 3px double #EEE; //定义边框：3像素宽，双线，灰色

border-color: #E4E4E4 #CFCFCF #CCC #CFCFCF; //定义边框颜色，顺序依次为上、右、下、左

margin: 20px auto 4px auto; //定义外边距，顺序同上

text-align: left; //定义文本格式：靠左

width: 620px; //定义宽度

}

.menu a { //定义class=menu的元素中的链接Link元素（a）

background: #EEE; //背景

border-right: 1px solid #CECECE; //右边框

border-top: 1px solid #E5E5E5; //上边框

color: #888; //颜色

float: left; //设置漂浮：靠左漂浮

padding-top: 4px; //上内边距4像素

width: 149px; height: 36px; //定义宽和高

}

.menu a span { //定义class=menu元素内的a元素内的span元素

padding-left: 6px; //定义左内边距为6像素

}

.menu a:hover { //定义class=menu元素内的链接元素当鼠标移动上去的样式

//继承.menu a的定义，:hover为伪类，用于标示鼠标移动上去的样式

background: #EEE url(img/bgmenu.gif) repeat-x; //定义背景

color: #555; //颜色

}

.menu a#last { //定义class=menu元素内的id=last的a元素（链接）

width: 150px; //宽度

border-right: none; //右边框为0

}

.container { //定义class=container元素

margin: 10px; //设置外边距

}

.content { //定义class=content的元素

background: #F5F5F5; //背景

border-top: 1px solid #E5E5E5; //上边框

clear: both; //设置浮动清除：清除两边的浮动对象

}

.content h1 { //定义class=content元素内的h1元素（标题）

margin: 0; //外边距

font: bold 1.1em sans-serif,Arial; //字体

color: #666; //颜色

}

.content p { //定义class=content元素内的p元素（段落）

margin: 3px 0 6px; //外边距

color: #666; //颜色

}

.item { //定义class=item的元素

background: #FCFCFC url(img/bgitem.gif) repeat-x; //背景

padding: 10px; //设置内边距

}

.footer { //设置class=footer的元素

padding: 5px; //内边距

background: #F5F5F5; //背景

color: #666; //颜色

}

＝＝还有不懂的，hi我＝＝

如何用css动态控制footer的位置

用css动态控制footer的位置，我们可以去换个思路，只要给内容区域的高度有变化，我们将footer公共出来给各个文件调用，然后给每个页面的content区域一个不定长的高度，就解决了，如height：auto；这里通过代码来理解：

html

head

style

.headr{

width:900px;

height:30px;

background:#f00 //设置颜色为红色

}

.content{

width:900px;

height:auto; //给content的高度为auto，这样我们在每个页面中foote的位置就是变化的。

background:#0f0 //设置颜色为绿色

}

.footer{

width:900px;

height:200px;

background:#000

}

/head

body

div class="headr" //页头

/div

div class="content" //页面

/div

div class="footer" //页尾

/div

/body

/html

什么是css，如何定义css，在html里如何使用css

什么是css？

css ：叠层样式表（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。通俗的讲，可以把网页内容以更好的方式呈现在用户面前。

如何定义css？

定义css分三类：

标签元素

body,ul,li等，直接定义 ，格式：标签名{属性：样式};body{font-size:12px;}

类定义 在前面都是要加点

.top{margin-top:20px;}

id定义，id定义是样式里做高的，一般不建议用。id定义用#

#footer{ margin-top:20px;}

在html里如何使用css？

使用方式可以分三种：

外联式Linking（外部样式）：将网页链接到外部样式表。

 表现形式为：

html

head

!----头部部分-----

link href="baidustyle.css" rel="stylesheet" type="text/css"

/head

body

!----内容部分-----

/body

/html

嵌入式Embedding（内页样式）：在网页上创建嵌入的样式表。

 表现形式为：

body

div class="btn"

p这是一段话/p

/div

/body

style

body {margin:0; padding:0;}

.btn {border:1px #ccc solid; width:500px; height:300px;background:#fbfbfb;}

.btn p {font-size:21px;}

/style

内联式Inline（行内样式）：应用内嵌样式到各个网页元素。

 表现形式为：

body

div class="btn"

p style="font-size:21px;"这是一段话/p

/div

/body

当前标题：包含css样式footer{的词条
分享路径：http://ybzwz.com/article/dsdcjhj.html