扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
用简单的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
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的位置，我们可以去换个思路，只要给内容区域的高度有变化，我们将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 ：叠层样式表（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
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网