html5學習筆記——三、圖文展示網頁設計

常用圖像標籤

< img>標籤

< img>標籤用於定義網頁中的圖像，語法格式如下：

<img src="圖片路徑" alt="圖片無法顯示時顯示的文字"/>

< figure >標籤和< figcaption>標籤

當需要在網頁中添加一個插圖時，就可以使用 < figure> 標籤來實現
css用於背景設置的常用屬性如下圖所示：

css背景設置的複合寫法

css陰影和漸變

盒陰影

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	盒子box-shadow</title>
	<style type="text/css">
		.box-shadow	{
			width: 200px;
			height: 200px;
			box-shadow: #41a8ff 3px 5px 5px;
			line-height: 200px;
			margin: 200px auto;
			color: blue;
			text-align: center;
			background-color: #11aa99;
		}
	</style>
</head>
<body>
	<div class="box-shadow">box-shadow</div>
</body>
</html>

效果：

css3漸變：

線性漸變：

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	漸變</title>
	<style type="text/css">
		.p{
			background-image: linear-gradient(to bottom,#4b6db6 20%, #b2d3ff 80%);
			height: 200px;
			font-family: '微軟雅黑';
			font-size: 30px;
			font-weight: bolder;
			color: #fff;
			padding-top: 40px;
			line-height: 30px;
			text-align: center;
			bottom: 200px;
		}
	</style>
</head>
<body>
	<div class="p">漸變 </div>
</body>
</html>

效果如下：

徑向漸變：

注：圓心座標：可設置爲形如10px ,20px de x-offset y-offset,或使用預設值center（默認值）
漸變形狀：circle:圓形、ellipse:橢圓形，默認值
漸變大小：
- closest-side或contain :以距離圓心最近的邊的距離作爲漸變半徑。
- closest- corner:以距離圓心最近的角的距離作爲漸變半徑。
- farthest- side:以距離圓心最遠的邊的距離作爲漸變半徑。
- farthest-corner或cove:以距離圓心最遠的角的距離作爲漸變半徑。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	徑向漸變</title>
	<style type="text/css">
div {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  background-image: radial-gradient(circle,red,orange,green);
}

	</style>
</head>
<body>
	<div>漸變 </div>
</body>
</html>

重複漸變：

重複漸變只需在兩個屬性錢添加repeating-“”

border-radius屬性

– css 的- CSS3的圓角邊框實際上是在矩形的四個角分別做內切圓,然後通過設置內切圓的半徑來控制圓角的弧度。

一CSS3的圓角邊框使用border-radius 屬性來實現,基本語法如下所示:

border-radius: 1-4 length| % /1-4 length | %;

length用於設置對象的圓角半徑長度，不可爲負值。如果“/”前後的值都存在，那麼“/”前面的值設置其水平半徑，“/” 後面值設置其垂直半徑。如果沒有“/”，則表示水平和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、 bottom-left的順序來設置。如果省略bottom-left,則與top-right 相同，如果省略bottom-right,則與top-left 相同，如果省略top-right，則與top-left 相同。

border-radius是- -種縮寫的方式,其實border-radius和border屬性一樣,還可以把各個角單獨拆分出來,也就是以下四種寫法:

border-top-left-radius: <length> <length> //左 上角
border-top- right-radius: <length> <length> //右上角
border-bottom-right-radius:<length> <length> //右下角
border-bottom-left-radius:<length> <length> //左 下角

他們的參數都是先y軸然後x軸

css transitions

一CSS3的過渡就是平滑的改變一個元素的CSS值 ,使元素從一一個樣式逐漸過渡到另一個樣式。

CSS3過渡使用transition屬性來定義, transition屬性的基本語法如下所示:

property: 應用過渡的css屬性的名稱

none：沒有屬性會獲得的過渡效果

all：默認值，所有屬性都將獲得的效果

property：定義應用過渡效果的css屬性名稱列表

duration： 過渡效果花費的時間

time：以秒或毫秒計，默認爲0，意味着沒有效果

timing-function: 過渡效果的時間曲線

linear:規定以相同速度開始至結束的過渡效果(等於cubic-bezier(0,0,1,1))。

ease:默認值，規定慢速開始，然後交快，然後慢速結束的過渡效果(cubic-bezier(0.25,0.1.0.25.1))。

ease-in:規定以慢速開始的過渡效果(等於cubic-bezier(0.42,0,1,1))。

ease-out:規定以慢速開始和結束的過渡效果(等於cubic-bezier(0,0,0.58,1)) 。

ease-in-out：規定以慢速開始和結束的過渡效果（等於cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier（n,n,n,n）:在cubic-bezier函數中定義自己的值。可能的值是0至1之間的微值。

delay: 效果開始之前需要等待的時間

time值：以秒或毫秒計，默認是0.

css transform

●CSS3動畫相關的第二個屬性就是transform ,翻譯成中文的含義是“改變,使…變形;轉換”, 用於向元素應用2D或3D轉換。

–transform屬性的基本語法如下圖所示：

1.默認值爲none,適用於內聯元素和塊級元素，表示不進行變形。
2. transform-function用於設置變形函數，可以是一個或多個變形函數列表

2D轉換

transform-functions的常用於2D轉換的函數說明如下表所示。

元素變形原點

元素的變形都有一一個原點,元素圍繞着這個點進行變形或者旋轉,默認的起始位置元素的中心位置。

一CSS 變彩使用transform-origin屬性指定元素變形基於的原點,語法格式具體如下:

注意: transform-origin的三個參數均爲可選參數，參數值爲0px時可以省略不寫。

3D轉換

3D變形是指某個元素圍繞其x軸、y軸、z軸進行旋轉, transform-functions的常用於3D轉換的函數說明如下表所示。

一perspective屬性的透視效果就是用於實現視覺上的3D效果的

css animations

一個完整的CSS animations由兩部分構成:

@keyframes規則
-在CSS3中使用@keyframes規則來創建動畫, keyframes可以設置多個關鍵幀,每個關鍵幀表示動畫過程中的一一個狀態,多個關鍵幀就可以使動畫十分絢麗。

@keyframes規則的語法格式如下所示:

animationname 表示當前動畫的名稱，它將作爲引用時的唯一標識，因此不能爲空。

keyframes- selector 是關鍵幀選擇器，即指定當前關鍵幀要應用到整個動畫過程中的位置值可以是一個百分比、from或者to。其中，from和0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。

css-styles 定義執行到當前關鍵幀時對應的動畫狀態。以上三個屬性都是必需品，缺一不可。

animation屬性

animation屬性用於描述動畫的CSS聲明,包括指定具體動畫以及動畫時長等行爲。
animation屬性的基本語法如下所示:

與transtion類似，animation也是一個複合屬性，一上參數分別對應8個子屬性

animation-iteration-count:

-默認值：爲1；
-infinite：規定動畫應該無限次數播放

animation-direction:

normal:默認值，動畫應該正常播放
alternate:動畫應該輪流反向播放

animation-play-state

paused :規定動畫已暫停
running：默認值，規定動畫正在播放

animation-play-state：

none:不改變默認行爲。
forwards:當動面完成後，保持最後- -個屬性值(在最後一個關鍵幀中定義) backovards:
在animatiom-delay所指定的一段時間內，在動面顯示之前，應用開始屬性值(在第關鍵幀中定義)
both:向前和向後填充模式都被應用。

css精靈技術

CSS Sprites被稱爲CSS精靈技術，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有小圖片都包含到一張大圖中去,這樣-來,當訪問該頁面時,只需要載入一次圖片。

一CSS精靈技術的使用具體如下:

爲了方便理解，我們做了個例子：
例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搖晃的桃子</title>
	<link rel="stylesheet" type="text/css" href="css/peach.css"/>
</head>
<body>
	<div class="act_wrapper">
		<div class="act_content">
			<div class="mod_style">
				<p>搖晃的桃子</p>
				<div class="span peach peach1 shake1"></div>
				<div class="span peach peach2 shake2"></div>
				<div class="span peach peach3 shake3"></div>
				<div class="span peach peach4 shake4"></div>
				<div class="span peach peach5 shake5"></div>
				<div class="span peach peach6 shake6"></div>
			</div>
		</div>
		<div class="act_bg"></div>
	</div>
</body>
</html>

分解設置不同桃子的屬性*，確定位置

/*分解設置不同桃子的屬性*/
.peach1{
	background-position: 0 0px;
	top: 100px;
	left: 72px;
}
.peach2{
	background-position: 0 -115px;
	top: 39px;
	left: 242px;
}
.peach3{
	background-position: 0 -215px;
	top: 71px;
	left: 452px;
}
.peach4{
	background-position: 0 -328px;
	top: 138px;
	left: 308px;
}
.peach5{
	background-position: 0 -435px ;
	top: 256px;
	left: 412px;
}
.peach6{
	background-position: 0 -545px ;
	top: 247px;
	left: 575px;
}

設置桃子的動畫

/*設置動畫*/
@keyframes shake{
	0%{
		transform: rotate(2deg);
		transform-origin: 50% 0;
	}
	20%{
		transform: rotate(10deg);
		transform-origin: 50% 0;
	}
	40%{
		transform: rotate(0deg);
		transform-origin: 50% 0;
	}
	60%{
		transform: rotate(-2deg);
		transform-origin: 50% 0;
	}	
	80%{
		transform: rotate(-10deg);
		transform-origin: 50% 0;
	}	
	100%{
		transform: rotate(0deg);
		transform-origin: 50% 0;
	}	
}

動畫的實現

.peach{
	animation-name:shake;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite; 
	/*動畫的實現*/
	/*animation-duration: 3s;*/
}
/*分別設置每個桃子不同的速度*/
.shake1{
	animation-duration: 2.5s;
}
.shake2{
	animation-duration: 3.5s;
}
.shake3{
	animation-duration: 2s;
}
.shake4{
	animation-duration: 3s;
}
.shake5{
	animation-duration: 4s;
}
.shake6{
	animation-duration: 3.5s;
}

html5學習筆記——三、圖文展示網頁設計

常用圖像標籤

< img>標籤

< figure >標籤和< figcaption>標籤

css陰影和漸變

css3漸變：

border-radius屬性

css transitions

css transform

2D轉換

元素變形原點

3D轉換

css animations

animation屬性

css精靈技術

推薦最舒適配色方案

[Windows下搭建WordPress測試環境]

建站模板推薦

h5學習筆記——四、表單的應用

html5學習筆記 —— 二、文本類網頁設計

Java 認證考試 OCAJP 經驗總結

豌豆莢APP 行爲審計

Studio 3T for mongoDB註冊碼算法註冊機

ZUKEN軟件CR5000/8000 最新2018破解教程（附破解軟件）

看美劇練口語小結摩登家庭(ModernFamily) S01E04

win10 藍屏分析-fwpkclnt.sys ( fwpkclnt+1361 )

Windows7 開機桌面黑屏故障終極解決方案

中區約炮 line:57963 Telegram:md08080 台中砲台.西屯外送茶.大雅找美女

心血來潮拆華碩X54H筆記本(打算升級)

配置Visual Studio Code用作51單片機C51代碼編輯器，替代KeilC編輯代碼事半功倍！