Python開發【前端篇】HTML5+CSS3

来源:https://www.cnblogs.com/tangkaishou/archive/2018/08/22/9520919.html
-Advertisement-
Play Games

CSS權重 CSS權重指的是樣式的優先順序，有兩條或多條樣式作用於一個元素，權重高的那條樣式對元素起作用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。 權重的等級 可以把樣式的應用方式分為幾個等級，按照等級來計算權重 1、!important，加在樣式屬性值後，權重值為 100002、內聯樣式，如：st ...


CSS權重

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

權重的等級

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

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

權重的計算實例

1、實例一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">這是一個div元素</div>
<!-- 
兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下麵的行間樣式的權重值為1000，
所以文字的最終顏色為red 
-->

2、實例二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>這是一個h2標題</h2>
    </div>
</div>
<!-- 
第一條樣式的權重計算： 100+1+10+1，結果為112；
第二條樣式的權重計算： 100+10+1，結果為111；
h2標題的最終顏色為red
-->

CSS3新增選擇器

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

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2個子元素div匹配 -->

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) 不包含某元素

<style type="text/css">            
    .list div:not(:nth-child(2)){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第 3、4、5 子元素div匹配 -->

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

<style type="text/css">
    h2:target{
        color:red;
    }
</style>
......
<a href="#tit01">標題一</a>
......
<h2 id="tit01">標題一</h2>

<!-- 點擊鏈接，h2標題變紅 -->

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

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

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">這是一個div元素</div>

<!-- 點擊鏈接，h2標題變紅 -->

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;
分別設置陰影：水平偏移 垂直偏移 羽化大小 擴展大小 顏色 是否內陰影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>

<!-- 給盒子加上了粉紅色的陰影 -->

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)

4、transition-delay 設置動畫的延遲
5、transition: property duration timing-function delay 同時設置四個屬性

舉例：

<style type="text/css">        
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>

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文件:

<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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android Dialog對話框
    Dialog的基本方法 系統樣式 1.下拉列表 2.單選框列表 3.多選框列表 4.等待對話框 5.進度條對話框 自定義Dialog 1.繼承Dialog 2.自定義Style 3.自定義佈局 4.ipad隱藏底部虛擬按鍵 5.使用自定義Dialog ...
  • 安卓開發實用技巧:TextView預覽
    背景： 使用TextView時，為了方便在開發工具中預覽效果，需要在TextView中設置文字（如：android:text="Hello World"），但是等到後面提交時，為了避免顯示這樣預設的信息，通常需要把這個刪除掉。但是刪除後，後續就無法預覽TextView了，為開髮帶來不便。 目標： 既 ...
  • Silence - 專註於閱讀的博客園主題
    最近花了點心思整理了下我的博客園主題代碼，今天正式和大家分享一下，感興趣的園友可以瞭解一下。 主題介紹 Silence 追求大道至簡的終極真理，旨在打造一個乾凈、專註閱讀的博客主題，沒有二維空間元素、不存在花里胡哨。 簡單概括其幾個主要特點： 專註閱讀、精緻漂亮的 UI； 事無巨細的部署文檔； 相容 ...
  • Content Security Policy (CSP) 介紹
    我們都知道瀏覽器有同源策略（same-origin policy）的安全限制，即每個站點只允許載入來自和自身同域（origin）的數據，https://a.com 是無法從 https://b.com 載入到資源的。每個站點被嚴格限制在了自已的孤島上，自己就是一個沙盒，這樣很安全，整個網路不會雜亂無... ...
  • ES6 函數
    一、函數參數 1.可以使用預設參數 2.用let或const再次聲明參數會報錯，var不會。 3.使用參數預設值時，函數不能有同名參數。 4.參數預設值不是傳值的，而是每次都重新計算預設值表達式的值。也就是說，參數預設值是惰性求值的。 5.通常情況下，定義了預設值的參數，應該是函數的尾參數。 6.指 ...
  • 筆記
    如何編碼解碼 編碼：var code=encodeURI("原文"); 解碼：var 原問=decodeURI("code"); 用encodeURIComponent代替encodeURI 用decodeURIComponent代替decodeURI eval 專門執行字元串格式的表達式 var ...
  • js--相容寫法
    滾動條距離（某些瀏覽器下麵做相容）document.documentElement.scrollTop || document.body.scrollTop 事件監聽實現相容：if(elem.addEventListener){ elem.addEventListener("click",fn) } ...
  • js--基礎演算法
    遞歸:遞歸函數是在一個函數通過名字調用自身情況下構成的 /*function jiecheng(n){//n=5 if(n==1){//基點 return 1; }else{ return n*jiecheng(n-1); } }*/ //alert(jiecheng(100));//9.33262 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類