摘要：目錄移動(dòng)介紹和兩種開發(fā)方式響應(yīng)式開發(fā)方式原生的開發(fā)方式響應(yīng)式的原理的媒體查詢響應(yīng)式開發(fā)框架的介紹和基本信息優(yōu)勢(shì)版本了解框架和庫的區(qū)別主導(dǎo)者不一樣入門起步下載和引包閱讀的文檔了解常用的全局樣式和組件和插件搭建項(xiàng)目目錄結(jié)構(gòu)創(chuàng)建主頁引包設(shè)置網(wǎng)

移動(dòng)web介紹和兩種開發(fā)方式(響應(yīng)式開發(fā)方式 原生的開發(fā)方式)

響應(yīng)式的原理(CSS3的媒體查詢)

響應(yīng)式開發(fā)框架(Bootstrap) 的介紹和基本信息-優(yōu)勢(shì)-版本

了解框架和庫的區(qū)別 主導(dǎo)者不一樣

入門Bootstrap 起步 下載和引包

閱讀Bootstrap的文檔 了解常用的全局CSS樣式 和 組件 和JS插件

搭建項(xiàng)目目錄結(jié)構(gòu)

創(chuàng)建主頁引包 設(shè)置網(wǎng)頁字體和空結(jié)構(gòu)

字體圖標(biāo)的生成 和使用

總結(jié)

移動(dòng)web ： 移動(dòng)端手機(jī)瀏覽器或者微信里面瀏覽的網(wǎng)頁

移動(dòng)APP ： 手機(jī)上需要下載安裝的應(yīng)用程序

響應(yīng)式開發(fā)用在一些新建的網(wǎng)站(PC和移動(dòng)同時(shí)出來) 對(duì)加載速度要求不是很高

純?cè)苿?dòng)web開發(fā) 一般會(huì)用在一些已經(jīng)有PC端上線的網(wǎng)站 再次開發(fā)移動(dòng)端 移動(dòng)端需要加載速度很快的網(wǎng)站

超小屏幕（手機(jī)）    768px以下
小屏設(shè)備（平板）    768px-992px
中等屏幕（舊式電腦）   992px-1200px
大屏設(shè)備（現(xiàn)代電腦）   1200px以上

    @media screen and (條件){
        //滿足條件執(zhí)行CSS代碼
    }

    and的前后必須有空格  條件通常只有兩個(gè) min-width max-width

    @media (條件){
        //滿足條件執(zhí)行CSS代碼
    }

    可以簡(jiǎn)寫省略 screen and

min-width 屏幕寬度大于等于某個(gè)值生效 (最小寬度)
max-width 屏幕寬度小于等于某個(gè)值的時(shí)候生效 (最大寬度)

  width > 1200  大屏幕 大屏PC設(shè)備
  992 < width < 1200  中屏幕 老式電腦
  768 < width < 992  小屏幕 平板設(shè)備
  width < 768 超小屏幕 手機(jī)

1.如果使用min-width條件判斷的時(shí)候 條件判斷大小 要從小到大寫

  /*min-width: 768px 當(dāng)屏幕的寬度大于等于768時(shí) 背景顏色為green */
  @media screen and (min-width: 768px){
      body{
          background-color: green;
      }
  }

  /*min-width: 992px 當(dāng)屏幕的寬度大于等于992時(shí) 背景顏色為blue*/
  @media screen and (min-width: 992px){
      body{
          background-color: blue;
      }
  }

  /*min-width: 1200px 當(dāng)寬度大于等于1200時(shí) 背景顏色為pink*/
  @media screen and (min-width: 1200px){
      body{
          background-color: pink;
      }
  }
  

2.如果使用max-width條件判斷到時(shí)候 條件判斷大小 要從大到小寫

  /*max-width: 1200px:寬度在1200以下*/
  @media screen and (max-width: 1200px) {
      body {
          background-color: green;
      }
  }

  /*max-width: 992px:寬度在992以下*/
  @media screen and (max-width: 992px) {
      body {
          background-color: blue;
      }
  }

  /*max-width: 768px:寬度在768以下*/
  @media screen and (max-width: 768px) {
      body {
          background-color: pink;
      }
  }

向上兼容 只寫了小的判斷, 大的判斷沒有寫, 但是在大屏幕下也會(huì)生效

向下覆蓋 同時(shí)寫了小的判斷和大的判斷, 滿足大的條件會(huì)生效大的條件的樣式, 大的條件寫在后面會(huì)把小的條件的樣式覆蓋

在大屏幕下顯示4列 中屏幕顯示3列 小屏幕顯示2列 超小屏幕顯示1列

  /*w 768~992  每一行放置兩個(gè)子元素  50%*/
  @media screen and (min-width: 768px){
      .box > div{
          width: 50%;
      }
  }
  /* w 992~1200 每一行放置三個(gè)子元素  33.33%*/
  @media screen and (min-width: 992px){
      .box > div{
          width: 33.33%;
      }
  }
  /*w >1200 每一行放置四個(gè)子元素 25%*/
  @media screen and (min-width: 1200px){
      .box > div{
          width: 25%;
      }
  }

原理就是通過媒體查詢判斷條件改變盒子的寬度

特點(diǎn)：靈活簡(jiǎn)介，代碼優(yōu)雅，美觀大方

好處：Bootstrap 讓我們的Web開發(fā)更簡(jiǎn)單，更快捷

版本：目前市面上使用最多的是3.x.x版本 除此之外還有2.3.2對(duì)IE8支持 現(xiàn)已有4.0.0的正式版

相關(guān)鏈接: 中文官網(wǎng) 使用Bootstrap構(gòu)建的網(wǎng)站

jquery : 庫 便捷的DOM (你想實(shí)現(xiàn)什么功能就調(diào)用什么方法)(主導(dǎo)者是你 你調(diào)用庫)

Bootstrap : 框架 界面工具集 框架是他來控制你 (框架制定好了一系列規(guī)則 用戶按照規(guī)則進(jìn)行編寫)可以實(shí)現(xiàn)整個(gè)網(wǎng)站大多數(shù)功能

插件 : fullpage 功能比較單一 只是實(shí)現(xiàn)了網(wǎng)頁里面的某個(gè)或幾個(gè)功能

先引入Bootstrap的CSS(如果想要主題可以在引入帶主題的CSS)

再引入自己的CSS

先引入jquery(因?yàn)锽ootstrap依賴jquery)

再引入Bootstrap的JS

再引入自己的JS

先引入第三方的框架

再引入自己的文件

CSS放到head里面引入(有些特殊的JS文件對(duì)頁面渲染有作用的要放到head中)

js放到body結(jié)束標(biāo)簽是上面引入

視口: 瀏覽器的可視窗口 在PC端是會(huì)受到瀏覽器窗口變化而變化

視口在PC端是可視窗口(會(huì)變的) 在移動(dòng)端有一個(gè)固定的值 通常是默認(rèn)980

但是默認(rèn)移動(dòng)端的時(shí)候980會(huì)造成網(wǎng)頁的縮放或者出滾動(dòng)條

解決移動(dòng)端默認(rèn)視口會(huì)造成網(wǎng)頁縮放和滾動(dòng)條 設(shè)置meta標(biāo)簽設(shè)置默認(rèn)是視口的寬度等于設(shè)備的寬度

視口的其他屬性 初始化縮放 initial-scale=1.0 是否允許用戶縮放 user-scalable=no 最大 maximum-scale=1.0 和最小縮放 minimum-scale=1.0

meta:vp+tab 凡是寫移動(dòng)端頁面一來就是加上視口

1.

http-equiv="X-UA-Compatible" 表示設(shè)置IE瀏覽器的兼容模式

content="IE=edge" 表示讓IE瀏覽器用最新的渲染引擎渲染頁面

概要 (常用)

布局容器

柵格系統(tǒng) (常用)

xs : 超小屏幕 手機(jī) (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面顯示器 (≥992px)

lg : 大屏幕 大桌面顯示器 (≥1200px)

預(yù)置排版樣式

統(tǒng)一預(yù)制標(biāo)簽樣式

文本對(duì)齊 (常用)

改變大小寫

代碼樣式

頁面輸出代碼

表格樣式

各種表格樣式

表單樣式

各種表單組合的樣式

按鈕樣式

各種按鈕顏色 和 按鈕大小等樣式 (常用)

圖片樣式

圖片圓角的樣式

輔助工具類

內(nèi)容塊居中 (常用)

快速浮動(dòng) 和 清除浮動(dòng) (常用)

顯示隱藏 (常用)

響應(yīng)式工具類 (常用)

hidden-xx : 在某種屏幕下隱藏

visible-xx : 在某種屏幕尺寸下顯示

基礎(chǔ)CSS這塊只是將我們常用想一些元素的樣式做了美化,如果需要使用直接拿過來用就行了

導(dǎo)航 (常用)

導(dǎo)航條 (常用)

面包屑導(dǎo)航

下拉菜單 (常用)

按鈕式下拉菜單

按鈕組

輸入框組

警告框

頁頭

分頁

列表組 (常用)

面板 (常用)

媒體對(duì)象 (常用)

進(jìn)度條

Glyphicons字體圖標(biāo) (常用)

標(biāo)簽

徽章

縮略圖

大屏幕

嵌入內(nèi)容

內(nèi)嵌

將我們?nèi)粘Ｊ褂玫囊恍┕δ軌K例如下拉菜單,提前寫好,我們使用時(shí)直接找到對(duì)應(yīng)的demo然后拿回來做相應(yīng)調(diào)整就行了

模態(tài)對(duì)話框 (常用)

下拉菜單 (常用)

滾動(dòng)監(jiān)聽 (常用)

標(biāo)簽頁 (常用)

工具提示

彈出框

警告框

按鈕

折疊面板 (常用)

輪播圖 (常用)

吸頂效果 (常用)

data-spy="affix"

data-offset-top="什么位置出現(xiàn)"

data-offset-bottom="什么位置消失"

jQuery

Bootstrap 框架中的所有JS組件都依賴jquery實(shí)現(xiàn)

├─ /project/ ··················· 項(xiàng)目所在目錄
└─┬─ /css/ ······················· 自己的CSS文件
  ├─ /font/ ······················ 使用到的字體文件
  ├─ /img/ ······················· 使用到的圖片文件
  ├─ /js/ ························ 自己寫的JS腳步
  ├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】
  ├─ /favicon.ico ················ 站點(diǎn)圖標(biāo)
  └─ /index.html ················· 入口文件

1. HTML約定

在head中引入必要的CSS文件,優(yōu)先引入第三方的CSS,方便我們自己的樣式覆蓋

在body末尾引入必要的JS文件,優(yōu)先引入第三方的JS文件,注意JS文件之間的依賴關(guān)系

比如Bootstrap.js 依賴jquery,那就應(yīng)該先引入jquery.js 然后引用Bootstrap.js

2. CSS約定

除了公共級(jí)別的樣式,其余樣式全部由模塊前綴

盡量使用直接子代選擇器 少用間接子代選擇器避免誤殺

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

先劃分好頁面的大容器,然后具體看每一個(gè)容器的多帶帶情況

col-xs-[列數(shù)]：在超小屏幕下展示幾份

col-sm-[列數(shù)]：在小屏幕下展示幾份

col-md-[列數(shù)]：在中等屏幕下展示幾份

col-lg-[列數(shù)]：在大屏幕下展示幾份

xs : 超小屏幕 手機(jī) (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面顯示器 (≥992px)

lg : 大屏幕 大桌面顯示器 (≥1200px)

此處頂部通欄已經(jīng)被劃分為四列
text-center的作用就是讓內(nèi)部?jī)?nèi)容居中顯示

@font-face {
    font-family: "itcast";
    src: url("../fonts/MiFie-Web-Font.eot") format("embedded-opentype"), url("../fonts/MiFie-Web-Font.svg") format("svg"), url("../fonts/MiFie-Web-Font.ttf") format("truetype"), url("../fonts/MiFie-Web-Font.woff") format("woff");
}

[class^="icon-"],
[class*=" icon-"] {
    /*注意上面選擇器中間的空格
我們使用的名為itcast的字體就是最上面的@font-face的方式聲明*/
    /*當(dāng)字體名字之間有空格的都要用引號(hào)引起來 ,如果沒有空格的話可以不用引號(hào)*/
    font-family: itcast;
}

eot : embedded-opentype

svg : svg

ttf : truetype

woff : woff

進(jìn)入 https://icomoon.io/ 網(wǎng)站

點(diǎn)擊右上角 icomoonApp

點(diǎn)擊左上角 import icons

選中所有導(dǎo)入的圖標(biāo)

點(diǎn)擊右下角 generate font

點(diǎn)擊左上角 preferences 設(shè)置字體名稱 和 類名前綴

點(diǎn)擊download

解壓生成好的壓縮包 里面有demo.html

打開demo.html能夠查看圖標(biāo)對(duì)應(yīng)類名

使用 的時(shí)候 把 fonts文件夾放到項(xiàng)目 并且引入style.css（這里面就定義了那些圖標(biāo)的類名）

得下載或者生成或者去借(去別的網(wǎng)站拿)一個(gè)字體文件

使用@font-face定義一個(gè)字體名稱

先指定字體的名稱font-family:"字體名稱";

引入這個(gè)字體名稱對(duì)應(yīng)的字體文件 如果不考慮兼容只引入ttf src:url(路徑.ttf) format("truetype")

定義一個(gè)圖標(biāo)的類名來使用圖標(biāo)

先使用圖標(biāo)對(duì)應(yīng)的字體名稱font-family:"字體名稱";

指定圖標(biāo)的編碼放到類名的偽元素的content里面 content: "e945";

清除默認(rèn)的斜體

在頁面使用定義好的圖標(biāo)的類名就可以了

移動(dòng)web ： 移動(dòng)端瀏覽器顯示的網(wǎng)頁

移動(dòng)web的兩種開發(fā)方式

響應(yīng)式開發(fā)方式：一套代碼運(yùn)行多個(gè)終端 開發(fā)快維護(hù)快加載慢 適配好 用在一些新建的網(wǎng)站對(duì)速度要求不高的

純?cè)苿?dòng)web開發(fā) ：分別寫兩套代碼 開發(fā)慢維護(hù)慢加載快 適配差 用在一些已經(jīng)上線的了PC再次開發(fā)移動(dòng)web 對(duì)加載速度要求高的網(wǎng)頁

響應(yīng)式開發(fā)原理

CSS3媒體查詢實(shí)現(xiàn)

媒體查詢語法

  @meida screen and (){

    sreen and 可以省略 如果不省略 and前后要有空格

  }

媒體查詢的條件判斷和順序說明

1. 媒體查詢有兩個(gè)條件判斷 min-width: 屏幕寬度大于等于某個(gè)值成立 條件判斷要從小到大寫
2. max-width：屏幕寬度小于等于某個(gè)值成立 條件判斷要從大到小寫

媒體查詢的特性

1. 向上兼容 ： 沒有寫大的判斷 也能生效小屏幕的判斷
2. 向下覆蓋 ： 同時(shí)寫了小和大屏幕的判斷 大屏幕在后面會(huì)覆蓋小屏幕的樣式

響應(yīng)式開發(fā)框架Bootstrap： 靈活簡(jiǎn)介 代碼優(yōu)雅 美觀大方

使用Bootstrap框架

下載

引入bootstrap

  1. 先引入bootstrap.css
  2. 引入jquery
  3. 引入bootstrap.js

視口 : 瀏覽器可視窗口移動(dòng)端設(shè)置視口和設(shè)備一樣寬

布局容器 .container : 固定寬度且居中 .container-fluid 寬度100%

柵格系統(tǒng)

柵格系統(tǒng)的4個(gè)檔次
col-xs w<768
col-sm 768col-md 992col-lg w>1200

柵格系統(tǒng)默認(rèn)一行分為12列
分成4列 col-xx-3
分理3列 col-xx-4
分理2列 col-xx-6
分理1列 col-xx-12

搭建項(xiàng)目 fonts css/font.css img lib

創(chuàng)建Index.html 引包 先引入第三方 再引入自己的

創(chuàng)建頁面的骨架

搭建頂部通欄 .container>.row>col-md-2col-md-5col-md-2col-md-3

字體圖標(biāo)

bootstrap官方圖標(biāo) 組件->字體圖標(biāo) 拷貝圖標(biāo)類名即可

自己生成字體圖標(biāo) icomoon.io網(wǎng)站生成

引入生成好的字體圖標(biāo)樣式文件同時(shí)字體文件要放在旁邊

bootstrap的按鈕 全局CSS -> 按鈕