Web開發系列【1】實用的網頁佈局（PC端）

時間  2019-11-10
標籤 web 開發 系列 實用 網頁 佈局 欄目 HTML 简体版
原文   原文鏈接

在熟悉那些經常使用的軟件、工具後，咱們正式開始開發，在前期準備工做以後，咱們要作的事情是寫頁面，也就是網頁佈局。在w3c、菜鳥、慕課網等等網站上都有基礎的 HTML+CSS 知識講解，在初期學習中，跟着教程所有過一遍就差很少了。剛開始寫頁面的時候咱們會迷糊，那麼多的標籤、屬性，我該用哪一個，有什麼區別等等，而後寫出來的幾個頁面都是亂七八糟的，分不動定位和浮動等不少屬性，接下來我介紹一些我對網頁佈局的理解。css

1、入門

一、盒子模型
在寫網頁的最開始，咱們須要清楚記住一個東西：盒子模型。
這是從瀏覽器上截圖下來的一個盒子模型的圖，咱們能夠清晰的看到從內到外依次是content（內容）、padding（內填充）、border（邊框）、margin（外邊距），看起來很簡單，可是總有新手會記不住，至少我學生時代老師第一次講我是聽不明白的。html

圖片描述

二、頁面結構
隨便打開一個網站，均可以清晰的看到網站大體有頭部、中間、底部三部分構成，這樣咱們就知道一個網頁首先能夠分紅三個部分，個人建議是先寫頭部、底部最後寫中間內容。頭部、底部通常都是公共的，整個網站共用一個，那麼，就能夠單獨建一個文件header.html、footer.html分開來寫頭部、底部，而後用一個模塊插件在每一個頁面對應的位置引入。web

頭部主要是一個導航欄，整個網站根據這個導航欄開發細緻功能，而底部主要是開發這個網站公司的信息和備案號等。中間內容：這裏就是整個網站的主要內容，展現給用戶看的數據，根據不一樣類別網站有不一樣程度複雜的佈局，還有編寫習慣，我建議把網頁分紅頭部、底部、Banner、內容幾個大塊去寫，寫完一塊看下效果再繼續寫。瀏覽器

三、推薦幾個入門實例
一開始寫頁面新建的項目文件夾大體是這樣的目錄：
demo文件夾 > css文件夾 + images文件夾 + index.html編輯器

3一、百度一下首頁
網站地址：https://www.baidu.com/
這是一個很簡單的頁面，頁面元素比較少，是我入門的第一個靜態頁面。工具

3二、企業類首頁（貓咪領養網）
網站地址：http://www.maomilingyang.com/
這類型的網站首頁比較簡潔，功能很少，中間內容通常是兩列布局。佈局

3三、電商類網站首頁（蘑菇街）
網站地址：http://www.mogujie.com/
這類型的網站佈局複雜，功能繁多，最重要的是在寫頁面的時候要細緻，要有耐心，在目前熱門的電商網站有不少，我建議是選擇比較複雜的網站首頁去寫佈局。學習

2、經常使用佈局

通過以上3個實例的練習，基本上把學習過的HTML+CSS語法都過一遍，平時會用到的大多數屬性都用上了，下面就來分析經常使用的佈局。字體

一、默認佈局（已省略Banner）flex

<div id="Page">
    <div id="Header" class="bg">我是頭部內容</div>
    <div id="Content">
        <div class="cont-left">我是內容1</div>
        <div class="cont-right">我是內容2</div>
    </div>
    <div id="Footer" class="bg">我是底部內容</div>
</div>
#Page{
    text-align: center;
}
.bg{
    background-color: pink;
}
#Header{
    width: 100%;
    height: 60px;
    line-height: 60px;
}
#Content{}
#Content div{
    /*高度不是寫死，內容撐開*/
    min-height: 500px;
    line-height: 500px;
}
#Footer{
    width: 100%;
    height: 200px;
    line-height: 200px;
}

二、單列布局
該佈局比較簡單，大多用於功能很少的網站首頁，該佈局一般有固定的寬度，而且居中，高度由內容撐開，有如下兩個應用場景：

2一、需求：上下固定，中間滾動，這種佈局移動端使用的更多。
只須要給頭部和底部加上絕對定位，再添加內容標籤（注意：父元素不能有定位）
PS：固定可使用Fixed，可是有兼容性問題

#Header{
    position: absolute;
    top: 0;
}
#Content{
    position: absolute;
    top: 60px;
    bottom: 200px;
    width: 100%;
    overflow-y: scroll;
}
#Footer{
    position: absolute;
    bottom: 0;
}

2二、需求：內容過少時底部固定，過多時正常排列。
有時候頁面內容不多，高度不滿一屏看起來就很不舒服，版面很醜，主要是由於高度不夠，因此最重要就是要設置html,body的高度。

html{
    height: 100%;
}
body{
    min-height: 100%;
    position: relative;
}
#Footer{
    position: absolute;
    bottom: 0; 
}

三、兩列布局
多用在後臺管理系統和分欄展現內容的頁面，這裏講解的是後臺上的兩列布局，一邊導航一邊內容的。大可能是左/右邊固定寬度，右/左邊寬度自適應，或者左右寬度都自適應的狀況。實現的方法有不少種，這裏以左邊導航右邊內容爲例。

#Page{
    text-align: center;
}
.bg{
    background-color: pink;
}
#Header{
    width: 100%;
    height: 60px;
    line-height: 60px;
}
#Content div{
    height: 500px;
    line-height: 500px;
}
#Footer{
    width: 100%;
    height: 200px;
    line-height: 200px;
}

3一、Float + BFC
利用左側浮動，右側盒子經過overflow: auto;造成了BFC。（注意：父元素要清浮動）

#Content{
    width: 100%;
    overflow: hidden;
}
.cont-left{
    float: left;
}
.cont-right{
    overflow: auto;
    background-color: skyblue;
}

3二、Flex: 彈性佈局的方法，兼容性有些不足，很好的一個方法。

#Content{
    display: flex;
    /*高度自動*/
    align-items: flex-start;
}
.cont-left{
    /*固定寬度才設置，自適應不設*/
    width: 100px;
    flex: 0 0 auto;
}
.cont-right{
    flex: 1 1 auto;
    background-color: skyblue;
}

33：Grid：柵格佈局，兼容性有些不足。

#Content{
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}
.cont-left{
    box-sizing: border-box;
    grid-column: 1;
}
.cont-right{
    box-sizing: border-box;
    grid-column: 2;
    background-color: skyblue;
}

三、三列布局
這是比較複雜的佈局，適合有複雜操做功能的網頁，如各大電商網站。實現的方法一樣有不少種，如Float、BFC、聖盃、雙飛翼、Flex、絕對定位。
3一、BFC(塊格式化上下文)規則規定：BFC不會和浮動元素重疊

<div id="Page">
    <div id="Header" class="bg">我是頭部內容</div>
    <div id="Content">
        <div class="cont-left">我是內容1</div>
        <div class="cont-right">我是內容2</div>
        <div class="cont-middle">我是內容0</div>
    </div>
    <div id="Footer" class="bg">我是底部內容</div>
</div>
.cont-left{
    float: left;
    width: 100px;
}
.cont-right{
    float: right;
    width: 100px;
}
.cont-middle{
    overflow: hidden;
    background-color: skyblue;
}

3二、聖盃：左、中、右三欄都經過float進行浮動，而後經過負值margin進行調整

<div id="Page">
    <div id="Header" class="bg">我是頭部內容</div>
    <div id="Content">
        <div class="cont-middle">我是內容0</div>
        <div class="cont-left">我是內容1</div>
        <div class="cont-right">我是內容2</div>
    </div>
    <div id="Footer" class="bg">我是底部內容</div>
</div>
#Content{
    overflow: hidden;
}
.cont-left{
    position: relative;
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: skyblue;
}
.cont-right{
    position: relative;
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: skyblue;
}
.cont-middle{
    float: left;
    width: 100%;
}

3三、絕對定位：簡單，優先加載主體。

#Content{
    height: 500px;
}
.cont-middle{
    position: absolute;
    left: 200px;
    right: 200px;
}
.cont-left{
    position: absolute;
    left: 0;
    width: 200px;
    background-color: skyblue;
}
.cont-right{
    position: absolute;
    right: 0;
    width: 200px;
    background-color: skyblue;
}

3、分享主流網站初始化

考慮到瀏覽器的兼容問題，不一樣瀏覽器對標籤有不一樣的默認值，咱們在每一個頁面的開始會進行初始化CSS，最簡單的初始化方法是*{margin:0;padding:0;},一開始我也是這麼寫的，這樣寫最快，可是若是網站很大，就不建議這樣寫，這樣網站加載須要好久，會把全部標籤初始化一遍。咱們先看一下網上能找到的主流網站的初始化方案：

[默認效果]
圖片描述

<div class="box">
    <ul>
        <li>小幸運</li>
        <li>原來你是我最想留住的幸運</li>
        <li>原來咱們和愛情，曾經靠得那麼近</li>
        <li>那爲我對抗世界的決定</li>
        <li>那陪我淋的雨，一幕幕都是你</li>
        <li>一塵不染的真心，與你相遇 好幸運</li>
    </ul>
</div>

一、網易官網

html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
table,td,tr,th{font-size:12px;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
ol,ul {list-style:none;} 
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
address,cite,code,em,th {font-weight:normal; font-style:normal;}

二、騰訊官網

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

三、新浪官網

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";} 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

四、淘寶官網

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }

五、雅虎

html {overflow-y: scroll;} 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

4、網頁開發流程

入門和學習了佈局以後，接下來就是開始正式寫頁面的準備工做，一個P端網頁在開發的時候有不少準備工做，準備工做作好了對於後面的維護也是比較簡單、友好，要爭取頁面一次寫完就很好，不要後期又反過來調整頁面，所以，在寫頁面的時候必定要專心、精準、仔細。

一、網站初始化：其實用哪一個初始化方案都不要緊，重要的是對不一樣項目進行細微調整，咱們分析一下我的的初始化方案怎麼寫：

十一、重置樣式：主要有如下6點，不是寫死，按需添加標籤與屬性
    11-一、去除默認邊距（不是全部，是使用到的）
    11-二、總體（背景顏色、字體）
    11-三、標題
    11-四、列表
    11-五、表單
    11-六、超連接
    11-七、圖片
十二、通用樣式：主要有字號、a的狀態、清除浮動、居中等等，其中清除浮動和居中這些方式有不少，這裏展現的是我我的喜歡用的。
1三、模塊樣式：即頁面每一大模塊區域的共用樣式。
1四、書寫順序：編輯器中有格式化工具，能夠去配置表中配置成本身喜歡的格式，建議定位和自身屬性放在前面。
reset.css

/* ==========================================================================
  一、重置項
============================================================================ */
body { margin: 0; padding: 0;}
body { background-color: #fff; font: 12px"微軟雅黑";}
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
ol, ul, li { list-style: none;}
select, input, button, textarea { border: 0; outline: none; background-color: #fff;}
a { text-decoration: none; color: #000;}
img { border: none; border: 0;}

/* ==========================================================================
  二、公共項
============================================================================ */
/* 頁面容器 */
#Page {}

/* 展現區域 */
.contBase { min-width: 980px; margin: 0 auto;}

/* 字號 */
.font-s { font-size: 10px;}
.font-m { font-size: 14px;}
.font-l { font-size: 16px;}
.font-xl { font-size: 18px;}

/* a的4個狀態 */
a:link {}
a:visited {}
a:hover {}
a:active {}

/* 清除浮動的2種方式 */
.clearBFC { overflow: hidden;}
.clearFix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.clearFix { zoom: 1;}

/* 水平居中的3種方式 */
.center-block{margin: 0 auto;}
.center-inline{text-align: center;}
.center-auto{position: absolute;left: 0;right: 0;margin: auto;}

二、模塊代碼：網站進行初始化以後能夠寫頁面了，我建議把公共的模塊抽取出來，樣式寫到同一個文件內。

section.css
/* ==========================================================================
  一、Header
============================================================================ */
#Header{}

/* ==========================================================================
  二、Banner
============================================================================ */
#Banner{}

/* ==========================================================================
  三、Footer
============================================================================ */
#Footer{}

三、接着就是這個頁面的代碼，如index.css，注意的是，建議在每一個頁面的樣式文件里加上適配屏幕的代碼，1920設計圖上的效果適應大部分屏幕，可是小屏幕、大屏幕的效果仍是有誤差，或者但願在手機上打開頁面也不會是亂，就須要寫一寫簡單的適配代碼，如單列布局的寬度等。

index.css
/* 大屏幕 */
@media (min-width:2560px){}

/* 中小屏幕 */
@media (min-width:1024px) and (max-width:1365px){}

/* 小屏幕 */
@media (min-width:980px) and (max-width:1023px){}

5、兼容IE

很不幸的，若是你的網站被要求兼容IE8，那麼，須要按需加載文件，能夠在head部分加判斷條件，具體兼容方案在這裏就不作分析了。

<!--[if gt IE 7]><link rel="stylesheet" type="text/css" href="ie8.css"/><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="ie8.css"/><![endif]-->

<!--[if lte IE 8]>
    <div style="width:980px;margin:0 auto;text-align:center;font-size:18px;">
        建議升級您的IE瀏覽器，或使用Google Chrome、Firefox等高級瀏覽器，將會獲得更好的體驗！
    </div>
<![endif]-->
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程