網站建設| 數據庫類| 圖形圖象| 程序設計| 現代辦公| 操作系統| 考試認證| 網絡技術| 軟件工程| 電腦相關| 文學作品
網站開發| 網頁制作| 操作系統| 圖象圖形| 考試認證| 數據庫類| 程序設計| 硬件技術| 現代辦公| 網絡技術| 笑話頻道
 
您的位置: 電腦書庫首頁-> 電腦文摘-> 網頁制作-> 其它-> 網頁標準制作:使用ul多行多列布局

網頁標準制作:使用ul多行多列布局
作者:佚名 來源:InterNet 加入時間:2008-5-16
相關文章
  • 實現網頁制作中“層”精確定位的絕招
  • 網頁另類制作小技巧三則
  • 網頁制作的三則實用小技巧
  • 網頁制作從業須知
  • 相關書籍:
  • Active Server Pages 網頁制作教程(ASP教程)
  • ultradev動態網頁制作教程
  • 網頁設計技巧及網頁制作常見問題
  • 幾天在用CSS寫三列布局的時候突然想到的這樣一個方法,這個想法自己都覺得有些瘋狂,如果其中有什么不對的地方請各位不吝指教。

      當需要寫一個三列布局的時候,一般情況下我會選擇使用如下的DIV布局方式:

    網頁標準制作:使用ul多行多列布局

      圖1 DIV布局

      使用這樣的嵌套方式無疑可以使代碼出錯的概率減少很多,但同時這樣的布局也略顯復雜,對于后期的維護也略顯不便。我們在布局導航時經常會使用到一個方法,那就是使用〈ul〉列表來進行布局,而導航可以形容為多列式的布局,既然如此,那么我們也就可以使用〈ul〉來進行頁面的多列布局。

    網頁標準制作:使用ul多行多列布局

      圖2 DIV布局

      這是一個固定寬度的布局,也就是說流動性不強,流動性的布局目前還沒有試驗過,等有時間了再試驗一下,下面貼上這個布局的代碼:

      <!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>使用UL進行多列布局</title>
    <style type=”text/css”>
    * {margin:0; padding:0;}
    body {
    width:100%;
    height:100%;
    background:#ddedfb;
    }
    #mainContent {
    width:600px;
    margin:10px auto;
    }
    #header,#footer {
    background:#8AC7FA;
    height:80px;
    clear:both;
    }
    #footer {
    clear:both;
    padding-top:10px;
    }
    #content {
    height:300px;
    margin:10px auto;
    }
    #content ul {
    list-style:none;
    height:100%;
    }
    #content ul li {
    width:150px;
    height:100%;
    background:#8AC7FA;
    float:left;
    }
    #content ul li#li2 {
    width:280px;
    margin:0 10px;
    }
    #content ul li#li2 ul li {
    width:270px;
    height:140px;
    margin:5px;
    background:#0581F0;
    }
    </style>
    </head>
      <body>
    <div id=”mainContent”>
    <div id=”header”>這是頭部</div>
    <div id=”content”>
    <ul>
    <li>這是左邊</li>
    <li id=”li2″>
    <ul>
    <li>這是中間的上部</li>
    <li>這是中間的下部</li>
    </ul>
    </li>
    <li>這是右邊</li>
    </ul>
    </div>
    <div id=”footer”>這是底部</div>
    </div>
    </body>
    </html>

      這段代碼在IE7及FF3下都能正常顯示,其他瀏覽器未做測試,如果你有更好的方法不妨提出來。


    [文章錄入員:nancy]

    相關文章
  • 實現網頁制作中“層”精確定位的絕招
  • 網頁另類制作小技巧三則
  • 網頁制作的三則實用小技巧
  • 網頁制作從業須知
  • 相關書籍:
  • Active Server Pages 網頁制作教程(ASP教程)
  • ultradev動態網頁制作教程
  • 網頁設計技巧及網頁制作常見問題
  • 本站推薦內容

    近期主機類熱搜關鍵詞:
    美國服務器 美國服務器租用 海外服務器租用 國外服務器租用

    其它
    DreamWeaver
    FrontPage
    FireWorks
    Flash
    HTML
    其它
    電腦教程閱讀排行
    ·網頁上傳常見問題分析
    ·網站制作之網頁技巧
    ·IIS 錯誤代碼大匯總
    ·網頁標準制作:使用ul多行多列布...
    ·解決IIS5 HTTP500內部...
    ·全面了解了解Cookie
    ·長英文不自動換行的原因及解決方法
    ·真正的文字豎排
    ·CSS應用技巧十四例
    ·網站設計65條原則
    河南福彩快三玩法