HTML5+CSS3

程式碼打碟手發表於2018-05-08
HTMLCSSS3

CSS3的權重

1.什麼是權重

    CSS權重指的是樣式的優先順序，有兩條或多條樣式作用於一個元素，權重高的那條樣式對元素起作用,權重相同的，後寫的樣式會覆蓋前面寫的樣式

2.權重的等級劃分

  • !important，加在樣式屬性值後，權重值為 10000
  • 內聯樣式，如：style=””，權重值為1000
  • ID選擇器，如：#content，權重值為100
  • 類，偽類和屬性選擇器，如： content、:hover 權重值為10
  • 標籤選擇器和偽元素選擇器，如：div、p、:before 權重值為1
  • 通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0

css新增選擇器

  • E:nth-child(n)：匹配元素型別為E且是父元素的第n個子元素
  • E:nth-last-child(n)：匹配元素型別為E且是父元素的倒數第n個子元素（與上一項順序相反）
  • E:first-child：匹配元素型別為E且是父元素的第一個子元素
  • E:last-child：匹配元素型別為E且是父元素的最後一個子元素
  • E:only-child：匹配元素型別為E且是父元素中唯一的子元素
  • E:nth-of-type(n)：匹配父元素的第n個型別為E的子元素
  • E:nth-last-of-type(n)：匹配父元素的倒數第n個型別為E的子元素（與上一項順序相反）
  • E:first-of-type：匹配父元素的第一個型別為E的子元素
  • E:last-of-type：匹配父元素的最後一個型別為E的子元素
  • E:only-of-type：匹配父元素中唯一子元素是E的子元素
  • E:empty 選擇一個空的元素
  • E:enabled 可用的表單控制元件
  • E:disabled 失效的表單控制元件
  • E:checked 選中的checkbox
  • E:not(s) 不包含某元素

CSS3圓角、陰影、rgba

1.CSS3圓角

    設定某一個角的圓角，比如設定左上角的圓角：
            border-top-left-radius:30px 60px;

    同時分別設定四個角：border-radius:30px 60px 120px 150px;

    設定四個圓角相同：
            border-radius:50%;

2.CSS3陰影

            box-shadow：h-shadow v-shadow blur spread color inset;
       分別設定陰影：水平偏移 垂直偏移 羽化大小 擴充套件大小 顏色 是否內陰影

3.rgba（新的顏色值表示法）

        盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（相容IE）;
        rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度

CSS3 transition動畫

1、transition-property 設定過渡的屬性，比如：width height background-color
2、transition-duration 設定過渡的時間，比如：1s 500ms
3、transition-timing-function 設定過渡的運動方式

  • linear 勻速
  • ease 開始和結束慢速
  • ease-in 開始是慢速
  • ease-out 結束時慢速
  • ease-in-out 開始和結束時慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 設定動畫的延遲

5、transition: property duration timing-function delay 同時設定四個屬性

CSS3 transform變換

1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設定三維移動
8、rotateX、rotateY、rotateZ 設定三維旋轉
9、scaleX、scaleY、scaleZ 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見

HTML5新結構標籤

    h5新增的主要語義化標籤如下：

1、header 頁面頭部、頁首
2、nav 頁面導航
3、article 一篇文章
4、section 文章中的章節
5、aside 側邊欄
6、footer 頁面底部、頁尾

PC端相容h5的新標籤的方法，在頁面中引入以下js檔案:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表單控制元件

新增型別：網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜尋

<label>網址:</label><input type="url" name="" required><br><br> 
<label>郵箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>時間:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br> 
<label>電話:</label><input type="tel" name=""><br><br> 
<label>顏色:</label><input type="color" name=""><br><br> 
<label>搜尋:</label><input type="search" name=""><br><br>

新增常用表單控制元件屬性：
1、placeholder 設定文字框預設提示文字
2、autofocus 自動獲得焦點

3、autocomplete 聯想關鍵詞

HTML5 音訊和視訊

html5增加了audio和video標籤，提供了在頁面上插入音訊和視訊的標準方法。

audio標籤 

支援格式：ogg、wav、mp3

對應屬性：
1、autoplay 自動播放
2、controls 顯示播放器
3、loop 迴圈播放
4、preload 預載入
5、muted 靜音

舉例：

<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用如下方式：  -->

<audio  autoplay controls loop preload>
    <source src="source/audio.mp3" type="">
    <source src="source/audio02.wav" type="">
</audio>

source標籤的作用是提供多個媒體檔案地址，如果一個地址的檔案不相容，就使用下一個地址。

video標籤 
支援格式：ogg、mp4、webM

屬性：
1、width
2、height
3、Poster

可選第三方播放器：
1、cyberplayer
2、tencentPlayer

3、youkuplayer

移動端頁面佈局

移動端app分類

1、Native App 原生app手機應用程式
使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-C

2、Hybrid App 混合型app手機應用程式
混合使用原生的程式和html5頁面開發的手機應用

3、Web App 基於Web的app手機應用程式
完全使用html5頁面加前端js框架開發的手機應用

Viewport 視口

視口是移動裝置上用來顯示網頁的區域，一般會比移動裝置可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小。這樣會讓網頁不容易觀看，可以用 meta 標籤，name=“viewport ” 來設定視口的大小，將視口的大小設定為和移動裝置可視區一樣的大小。

背景圖強制改變大小，可以使用background新屬性

background新屬性 
background-size:

  • length：用長度值指定背景影像大小。不允許負值。
  • percentage：用百分比指定背景影像大小。不允許負值。
  • auto：背景影像的真實大小。
  • cover：將背景影像等比縮放到完全覆蓋容器，背景影像有可能超出容器。
  • contain：將背景影像等比縮放到寬度或高度與容器的寬度或高度相等，背景影像始終被包含在容器內。

PC及移動端頁面適配方法

裝置螢幕有多種不同的解析度，頁面適配方案有如下幾種：

1、全適配：流體佈局+響應式佈局
2、移動端適配：

  • 流體佈局+少量響應式
  • 基於rem的佈局
  • 彈性盒模型

流體佈局

流體佈局，就是使用百分比來設定元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線無法用百分比，可以使用樣式中的計算函式 calc() 來設定寬度，或者使用 box-sizing 屬性將盒子設定為從邊線計算盒子尺寸。

calc() 
可以通過計算的方式給元素加尺寸，比如： width：calc(25% – 4px);

box-sizing 
1、content-box 預設的盒子尺寸計算方式
2、border-box 置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內

響應式佈局

響應式佈局就是使用媒體查詢的方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面可以適配多種終端螢幕（pc、平板、手機）。


相關文章