網頁佈局------幾種佈局方式

昨夜小楼听风雨發表於2024-04-28
網頁

1、認識佈局

（1）確認頁面的版心寬度

版心是指頁面的有效使用面積，主要元素以及內容所在的區域，一般在瀏覽器視窗中水平居中顯示。在設計網頁時，頁面尺寸寬度一般為1200-1920排序。但是為例適配不同解析度的顯示器，一般版心寬度為1000-1200px。例如，螢幕解析度為1021*768的瀏覽器，在瀏覽器內有效可視區域為1000px,所以最好設定版心寬度為1000px。常見的寬度為960px，980px，1000px，1200px

（2）分析頁面中的模組

頁面一般由頭部(header)，導航欄(nav)，焦點圖(banner)，內容(content)，頁面底部(footer)共5個部分組成

2、單列布局

單列布局從上到下分為頭部、導航欄、焦點圖、內容和底部區域，每個模組各佔一行，且寬度和版心相等

下面定義頁面結構

    <div id="top">頭部</div>
    <div id="nav">導航欄</div>
    <div id="banner">焦點圖</div>
    <div id="content">內容</div>
    <div id="footer">頁面底部</div>

下面編寫css樣式

     body{
            margin: 0;
            padding: 0;
            font-size: 24px;
            text-align: center;
        }
        div{
            width: 980px;
            margin: 5px auto;
            background: #d2ebff;
        }
        #top{height: 40px;}
        #nav{height: 60px;}
        #banner{height: 200px;}
        #content{height: 200px;}
        #footer{height: 90px;}

3、兩列布局

頁面結構

<div id="top">頭部</div>
    <div id="nav">導航欄</div>
    <div id="banner">焦點圖</div>
    <div id="content">
        <div class="content-left">內容左部分</div>
        <div class="content-right">內容右部分</div>
    </div>
    <div id="footer">頁面底部</div>

頁面樣式

  body{
            margin: 0;
            padding: 0;
            font-size: 24px;
            text-align: center;
        }
        div{
            width: 980px;
            margin: 5px auto;
            background: #d2ebff;
        }
        #top{height: 40px;}
        #nav{height: 60px;}
        #banner{height: 200px;}
        #content{height: 200px;}
        #footer{height: 90px;}
        .content-left{
            width: 350px;
            height: 200px;
            background-color: #ccc;
            float: left;
            margin: 0;
        }
        .content-right{
            width: 625px;
            height: 200px;
            background-color: #CCC;
            float: right;
            margin: 0;
        }

使用浮動設定了內容區域盒子的顯示狀態，使用margin:0;清楚之前設定的margin屬性不影響內容區域佈局

4、三列布局

頁面結構

<div id="top">頭部</div>
    <div id="nav">導航欄</div>
    <div id="banner">焦點圖</div>
    <div id="content">
        <div class="content-left">內容左部分</div>
        <div class="contnt-center">內容中間部分</div>
        <div class="content-right">內容右部分</div>
    </div>
    <div id="footer">頁面底部</div>

頁面樣式

  body{
            margin: 0;
            padding: 0;
            font-size: 24px;
            text-align: center;
        }
        div{
            width: 980px;
            margin: 5px auto;
            background: #d2ebff;
        }
        #top{height: 40px;}
        #nav{height: 60px;}
        #banner{height: 200px;}
        #content{height: 200px;}
        #footer{height: 90px;}
        .content-left{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            float: left;
            margin: 0;
        }
        .contnt-center{
            width: 570px;
            height: 200px;
            background-color: #ccc;
            float: left;
            margin:  0 0 0 5px;
        }
        .content-right{
            width: 200px;
            height: 200px;
            background-color: #CCC;
            float: right;
            margin: 0;
        }

在上述程式碼中使用margin：0 0 0 5px;將中間內容與左側內容隔開

5、通欄佈局

通欄佈局的關鍵是在相應模組的外面新增一層div，並將外層div的寬度設定為100%

頁面結構

    <div id="top">頭部</div>
    <div id="topbar">
        <div class="nav">導航欄</div>
    </div>
    <div id="banner">焦點圖</div>
    <div id="content">內容</div>
    <div id="footer">
        <div class="inner">頁面底部</div>
    </div>

頁面樣式

body{
            margin: 0;
            padding: 0;
            font-size: 24px;
            text-align: center;
        }
        div{
            width: 980px;
            margin: 5px auto;
            background: #d2ebff;
        }
        #top{height: 40px;}
        #nav{
            width: 100%;
            height: 60px;
            background-color: #3CF;
        }
        .topbar{height: 60px;}
        #banner{height: 200px;}
        #content{height: 200px;}
        #footer{
            width: 100%;
            height: 90px;
            background-color: #3CF;
        }
        .inner{height: 90px;}

分別將nav和footer的寬度設定為100%

6、網頁模組命名規範

通常網頁佈局需要遵循以下幾個原則

  • 避免使用中文字元命名（例如 id="導航欄"）

  • 不能以數字開頭命名（例如 id="1nav"）

  • 不能佔用關鍵字（例如 id="h3"）

  • 用最少的字母表達最容易的意義

在網頁中，常用的命名方式有"駝峰式命名"和“帕斯卡命名"兩種

  • 駝峰式命名：除了第一個單詞外其餘單詞首字母都要大寫。例如partOne

  • 帕斯卡命名：單詞之間用”_“連結，例如content-one

下面是網頁中常用的命名

相關模組命名相關模組命名
頭部 header 內容 content/container
導航欄 nav 尾 footer
側欄 sidebar 欄目 column
左邊、右邊、中間 left right center 登入條 loginbar
標誌 logo 廣告 banner
頁面主題 main 熱點 hot
新聞 news 下載 download
子導航 subnav 選單 menu
子選單 submenu 搜尋 search
友情連結 frIEndlink 版權 copyright
滾動 scroll 標籤頁 tab
文章列表 list 提示資訊 msg
小技巧 tips 欄目標題 title
加入 joinus 指南 guild
服務 service 註冊 regsiter
狀態 status 投票 vote
合作伙伴 partner
CSS檔案 命名 CSS檔案 命名
主要樣式 master 基本樣式 base
模組樣式 module 版面樣式 layout
主題 themes 專欄 colums
文字 font 表單 forms
列印 print

相關文章