DIV+css布局之css頁面基本排版技術(shù)
布局方式,頁面排版
本文為大家介紹如何綜合應(yīng)用各種布局方式來實(shí)踐DIV+CSS排版。常用的排版方式包括固定寬度布局、自適應(yīng)寬度布局和復(fù)雜的頁面排版。
固定寬度布局是頁面排版中最常用的一種布局方式。頁面中用于分區(qū)的容器的寬度都是以像素定義的。這種排版方法能令網(wǎng)頁設(shè)計師很好的控制布局和定位。若將一個容器的寬度設(shè)置為1000像素。那么這個容器再任何瀏覽器上都顯示為1000像素寬。
現(xiàn)今的瀏覽器大部分的像素都是1440X900像素,也有大屏幕1920X1080像素的。分辨率有差異,網(wǎng)頁設(shè)計師要是用固定寬度布局方式就很難兼容不同分辨率。但是1440x900像素分辨率是用戶最常用的分辨率。所以門戶型網(wǎng)站通常都會設(shè)置為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;/*設(shè)置main的寬度為500像素*/ margin:0 auto;}/*設(shè)置main的水平邊距為auto*/?
*{ margin:0; padding:0;}?
body{ background-color:#333;}/*設(shè)置頁面背景色為#333*/ .main{ background-color:#fff}/*設(shè)置main容器的背景色為#fff*/?
< / style>?
< / head >?
< body >?
< div class="main" >?
< h4 >浙江網(wǎng)盛生意寶股份有限公司< /h4 >?
< p >浙江網(wǎng)盛生意寶股份有限公司(股票代碼:002095,以下簡稱生意寶)是一家專業(yè)從事互聯(lián)網(wǎng)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。< /p >?
< P >2006年12月,生意寶在獲中國證監(jiān)會審核通過后順利實(shí)現(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)實(shí)意義與歷史意義,也正因為如此,生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史,是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /P >?
< P >生意寶及其旗下子公司現(xiàn)有員工1000逾人,本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運(yùn)營團(tuán)隊,并先后在北京、上海、青島、濟(jì)南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機(jī)構(gòu),形成遍布全國、輻射全球的市場營銷與服務(wù)體系,是當(dāng)今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /P >?
< p >生意寶公司曾先后承擔(dān)“國家發(fā)改委化工行業(yè)電子商務(wù)應(yīng)用工程”、“全國電子信息推廣應(yīng)用項目”‘“浙江省軟件產(chǎn)業(yè)發(fā)展計劃項目”,“浙江省經(jīng)貿(mào)委推進(jìn)流通企業(yè)電子商務(wù)進(jìn)程項目”,“浙江省信息產(chǎn)業(yè)科技、新產(chǎn)品試制計劃項目”“杭州市第一批高技術(shù)產(chǎn)業(yè)化項目”等一大批國家省市級重點(diǎn)項目。享受國家發(fā)改委電子商務(wù)專項資金,浙江省軟件發(fā)展專項資金及浙江省信息服務(wù)業(yè)發(fā)展專項資金等,被浙江省科技廳認(rèn)定為“浙江省高新技術(shù)企業(yè)”,被批準(zhǔn)為“杭州高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)軟件產(chǎn)業(yè)園企業(yè)”;通過“軟件企業(yè)認(rèn)證”;被杭州企業(yè)信用評級委員會評定為“AAA級企業(yè)”。< /p >?
< p >上市后,網(wǎng)盛生意寶團(tuán)隊開啟了第二次創(chuàng)業(yè)。在過去的六年多時間里,公司團(tuán)隊依靠著自己的努力、智慧和毅力克服了一個又一個困難,基本完成公司新戰(zhàn)略的布局既“電商、數(shù)據(jù)、金融三大戰(zhàn)略。< /p >?
< / div >?
< /body >?
< / html >
基于浮動的固定寬度布局,包括兩列浮動布局和三列浮動布局。在實(shí)際應(yī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;}?
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="" >客戶服務(wù)< /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)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。< /p >?
< p >2006年12月,生意寶在獲中國證監(jiān)會審核通過后順利實(shí)現(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)實(shí)意義與歷史意義,也正因為如此,生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史,是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?
< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人,本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運(yùn)營團(tuán)隊,并先后在北京、上海、青島、濟(jì)南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機(jī)構(gòu),形成遍布全國、輻射全球的市場營銷與服務(wù)體系,是當(dāng)今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。< /p >?
< p >生意寶公司曾先后承擔(dān)“國家發(fā)改委化工行業(yè)電子商務(wù)應(yīng)用工程”、“全國電子信息推廣應(yīng)用項目”‘“浙江省軟件產(chǎn)業(yè)發(fā)展計劃項目”,“浙江省經(jīng)貿(mào)委推進(jìn)流通企業(yè)電子商務(wù)進(jìn)程項目”,“浙江省信息產(chǎn)業(yè)科技、新產(chǎn)品試制計劃項目”“杭州市第一批高技術(shù)產(chǎn)業(yè)化項目”等一大批國家省市級重點(diǎn)項目。享受國家發(fā)改委電子商務(wù)專項資金,浙江省軟件發(fā)展專項資金及浙江省信息服務(wù)業(yè)發(fā)展專項資金等,被浙江省科技廳認(rèn)定為“浙江省高新技術(shù)企業(yè)”,被批準(zhǔn)為“杭州高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)軟件產(chǎn)業(yè)園企業(yè)”;通過“軟件企業(yè)認(rèn)證”;被杭州企業(yè)信用評級委員會評定為“AAA級企業(yè)”。< /p >?
< p >上市后,網(wǎng)盛生意寶團(tuán)隊開啟了第二次創(chuàng)業(yè)。在過去的六年多時間里,公司團(tuán)隊依靠著自己的努力、智慧和毅力克服了一個又一個困難,基本完成公司新戰(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)頁進(jì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 >?
*{ 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="" >客戶服務(wù)< /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)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。< /p >?
< p >2006年12月,生意寶在獲中國證監(jiān)會審核通過后順利實(shí)現(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)實(shí)意義與歷史意義,也正因為如此,生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史,是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?
< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人,本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運(yùn)營團(tuán)隊,并先后在北京、上海、青島、濟(jì)南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機(jī)構(gòu),形成遍布全國、輻射全球的市場營銷與服務(wù)體系,是當(dāng)今國內(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="" >客戶服務(wù)< /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 >
自適應(yīng)寬度布局使用的尺寸是百分比。使用百分比設(shè)置容器寬度后,頁面會隨著瀏覽器窗口伸縮。同理,在不同分辨率下,頁面也會自適應(yīng)的表現(xiàn)為適合用戶的大小。
自適應(yīng)寬度的布局同樣需要使用浮動或者定位來建立網(wǎng)頁的主體布局。只是在設(shè)定寬度時使用百分比。自適應(yīng)寬度布局可以創(chuàng)建出許多不同的效果。例如,在兩列布局中一列固定,一列自適應(yīng),在三列布局中兩邊列固定,中間自適應(yīng)。
要實(shí)現(xiàn)兩列布局仍然要利用浮動來布局。但是在設(shè)置浮動元素的寬度時,是使用百分比。
< !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>布局方式——兩列布局——兩列自適應(yīng)寬度< /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="" >客戶服務(wù)< /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)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。< /p >?
< p >2006年12月,生意寶在獲中國證監(jiān)會審核通過后順利實(shí)現(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)實(shí)意義與歷史意義,也正因為如此,生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史,是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?
< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人,本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運(yùn)營團(tuán)隊,并先后在北京、上海、青島、濟(jì)南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機(jī)構(gòu),形成遍布全國、輻射全球的市場營銷與服務(wù)體系,是當(dāng)今國內(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)頁中,某些列的寬度是固定不變的。在兩列布局中,可以設(shè)定其中一列固定,另外一列自適應(yīng)。當(dā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>布局方式——兩列布局——兩列自適應(yīng)寬度
< 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="" >客戶服務(wù)< /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)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。< /p >?
< p >2006年12月,生意寶在獲中國證監(jiān)會審核通過后順利實(shí)現(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)實(shí)意義與歷史意義,也正因為如此,生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史,是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >?
< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人,本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運(yùn)營團(tuán)隊,并先后在北京、上海、青島、濟(jì)南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機(jī)構(gòu),形成遍布全國、輻射全球的市場營銷與服務(wù)體系,是當(dāng)今國內(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 >
三列布局比兩列布局要復(fù)雜一些。三列布局常用的自適應(yīng)布局方式有兩種。第一種是三列都自適應(yīng)。這個設(shè)定的方法和兩列是一致的。只要把三個浮動的元素的寬度都設(shè)定為百分比即可。第二種是三列中左右兩列為固定寬度。中間列為自適應(yīng)寬度的布局。舉例中間列為自適應(yī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>布局方式——兩列布局——兩列自適應(yīng)寬度< /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="" >客戶服務(wù)< /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)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。< /p > < p >2006年12月,生意寶在獲中國證監(jiān)會審核通過后順利實(shí)現(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)實(shí)意義與歷史意義,也正因為如此,生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史,是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >
< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人,本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運(yùn)營團(tuán)隊,并先后在北京、上海、青島、濟(jì)南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機(jī)構(gòu),形成遍布全國、輻射全球的市場營銷與服務(wù)體系,是當(dāng)今國內(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="" >客戶服務(wù)< /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 >
當(dāng)涉及多欄布局時,頁面制作就變得復(fù)雜。因為在一欄布局中,頁面的浮動元素的高度都是自適應(yīng)的。而在多欄布局中,頁面元素的高度就要受到限制。欄與列越多,頁面布局就越復(fù)雜。大型的門戶型網(wǎng)站都是多欄列布局。
垂直布局的排版方式主要是把頁面分為垂直排列的分塊。這些垂直排列的分塊按照常規(guī)流的方式垂直排列。不需要應(yīng)用任何浮動。然后在這些分塊中再細(xì)分網(wǎng)頁上的各個欄目。
水平布局的排版方法主要是把頁面分為水平排列的分塊。通常會按照三列布局的方式先把頁面分為高度自適應(yīng)的排列。然后對每一列再分塊,在每一列中的分塊通常都是使用常規(guī)流的方法使其垂直排列。
DIV+CSS的布局方法簡單來說就是使用div標(biāo)簽作為容器,使用css技術(shù)排布標(biāo)簽的布局方法。
一般網(wǎng)站都包含大量的源代碼,運(yùn)用div+css的頁面排版方式,制作出語義明確、結(jié)構(gòu)清晰的網(wǎng)頁還需要遵循編寫css代碼的規(guī)范。
CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計,CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力。
CSS提供了控制背景顏色和背景圖片的多個屬性,用于產(chǎn)生表現(xiàn)豐富的網(wǎng)頁背景。這樣能使單調(diào)的頁面變得豐富多彩。
地址:沈陽市和平區(qū)青年大街322號 昌鑫大廈F座14層
Tel:024-83959235
Fax:024-83953630
E-mail: wy@netsun.com