div+css變寬度網(wǎng)頁布局實例制作

2012/11/27 15:14:17作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例介紹】

變寬度網(wǎng)頁布局制作

       對固定寬度的頁面布局做了比較深入的分析和講解，下面將對變寬度的頁面布局做進(jìn)一步的分析。變寬度的布局要比固定寬度的布局復(fù)雜一些。
       對于變寬度的布局，首先要使內(nèi)容的整體寬度隨著瀏覽器窗口寬度的變化而變化。因此中間容器中的左右兩列的總寬度也會變化，這樣就會產(chǎn)生兩種不同的情況。這兩列是按照一定的比例同時變化，還是一列固定另一列變化，這兩種情況都是很常用的布局方式。
       在實際應(yīng)用中，只有單列寬度變化，而其他列保持固定的布局會更實用。一般在多個列的頁面中，通常比較寬的一列是用來放置內(nèi)容的，而窄列放置鏈接、導(dǎo)航等內(nèi)容，這些內(nèi)容—般寬度都是固定的，不需要擴(kuò)大。
       如果使用簡單的浮動布局，是無法實現(xiàn)這個效果的。如果把某一列的寬度設(shè)置為固定值。例如300像素，那么另一列的寬度就無法設(shè)置了，因為總寬度是變化的，變動的列的寬度也無法確定，那么怎么解決呢?
       在content的外面再套一個DIv，使它的寬度為100％，也就是等于container的寬度。然后通過將左側(cè)的。margin設(shè)置為負(fù)的300像素，就使它向左平移了300像素。再將content的左側(cè)margin設(shè)置為正的300像素，就實現(xiàn)了本來無法表達(dá)的寬度。

【實例代碼】

下面是一個單列變寬布局的網(wǎng)頁，右側(cè)的一列寬度固定。當(dāng)總寬度變化時，左側(cè)部分的列就發(fā)生變化，具體代碼如下。

#contentWrap{
margin-left:-300px;
float:left;
width:100%;
}

#content{
margin-left:300px;
}

#content img{
float:right;
}

#side{
float:right;
width:300px;
}

#pagefooter{
clear:both;
}
</style>
</head>
<body>
<div id="header">
<div class="rounded">
  <h2>理想新世紀(jì)家具木業(yè)有限公司</h2>
  <div class="main">
  </div>
  <div class="footer">
  <p> </p>
  </div>
</div>
</div>
<div id="container">
<div id="contentWrap">
<div id="content">
<div class="rounded">
  <h2>公司介紹</h2>
  <div class="main">

  <p>
    　　自1980年公司創(chuàng)立至今，歷經(jīng)三十余載，我們公司始終堅持專業(yè)從
事高檔精品實木家具設(shè)計、生產(chǎn)與銷售的一體化經(jīng)營，成就實木經(jīng)典品牌。
　　<br>     　　公司旗下?lián)碛小霸臼兰摇?、“原木至尊”和“原木?jīng)典”
三大系列品牌，以滿足不同生活方式的高品位消費群體需求。產(chǎn)品暢銷國內(nèi)外，
涵蓋全球十幾個國家和地區(qū)，國內(nèi)市場網(wǎng)絡(luò)已覆蓋90%以上的一、二級城市，
遍布國內(nèi)外500余家營銷專賣網(wǎng)點，構(gòu)成了多層次、全方位的網(wǎng)絡(luò)體系。
　　<br>    　　堅持“以人為本，以誠信為先，以創(chuàng)造價值為榮”的核心理念
，成為全體員工共同奮進(jìn)的宗旨。公司一直堅持創(chuàng)新的設(shè)計原則、嚴(yán)格的質(zhì)量
管理和環(huán)保化的生產(chǎn)策略，產(chǎn)品工藝精湛、品質(zhì)優(yōu)良，順利通過了ISO9001-2000
版國際質(zhì)量認(rèn)證，Ⅲ型綠色產(chǎn)品環(huán)保認(rèn)證。近年來，曾被授予“名牌產(chǎn)品”、
“全國知名品牌”、“市質(zhì)量誠信企業(yè)”等多項榮譽(yù)，贏得了國內(nèi)外消費者的
一致好評。
</p>

  </div>
  <div class="footer">
  <p>
  查看詳細(xì)信息>>
  </p>
  </div>
</div>
</div>
</div>
<div id="side">
<div class="rounded">
  <h2>企業(yè)文化理念</h2>
  <div class="main">
    <p>
    1.企業(yè)理念——求新求美求實求精；<br />
    2.企業(yè)使命——我認(rèn)識世界，世界認(rèn)識我；<br />
    3.企業(yè)方針——弘揚質(zhì)量服務(wù)，提升品牌價值；<br />
    4.企業(yè)精神——人人向前，事事精進(jìn)。</p>
  </div>
   <div class="footer">
  <p> </p>
  </div>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
  <h2> </h2>
  <div class="main">
  <p>
   ◎企業(yè)文化 | ◎網(wǎng)站導(dǎo)航 | ◎誠聘英才 | ◎版權(quán)聲明 | ◎友情鏈接 | ◎聯(lián)系我們| ◎留言板
  </p>
  </div>
  <div class="footer">
  <p> </p>
  </div>
</div>
</div>

</body>
</html>

【代碼分析】

contentwrap的寬度設(shè)置為100％，同時將右側(cè)的margin設(shè)置為一300像素。注意這里是負(fù)值．即向右平移了300像素，并設(shè)置向右浮動。content在它的里面，以標(biāo)準(zhǔn)流方式存在，將它的右側(cè)margin設(shè)置為300像素，這樣就可以保證里面的內(nèi)容不會溢出到布局的外面，如圖所示。

單列固定的變寬布局
變寬度網(wǎng)頁布局制作運行效果