HTML5-css3笔记

HTML笔记

第一章 HTML5基础

1.1标签（元素、节点）

开标签 关标签（闭合标签）

<p>
    你好
</p>

1.2属性

属性名=“属性值”

<div name="属性值"></div>

1.3html标签

标题标签

<h1>-<h6>标题标签

	<br>换行标签
	<strong></strong>加粗标签
	<em></em>斜体
	<p></p>段落标签
	<del></del>删除线
	<hr/>分割线
	
	<img src="" alt="" title="" >
		图像标签,title:鼠标悬停显示的文字,
		alt:图像加载不成功时显示的内容
	----------------------------------
	<a href="链接跳转路径" target="_blank">
		_blank:新窗口打开
		_self:当前窗口打开
	</a>
	-- --------------- --
	<a href="#market">甲</a>
	<a name="market">乙</a>
		本页内从甲跳到乙
	--------------------------------------------------------
	功能性链接
	<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
	
	<a href="tencent://message/?uin=1419123883&Site=Sambow&Menu=yes">打开qq</a>
		
		<a href="tel:10086">电话</a>
	--------------------------------------------------------
	
		

• 行内元素:内容撑开宽度，可以排在一行

  a 、strong、em…

• 块元素:独占一行

  p、h1-h6…

  注：文本/块级居中问题见本人博客：

  html5文本/块级居中问题_html5 块居中-CSDN博客

1.4注释

1.5特殊符号

特殊符号	字符实体	示例
空格	 
大于号 >	>
小于号 <	&lt;
引号 “”	&quot;
版权符号@	&copy;

1.6路径

• 内部路径

  <!-- 绝对路径：从根目录开始  / -->
  		<img src="../img/imgg/002.jpg"/>
  		<!-- 相对路径 :图片相对于文件位置在哪-->
  		<img src="img/imgg/002.jpg" >	
  

• 外部路径

  需要带http或者https

第二章 列表、表格、媒体元素

2.1列表

	<!-- 有序列表 -->
	<ol>
		<li>张三</li>
		<li>李四</li>
	</ol>
	
	<!-- 自定义列表 -->
	<dl>
		<dt>水果</dt>
		<dd>香蕉</dd>
	</dl>
	
	无序列表
	<ul>
			<li>老李</li>
			<li>老王</li>
		</ul>

2.2表格

<!-- 
    cellspacing 属性规定单元格之间的空间。
	cellpadding 属性规定的是单元边沿与单元内容之间的空间 
	align:水平对齐方式  left:左边  right:右  center：居中
	valign:垂直对齐方式  top:顶部   bottom:底部   center：居中
	colspan:跨列合并  
	rowspan:跨行合并
	-->
		<table border="" cellspacing="" cellpadding="">
			<tr align="" valign="">
				<th>表头/第一行</th>
			</tr>
			<tr>
				<td colspan="" rowspan="">数据内容</td>
			</tr>
		</table>

h5表格

thead (tr… th)

tbody (tr…td)

tfoot (tr…td)

<table>
			<thead>
				<tr>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td></td>
				</tr>
			</tfoot>
</table>

2.3视频播放器

        controls:播放组件
		muted autoplay:自动播放
		loop:循环播放  
<video  controls muted autoplay loop="loop">
			<source src="videooo/fengjing.mp4"/>
</video>

2.4html 结构元素

	    <header>头部标签</header>
		<nav>导航栏</nav>
		<section>页面中一块独立区域</section>
		<article>文章区域</article>
		<footer>页脚</footer>
		<aside>相关内容，侧边栏</aside>

2.5 iframe 内联框架

点击a标签 将a标签的地址传到iframe里的src中

<a href="https://www.baidu.com" target="a">这是百度</a>
<a href="https://ai.taobao.com/" target="a">这是淘宝</a>
		
			<!-- frameborder:边框线
		     scrolling:是否显示滚动条 -->
iframe:实现页面间跳转
		<iframe 
		        src="" width="800" height="200" 
                name="a"       
                frameborder="0" 
                scrolling="auto"
		></iframe>
		<!-- 注意：target和iframe的name属性值要一致 -->

补充三个标签：

        <pre>原模原样输出</pre>
		<abbr></abbr>
		<kwh>自定义标签</kwh>

第三章 表单

3.1表单元素

3.1.1表单格式

      <!-- action:表单向何处发送
		method:get/post, 表单提交方式
		get:比较快，当不安全
		post:安全，比较慢
-->

格式：
<form action="#" method="get">
	<!-- type:text文本 
		value:input的值
		name:input的名称-->
	<input type="text">
    
    <input name="pass" type="password" >密码
    <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重填“/> 
                                            
                                            
    <!-- maxlength:文本框最多输入多少字符
			size:文本框长度 -->
      <input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />                                                                                                              
</form>

3.1.2表格元素格式

属性	说明
type	指定元素的类型，text /password/checkbox/radio/submit/reset/file/hiddle/image/button 默认为text
name	指定表单的元素名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type 为text或者password时表单元素大小以字符为单位，其他类型时宽度以像素为单位
maxlenght	type为text/passward时输入的最大字符数
checked	type为radio/checkbox时，指定按钮是否被选中

3.1.3元素属性

 
 maxlength:最大长度   minlength:最小长度   size:大小
 <input type="text" maxlength="20" minlength="10" size="">
------------------------------------------------------------
 maxlength:最大长度   minlength:最小长度   size:大小
   <input type="passward" maxlength="20" minlength="10" size="">
------------------------------------------------------------

radio:单选按钮，name属性一组要一致，checked:默认选中
<input type="radio" name="sex" id="" value="1"  checked/>
<input type="radio" name="sex" id="" value="2" />

------------------------------------------------------------
checkbox:复选框 ，name组属性要一致，checked:默认选中
<input type="checkbox" name="sports" id="" value="" />篮球
<input type="checkbox" name="sports" id="" value="" />足球
----------------------------------------------------------

reset:重置按钮，value:改变按钮文字
<input type="reset" name="" id="" value="1" />按钮1

----------------------------------------------------------
submit:提交，value：改变按钮文字
<input type="submit" name="" id="" value="提交按钮" />

-----------------------------------------------------------
image:图片按钮，src：图片路径
<input type="image" src="img/book.jpg" />
----------------------------------------------------------
button：普通按钮。value:改变按钮文字
<input type="button" name="" id="" value="普通按钮" />
------------------------------------------------------------

file:文件域，需要在form中添加 enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data">
	...
	<input type="submit" value=""/>
</form>
------------------------------------------------------------
email:邮箱	
<input type="email" name="" id="" value="" />
---------------------------------------------------------
url:网址,会自动验证URL地址格式是否正确
<input type="url" name="" id="" value="" />
-----------------------------------------------------------
number:数字，maxz:最大值，min:最小值 value:默认值  step:步长
<input type="number" name="" max="8" min="2" value="5" step="2"/>
-----------------------------------------------------------
range:滑块， max:最大值 min:最小值 value:默认值  step:步长
<input type="range" name="" value="" step="2"/>
-----------------------------------------------------------
search:搜索框
<input type="search" name="" id="" value="" />
----------------------------------------------------------
hidden:隐藏域	
<input type="hidden" name="userid" id="1" value="132" />
---------------------------------------------------------
readonly:只读
<input type="text" name="" id="" value="" readonly/>
---------------------------------------------------------
disabled:禁用
<input type="text" name="" id="" value="" disabled/>

3.1.4元素标注

label:标签
在标签中使用for属性，for的属性值要与表单中的id属性值一致

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

3.1.5 表单初级验证

placeholder:文本框输入内容提示

required:必填项

pattern:验证规则，正则表达式

placeholder:文本框输入内容提示
<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
------------------------------------------------------------
required:必填项
<input type="text" name="username"  required/>
------------------------------------------------------------
pattern:验证规则，正则表达式
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

第四章 初始css

4.1 选择器

选择器：选中标签（容器）
属性 ：美化的样子（样式）

格式：

标签名{
    属性：属性值;
	...
};

// 标签选择去
h1 {
	font-size:12px;
	color:#F00;
}

4.2 css引入方式

• 优先级：就近原则

4.2.1 行内式

在html标签中添加style属性

<h1 style="color:red;">style属性的应用</h1>

4.2.2 内嵌式

在html中添加style标签

<style>
     h1{
       color: green; 
    }
</style>

4.2.3 外部样式

需要先创建.css文件

• 链接式 ：在html中使用link标签

<link rel="stylesheet" type="text/css" href="css/indexx.css"/>

• 导入式：在内部写@import

<style type="text/css">
	@import url("css/indexx.css");
</style>

4.3 选择器

4.3.1基本选择器

• 全局选择器：使用*号

<style type="text/css">
		*{
			可以选中所有的html标签
		}
	</style>

• 标签选择器：使用html标签

<style type="text/css">
		h1{
			color:red;
		}
	</style>

• 类选择器:html中使用class属性，css中使用 . 操作符

<p class="p_one"></p>
<style type="text/css">
    .p_one{
        color:red;
    }
	</style>

• ID 选择器：html中使用id属性，css中使用# 操作符

<p id="p_one"></p>
<style type="text/css">
    #p_one{
        color:red;
    }
</style>

• 交集选择器

• 并集选择器

• 优先级：ID选择器> 类选择器> 标签选择器>全局选择器

4.3.2 层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E F	子代选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

4.3.3 属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

 用例：
     <!-- E[attr] -->

<a href="" id="aid"></a>
<style type="text/css">
		a[id] { 
			background: yellow; 
			}
	</style>
-----------------------------------------------------------
     <!-- E[attr=val] -->
<!-- E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中 -->

<a href=""id ="first"></a>
<style type="text/css">
		a[id=first] {
            background: red; 
    }
	</style>
-----------------------------------------------------------
		<!-- E[attr*=val] -->

<a href="" class="links aa"></a>
<style type="text/css">
	 a[class*=links] {
         background: red; 
    }
</style>

-------------------------------------------------------
<!-- E[attr$=val] -->

<a href="img/01.png" class="links aa"></a>
<style type="text/css">
	a[href$=png] {
        background: red; 
    }
</style>
-----------------------------------------------------
<!-- E[attr^=val] -->

<a href="https://www.baidu.com"></a>
<style type="text/css">
	a[href^=http] { background: red; }
</style>

第五章 CSS美化

5.1 字体样式

<span></span>能让某几个文字或者某个词语凸显出来

属性名	含义	举例
font	在一个声明中设置所有字体属性	font:italic :bold 36px “宋体”;
font-family	设置字体类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;

5.1.1 font-family字体类型

• font-family

p{
font-family:Verdana,"楷体";
}
body{font-family: Times,"Times New Roman", "楷体";}

5.1.2 font-size字体大小

• font-size属性

px（像素）

em、rem、cm、mm、pt、pc

/* em   父亲元素字体大小*em
				如：父亲元素字体大小为10px,子元素字体大小为2em
				则2em相当于20px(10*2em)
				
	rem  根(html)元素字体大小*rem */

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

5.1.3 font-style字体风格

• font-style属性

值	描述
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式
normal	默认值。浏览器显示一个标准的字体样式。

5.1.4 font-weight字体粗细

• font-weight属性

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符
100、200、300、400、500、600、700、800、900	定义由细到粗的字体，400等同于normal，700等同于bold

5.1.5 font属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

p span{
    font:oblique bold 12px "楷体";
}

5.2 文本属性

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right/center/left/justify;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
direction	设置文本/书写方向。	direction: rtl;文本方向从右到左
word-spacing	设置字间距

5.2.1 text-align:属性值如下

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

• 当line-heigh和容器height一致时候，可以实现垂直居中

5.2.2 text-decoration:属性值如下

div{
				/* underline:文本下划线
				overline:文本上划线
				line-through:文本删除线 */
				text-decoration: underline;
			}

vertical-align:图片文字对齐方式

属性：middle、top、bottom

5.2.3 text-shadow文本阴影

text-shadow : color x-offset y-offset blur-radius;

	span{
				text-shadow: #0000FF 1px 1px 2px;
			}

5.3 color属性

RGB：

• 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
• rgb(r,g,b) : 正整数的取值为0～255

RGBA

• 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:#A983D8;

color:#EEFF66;

color:rgb(0,255,255);

/* 0.5表示透明程度 */
color:rgba(0,0,255,0.5);

5.4 超链接样式

<a href=""></a>

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

5.5 list-style-type列表样式

• list-style-type:none/disc/circle/square/decimal
• list-style-image:

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

5.6 background-color背景颜色

5.7 background-img背景图像

background-image:url(图片路径);

5.7.1 背景重复方式

background-repeat属性

属性值	说明
repeat	沿水平和垂直两个方向平铺
no-repeat：	不平铺，即只显示一次
repeat-x	只沿水平方向平铺
repeat-y	只沿垂直方向平铺

5.8 background-position背景定位

值	含义
Xpos Ypos	单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词：left、center、right垂直方向的关键词：top、*center、bottom

5.9 背景属性简写

background:url(../image/arrow-down.gif) 20px 10px no-repeat;

5.10 background-size背景尺寸

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

5.11 linear-gradient渐变

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等,默认情况下是从上到下

div{
   /*兼容Webkit内核的浏览器*/
  -webkit-linear-gradient ( position,  color1,  color2,…)

  /* 从上到下渐变 */
  background: linear-gradient(blue, pink);
  
  /* 指定为从右到左渐变 */
   background: linear-gradient(to right, blue, pink);
  
  /* 多种颜色渐变 */
  background: linear-gradient(red, yellow, blue, orange);
  
  /* 从 10%的位置开始渐变*/
  background: linear-gradient(blue, 10%, pink);
}

径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

第六章 盒子模型

6.1 border边框

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
上、下边框颜色：#369左、右边框颜色*：*#000	border-color:#369 #000;
上边框颜色：#369左、右边框颜色：#000下边框颜色：#f00	border-color:#369 #000 #f00;
上、右、下、左边框颜色：#369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

6.2 border-width粗细

thin/ medium /thick /像素值

div{
  border-top-width:5px; 
  border-right-width:10px; 
  border-bottom-width:8px; 
  border-left-width:22px; 
  border-width:5px ; 
  border-width:20px 2px;
  border-width:5px 1px 6px;
  border-width:1px 3px 5px 2px;
}

6.3 border-style边框样式

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

div{
  border-top-style:solid; 
  border-right-style:solid; 
  border-bottom-style:solid; 
  border-left-style:solid; 
  border-style:solid ; 
  border-style:solid dotted;
  border-style:solid dotted dashed;
  border-style:solid dotted dashed double;
}

6.4 border简写

div{
   border:1px solid #3a6587;
	 border: 1px dashed red;
}

6.5 margin外边距

网页居中的必要条件：

• 块元素
• 固定宽度

margin{0px,auto} /* 设置居中; */

div{
  margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
}

6.6 padding内边距

div{
padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;
}

6.7 盒子模型尺寸

盒子模型总尺寸=border+padding+margin+内容宽度

6.8 box-sizing

box-sizing：消除 padding和border边框把盒子撑大的效果，即盒子的大小不变，其设置的边距会往里缩。

div{
  box-sizing： border-box ;
  
  /* content-box:默认值，盒子的总尺度
  	border-box:盒子的宽度或高度等于元素内容的宽度或高度
  	inherit:元素继承父元素的盒子模型模式
 */
  box-sizing：content-box  |  border-box  |  inherit;

}

6.9 border-radius圆角边框

div{
  border-radius: 20px  10px  50px  30px;/*顺时针*/
}

6.9.1 制作圆形

border-radius属性制作圆形的两个要点：

• 元素的宽度和高度必须相同

• 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

• 另：span变圆：用padding撑开

  span{
  				padding: 0 6px;
  				background-color: pink;
  				color: white;
  				border-radius: 50%;
  			}
  

6.9.2 半圆

border-radius属性制作半圆形的两个要点

• 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
• 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

/* 右半圆 */
.div_one{
	width: 50px;
	height: 100px;
	border-radius: 0 50px 50px 0;
	
}
/* 左半圆 */
.div_two{
	width: 50px;
	height: 100px;
	border-radius:50px 0 0 50px ;
}

6.9.3 四分之一圆

利用border-radius属性制作扇形遵循“三同，一不同”原则

• 三同”是元素宽度、高度、圆角半径相同
• 一不同”是圆角取值位置不同

/* 左上四分之一 */
.div_six{
	width: 50px;
	height: 50px;
	border-radius: 50px 0 0 0;
}
/* 右下四分之一圆 */
.right_boo{
	width: 50px;
	height: 50px;
	border-radius: 0 0 50px 0 ;
}

6.10 box-shadow盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

inset：阴影类型内阴影/从外层的阴影（开始时）改变阴影内侧阴影s

x-offset :X轴位移，指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

第七章 浮动

7.1 display

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

7.2 float属性/浮动

• 可以设置块级元素排列在一行

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

div{
  float:left;/*左浮动*/
  float:right;/*右浮动*/
}

7.3 解决边框塌陷问题

1. 给父容器后面添加空的div,并设置为

<div style="clear: both;"></div>

2. 设置父容器高度：比如hight:400px;

3. 给父容器添加overflow: hidden;

4. 给父容器添加伪类:after,并设置为

   fatherdiv:after{
   				display: block;
   				content: "";
   				clear: both;
   				
   			} 
   

5. 解决塌陷案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.maxdiv{
				width: 900px;
        /*1.解决塌陷的容器*/
				/* height: 300px; */
				background-color: pink;
				box-sizing: border-box;
				margin: 0 auto;
        /*2.解决塌陷的容器*/
				overflow: hidden;
			}
      /*3.解决塌陷的容器*/
			/* .maxdiv:after{
				display: block;
				content: "";
				clear: both;
				
			} */
			.outdiv{
				width: 300px;
				border: 5px black solid;
				float: left;
				height: 100%;
				box-sizing: border-box;
				
			}
			.imgdiv{
				background-color: blue;
				float: left;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.imgdiv>img{
				width: 100%;
				height: 100%;
			}
			.bottdiv{
				background-color: bisque;
				width: 1500px;
				height: 300px;
        /*4.解决塌陷的容器*/
				/* clear: both; */
			}
			
		</style>
	</head>
	<body>
<div class="maxdiv">
			
		<div class="outdiv">
				<div class="imgdiv">
          <img src="img/12.jpg" alt="" />
      	</div>
		</div>
			
			<div class="outdiv">
				<div class="imgdiv">
          <img src="img/12.jpg" alt="" />
      	</div>
		 </div>
			
			<div class="outdiv">
				<div class="imgdiv">
          <img src="img/12.jpg" alt="" />
      	</div>
		 </div>
			
		</div>
		
		<!-- //解决塌陷的容器 -->
		<div class="bottdiv"></div>
</body>
</html>

第八章 定位

8.1 position属性

• ​ static:默认值,没有定位

• ​ relative:相对顶定位

• ​ absolute:绝对定位

• ​ fixed:固定定位

  偏移设置：top left right bottom

  relative :相对定位，相对于自身原来的位置进行移动
  特点：任然在标准文档流中，原来的位置会被保留

  absolute：绝对定位，以浏览器窗口进行定位移动
  特点：脱离标准文档流，原来的位置会被占用

  fixed: 固定定位，固定到浏览器窗口的某个位置
  特点：脱离标准文档流

  sticky：吸顶定位，滚动条到顶定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 1500px;
			}
			*{
				padding: 0;
				margin: 0;
			}
			.maxdiv{
				width: 500px;
				height: 1000px;
				background-color: pink;
				margin: 0 auto;
				margin-top: 50px;
				border-bottom: 8px red solid;
			}
			.navdiv{
				width: 500px;
				height: 50px;
				background-color: aquamarine;
        /*固定定位 */
				position: fixed;
				top: 0;
			}
			.tootdiv{
				width: 500px;
				height: 50px;
				background-color: aquamarine;
				margin: 0 auto;
				/*sticky效果展示 */
				position: sticky;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="maxdiv">456
			<div class="navdiv">123</div>
		</div>
		<div class="tootdiv">789</div>
	</body>
</html>

​

8.2 z-index属性

• 调整元素定位时重叠层的上下位置

• 此属性需要在设置position的情况才能使用

第九章 动画

9.1 transform动画

transform 2D变形

translate()：平移函数，基于X、Y坐标重新定位元素的位置

scale()：缩放函数，可以使任意元素对象尺寸发生变化

rotate()：旋转函数，取值是一个度数值

skew()：倾斜函数，取值是一个度数值

div{
	transform:translate(100px,100px);
  transform:translate(100px,100px) scale(1.5)
}


rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状

9.2 transition过渡动画

transition: 要过度的属性 时间 过度函数 延迟时间；

transition: 要过度的属性  时间  过度函数  延迟时间；

要过的属性：可以使用 all 或者一个一个的写
时间：    单位s秒   ms毫秒
过度函数：
        ease：速度由快到慢（默认值）
        linear：速度恒速（匀速运动）
        ease-in：速度越来越快（渐显效果）
        ease-out：速度越来越慢（渐隐效果）
        ease-in-out：速度先加速再减速（渐显渐隐效果）

9.3 定义动画

/* 定义动画*/
@keyframes imgacion{
	0%{
		transform: rotate(0deg) scale(1);
	}
	100%{
		transform: rotate(360deg) scale(1.2);
	   }
	}
	/* 使用动画*/
	img:hover{
		animation-name: imgacion;
		animation-duration: 2s;
	}
}

十、附属

*{/* 清除所有标签内外边距 */
				padding: 0;
				margin: 0;
			}

input{/* 清除输入框默认ya */
   outline:none;
}

y;
top: 100px;
}

456

123

789

```

​

8.2 z-index属性

• 调整元素定位时重叠层的上下位置

• 此属性需要在设置position的情况才能使用

第九章 动画

9.1 transform动画

transform 2D变形

translate()：平移函数，基于X、Y坐标重新定位元素的位置

scale()：缩放函数，可以使任意元素对象尺寸发生变化

rotate()：旋转函数，取值是一个度数值

skew()：倾斜函数，取值是一个度数值

div{
	transform:translate(100px,100px);
  transform:translate(100px,100px) scale(1.5)
}


rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状

9.2 transition过渡动画

transition: 要过度的属性 时间 过度函数 延迟时间；

transition: 要过度的属性  时间  过度函数  延迟时间；

要过的属性：可以使用 all 或者一个一个的写
时间：    单位s秒   ms毫秒
过度函数：
        ease：速度由快到慢（默认值）
        linear：速度恒速（匀速运动）
        ease-in：速度越来越快（渐显效果）
        ease-out：速度越来越慢（渐隐效果）
        ease-in-out：速度先加速再减速（渐显渐隐效果）

9.3 定义动画

/* 定义动画*/
@keyframes imgacion{
	0%{
		transform: rotate(0deg) scale(1);
	}
	100%{
		transform: rotate(360deg) scale(1.2);
	   }
	}
	/* 使用动画*/
	img:hover{
		animation-name: imgacion;
		animation-duration: 2s;
	}
}

十、附属

*{/* 清除所有标签内外边距 */
				padding: 0;
				margin: 0;
			}

input{/* 清除输入框默认ya */
   outline:none;
}