用簡(jiǎn)單的CSS實(shí)現(xiàn)將FOOTER固定在頁(yè)面底部,我們通常布局的時(shí)候都是頭部，內(nèi)容區(qū)域，還有底部，一般都是使用三個(gè)div，然后id分別設(shè)置為header，content，footer，然后在定義每個(gè)div的高度，一般來(lái)說(shuō)，header，footer都是公共的，因?yàn)楦叨龋瑑?nèi)容一般都是固定的，底部的區(qū)域，舉個(gè)例子：
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供潤(rùn)州企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為潤(rùn)州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
html
head
style
#header{
width:960px; //通過(guò)id來(lái)控制
height:200px;
}
@content{
width:960px; //通過(guò)id來(lái)控制
height:auto; //內(nèi)容區(qū)域的高度一般都是auto的
}
#footer{
width:960px; //通過(guò)id來(lái)控制
height:200px;
}
/style
/head
body
div id='header'
p我是頭部區(qū)域/p
/div
div id='content'
p我是內(nèi)容區(qū)域/p
/div
div id='footer'
p我是低部區(qū)域/p
/div
/body
/html
a { //定義所有鏈接(a)的樣式
color: #000; //定義文本顏色：黑色
text-decoration: none; //定義下劃線樣式為：不顯示
}
body { //定義body樣式，所有body內(nèi)元素都繼承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;
//定義文本格式：居中 //定義字體樣式：正常（對(duì)應(yīng)加粗、斜體等） 標(biāo)準(zhǔn)字體的0.6倍大小 字庫(kù)為sans-serif,Arial
//標(biāo)準(zhǔn)字體單位 em的大小根字庫(kù)有關(guān)
}
.gfx a { //定義樣式為gfx內(nèi)的鏈接(a)：形如div class='gfx'.. a/a ../div這樣的結(jié)構(gòu)，對(duì)內(nèi)部的a有效
background: #F5F5F5 url(img/bright_pixel.gif) no-repeat;
//定義背景
display: block; height: 240px;
//定義顯示類型：塊級(jí) //定義高度為240像素
}
.header { //定義class=header的元素的樣式
background: #FFF; //定義背景
border-bottom: 1px solid #E5E5E5; //定義下邊框樣式：一像素寬，實(shí)線，顏色為#E5E5E5
font: bold 2.6em Arial; //定義字體：加粗，2.6倍大小，字庫(kù)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; //設(shè)置漂?。嚎孔笃?/p>
padding-top: 4px; //上內(nèi)邊距4像素
width: 149px; height: 36px; //定義寬和高
}
.menu a span { //定義class=menu元素內(nèi)的a元素內(nèi)的span元素
padding-left: 6px; //定義左內(nèi)邊距為6像素
}
.menu a:hover { //定義class=menu元素內(nèi)的鏈接元素當(dāng)鼠標(biāo)移動(dòng)上去的樣式
//繼承.menu a的定義，:hover為偽類，用于標(biāo)示鼠標(biāo)移動(dòng)上去的樣式
background: #EEE url(img/bgmenu.gif) repeat-x; //定義背景
color: #555; //顏色
}
.menu a#last { //定義class=menu元素內(nèi)的id=last的a元素（鏈接）
width: 150px; //寬度
border-right: none; //右邊框?yàn)?
}
.container { //定義class=container元素
margin: 10px; //設(shè)置外邊距
}
.content { //定義class=content的元素
background: #F5F5F5; //背景
border-top: 1px solid #E5E5E5; //上邊框
clear: both; //設(shè)置浮動(dòng)清除：清除兩邊的浮動(dòng)對(duì)象
}
.content h1 { //定義class=content元素內(nèi)的h1元素（標(biāo)題）
margin: 0; //外邊距
font: bold 1.1em sans-serif,Arial; //字體
color: #666; //顏色
}
.content p { //定義class=content元素內(nèi)的p元素（段落）
margin: 3px 0 6px; //外邊距
color: #666; //顏色
}
.item { //定義class=item的元素
background: #FCFCFC url(img/bgitem.gif) repeat-x; //背景
padding: 10px; //設(shè)置內(nèi)邊距
}
.footer { //設(shè)置class=footer的元素
padding: 5px; //內(nèi)邊距
background: #F5F5F5; //背景
color: #666; //顏色
}
＝＝還有不懂的，hi我＝＝
用css動(dòng)態(tài)控制footer的位置，我們可以去換個(gè)思路，只要給內(nèi)容區(qū)域的高度有變化，我們將footer公共出來(lái)給各個(gè)文件調(diào)用，然后給每個(gè)頁(yè)面的content區(qū)域一個(gè)不定長(zhǎng)的高度，就解決了，如height：auto；這里通過(guò)代碼來(lái)理解：
html
head
style
.headr{
width:900px;
height:30px;
background:#f00 //設(shè)置顏色為紅色
}
.content{
width:900px;
height:auto; //給content的高度為auto，這樣我們?cè)诿總€(gè)頁(yè)面中foote的位置就是變化的。
background:#0f0 //設(shè)置顏色為綠色
}
.footer{
width:900px;
height:200px;
background:#000
}
/head
body
div class="headr" //頁(yè)頭
/div
div class="content" //頁(yè)面
/div
div class="footer" //頁(yè)尾
/div
/body
/html
什么是css？
css ：疊層樣式表（Cascading Style Sheets），是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。通俗的講，可以把網(wǎng)頁(yè)內(nèi)容以更好的方式呈現(xiàn)在用戶面前。
如何定義css？
定義css分三類：
標(biāo)簽元素
body,ul,li等，直接定義 ，格式：標(biāo)簽名{屬性：樣式};body{font-size:12px;}
類定義 在前面都是要加點(diǎn)
.top{margin-top:20px;}
id定義，id定義是樣式里做高的，一般不建議用。id定義用#
#footer{ margin-top:20px;}
在html里如何使用css？
使用方式可以分三種：
外聯(lián)式Linking（外部樣式）：將網(wǎng)頁(yè)鏈接到外部樣式表。
?表現(xiàn)形式為：
html
head
!----頭部部分-----
link?href="baidustyle.css"?rel="stylesheet"?type="text/css"
/head
body
!----內(nèi)容部分-----
/body
/html
嵌入式Embedding（內(nèi)頁(yè)樣式）：在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。
?表現(xiàn)形式為：
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
內(nèi)聯(lián)式Inline（行內(nèi)樣式）：應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。
?表現(xiàn)形式為：
body
div?class="btn"
p?style="font-size:21px;"這是一段話/p
/div
/body
重慶分公司
重慶分公司
