亚洲国产免费,国产麻豆综合,在线观看日韩一区

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

變寬度網頁布局制作

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

【實例代碼】

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

#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>    　　堅持“以人為本，以誠信為先，以創造價值為榮”的核心理念
，成為全體員工共同奮進的宗旨。公司一直堅持創新的設計原則、嚴格的質量
管理和環保化的生產策略，產品工藝精湛、品質優良，順利通過了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像素，這樣就可以保證里面的內容不會溢出到布局的外面，如圖所示。

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

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

【素材及源碼下載】

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

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

人人做人人澡人人爽欧美,国产主播一区二区,久久久精品五月天,羞羞视频在线观看免费

當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

div+css變寬度頁面布局案例制作

本類教程下載

系統下載排行