html5&css3

虞姬要死發表於2020-11-04

HTML5

語義化標籤

ie9需要將display改為block

<header>頭部</header>
<nav>導航</nav>
<aside>側邊欄</aside>
<section>塊級標籤</section>
<article>
<section>內容標籤下的塊級標籤</section>
</article>
<footer>底部</footer>

input標籤

autocomplete預設為on最好關閉

<form action="" method="POST">
    郵箱:<input type = "email" required="required" />
    url: <input type = "url" placeholder="123" />
    日期:<input type = "date" />
    時間:<input type = "time" />
    數字:<input type = "number" />
    電話:<input type="tel" required />
    搜尋:<input type = "search" autofocus="autofocus"  autocomplete="off" />
    顏色:<input type = "color" />
    檔案:<input type = "file" multiple="multiple" />
    	 <input type="submit" value="提交">
</form>

video標籤

src屬性:新增播放檔案

autoplay屬性:video標籤預設不會播放,需要新增一個auto play才可以自動播放

controls屬性:顯示控制條

poster屬性:播放前的佔點陣圖片

loop屬性:迴圈播放,一般廣告視訊使用

preload屬性:預載入視訊,於autoplay相沖

muted屬性:靜音

width/height:同img

viedo標籤2

意義:解決瀏覽器之間不相容的問題

格式:webm/mp4/ogg

<video>
    <source src="" type="cideo/webm"></source>
	<source src="" type="cideo/MP4"></source>
	<source src="" type="cideo/ogg"></source>
</video>

audio標籤

src屬性:新增播放檔案

autoplay屬性:video標籤預設不會播放,需要新增一個auto play才可以自動播放

controls屬性:顯示控制條

loop屬性:迴圈播放,一般廣告視訊使用

preload屬性:預載入視訊,於autoplay相沖

muted屬性:靜音

詳情和概要

概要資訊 詳細資訊

跑馬燈

direction屬性:滾動方向

scrollamount屬性:滾動速度

loop屬性:設定滾動次數,預設為- 1,迴圈滾動

behavior:設定滾動型別:1、slide邊界停止2、alternate邊界回彈

內容

CSS3

偽類選擇器

link:從未被訪問過的

visited:已經被訪問過的

hover:移入移除

active:長按狀態下樣式

注:順序不能變

過渡

過渡三要素

hover:過渡狀態的變化

transition-property:過渡的屬性值

transition-duration:過渡的持續時長

過渡屬性補充

transition-delay:過渡延遲時長
transition-timing-function:
- ease(逐漸慢下來)預設
- ease-in(加速)
- ease-out(減速)
- ease-in-out(先加後減)
- linear(勻速 )
- 當多個屬性要執行過渡時,用“,”隔開即可
transition-property: width , background-color;
transition-duration: 5s,5s;
transition-delay: 2s;
transition-timing-fubction:ease-in-out

簡寫方式

transition:property duration timing-function delay;

例:transition:width 5s linear 2s;

多個屬性簡寫方式:transition:width 5s linear 2s,background 5s;

所有屬性簡寫方式:transition:all 5s

過渡使用步驟

1、基本介面佈局

2、修改屬性樣式

3、新增元素過渡效果

2D轉換

transform:rotate(45deg);|旋轉(順時針方向)|預設是圍繞z軸旋轉
transform:rotateX|rotateY(45deg)垂直翻轉|水平翻轉45°
transform:translate(100px,0px);平移(x,y)	
transform:translate(50%,50%)向左向上移動自身位置,一般設負數用於水平居中
transform:scale(1.5,1.5);|縮放(水平,垂直)預設為1

簡寫

transform:rotate(45deg) scale(1,1.5) translate(100px,0px);
注:旋轉平移不是水平平移,而是根據旋轉的方向進行水平平移|多個屬性用” 空格 “隔開
transform-origin:200px 0px;|旋轉定點標,預設為50%,50%;

透視(近大遠小)

perspective:500px(透視距離)
注: 1、有了透視才能看得到水平垂直翻轉的效果
	2、透視需要新增元素到祖先元素上
	

3D轉換

區別:預設的2D轉換隻有寬度和高度,沒有厚度效果

開啟方式:transform-style:preserve-3D;

注:當你旋轉90deg後,z面會朝上。transform:translateZ(100px)

陰影

盒子陰影

box-shadow: 1px 3px 5px rgba(0, 0, 0, .2);

box-shadow:水平偏移 垂直偏移 模糊度 陰影擴張 陰影顏色 引用方向
陰影顏色預設與內容一致
應用方向預設向外

文字陰影

text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色
text-shadow:2px 2px 2px ;

動畫

過渡與動畫區別:動畫需要人為觸發才會執行動畫,而動畫不需要

三要素:

animation-name:move;	設定動畫名稱

animation-duration:5s	設定動畫持續時長
	
@keyframes  move{		設定動畫效果
	from:{
        margin-left:0;
    }
	to:{
     	margin-left:500px;   
    }
}

其他屬性

animation-delay:3s;延長几秒(每次距離下一次動畫執行的時間)
animation-timing-function:linear;執行速度
animation-iteration-count:3|infinite;重複次數:3次|無限次
animation-direction:normal|alternate;正常|往返動畫
animation-play-state:running|paused;控制動畫狀態:執行|暫停
animation-fill-mode:none|forwards|backwards|both;指定動畫等待和結束狀態的樣式:預設|等待保持第一幀|結束保持最後一幀|both

簡寫

animation:動畫名稱 持續時長 運動速度 延遲時間 執行次數 往返動畫
:animation:sport 2s linear 2s 5 alternate;
@keyframes sport{
    to{
       margin-left:0px; 
    }
    from{
        margin-left:100px;
    }
}
簡寫 animation:sport 2s;

漸變

線性漸變可以通過(to/deg)來修改方向
徑向漸變可以通過(at 位置 位置)修改漸變的位置

線性漸變

background:linert-gradient(red,green);預設從上至下漸變
background:linert-gradient(to top right,red,green);向右上漸變
background:linert-gradient(45deg,red,green);順時針方向
background:linert-gradient(to right,red 100px,green 200px,blue 300px);
注: 1、最少需要兩個顏色.
	2、也可以手動指定格式:顏色 範圍。除了第一個是純色範圍,後邊的都是漸變色範圍

徑向漸變

background:radial-gradient(red,green);
background:radial-gradient(100px at 200px 100px,red,green);第一個引數指定漸變範圍,漸變位置,第二個引數與線性漸變相同

計算

calc:可以用來動態計算長度值

calc(100% - 58px)

背景

尺寸屬性

backround-size:100px 100px;(寬,高)

backround-size:100% 100%;設定背景寬高佔元素寬高的百分比

backround-size:100px  auto;(寬度100px;高度等比拉伸)

backround-size:cover;寬度高度都拉伸到100%;

backround-size:contain;寬度高度一個拉伸到100%;

圖片定位

background-origin:padding-box(預設的,圖片預設定位在padding上)

background-origin:border-box(從border上開始定位)

background-origin:content-box(在內容區域開始定位)

繪製

background-clip:border-box(預設,從border上開始繪製)
background-clip:padding-box(在padding區域開始繪製)
background-clip:content-box(在內容區域開始繪製)
-webkit-background-clip:text(私有屬性:背景顏色僅繪製文字)

多重背景

background:url(./img1.jpg),url(./img2.jpg);
background-position:left top ,right top;

建議多張背景圖的時 候背景樣式分開寫

注:先新增的背景圖片顯示在圖片上邊

邊框

邊框圓角:繪製圓角根據指定值找到圓心,根據指定值繪製圓弧

可以單獨設定值,格式為:border-top-left-radios: 200px 100px;

邊框圖片

border-imager-source:url("./img/111.jpg")
border-image-slice:70 70 70 70 指定圖片進行切割
border-image-repeat:round|repeat|stretch;設定除四個角以外圖片的填充方式:環繞|平鋪|拉伸
border-imager-outset:10px 30px 10px 30px ;指定邊框向外移動 

連寫方式

border-image :url ("./img/111.jpg") 70 round

圖片垂直對齊

vertical-align:設定元素垂直對齊方式
vertical-align:baseline;預設:與基線(一行文字中最短文字的底部)對齊
vertical-align:top/bottom;與盒子頂部/底部對齊
vertical-align:text-top/text-bottom;與文字頂部/底部對齊
vertical-align:middle;與中線對齊
注:與text-alight設定給父元素不同,vertical-alight設定給子元素,只對行內元素起效
background:radial-gradient(red,green);
background:radial-gradient(100px at 200px 100px,red,green);第一個引數指定漸變範圍,漸變位置,第二個引數與線性漸變相同