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精灵技术

[转帖]cpupower

今天，昨天，近七天，近30天，近90天，js封装

推薦最舒適配色方案

[Windows下搭建WordPress測試環境]

建站模板推薦

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

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

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結