當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > DIV+CSS > div+css變寬度網頁布局實例制作

div+css變寬度網頁布局實例制作

2012/11/27 15:14:17作者：佚名來源：網絡

移動端

【實例介紹】

變寬度網頁布局制作

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

【實例代碼】

下面是一個單列變寬布局的網頁，右側的一列寬度固定。當總寬度變化時，左側部分的列就發生變化，具體代碼如下。

<style type="text/css" media="screen">
body {background: #FF0;margin:0;padding:0; font-family: "宋體";
font-size: 12px;line-height: 1.5;}
p{text-indent:0em;}
.rounded {background: url(images/left-top.gif)   top left no-repeat;width:100%;}
.rounded h2 {background: url(images/right-top.gif) top right no-repeat;
padding:20px 20px 10px;
margin:0;
}
.rounded .main {
background:
url(images/right.gif)
top right repeat-y;
padding:10px 20px;
    margin:-2em 0 0 0;
      }
.rounded .footer {
background:
url(images/left-bottom.gif)
bottom left no-repeat;
}
.rounded .footer p {
color:#888;
text-align:right;
background:url(images/right-bottom.gif) bottom right no-repeat;
display:block;
padding:10px 20px 20px;
margin:-2em 0 0 0;
}

#header,#pagefooter,#container{
margin:0 auto;
width:85%;
min-width:400px;
max-width:800px;
}

#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>理想新世紀家具木業有限公司</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年公司創立至今，歷經三十余載，我們公司始終堅持專業從
事高檔精品實木家具設計、生產與銷售的一體化經營，成就實木經典品牌。
　　<br>     　　公司旗下擁有“原木世家”、“原木至尊”和“原木經典”
三大系列品牌，以滿足不同生活方式的高品位消費群體需求。產品暢銷國內外，
涵蓋全球十幾個國家和地區，國內市場網絡已覆蓋90%以上的一、二級城市，
遍布國內外500余家營銷專賣網點，構成了多層次、全方位的網絡體系。
　　<br>    　　堅持“以人為本，以誠信為先，以創造價值為榮”的核心理念
，成為全體員工共同奮進的宗旨。公司一直堅持創新的設計原則、嚴格的質量
管理和環?；纳a策略，產品工藝精湛、品質優良，順利通過了ISO9001-2000
版國際質量認證，Ⅲ型綠色產品環保認證。近年來，曾被授予“名牌產品”、
“全國知名品牌”、“市質量誠信企業”等多項榮譽，贏得了國內外消費者的
一致好評。
</p>

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

</body>
</html>

【代碼分析】

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

單列固定的變寬布局
變寬度網頁布局制作運行效果

改變寬度
變寬度網頁布局制作運行效果

【素材及源碼下載】

請點擊：變寬度網頁布局制作下載本實例相關素材及源碼

標簽：布局

上一篇：CSS實現圓角框
下一篇：Photoshop利用通道給窗邊的美女調出藍紫色

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频