固定寬度布局是頁面排版中最常用的一種布局方式。頁面中用于分區(qū)的容器的寬度都是以像素定義的。這種排版方法能令網(wǎng)頁設計師很好的控制布局和定位。若將一個容器的寬度設置為1000像素。那么這個容器再任何瀏覽器上都顯示為1000像素寬。

現(xiàn)今的瀏覽器大部分的像素都是1440X900像素，也有大屏幕1920X1080像素的。分辨率有差異，網(wǎng)頁設計師要是用固定寬度布局方式就很難兼容不同分辨率。但是1440x900像素分辨率是用戶最常用的分辨率。所以門戶型網(wǎng)站通常都會設置為1000像素。

一列水平居中布局是網(wǎng)頁中最常見的布局方式，常用于個人博客和簡潔的企業(yè)網(wǎng)站。一列水平居中布局就是網(wǎng)頁中所有內(nèi)容都位于一豎列中，該豎列水平居中于頁面。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >布局方式——一列水平居中布局< / title >?

< style >?

.main{ width:500px;/*設置main的寬度為500像素*/ margin:0 auto;}/*設置main的水平邊距為auto*/?

*{ margin:0; padding:0;}?

body{ background-color:#333;}/*設置頁面背景色為#333*/ .main{ background-color:#fff}/*設置main容器的背景色為#fff*/?

< / style>?

< / head >?

< body >?

< div class="main" >?

< h4 >浙江網(wǎng)盛生意寶股份有限公司< /h4 >?

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務、電子商務、專業(yè)搜索引擎和企業(yè)應用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務運營商和綜合B2B運營商。< /p >?

< P >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /P >?

< P >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務體系，是當今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /P >?

< p >生意寶公司曾先后承擔“國家發(fā)改委化工行業(yè)電子商務應用工程”、“全國電子信息推廣應用項目”‘“浙江省軟件產(chǎn)業(yè)發(fā)展計劃項目”，“浙江省經(jīng)貿(mào)委推進流通企業(yè)電子商務進程項目”，“浙江省信息產(chǎn)業(yè)科技、新產(chǎn)品試制計劃項目”“杭州市第一批高技術(shù)產(chǎn)業(yè)化項目”等一大批國家省市級重點項目。享受國家發(fā)改委電子商務專項資金，浙江省軟件發(fā)展專項資金及浙江省信息服務業(yè)發(fā)展專項資金等，被浙江省科技廳認定為“浙江省高新技術(shù)企業(yè)”，被批準為“杭州高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)軟件產(chǎn)業(yè)園企業(yè)”；通過“軟件企業(yè)認證”；被杭州企業(yè)信用評級委員會評定為“AAA級企業(yè)”。< /p >?

< p >上市后，網(wǎng)盛生意寶團隊開啟了第二次創(chuàng)業(yè)。在過去的六年多時間里，公司團隊依靠著自己的努力、智慧和毅力克服了一個又一個困難，基本完成公司新戰(zhàn)略的布局既“電商、數(shù)據(jù)、金融三大戰(zhàn)略。< /p >?

< / div >?

< /body >?

< / html >

基于浮動的固定寬度布局，包括兩列浮動布局和三列浮動布局。在實際應用用，基于浮動的布局是最常用也是最易用的布局方式。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >布局方式——兩列浮動布局< / title >?

< style >?

*{ margin:0; padding:0;}?

body{ background-color:#999; text-align:center;}?

.wrapper{ width:1000px; margin:0 auto; text-align:left; background-color: #FFF;}?

.logo{ font-size:25px; padding:5px; background-color:#000;}?

.leftBox{ float:left; width:200p; background-color:#0072a8;}?

.leftBox ul;rightBox ul{ list-style:none}?

.leftBox li a;rightBox li a{ color:#FFF; font-size:14px; line-height:22px; text-decoration:none; padding:0 0 0 10px;}?

.rightBox{ float:right; width:700px; background-color:#f99f01;}?

.rightBox p{ font-size:12px; line-height:18px; text-indent:24px;}?

.rightBox h4{ font-size:14px; line-height:30px;}?

.footer{ background-color:#000; clear:both;}?

< /style >?

< /head >?

< body >?

< div class="wrapper" >?

< div class="logo" >網(wǎng)盛< /div >?

< div class="leftBox" > ?

< ul > ??

< li >< a href="" >公司簡介< /a >< /li > ?

< li >< a href="" >產(chǎn)品介紹< /a >< /li > ?

< li >< a href="" >新聞中心< /a >< /li > ?

< li >< a href="" >客戶服務< /a >< /li > ?

< li >< a href="" >聯(lián)系我們< /a >< /li > ?

< /ul >?

< /div >?

< div class="rightBox" >?

< h4 >網(wǎng)盛簡介< /h4 >?

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務、電子商務、專業(yè)搜索引擎和企業(yè)應用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務運營商和綜合B2B運營商。< /p >?

< p >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?

< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務體系，是當今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /p >?

< p >生意寶公司曾先后承擔“國家發(fā)改委化工行業(yè)電子商務應用工程”、“全國電子信息推廣應用項目”‘“浙江省軟件產(chǎn)業(yè)發(fā)展計劃項目”，“浙江省經(jīng)貿(mào)委推進流通企業(yè)電子商務進程項目”，“浙江省信息產(chǎn)業(yè)科技、新產(chǎn)品試制計劃項目”“杭州市第一批高技術(shù)產(chǎn)業(yè)化項目”等一大批國家省市級重點項目。享受國家發(fā)改委電子商務專項資金，浙江省軟件發(fā)展專項資金及浙江省信息服務業(yè)發(fā)展專項資金等，被浙江省科技廳認定為“浙江省高新技術(shù)企業(yè)”，被批準為“杭州高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)軟件產(chǎn)業(yè)園企業(yè)”；通過“軟件企業(yè)認證”；被杭州企業(yè)信用評級委員會評定為“AAA級企業(yè)”。< /p >?

< p >上市后，網(wǎng)盛生意寶團隊開啟了第二次創(chuàng)業(yè)。在過去的六年多時間里，公司團隊依靠著自己的努力、智慧和毅力克服了一個又一個困難，基本完成公司新戰(zhàn)略的布局既“電商、數(shù)據(jù)、金融三大戰(zhàn)略。< /p >?

< /div >?

< div class="footer" >浙江網(wǎng)盛生意寶股份有限公司（網(wǎng)盛云.建站平臺） 版權(quán)所有 ?浙ICP證：浙B2-20080131< /div >?

< /div >?

< /body >?

< /html >

三列浮動布局與兩列浮動布局的原理是相似的。首先要給網(wǎng)頁進行分塊。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >布局方式——三列浮動布局< /title >?

< style >?

*{ margin:0; padding:0}?

.wrapper{ width:1000px; margin:0 auto; text-align:left; background-color:#FFF}?

.leftBox{ float:left; width:200px; background-color:#0072a8;}?

.midBox{ float:left; width:500px; background-color:#f99f01;}?

.rightBox{ float:right; width:200px; background-color:#73ae04;}?

.midBox{ margin:0 0 0 5px}?

.logo{ font-size:25px; padding:5px; background-color:#000;}?

.leftBox ul;rightBox ul{ list-style:none;}?

.leftBox li a;rightBox li a{ color:#FFF; font-size:14px; text-decoration:none; padding:0 0 0 10px;}?

.rightBox p{ font-size:12px; line-height:18px; text-indent:24px;}?

.rightBox h4{ font-size:14px; line-height:30px}?

.footer{ background-color:#000; clear:both;}?

< /style >?

< /head >?

< body >?

< div class="wrapper" >?

< div class="logo" >網(wǎng)盛< /div >?

< DIV class="leftBox" >?

< ul >?

< li >< a href="" >公司簡介< /a >< /li >?

< li >< a href="" >產(chǎn)品展示< /a >< /li > ?

< li >< a href="" >新聞中心< /a >< /li > ?

< li >< a href="" >客戶服務< /a >< /li > ?

< li >< a href="" >聯(lián)系我們< /a >< /li > ?

< /ul >?

< /DIV >?

< DIV class="midBox" >?

< h4 >公司簡介< /h4 >?

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務、電子商務、專業(yè)搜索引擎和企業(yè)應用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務運營商和綜合B2B運營商。< /p >?

< p >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?

< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務體系，是當今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /p >?

< /DIV >?

< div class="rightBox" >?

< ul >?

< li >< a href="" >公司簡介< /a >< /li >?

< li >< a href="" >產(chǎn)品展示< /a >< /li >?

< li >< a href="" >新聞中心< /a >< /li >?

< li >< a href="" >客戶服務< /a >< /li >?

< li >< a href="" >聯(lián)系我們< /a >< /li >?

< /ul >?

< /div >?

< div class="footer" >浙江網(wǎng)盛生意寶股份有限公司（網(wǎng)盛云.建站平臺） 版權(quán)所有 ?浙ICP證：浙B2-20080131< /div >?

< /div >?

< /body >?

< /html >

自適應寬度布局使用的尺寸是百分比。使用百分比設置容器寬度后，頁面會隨著瀏覽器窗口伸縮。同理，在不同分辨率下，頁面也會自適應的表現(xiàn)為適合用戶的大小。

自適應寬度的布局同樣需要使用浮動或者定位來建立網(wǎng)頁的主體布局。只是在設定寬度時使用百分比。自適應寬度布局可以創(chuàng)建出許多不同的效果。例如，在兩列布局中一列固定，一列自適應，在三列布局中兩邊列固定，中間自適應。

要實現(xiàn)兩列布局仍然要利用浮動來布局。但是在設置浮動元素的寬度時，是使用百分比。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml">?

< head>?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title>布局方式——兩列布局——兩列自適應寬度< /title >?

< style>?

body{ background-color:#999; color:#FFF; text-align:center;}?

.wrapper{ width:85%; margin:0 auto; text-align:left; background-color:#FFF;}?

.leftBox{ float:left; width:20%; background-color:#0072a8;}?

.rightBox{ float:right; width:78%; background-color:#f99f01;}

.logo{ font-size:25px; padding:5px; background-color:#000;}?

.leftBox ul,rightBoxul{ list-style:none;}?

.leftBox li a,rightBox li a{ color:#FFF; font-size:14px; line-height:22px; text-decoration:none; padding:0 0 0 10px;}?

.rightBox p{ font-size:12px; line-height:18px; text-indent:28px;}?

.rightBox h4{ font-size:14px; line-height:30px}?

.footer{ background-color: #000; clear:both;}?

< /style >?

< /head >?

< body >?

< div class="wrapper" >?

< div class="logo" >網(wǎng)盛< /div >?

< div class="leftBox" >?

< ul >?

< li >< a href="" >公司簡介< /a >< /li >?

< li >< a href="" >產(chǎn)品介紹< /a >< /li >?

< li >< a href="">新聞中心< /a >< /li >?

< li >< a href="" >客戶服務< /a >< /li >?

< li >< a href="" >聯(lián)系我們< /a >< /li >?

< /ul >?

< /div >?

< div class="rightBox" >?

< h4 >公司簡介< /h4 >?

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務、電子商務、專業(yè)搜索引擎和企業(yè)應用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務運營商和綜合B2B運營商。< /p >?

< p >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?

< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務體系，是當今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /p >?

< /div >?

< div class="footer" >浙江網(wǎng)盛生意寶股份有限公司（網(wǎng)盛云.建站平臺） 版權(quán)所有 ?浙ICP證：浙B2-20080131< /div >?

< /div >?

< /body >?

< /html >

在上面例子中，縮放瀏覽器時，頁面也隨之縮放，頁面中的所有容器寬度也會改變。但在很多網(wǎng)頁中，某些列的寬度是固定不變的。在兩列布局中，可以設定其中一列固定，另外一列自適應。當縮放瀏覽器或者屏幕分辨率發(fā)生變化時，一列保持原來的像素值，另外一列根據(jù)父元素的寬度變化而變化。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head>?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title>布局方式——兩列布局——兩列自適應寬度

< style>?

*{ margin:0; padding:0;}?

body{ background-color:#999; color:#FFF; text-align:center;}?

.wrapper{ width:85%; margin:0 auto; text-align:left; background-color:#FFF; position:relative;}?

.leftBox{ width:200px; background-color:#0072a8; position:absolute; top:40px; left:0px;}?

.rightBox{ background-color:#f99f01; position:relative; margin:0px 0 0 200px; padding:10px;}?

.logo{ font-size:25px; height:40px; background-color:#000;}?

.leftBox ul,rightBoxul{ list-style:none;}?

.leftBox li a,rightBox li a{ color:#FFF; font-size:14px; line-height:22px; text-decoration:none; padding:0 0 0 10px;}?

.rightBox p{ font-size:12px; line-height:18px; text-indent:28px;}?

.rightBox h4{ font-size:14px; line-height:30px}?

.footer{ background-color: #000; clear:both;}?

< /style >?

< /head >?

< body >?

< div class="wrapper" >?

< div class="logo" >網(wǎng)盛< /div >?

< div class="leftBox" >?

?< ul >?

< li >< a href="" >公司簡介< /a >< /li >?

< li >< a href="" >產(chǎn)品介紹< /a >< /li >?

< li >< a href="" >新聞中心< /a >< /li >?

< li >< a href="" >客戶服務< /a >< /li >?

< li >< a href="" >聯(lián)系我們< /a >< /li >?

< /ul >?

< /div >?

< div class="rightBox" >?

< h4 >公司簡介< /h4 >?

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務、電子商務、專業(yè)搜索引擎和企業(yè)應用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務運營商和綜合B2B運營商。< /p >?

< p >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?

< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務體系，是當今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /p >?

< /div >?

< div class="footer" >浙江網(wǎng)盛生意寶股份有限公司（網(wǎng)盛云.建站平臺） 版權(quán)所有 ?浙ICP證：浙B2-20080131< /div >?

< /div >?

< /body >?

< /html >

三列布局比兩列布局要復雜一些。三列布局常用的自適應布局方式有兩種。第一種是三列都自適應。這個設定的方法和兩列是一致的。只要把三個浮動的元素的寬度都設定為百分比即可。第二種是三列中左右兩列為固定寬度。中間列為自適應寬度的布局。舉例中間列為自適應寬度的布局。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml">

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title>布局方式——兩列布局——兩列自適應寬度< /title >

< style>?

*{ margin:0; padding:0;} body{ background-color:#999; color:#FFF; text-align:center;}?

.wrapper{ width:85%; margin:0 auto; text-align:left; background-color:#FFF; position:relative;}?

.leftBox{ width:200px; background-color:#0072a8; position:absolute; top:40px; left:0px;}?

.rightBox{ background-color:#f99f01; position:relative; width:200px; top:40px; right:0px;}?

.logo{ font-size:25px; height:40px; background-color:#000;}?

.leftBox ul,rightBoxul{ list-style:none;}?

.leftBox li a,rightBox li a{ color:#FFF; font-size:14px; line-height:22px; text-decoration:none; padding:0 0 0 10px;}?

.rightBox p{ font-size:12px; line-height:18px; text-indent:28px;}?

.rightBox h4{ font-size:14px; line-height:30px} .midBox{ position:relative; margin:0 200px 0 200px; padding:10px;}?

.footer{ background-color: #000; clear:both;}?

< /style >

< /head >

< body >

< div class="wrapper" >

< div class="logo" >網(wǎng)盛< /div >

< div class="leftBox" >?

?< ul > ??

< li >< a href="" >公司簡介< /a >< /li > ?

< li >< a href="" >產(chǎn)品介紹< /a >< /li > ?

< li >< a href="" >新聞中心< /a >< /li > ?

< li >< a href="" >客戶服務< /a >< /li > ?

< li >< a href="" >聯(lián)系我們< /a >< /li > ?

< /ul >

< /div >

< div class="midBox" > ?

< h4 >公司簡介< /h4 > ?

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務、電子商務、專業(yè)搜索引擎和企業(yè)應用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務運營商和綜合B2B運營商。< /p > < p >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >

< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務體系，是當今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /p >

< /div >

< div class="rightBox" >?

?< ul > ?

< li >< a href="" >公司簡介< /a >< /li > ?

< li >< a href="" >產(chǎn)品介紹< /a >< /li > ?

< li >< a href="" >新聞中心< /a >< /li > ?

< li >< a href="" >客戶服務< /a >< /li > ?

< li >< a href="" >聯(lián)系我們< /a >< /li >?

< /ul >

< /div >

< div class="footer" >浙江網(wǎng)盛生意寶股份有限公司（網(wǎng)盛云.建站平臺） 版權(quán)所有 ?浙ICP證：浙B2-20080131< /div >

< /div >

< /body >

< /html >

當涉及多欄布局時，頁面制作就變得復雜。因為在一欄布局中，頁面的浮動元素的高度都是自適應的。而在多欄布局中，頁面元素的高度就要受到限制。欄與列越多，頁面布局就越復雜。大型的門戶型網(wǎng)站都是多欄列布局。

垂直布局的排版方式主要是把頁面分為垂直排列的分塊。這些垂直排列的分塊按照常規(guī)流的方式垂直排列。不需要應用任何浮動。然后在這些分塊中再細分網(wǎng)頁上的各個欄目。

水平布局的排版方法主要是把頁面分為水平排列的分塊。通常會按照三列布局的方式先把頁面分為高度自適應的排列。然后對每一列再分塊，在每一列中的分塊通常都是使用常規(guī)流的方法使其垂直排列。