讓頁面在不同分辨率下都全屏顯示,完整代碼參考如下:
創(chuàng)新互聯(lián)10多年企業(yè)網(wǎng)站制作服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站制作及推廣,對成都電動窗簾等多個(gè)方面擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""?
html?xmlns=""?
head?
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/?
title實(shí)現(xiàn)兩邊固定寬度,中間自適應(yīng)寬度-/title?
style?
body{?margin:0;?padding:10px;}?
#head{?margin-bottom:10px;?height:50px;?background-color:#999999}?
#main{}?
#left{?width:200px;?float:left;margin-right:-200px;?background-color:#FF9900}?
#mid{?width:auto;background:#00FF00;margin:0?220px;border:1px?solid?#000;}?
#right{?width:200px;margin-left:-200px;?float:right;?background-color:#CCCC00}?
#foot{?margin-top:10px;?clear:both;?height:50px;?background-color:#CCCCCC}?
/style?
/head?
body?
div?id="head"我是頭部/div?
div?id="main"?
div?id="left"我是左邊,寬:200px/div?
div?id="right"我是右邊,寬:200px/div?
div?id="mid"我是中間,寬自適應(yīng)/div?
/div?
div?id="foot"我是底部/div?
/body?
/html
純css實(shí)現(xiàn)不到那個(gè)程度,
因?yàn)椋阆胂螅?/p>
在body里放一個(gè)div------讓這個(gè)div無論何時(shí)都100%顯示(里面要有內(nèi)容不然顯示不了,比如img,p,他們的長寬參數(shù)也設(shè)置成100%或者70%等等)-
當(dāng)瀏覽器窗口長寬變化時(shí),div和里面的內(nèi)容總是跟著動的,這能做到(電腦屏幕如果只有800,那網(wǎng)頁就會自動變長),但是要注意這絕對滿足不了‘全屏’的要求,拉伸了面積,但是字號、邊框?qū)挾榷际遣蛔兊模缘扔谑窃诟淖僱ayout。
如果要做這個(gè)效果的話(拉伸瀏覽器、實(shí)時(shí)拉伸里面的內(nèi)容使之永遠(yuǎn)‘全屏’):
在以前多是選擇做成一個(gè)大的flash,100%的長寬貼在網(wǎng)頁上,調(diào)一些scale參數(shù)(方便),
現(xiàn)在flash變的不那么流行了你可以用javascrip實(shí)現(xiàn)(有點(diǎn)麻煩,很少見到這樣實(shí)現(xiàn)的),
或者h(yuǎn)tml5的canvas能夠達(dá)到此效果(可惜ie8以下就別想兼容了)
css讓網(wǎng)頁各屏背景全屏顯示,首先需要理解就是瀏覽器展示區(qū)域,其實(shí)就是body這個(gè)部分,想要讓背景全屏的話,需要用到css的background這個(gè)屬性,在選擇好背景的圖片就可以了,具體看下代碼:
html
head
style
body{
background:url('圖片地址')repeat 0px 0px;
}
/style
/head
body
p我是測試文字/p
/body
/html