CSS3和HTML5新增特性及使用(保留方便檢視)
CSS3
1.邊框圖片 border-image: url(test.png) 10/10px; outline:10px solid #ff0;outline-offset:15px;邊框的邊框，兩邊框之間距離
2.三角形 span{display:inline-block;border:50px solid transparent;border-top-color:red;border-left-color:red;}
3.背景大小 background-size:50%/100px 200px/cover/contain;//原圖50%/寬為100px 200px/覆蓋/容納
4.陰影 box-shadow:red 0px 0px 10px 0px inset/outside;陰影顏色 X偏移 Y偏移 陰影模糊半徑 擴充套件半徑
內部/外部顯示 陰影累加box-shadow:red 0px 0px 10px 0px inset,green 0px 0px 10px 0px outside;
文字陰影： text-shadow:red 0px 0px 10px; 陰影顏色，X偏移，Y偏移，模糊半徑
5.圓角 邊框圓角border-radius:5px/10%; border-radius:50%：圓
border-radius:150px 150px 0px 0px;/ border-radius:20px 100px 0px;/border-radius:20px 100px;
border-top-left-radius:150px;/border-top-left-radius:130px 40px;
6.HSLA background:hsla(0,100%,100%,0.5); 色調,飽和度,亮度,透明度//(0,0%,100%)白;(0,0%,0%)黑
7.RGB backgrund:rgb(255,0,0) 三個值的範圍為0~255
(255,0,0)紅；(0,255,0)綠，(0,0,255)藍； (255,255,0)黃；(0,0,0)黑，(255,255,255)白
8.漸變 ①線性漸變：background: linear-gradient(#fff, #333); //由#fff漸變為#333
background: linear-gradient(#000, #f00 50%, #090); //由#00漸變為#f00,並佔50%,最後為#090，
background:linear-gradient(0deg,yellow 50px,blue 51px,blue 100px,#F89 101px,#F89 200px);
從下到上黃色高度0-50px，藍色高度50-100px，#f89高度101-200px
background:linear-gradient(0deg,yellow 50px,blue 100px,#F89 200px);從下到上漸變
重複線性漸變：background:repeating-linear-gradient(45deg,#FFF,#FFF 45px,#ccc 46px)；
②徑向漸變：background:radial-gradient(100px 100px,yellow,blue); 從內到外由yellow變為blue，
background:radial-gradient(100px 500px at 50px 10px,yellow,blue);
內部寬100px;高50px的黃色圓在距上面50px左邊10px漸變為藍色
重複徑向漸變：background:repeating-radial-gradient(yellow,yellow 20px,blue 21px,blue 40px);
9.White-space處理文字空白：pre保留html中的格式nowrap強制不折行，直到遇到br標籤+overflow：
hidde超出部分隱藏+text-overflow:ellipsis;以省略號的形式顯示， (overflow:auto;帶滾動條的隱藏)
div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} div:hover{white-space: normal;}文字顯示一行，劃過全部顯示
10.連結字型 @font-face { font-family : name ; src : url( url ) ; }
url('../font/lie_to_me_-_ttf-webfont.otf') format('otf'), url('../font/lie_to_me_-_ttf-webfont.ttf') format('ttf'),
url('../font/lie_to_me_-_ttf-webfont.woff2') format('woff2'), url('../font/lie_to_me_-_ttf-webfont.woff') format('woff');
11.文字域的自由縮放resize:both;overflow:auto/horizontal/vertical; 整體/高/寬縮放
12.建立伸縮容器 display:flex;伸縮流方向;預設水平/row;豎直;column; 伸縮性：flex:2;容器按比例分配額外空間。
13.縮放 transform-origin:10% 20px;transform:scale(1.5,0.5);以X軸10%，Y軸的20px為中心點
縮放為原來的寬1.5倍，高0.5倍；//只有一個數值時寬高縮放一致。
14.旋轉 div{transition:2s;} div:hover{transform:rotateY(180deg);} 滑過div時2秒旋轉180度
15.變形 transform:skew(-30deg,10deg) 內容逆時針傾斜30%；整體順時針旋轉10度；
16.位移 transform:translate(20px,40px);向水平方向位移20px;向豎直方向位移40px;
例：p:hover{ transform:translate(1000px) rotate(360deg);}
模組移動(文字、圖片): 兩次移動
font:normal 40px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409; -moz-animation: 3s slidein; -webkit-animation: 3s slidein; -webkit-perspective: 100; -moz-perspective: 300px; }
@-moz-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;} }
@-webkit-keyframes slidein { from {top:-100px;} 85% {top:80%;} to {top:70%;} }
17.過渡 p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }
p{transition:transform 2s ease-in 0.5s,background 1s ease-out,color 5s ease-in-out,height 1s lincar;}
p:hover{ transform: translate(1000px); background:blue;color:#000;height:500px; }
2s內加速位移1000px且延遲0.5s開始；1s內背景減速變藍，
5s內字型顏色先加速再減速變白，1s內高度恆速變為500px
18.動畫 p:hover{animation-play-state:paused;}
p{animation:a1 5s ease-in;animation-iteration-count:3;animation-direction:alternate;animation-fill-mode:forwards;}
@keyframes a1{ 0%{ transform:translate(0p,0px);} 30%{transform:translate(500px,0px);}
50%{transform:translate(1000px,300px);} 70%{transform:translate(300px,500px);}
100%{transform:translate(1300px,800px)} }
19.滑鼠指標變化：變成抓手cursor:pointer; cursor:move;
HTML5
1.插入音訊: 支援格式：Oggvorbis、MP3和WAV
<audio src=”a.mp3” > 屬性:controls包含基本的播放控制元件(開始、結束、音量、位置)
preload=”auto/metadate/none” 音訊檔案的下載方式：整個檔案/音訊時長和開頭/不預先下載
Loop/autoplay 無限次播放/自動播放 例：<audio src=”a.mp3” controls preload=”metadate” autoplay >
<source src="soundfile.ogg" type="audio/ogg">調整相容
2.插入視訊： 支援格式：OGG、MP4、WEBM
<video src=”b.mp4” poster=”1.jpg”>當視訊檔案失效時,用poster圖片代替原圖片顯示,其它屬性與audio相同
<video controls> <source src="butterfly.mp4" type="video/mp4" >
<source src="butterfly.ogv" type="video/ogg">
<p>兩種格式都不支援的瀏覽器看到的是這行文字</p>
<object type="application/x-shockwave-flash" data="flowplayer-3.2.16.swf" width="500" height="375">
<param name="movie" value="flowplayer-3.2.16.swf"> <param name="flashvars" value='config={"clip":"butterfly.mp4"}' />
<p>如果html5標籤和flash格式都不識別，請點選下載
<a href="butterfly.mp4">butterfly.mp4</a>或者<a href="butterfly.ogv">butterfly.ogv</a> </p>
</object>
</video>
<hr>
<!--flash為主html5為輔，不識別點選下載a-->
<object type="application/x-shockwave-flash" data="flowplayer-3.2.16.swf" width="500" height="375">
<param name="movie" value="flowplayer-3.2.16.swf">
<param name="flashvars" value='config={"clip":"butterfly.mp4"}' />
<video controls>
<source src="butterfly.mp4" type="video/mp4">
<source src="butterfly.ogv" type="video/ogg">
<p>如果html5標籤和flash格式都不識別，請點選下載
<a href="butterfly.mp4">butterfly.mp4</a>或者<a href="butterfly.ogv">butterfly.ogv</a> </p>
</video>
</object>
3.<object>元素定義了在 HTML 文件中嵌入的物件，例如在網頁中嵌入 Java 小程式, PDF 閱讀器, Flash 播放器) 。
<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="snippet.html"></object>
4.新增html5佈局標籤
·<article> 標籤定義外部的內容。
外部內容可以是來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文字，或者是來自論壇的文字。亦或是來自其他外部源內容
·<aside> 頁面或站點主題之外的內容,可用在文章的側欄
·<blockquote> 標籤定義摘自另一個源的塊引用。
·<center> 標籤對其包圍的文字進行水平居中處理。
·<figure> 獨立於文字流之外的一段內容，如圖片和圖示等
·<figcaption> figure中的標題
·<header>文件的頁首
·<footer>文件的頁尾
·<nav>導航
·<section>文章的章節
·<detials>包含下拉隱藏效果的內容
·<summary>巢狀在detials中的概要或標題
·<mark>被突出標記的內容
·<meter>計量器 ·<adress>地址標記
·<program>進度指示
4.新增表單標籤
<input type=”search”> 搜尋框
<input type=”search”> 搜尋框
<input type=”email”> 郵箱輸入
<input type=”range”> 顯示進度條
<input type=”tel”> 電話號碼輸入
<input type=”number”> 數字輸入
<input type=”URL”> 網址輸入
<input type=”date”> 日期型別(帶時間控制元件)
<input type=”datetime”> 日期型別(不帶時間控制元件)
<input type=”week”> 選擇星期(帶時間控制元件)
<input type=”month”> 選擇年月(帶時間控制元件)
<input type=”datetime-local”>年、月、日、時、分(帶時間控制元件)
4.網頁title滾動
<script type="text/javascript">
function scroll() {
var titleInfo = document.title;
var firstInfo = titleInfo.charAt(0);
var lastInfo = titleInfo.substring(1, titleInfo.length);
document.title = lastInfo + firstInfo;
}
setInterval("scroll()", 500);
</script>
5.獲取地理位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥學堂</title>
</head>
<body>
<p id="demo">點選按鈕獲取您當前座標（可能需要比較長的時間獲取）：</p>
<button onclick="getLocation()">點我</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="該瀏覽器不支援獲取地理位置。";
}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="使用者拒絕對獲取地理位置的請求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置資訊是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="請求使用者地理位置超時。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯誤。"
break;
}
}
</script>
</body>
</html>
附一：.響應式佈局
Pc： 1902px 1600px 1366px 1280px
平板 1024px 992px 768px ipad豎屏768X1024
手機 767px 480px 414px 414X395 375X365
外部樣式：
<link rel="stylesheet" href="css/1.css" media="screen"> //user-scalable=no"頁面不進行縮放
<link rel="stylesheet" href="css/2.css" media="screen and (max-width:480px)">
//手機頁面自適應
<meta name="viewport" content="width:device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
<!-- 以下方式只是重新整理不跳轉到其他頁面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定時轉到其他頁面 -->
<meta http-equiv="refresh" content="5;url=hello.html">
javascript的實現
<script language="javascript" type="text/javascript">
// 以下方式直接跳轉window.location.href='hello.html';
// 以下方式定時跳轉setTimeout("javascript:location.href='hello.html'", 5000);
</script>
匯入樣式
<style> @import url('css/base.css') screen; @import url('css/1024.css') screen and (max-width:1024px);
@import url('css/767.css') screen and (max-width:767px);
</style>
附二：.聖盃佈局
<header>header頭部</header>
<nav>nav導航</nav>
<div>
<aside>aside側欄</aside>
<article>article文章</article>
</div>
<footer>footer</footer>
附三：大型門戶站基礎css樣式命名和應用原則
1.CSS命名規範。
全域性樣式 base.css 公共塊的樣式; 首頁樣式 index.css
內容頁面的樣式 content.css 頻道頁面樣式 channel.css 詳細頁面樣式 detail.css
2.頁面框架結構保留字。
頁面容器：＃wrapper
頁面頭部：#header #head
頁面中心內容：#maincontent
頁面底部：#footer #foot
橫向方位容器1：main，side
橫向方位容器2：leftframe，midframe，rightframe
橫向分段容器：section，field，column
盒子內容屬性：contentbg
盒子上方屬性：topbg
盒子下方屬性：bottombg
盒子左邊屬性：leftbg
盒子右邊屬性：rightbg
3.導航保留字。
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
選單：menu
快速選單：quickmenu
子選單：submenu
下拉選單：dropmenu
4.功能保留字。
列表：list
標題：title
摘要：intro
內容：text
按扭：btn
搜尋：search
登陸：login
註冊：regsiter
提示資訊：msg
小技巧：tips
圖示: icon
滾動：scroll
附四
(1).一段時間後頁面自動跳轉：
在head中<meta http-equiv=”refresh” content=”5;url=網頁地址(可設定重新整理效果)”
(2).網頁關鍵詞與介紹：
<meta name="keyword" content="廚房 廚具 衛具 廚房家電 ">
<meta name="description" content="廚房家電系列">
---------------------
作者：周瑜大人
來源：CSDN
原文：https://blog.csdn.net/qq_38266792/article/details/80525061
版權宣告：本文為博主原創文章，轉載請附上博文連結！