Python開發【前端篇】HTML5+CSS3

番茄西紅柿發布于2019-04-23 13:27 / 3360人閱讀

摘要：權重權重權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用權重相同的，后寫的樣式會覆蓋前面寫的樣式。標簽支持格式屬性可選第三方播放器

CSS權重

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

權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

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

權重的計算實例

1、實例一：


......
這是一個div元素

2、實例二：


......

    
        這是一個h2標題

CSS3新增選擇器

1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個子元素

2、E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數第n個子元素（與上一項順序相反）
3、E:first-child：匹配元素類型為E且是父元素的第一個子元素
4、E:last-child：匹配元素類型為E且是父元素的最后一個子元素
5、E:only-child：匹配元素類型為E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n個類型為E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒數第n個類型為E的子元素（與上一項順序相反）
8、E:first-of-type：匹配父元素的第一個類型為E的子元素
9、E:last-of-type：匹配父元素的最后一個類型為E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 選擇一個空的元素
12、E:enabled 可用的表單控件
13、E:disabled 失效的表單控件
14、E:checked 選中的checkbox
15、E:not(s) 不包含某元素

16、E:target 對應錨點的樣式


......
標題一
......
標題一

17、E > F E元素下面第一層子集
18、E ~ F E元素后面的兄弟元素
19、E + F 緊挨著的兄弟元素

屬性選擇器：
1、E[data-attr] 含有data-attr屬性的元素


......
這是一個div元素

2、E[data-attr=ok] 含有data-attr屬性的元素且它的值為“ok”
3、E[data-attr^=ok] 含有data-attr屬性的元素且它的值的開頭含有“ok”
4、E[data-attr$=ok] 含有data-attr屬性的元素且它的值的結尾含有“ok”
5、E[data-attr*=ok] 含有data-attr屬性的元素且它的值中含有“ok”

CSS3圓角、陰影、rgba

CSS3圓角

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

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

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

CSS3陰影

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


......

rgba（新的顏色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、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)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲線設置網站：https://matthewlein.com/ceaser/

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 設置盒子背面是否可見

舉例：（翻面效果）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    style>
head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg">div>
        <div class="back_info">背面文字說明div>
    div>
body>
html>

View Code

CSS3 animation動畫

1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數

5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction

normal 默認動畫結束不返回
Alternate 動畫結束后返回

8、animation-play-state 動畫狀態

paused 停止
running 運動

9、animation-fill-mode 動畫前后的狀態

none 不改變默認行為
forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
both 向前和向后填充模式都被應用

10、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性

舉例：（人物走路動畫）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路動畫title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    style>
head>
<body>
    <div class="box"><img src="images/walking.png">div>
body>
html>

View Code

動畫中使用的圖片如下：

CSS瀏覽器前綴

瀏覽器樣式前綴

為了讓CSS3樣式兼容，需要將某些樣式加上瀏覽器前綴：

-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如：

div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

自動添加瀏覽器前綴

目前的狀況是，有些CSS3屬性需要加前綴，有些不需要加，有些只需要加一部分，這些加前綴的工作可以交給插件來完成，比如安裝： autoprefixer

Sublime text 中安裝 autoprefixer 執行 preferences/key Bindings-Users 設置快捷鍵 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通過此工具可以按照最新的前綴使用情況給樣式自動加前綴。

HTML5新結構標簽

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

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

頁面使用標簽布局示意圖：

PC端兼容h5的新標簽的方法，在頁面中引入以下js文件:

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<audio autoplay controls loop preload>
    <source src="myMusic.mp3" type="">
audio>
<video src="mov.mp4" controls preload="auto" width="400" height="300">
video>
body>
html>

GPU云服務器云服務器 html5前端開發css3 html5前端css3 html5前端開發師學html5前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1897.html

個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

shadajin 2019-08-19 11:45 評論0 收藏0

發表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

閱讀 713·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3784·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

閱讀 3852·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

閱讀 3869·2021-11-29 11:00
301重定向怎么做?301重定向設置方法有幾種

閱讀 3558·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

閱讀 6105·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！