手把手教你用套路寫頁面（HTML、CSS初中級前端教學）（第一節）

時間 2019-11-08

標籤手把手套路頁面 html css 初中前端教學一節欄目 HTML 简体版

原文原文鏈接

不少人不太會寫 HTML 和 CSS，這裏教你如何分析頁面結構，如何使用各類標準套路寫出各類頁面。css

以 HTML 和 CSS 爲主，部分動態內容加入 js 實現。前端

全部技巧所有簡單暴力，沒有兼容性問題（除非你要兼容IE8），可是很是好用。react

源代碼：github.com/qq20004604/…
做者微信：qq20004604
討論（QQ羣）：387017550

目錄：webpack

一、肯定頁面內容
二、環境準備
三、第一次頁面區塊劃分思路
四、第一次の實現
套路1：上下固定中自適應佈局
4.一、先搞定root樣式文件
套路2：定高不定寬，內有居中和相對最右側的元素
4.二、搞定header
套路3：文字居中，大小不定但高度固定
4.三、搞定footter
套路4：不定高，總體居中，左右分欄
4.四、搞定content
4.五、總結
to be continue...

一、肯定頁面內容

二、環境準備

腳手架：webpack3；
前端框架：React；
css預處理器：less、postcss；
其餘：babel、eslint、file-loader、style-loader、css-loader、uglifyjs-webpack-plugin、url-loader；

採用我本身以前配好的腳手架，見github連接：github.com/qq20004604/…git

能夠直接fork該腳手架，而後在該腳手架基礎上進行開發；github

三、第一次頁面區塊劃分思路

前註解釋：web

div#box，表示 <div id='box'></div>
div.content-box，表示 <div class='content-box'></div>

原圖分爲三塊：api

header：Crulse和頭像所在的那個部分；
content：中間的左邊欄和右邊主要內容區域；
footter：下方的copyright；

整體思路：瀏覽器

上下部分固定，中間高度可變，寬度都爲100%；
中間區域固定寬度，左和右定寬不定高；

詳細思路以下：bash

總體被 div#app 所包含，撐滿 100% 的頁面區域，position設置爲relative；
div#app 下包含 div#header，div#content，div#footter 三部分，三部分的position都設置爲 absolute；
div#header 設置爲 top：0，left：0，with：100%，height設置爲實際高度；
div#footter 思路一樣，bottom：0，left：0，with：100%，height設置爲實際高度；
div#content的top和bottom設置爲header和footter的height，left和right設置爲0；

而後，div#content再劃分爲兩塊，具體思路以下：

div#content下包含 div.content-box，寬度設置爲定寬。而 div#content 的 overflow-x 屬性設置爲auto，目的是當中間過窄時，出現滾動條；
div.content-box 下含 div.aside和div.article。具體須要注意的狀況，等下一次頁面模塊劃分時再進行分析；

四、第一次の實現

於 src/page 文件夾下新建 main 文件夾，並在該文件夾下新建 app.jsx。

此時 jsx 部分寫法以下：

render() {
    return <div id={s.root}>
        <Header/>

        <Content/>

        <Footter/>
    </div>;
}
複製代碼

所以要引入（固然你也要新建）三個不一樣的jsx文件和根容器的樣式文件，以下：

import s from './style.less';
import Header from './header.jsx';
import Content from './content.jsx';
import Footter from './footter.jsx';
複製代碼

套路1：上下固定中自適應佈局

以這個頁面爲例，是標準的上下固定中自適應佈局。

這種佈局其實很簡單。

第一，先引入reset.css統同樣式，確保不一樣瀏覽器的樣式是一致的。

第二，DOM結構以下，容器內包含上中下

<div id='app'>
    <Header/>

    <Content/>

    <Footter/>
</div>
複製代碼

第三，最外層DOM（<div id='app'>）的思路是，撐滿整個可視區域做爲基準容器，並設置絕對定位，爲子容器提供定位參考。

這種寫法的好處是，咱們能夠肯定最外層DOM必定的撐滿的，若是咱們使用body標籤做爲最外層DOM，由於默認樣式的不一樣，咱們是不肯定的。

樣式以下：

#root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
複製代碼

第四，上和下這2個固定。

經過設置絕對定位的屬性，使得上和下，分別位於基準容器的最上面和最下面。

樣式以下：

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

#footter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
}
複製代碼

第五，中自適應。

自適應的前提是不須要設置高度，所以一樣適用絕對定位，經過配置 top 和 bottom 屬性，使得高度自適應。

樣式以下：

#content {
  position: absolute;
  top: 80px;
  bottom: 40px;
  left: 0;
  width: 100%;
}
複製代碼

總結：

此時你有了一個上下固定中自適應佈局而且寬度100%可視區域的佈局了。而且他們都帶有定位屬性，你下面的佈局能夠基於這三塊進行開發了。

4.一、先搞定root樣式文件

核心有兩步，其餘都不過重要（也就是說，不重要的地方你就本身搞定咯）：

@import '~common/css/reset.css';

#root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
複製代碼

分別表示引入reset.css（這個我預置在腳手架裏了，只要引入就行，全局生效）；

和設置根容器撐滿整個可視區域。

套路2：定高不定寬，內有居中和相對最右側的元素

這也是一個比較典型的佈局。

以本頁面爲例：

header部分裏有居中和相對最右側必定距離兩個DOM；
footter部分有居中元素；
content區域也能夠認爲，左右兩個分欄他們做爲整體來看，也是居中的；

寫法思路以下：

第一，父容器設置定位屬性，不論是absolute或者是relative均可以；

第二，居中元素的思路是很簡單。

以左右居中爲例，經過 left:50% 的屬性，使其相對於最左側半個容器寬度的距離。而後再經過 transform: translateX(-50%); 往回拉自身元素寬度 50% 的距離。這樣天然就實現左右居中。

若是上下居中，思路是同樣的，無非是設置 top:50% 和 transform: translateY(-50%);

第三，相對於最右側必定距離的元素，這個思路也很簡單。

該元素設置絕對定位：position: absolute;；
配置 right 屬性，設置該元素最右側距離父容器最右側的距離；
設置該元素的寬高；
有必要的話，設置上下居中（參考上面第二條的方法）；

一樣，若是是相對於左側，頂部，底部，思路是一樣的，只是換個css屬性罷了。

4.二、搞定header

觀察效果：

中間文字居中；
右側頭像和content區域內容最右邊靠左一點；

參考上面的【套路2：定高不定寬，內有居中和相對最右側的元素】，咱們將整個結構變爲：

中間文字和右側頭像做爲總體，放在一個DIV下，這個DIV相對於整個header居中；
中間文字相對於他父DIV，居中；
右側頭像，相對於父DIV，靠右設置位置；

總體思路以下：

div#header內部設一容器div.header-box，固定寬度（同div#content區域寬度）且居中，相對定位；
居中的正常相對於div.header-box居中，右側頭像絕對定位並設置right的值來控制位置；
因爲頭像應該是可配置的，而且有默認值，所以頭像的路徑放在根路徑中，有默認值（一個默認圖片的地址），並將該值傳到 div#header，做爲頭像 img 標籤的 src 屬性；

具體代碼見 src/page/main/header.jsx 相關

圖片路徑寫法：

須要注意的是，js和css中，圖片路徑的寫法是不一樣的。

具體來講，以我這個webpack的配置爲例，

一、一樣圖片放在 src/img 文件夾下，css中的寫法是：

background-image: url('~@/logo.png');
複製代碼

根據的配置是：

{
    loader: 'css-loader',
    options: {
        modules: false,
        minimize: true,
        sourceMap: false,
        alias: {
            '@': resolve('src/img'), // '~@/logo.png' 這種寫法，會去找src/img/logo.png這個文件
            'common': resolve('src/common')
        }
    }
}
複製代碼

二、js中的寫法是：

state = {
    // 注意，css和js中，圖片路徑寫法不一樣
    avatarIcon: require('@/img/default-avatar.png')
}
複製代碼

根據的配置是：

resolve: {
    // 省略後綴名
    extensions: ['.js', '.jsx'],
    alias: {
        '@': resolve('src'),
        'component': resolve('src/components'),
        'common': resolve('src/common'),
        'api': resolve('src/api'),
        'page': resolve('src/page'),
        'assets': resolve('src/assets')
    }
} 
複製代碼

固然，也能夠寫成：avatarIcon: require('../../img/default-avatar.png')

三、若是圖片會上傳到CDN，有固定路徑，那就更好寫了，直接寫成絕對路徑便可；

四、圖片放在static文件夾下，css能夠直接寫爲：background-image: url('/default-avatar.png')

js的話能夠寫爲：

state = {
    avatarIcon: 'static/default-avatar.png'
}
複製代碼

套路3：文字居中，大小不定但高度固定

文字居中是一個很常見的需求，但狀況又比較多。所以咱們採用固定套路來實現。

要求描述：

父容器 footer，不定高不定寬；
文字的 font-size 已知，但裏面文字內容數量不定（也就是說寬度不固定），但要求上下居中，左右居中；

考慮到要求，所以將文字包含在一個div中，總體考慮，因而HTML代碼以下：

<div id='footter'>
    <div className='footter-copyright'>
        @Copyright 2019 company
    </div>
</div>
複製代碼

思路：

將全部文字視爲一個總體，不設 div 寬度，讓文字大小天然撐起來 div 的寬度和高度；
經過套路2，讓該文字所在div上下左右居中；
需求完成；

css以下：

.footter-copyright {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 下面三個屬性的px值保持一致
     * 另外，除了第三個，其餘2個能夠省略，但我習慣明確寫其高度和行高
     * 好處是，若是有特殊需求，調起來很方便。
     */
    height: 16px;
    line-height: 16px;
    font-size: 16px;
}
複製代碼

另外一種寫法（已知高度固定）：

.footter-copyright2 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
複製代碼

4.三、搞定footter

footter 明顯就更簡單了，只有一段居中文字而已。參考【套路3：文字居中，大小不定但高度固定】實現他。

套路4：不定高，總體居中，左右分欄

這也是一個典型的狀況。

總體居中，寬度固定（能夠觀察，包括淘寶在內絕大多數頁面，中間區域都是定寬的）；
居中部分左右分欄，且寬度固定；
這裏額外狀況是，左右分欄之間有距離，但其實沒什麼影響；
左中右三層分欄和左右兩層分欄的寫法是沒有區別的；

思路以下：

不考慮極端狀況的顯示效果（好比用戶讓瀏覽器可視區域高度特別小）；
三層DIV：
祖父容器提供定位屬性；
父容器定寬，左右居中，且高度撐滿祖父容器；
左右分欄在該父容器下，且高度撐滿，位置分別相對於父容器的左右，寬度定寬配置；

特殊狀況：

例如總體是撐滿整個頁面的（即不定寬）；
此時通常是左側定寬，右側不定寬；
左側寫法同上面；
右側寫法其實沒啥變化，無非是經過 right 和 width 定位，變爲經過 left 和 right 定位；
此時右側內部應寫成可響應模式，而後使用浮動佈局（即 float）；

4.四、搞定content

參考上面的【套路4：不定高，總體居中，左右分欄】

須要注意的是，這個中間總體看似只有1170px寬，實際應該是1200px寬，右側分欄的左右分別有 30px 寬度的空隙（這種須要經驗和交互進行溝通，或者本身量一下）。

所以右側分欄實際應該多寫一層div，即實際內容區域應在右側分欄div區域內。

代碼以下（更詳細代碼參考個人github，連接見【4.5】）：

@aside-bk-color: #2d4054;

#content {
  position: absolute;
  top: 80px;
  bottom: 40px;
  left: 0;
  width: 100%;
  background-color: #f3f3f3;

  .content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 100%;

    .aside {
      position: absolute;
      left: 0;
      width: 270px;
      height: 100%;
      background-color: @aside-bk-color;
    }

    .article-box {
      position: absolute;
      left: 270px;
      right: 0;
      height: 100%;
      padding: 0 30px;

      .article {
        position: relative;
        width: 100%;
        height: 100%;
        // 帶上顏色，用於肯定該位置是正確的
        background-color: #fff;
      }
    }
  }
}
複製代碼