1、初识html
| W3C : 万维网联盟！（World Wide Web Consortium ） |
| |
创建于1994年，是web技术领域最权威最具有影响力的标准机构！ |
| |
|
| |
|
| |
W3C规定了web技术领域相关技术的标准！ |
| |
|
| |
官网地址： |
| |
www.w3c.org |
| |
www.chinaw3c.org |
| |
|
| |
XML ：负责数据的存储 |
| |
Html ：结构化标准,负责数据的显示 |
| |
CSS ：表现标准 |
| |
JavaScript：行为标准 |
| |
|
| |
|
| |
Html概念： |
| |
|
| |
01.超文本标记语言（Hyper Text Markup Language） |
| |
超文本:包含除了文本之外的视频，音频，图片等。 |
| |
标记：html也是有多个节点组成的! |
| |
int a =5; 通过a找到5 |
| |
<student id="1"><student> |
| |
<student id="2"><student> |
| |
id就是我们的标记 |
| |
|
| |
02.文件名以html或者htm结尾的文件我们称之为html！ |
| |
|
| |
发展史： |
| |
93年诞生HTML！ |
| |
00年改名XHTML! |
| |
13年改名HTML5! |
| |
|
| |
|
| |
HTML5的优势： |
| |
01.世界知名浏览器厂商的支持！ |
| |
02.市场的需求 |
| |
03.跨平台 |
| |
|
| |
HTML网页的基本结构 |
| |
|
| |
<!DOCTYPE html> 只是告诉浏览器使用了html的规范 |
| |
<html> 根节点 |
| |
<head></head> 头部信息 |
| |
<body></body> 主体部分 |
| |
</html> |
| |
|
| |
我们怎么使用html呢？ |
| |
01.记事本(文本编辑器) |
| |
02.DreamWeaver |
| |
03.WebStorm
|
第一个网页html
| <!DOCTYPE html><!-- 声明当前的文件是H5的页面--> |
| |
<html> <!--根节点--> |
| |
<head lang="en"> <!--头部信息 lang="en"使用的语言是英语--> |
| |
<title>这是我的第一个H5页面</title><!--网页的标题--> |
| |
<meta charset="utf-8"> <!--设置页面的编码格式--> |
| |
<meta http-equiv="keywords" content="第一次，h5"> |
| |
<!-- |
| |
meta:设置网页相关的元信息（meta-information）! |
| |
比如：设置编码格式，搜索关键字，描述信息，页面跳转等。。。。 |
| |
meta常用的属性和属性值： |
| |
01.charset：编码格式 |
| |
02.http-equiv：把content属性关联到我们的http头部！ |
| |
常用的属性值： |
| |
001.keywords ： 搜索关键字 |
| |
002.description：描述当前页面的信息 |
| |
003.refresh ：跳转页面 |
| |
<meta http-equiv="refresh" content="3;url=http://www.github.com/xiaodoufu/"> |
| |
03.content:定义和http-equiv或者name属性的对应值 |
| |
--> |
| |
<style type="text/css"></style><!--设置当前页面的样式--> |
| |
<script type="text/javascript"></script> <!--设置当前页面的行为--> |
| |
|
| |
</head> |
| |
|
| |
<body> <!--网页中所有的数据 必须书写的位置--> |
| |
这是我的第一个页面！ |
| |
</body> |
| |
</html> |
标题标签
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>标题标签</title> |
| |
<!-- |
| |
标题标签： h1-h6 其他的都没有效果！ |
| |
会自动换行！块元素（自己独占一行的元素）！ |
| |
--> |
| |
</head> |
| |
<body> |
| |
<h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> |
| |
<h4>4级标题</h4> |
| |
<h5>5级标题</h5> |
| |
<h6>6级标题</h6> |
| |
<h7>7级标题</h7> |
| |
8级标题 |
| |
|
| |
|
| |
</body> |
| |
</html> |
段落标签
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>段落标签</title> |
| |
<!-- |
| |
段落之前有空行！p标签也是块元素！ |
| |
自闭合标签 |
| |
<br/> 换行 |
| |
<hr/> 水平线 |
| |
<h1> <p> </h1> </p> 错误的！ 标签的不正确嵌套！ |
| |
<p> <h1> </h1></p> 正确！ |
| |
--> |
| |
</head> |
| |
<body> |
| |
|
| |
<p> |
| |
北京欢迎你，有梦想谁都了不起！<br/> |
| |
有勇气就会有奇迹。 |
| |
</p> |
| |
<hr/> |
| |
<p> |
| |
北京欢迎你，为你开天辟地<br/> |
| |
…… |
| |
</p> |
| |
|
| |
</body> |
| |
</html> |
特殊字符
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>特殊字符的使用</title> |
| |
<!-- |
| |
虽然有些特殊字符我们可以在页面上显示！但是不允许直接书写！ |
| |
需要特殊的符号来代替我们的特殊字符！ |
| |
特殊符号对照表：http://www.jb51.net/onlineread/htmlchar.htm |
| |
--> |
| |
</head> |
| |
<body> |
| |
大于号（>）：> <br/> |
| |
小于号（<）：<<br/> |
| |
引号（""）："<br/> |
| |
单引号（'）：'<br/> |
| |
版权符号（©）：©<br/> |
| |
<!-- |
| |
|
| |
|
| |
想让一行中的某些字体 凸显出来，我们通常使用 |
| |
em 斜体 不建议使用i |
| |
strong 加粗 不建议使用b |
| |
尽量使用的标签 语义化（让计算机便于解析，让码农易于阅读）！ |
| |
--> |
| |
大家辛苦了<strong><em>吗？</em></strong> |
| |
</body> |
| |
</html> |
图片标签
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>图片标签</title> |
| |
<!-- |
| |
常见的图片格式： |
| |
bmp,gif,png,jpg! 压缩（率）比！ |
| |
|
| |
img标签 也是一个 行内元素（内联元素）！ |
| |
|
| |
src :指的是 图片的位置！ 绝对不能写成绝对路径！ |
| |
项目中需要的所有文件，都在项目中的images文件夹中保存！ |
| |
src就写成项目的相对路径！ |
| |
title:鼠标放在图片上的悬停文字,如果没有alt属性，图片不显示时，显示title |
| |
alt:不显示图片的时候 替换文字 |
| |
height:高度 |
| |
width: 宽度 |
| |
--> |
| |
</head> |
| |
<body> |
| |
<img src="../images/a.jpg" height="200px" width="200px" |
| |
title="这是一幅画" alt="多么美丽的画面"> |
| |
</body> |
| |
</html> |
超链接
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>超链接</title> |
| |
<!-- |
| |
01.普通的超链接 |
| |
02.锚链接 |
| |
03.功能性链接 |
| |
|
| |
src:我们一般指的是 文件的地址！路径！ 从哪里来 |
| |
href：是指向，引用！ 到哪里去 |
| |
|
| |
target：目标页面的设置！指的是 我们点击超链接之后的页面显示窗口的位置！ 默认是当前窗口！ _self |
| |
_blank：在新创建的窗口中显示！ |
| |
--> |
| |
</head> |
| |
<body> |
| |
|
| |
<a href="http://www.baidu.com" target="_blank">百度</a> <br/> |
| |
<a href="http://www.taobao.com" target="_self">淘宝</a> <br/> |
| |
<a href="http://www.jd.com">京东</a> <br/> |
| |
|
| |
<!-- |
| |
把图片嵌套在超链接中！ |
| |
--> |
| |
<a href="http://www.github.com/xiaodoufu" target="_blank"> |
| |
<img src="../images/a.jpg" width="200px" height="200px" alt="这是一个美丽的画面"> |
| |
</a> |
| |
</body> |
| |
</html> |
锚链接本页面跳转
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>锚链接本页面跳转</title> |
| |
<!-- |
| |
锚链接： |
| |
01.从本页面的A位置 跳转本页面的B位置 使用 #+标记名称 |
| |
02.从本页面的A位置 跳转其他页面的B位置 使用 页面名+#+标记名称 |
| |
name:标记的名称 |
| |
--> |
| |
</head> |
| |
<body> |
| |
<div><a href="#flag" >跳转至第8个画面</a></div> |
| |
<div><a href="08锚链接需要的页面.html#flag" >跳转至需要页面的第8个画面</a></div> |
| |
<img src="../images/a.jpg" title="这是第1个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第2个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第3个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第4个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第5个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第6个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第7个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第8个画面" alt="以前有个画面"> |
| |
<!-- name="flag" flag标记名称 --> |
| |
<a name="flag" href="#">这是第8个画面的标记</a> <!-- #返回本页面的最初位置--> |
| |
</body> |
| |
</html> |
锚链接需要的页面
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>锚链接需要的页面</title> |
| |
</head> |
| |
<body> |
| |
<img src="../images/a.jpg" title="这是第1个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第2个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第3个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第4个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第5个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第6个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第7个画面" alt="以前有个画面"> |
| |
<img src="../images/a.jpg" title="这是第8个画面" alt="以前有个画面"> |
| |
<a name="flag">这是需要界面的 第8个画面标记</a> |
| |
</body> |
| |
</html> |
块元素和内联元素
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>块元素和内联元素</title> |
| |
<!-- |
| |
块元素：自身独占一行！ |
| |
可以设置盒子大小！ |
| |
h1 - h6 p div |
| |
内联元素：元素在一行显示！ |
| |
不可以设置盒大小！ |
| |
a img span子 |
| |
块元素和内联元素可以互相转换！ 通过display属性设置！ |
| |
--> |
| |
</head> |
| |
<body> |
| |
|
| |
<div style="width: 50px;height: 50px;border: 1px solid red;display: inline"> |
| |
我是一个小盒子 |
| |
</div> |
| |
|
| |
<a href="#" style="width: 50px;height: 50px;border: 1px solid red;display: block">这是内联元素</a> |
| |
|
| |
|
| |
</body> |
| |
</html> |
2、列表表格和媒体元素
无序列表
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>无序列表</title> |
| |
<!-- |
| |
什么是列表 |
| |
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来， |
| |
以便浏览者能更快捷地获得相应的信息！ |
| |
|
| |
01.前面有默认的实心圆 |
| |
02.每个li独占一行 |
| |
03.适用于我们的新闻列表，导航栏 |
| |
--> |
| |
</head> |
| |
<body> |
| |
<ul> |
| |
<li>好好学习</li> |
| |
<li>好好学习</li> |
| |
<li>好好学习</li> |
| |
</ul> |
| |
|
| |
|
| |
</body> |
| |
</html> |
有序列表
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>有序列表</title> |
| |
<!-- |
| |
01.有顺序，前面默认是阿拉伯数字 |
| |
02.适用与试卷 和问卷调查！ |
| |
--> |
| |
</head> |
| |
<body> |
| |
<ol> |
| |
<li>好好学习</li> |
| |
<li>好好学习</li> |
| |
<li>好好学习</li> |
| |
</ol> |
| |
</body> |
| |
</html> |
自定义标签
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>自定义列表</title> |
| |
<!-- |
| |
01.每个dt dd都独占一行 |
| |
02.默认前面没有任何标记 |
| |
03.适用于一个标题下，有多个列表项的场景 |
| |
--> |
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<dl> |
| |
<dt>C盘</dt> |
| |
<dd>文件1</dd> |
| |
<dd>文件2</dd> |
| |
|
| |
<dt>D盘</dt> |
| |
<dd>文件1</dd> |
| |
<dd>文件2</dd> |
| |
</dl> |
| |
|
| |
</body> |
| |
</html> |
表格
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>表格</title> |
| |
<!-- |
| |
01.简单易用，便于阅读 |
| |
02.结构简单 |
| |
|
| |
table中的属性： |
| |
01.border： 边框的像素 |
| |
02.cellpadding 设置内容和单元格之间的距离 |
| |
03.cellspacing 设置单元格和单元格之间的距离 |
| |
04.bgcolor 整个表格的背景色 #ffc0cb :代表的是16进制的颜色码 |
| |
05.width 表格在浏览器中的宽度比 |
| |
|
| |
|
| |
td节点中的 |
| |
align="left" 默认 |
| |
align="right" |
| |
align="center" |
| |
--> |
| |
</head> |
| |
<body> |
| |
<table border="1px" cellpadding="5px" cellspacing="5px" |
| |
bgcolor="pink" width="50%"> |
| |
<tr> |
| |
<td>第1行的第1列</td> |
| |
<td>第1行的第2列</td> |
| |
<td>第1行的第3列</td> |
| |
</tr> |
| |
<tr> |
| |
<td>第2行的第1列</td> |
| |
<td>第2行的第2列</td> |
| |
<td>第3行的第3列</td> |
| |
</tr> |
| |
</table> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</body> |
| |
</html> |
跨行跨列
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>跨行跨列</title> |
| |
|
| |
<!-- |
| |
都必须写在td中 |
| |
rowspan :跨行 |
| |
colspan:跨列 |
| |
--> |
| |
</head> |
| |
<body> |
| |
|
| |
<table border="1px" cellpadding="5px"> |
| |
<tr> |
| |
<td colspan="3" align="center"> 学生成绩表</td> |
| |
</tr> |
| |
|
| |
<tr> |
| |
<td rowspan="2">张三</td> |
| |
<td>math</td> |
| |
<td>80</td> |
| |
</tr> |
| |
<tr> |
| |
<td>java</td> |
| |
<td>90</td> |
| |
</tr> |
| |
<tr> |
| |
<td rowspan="2">李四</td> |
| |
<td>math</td> |
| |
<td>85</td> |
| |
</tr> |
| |
<tr> |
| |
<td>java</td> |
| |
<td>95</td> |
| |
</tr> |
| |
|
| |
|
| |
</table> |
| |
|
| |
</body> |
| |
</html> |
高级表格
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>高级表格</title> |
| |
</head> |
| |
<body> |
| |
<table border="1" cellspacing="0" width="70%"> |
| |
<caption>年终数据报表</caption> <!--标题--> |
| |
<thead bgcolor="red"> <!--页眉--> |
| |
<tr> |
| |
<th>月份</th> |
| |
<th>收入</th> |
| |
</tr> |
| |
</thead> |
| |
<tbody bgcolor="pink"> <!--主体--> |
| |
<tr> |
| |
<td>1月份</td> |
| |
<td>5000</td> |
| |
</tr> |
| |
<tr> |
| |
<td>2月份</td> |
| |
<td>5000</td> |
| |
</tr> |
| |
<tr> |
| |
<td>3月份</td> |
| |
<td>6000</td> |
| |
</tr> |
| |
<tr> |
| |
<td>4月份</td> |
| |
<td>8000</td> |
| |
</tr> |
| |
</tbody> |
| |
|
| |
<tfoot bgcolor="green"> <!--页脚--> |
| |
<tr> |
| |
<td>平均月收入</td> |
| |
<td>6000</td> |
| |
</tr> |
| |
<tr> |
| |
<td>总收入</td> |
| |
<td>24000</td> |
| |
</tr> |
| |
</tfoot> |
| |
</table> |
| |
|
| |
|
| |
</body> |
| |
</html> |
音频标签
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>音频标签</title> |
| |
|
| |
<!-- |
| |
audio:音频标签 |
| |
controls：是否显示 控制条 |
| |
autoplay：是否自动播放 |
| |
--> |
| |
</head> |
| |
<body> |
| |
<audio controls autoplay> |
| |
<source src="../audio/music.mp3"> |
| |
</audio> |
| |
</body> |
| |
</html> |
视频标签
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>视频标签</title> |
| |
<!-- |
| |
video:视频标签 |
| |
controls：是否显示 控制条 |
| |
autoplay：是否自动播放 |
| |
--> |
| |
</head> |
| |
<body> |
| |
<video controls autoplay src="../video/video.mp4"> </video> |
| |
</body> |
| |
</html> |
结构元素
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>结构元素</title> |
| |
|
| |
<!-- |
| |
|
| |
用于网页的布局： |
| |
|
| |
header: 头部区域 |
| |
section：html页面中的一块独立的部分 |
| |
footer：脚部区域 |
| |
nav:导航菜单 |
| |
article:独立的文章内容 |
| |
aside：常用于侧边栏 |
| |
--> |
| |
|
| |
<style type="text/css"> |
| |
header{ |
| |
height: 20px; |
| |
border: 1px solid red; |
| |
} |
| |
section{ |
| |
height: 1000px; |
| |
border: 1px solid black; |
| |
} |
| |
footer{ |
| |
height: 50px; |
| |
border: 1px solid blue; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<header> |
| |
</header> |
| |
|
| |
<section> |
| |
</section> |
| |
|
| |
<footer> |
| |
</footer> |
| |
|
| |
</body> |
| |
</html> |
内联框架
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>内联框架</title> |
| |
<!-- |
| |
src ：指的是 我们需要引入的外部文件地址 |
| |
|
| |
需求： |
| |
用户点击不同的超链接，在iframe框架中 显示不同的页面！ |
| |
|
| |
--> |
| |
</head> |
| |
<body> |
| |
|
| |
<a href="http://www.jd.com" target="myIframe">京东</a> |
| |
<a href="http://www.taobao.com" target="myIframe">淘宝</a> |
| |
<a href="http://www.baidu.com" target="myIframe">百度</a> |
| |
|
| |
<iframe name="myIframe" src="http://www.baidu.com" scrolling="no" width="500" height="500"></iframe> |
| |
|
| |
</body> |
| |
</html> |
3、CSS美化页面
【
| css美化页面 |
| |
|
| |
如果在我们一行文字中，想让某个文字凸显出来，使用span！ |
| |
|
| |
1.字体样式 |
| |
font-style:字体的风格 italic normal |
| |
font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900 |
| |
font-size:字体的大小 10px 2em rem pc pt |
| |
font-family:字体的类型，比如我们的楷体，隶书,宋体。。。。。 |
| |
|
| |
font：风格 粗细 大小 类型 |
| |
在一起设置属性的时候，四种属性顺序不能颠倒！ |
| |
|
| |
2.文本样式 |
| |
color:文本颜色 red 16进制颜色码 rgb rgba |
| |
rgb(red,green,blue)正数取值 0-255 |
| |
rgba(red,green,blue,alpha) |
| |
alpha的取值必须是0-1 0不显示 1正常显示 |
| |
text-align:文本元素的水平对齐方式 |
| |
center left right justify(两端对齐) |
| |
line-height:文本的行高! |
| |
如果想设置文本的垂直居中line-height的值必须等于height的值 |
| |
text-indent:设置首行缩进 |
| |
p{ |
| |
text-indent:2em; 设置p首行缩进2个字符 |
| |
} |
| |
text-decoration:文本的装饰 |
| |
none:默认值 |
| |
underline:下划线 |
| |
overline:上划线 |
| |
line-through:删除线 |
| |
text-shadow:文本阴影 |
| |
|
| |
3.display 可以实现 块元素和行内元素的互换！ |
| |
inline inline-block block |
| |
|
| |
4.超链接伪类 |
| |
|
| |
结构伪类选择器： |
| |
div:nth-of-type() :nth-child |
| |
css伪类是一个特殊的类！ 它针对于我们设置的css选择器起作用！ |
| |
|
| |
css伪类的语法： |
| |
选择器:伪类名｛ |
| |
属性:属性值; |
| |
｝ |
| |
:link ==> 还没有点击超链接的样式 |
| |
:visited ==> 点击之后超链接的样式 |
| |
:hover ==> 鼠标悬停在超链接的样式 |
| |
:active ==> 鼠标点击未释放超链接的样式 |
| |
|
| |
love hate |
| |
如果同时给一个选择器设置超链接伪类样式，那么顺序是必须不变的！ |
| |
|
| |
5.列表样式 |
| |
list-style-type 列表符号样式 |
| |
none 无符号 |
| |
disc 实心圆 |
| |
circle 空心圆 |
| |
decimal 数字 ..... |
| |
list-style-image 列表图片 url |
| |
list-style-position 列表符号是否被li包含，默认是ul包含 |
| |
list-style 列表样式 |
| |
|
| |
如果同时设置了type和image 那么image会覆盖type！和书写先后顺序没关系！ |
| |
|
| |
6.背景样式 |
| |
"> |
|
background-image:背景图片 |
| |
background-position:背景位置 |
| |
background-repeat:背景重复方式 |
| |
repeat:默认方式 水平和垂直都平铺 |
| |
no-repeat:不平铺，只有一个图片 |
| |
repeat-x:水平平铺 |
| |
repeat-y:垂直平铺 |
| |
|
| |
background: 背景色 背景图片 背景位置 平铺方式 |
| |
虽然没有固定顺序，但是我们有个默认的写法！ |
| |
|
| |
如果我们相对背景图片的大小进行设置！那么请使用background-size |
| |
background-size:contain; |
| |
background-size：背景图片的尺寸 |
| |
auto:默认值，使用图片的大小 |
| |
cover:让整个图片正好填充整个盒子 |
| |
contain：让图片自动的方法或者缩小 适应盒子的大小 |
| |
percentage：使用百分比 手动的校正图片在盒子中的大小 |
| |
|
| |
|
| |
7.渐变属性 |
| |
linear-gradient:(方向,color1,color2) |
| |
to top :方向 |
| |
red:第1个颜色 |
| |
black:第2个颜色 |
| |
IE浏览器是Trident内核，加前缀：-ms- |
| |
Chrome浏览器是Webkit内核，加前缀：-webkit- |
| |
Safari浏览器是Webkit内核，加前缀：-webkit- |
| |
Opera浏览器是Blink内核，加前缀：-o- |
| |
Firefox浏览器是Mozilla内核，加前缀：-moz- |
】
Span
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>span标签</title> |
| |
<!--span标签 |
| |
想让某些文字凸显出来 |
| |
--> |
| |
<style type="text/css"> |
| |
div:first-child span{ |
| |
color: red; |
| |
} |
| |
|
| |
div:last-child span{ |
| |
color: green; |
| |
} |
| |
/*同时设置body中的子元素span的风格 粗细 大小 类型*/ |
| |
body>span{ |
| |
font: oblique bold 50px "楷体"; |
| |
color: red; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<div><span>今天</span>是个好日子！</div> |
| |
<div><span>明天</span>也是个好日子！</div> |
| |
<span>a</span>bcdefg |
| |
</body> |
| |
</html> |
字体样式
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>字体样式</title> |
| |
|
| |
<style type="text/css"> |
| |
|
| |
div{ |
| |
/*01.设置字体的类型*/ |
| |
font-family:"楷体" ; |
| |
/*02.设置字体的风格*/ |
| |
font-style: italic; |
| |
/*03.设置字体的大小 可以设置数值*/ |
| |
font-size:small; |
| |
/*04.设置字体的粗细 可以设置数值*/ |
| |
font-weight: bold; |
| |
} |
| |
/* 简写方式==》同时设置 字体的 风格,粗细,大小 ，类型 顺序不能发生变化*/ |
| |
span{ |
| |
font:italic bolder 60px "楷体"; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<div><span>今天</span>是个好日子！</div> |
| |
<div><span>明天</span>也是个好日子！</div> |
| |
</body> |
| |
</html> |
display
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>display属性</title> |
| |
<!-- 实现 块元素和 内联元素的相互转换 --> |
| |
|
| |
<!-- 需求： |
| |
01.设置块元素2和3 在一行显示 |
| |
02.设置块元素2和3 的边框和宽度 高度 ==>因为已经变成了内联元素 所以宽度 高度 无效 |
| |
03.我们想块元素2和3 在一行显示 但是 还能设置 宽度 高度 ？？？display: inline-block; |
| |
04.把内联元素3 变成块元素 并且设置 宽度 高度 |
| |
--> |
| |
<style type="text/css"> |
| |
div:nth-of-type(2),div:nth-of-type(3){ |
| |
/* display: inline; 内联元素*/ |
| |
display: inline-block; /* 行内块元素*/ |
| |
border: 1px solid red; |
| |
height: 50px; |
| |
width: 50px; |
| |
} |
| |
span:nth-child(3){ |
| |
border: 1px solid red; |
| |
display:block;/*块元素*/ |
| |
height: 50px; |
| |
width: 50px; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<span>内联元素1</span> |
| |
<span>内联元素2</span> |
| |
<span>内联元素3</span> |
| |
|
| |
<div>块元素1</div> |
| |
<div>块元素2</div> |
| |
<div>块元素3</div> |
| |
|
| |
|
| |
|
| |
</body> |
| |
</html> |
文本样式
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>文本样式</title> |
| |
|
| |
<style type="text/css"> |
| |
/* 01.设置文本的颜色 |
| |
RGB： red green blue |
| |
rgb(red ,green,blue) 每个颜色的数值范围是0-255 |
| |
rgba(50,100,50,0.2) 最后一个参数 设置透明度 alpha 取值是0-1 |
| |
16进制的颜色码 #020202 |
| |
前两位代表R的分量 |
| |
中间两位代表G的分量 |
| |
后两位代表B的分量 |
| |
|
| |
|
| |
02.设置文本的对齐方式 |
| |
text-align center right left |
| |
|
| |
03.设置文本的垂直居中 |
| |
我们设置的line-height的值要和 盒子的 height属性值一致！ |
| |
|
| |
04.文本的装饰 |
| |
text-decoration: line-through; 删除线 |
| |
text-decoration: underline; 下划线 |
| |
text-decoration: overline; 上划线 |
| |
05.文本的阴影 |
| |
text-shadow:red 2px 3px 1px ; |
| |
red:阴影的颜色 |
| |
2px：x轴的位移 |
| |
3px：y轴的位移 |
| |
1px：阴影的模糊范围 值越小 看到的文本越清晰 |
| |
*/ |
| |
div{ |
| |
/*color: rgb(50,100,50);只是设置文本颜色*/ |
| |
color: rgba(50,100,50,0.8); /*设置颜色的同时设置透明度*/ |
| |
text-align: left;/*水平居中方式*/ |
| |
text-indent: 2em;/*首行缩进*/ |
| |
border: 1px solid red; |
| |
height: 100px; |
| |
line-height:100px ; /*行高*/ |
| |
text-decoration: underline; |
| |
text-shadow:red 2px 2px 1px ;/*文本的阴影*/ |
| |
} |
| |
|
| |
</style> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<div>现价 500</div> |
| |
<div>原价 900</div> |
| |
</body> |
| |
</html> |
超链接伪类
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>超链接伪类</title> |
| |
<!-- |
| |
a:link 我们还没有访问超链接时的样式 |
| |
a:visited 访问之后超链接的样式 |
| |
a:hover 鼠标悬停在超链接上的样式 |
| |
a:active 鼠标点击未释放 |
| |
顺序一定不能有误！ |
| |
--> |
| |
|
| |
|
| |
<style type="text/css"> |
| |
a:link{ |
| |
color: red; |
| |
} |
| |
a:visited{ |
| |
color: greenyellow; |
| |
} |
| |
a:hover{ |
| |
color: deeppink; |
| |
} |
| |
a:active{ |
| |
color: yellow; |
| |
} |
| |
|
| |
div[id="haha2"]:hover{ |
| |
color: red; |
| |
text-shadow: pink 2px 2px 1px; |
| |
} |
| |
|
| |
|
| |
span:hover{ |
| |
background: red; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<span>haha</span> |
| |
<a href="#">大家辛苦了！</a> |
| |
|
| |
<div id="haha">哈哈</div> |
| |
<div id="haha1">哈哈1</div> |
| |
<div id="haha2">哈哈2</div> |
| |
</body> |
| |
</html> |
列表样式
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>列表样式</title> |
| |
|
| |
<style type="text/css"> |
| |
/*01.去掉列表前面实心圆点 |
| |
list-style-type: none; |
| |
list-style-type:设置前面默认的样式 |
| |
|
| |
02.把默认的小圆点换成图片 |
| |
list-style-image: url("../images/a.jpg"); |
| |
|
| |
03.设置li和图标的关系 |
| |
li是否包含前面的小图标 |
| |
*/ |
| |
li{ |
| |
list-style-position: inside; |
| |
/* list-style-image: url("../images/a.jpg"); |
| |
list-style-type: disc;*/ |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<ul> |
| |
<li>第1项</li> |
| |
<li>第2项</li> |
| |
<li>第3项</li> |
| |
<li>第4项</li> |
| |
</ul> |
| |
</body> |
| |
</html> |
背景样式
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>背景样式</title> |
| |
|
| |
<style type="text/css"> |
| |
|
| |
div{ |
| |
border: 1px solid red; |
| |
height: 200px; |
| |
width: 200px; |
| |
background-color: aqua; /* 01.给div增加背景颜色*/ |
| |
background-image: url("../images/b.png"); /* 02.给div增加背景图片 图片会把颜色覆盖，其实颜色在图片后面*/ |
| |
background-repeat: no-repeat;/*03.设置图片的填充方式*/ |
| |
/* background-position: 20px 10px;04.设置图片定位 设置size时 需要 注释*/ |
| |
/* background:color image position repeat ; 简写的规范*/ |
| |
/* |
| |
background-size:contain; |
| |
background-size：背景图片的尺寸 |
| |
auto:默认值，使用图片的大小 |
| |
cover:让整个图片正好填充整个盒子 |
| |
contain：让图片自动的方法或者缩小 适应盒子的大小 |
| |
percentage：使用百分比 手动的校正图片在盒子中的大小 100%; |
| |
*/ |
| |
} |
| |
|
| |
|
| |
</style> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<div></div> |
| |
|
| |
|
| |
</body> |
| |
</html> |
渐变属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>渐变属性</title> |
| |
<!-- |
| |
01.线性渐变 |
| |
颜色按照从上到下或者从左到右 等顺序发生的变化 |
| |
02.径向渐变 |
| |
不是按照直线的顺序！ 圆形，椭圆！从一个点向所有的方向混合！ |
| |
--> |
| |
|
| |
<style type="text/css"> |
| |
div{ |
| |
border: 1px solid red; |
| |
height: 200px; |
| |
width: 200px; |
| |
background: linear-gradient(to left top,red,green); |
| |
/* to top :方向 |
| |
red:第1个颜色 |
| |
black:第2个颜色 |
| |
IE浏览器是Trident内核，加前缀：-ms- |
| |
Chrome浏览器是Webkit内核，加前缀：-webkit- |
| |
Safari浏览器是Webkit内核，加前缀：-webkit- |
| |
Opera浏览器是Blink内核，加前缀：-o- |
| |
Firefox浏览器是Mozilla内核，加前缀：-moz- |
| |
*/ |
| |
} |
| |
|
| |
</style> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div></div> |
| |
|
| |
</body> |
| |
</html> |
文本属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title></title> |
| |
|
| |
<style type="text/css"> |
| |
div{ |
| |
height: 50px; |
| |
border: 1px solid red; |
| |
line-height: 50px; |
| |
text-align: center; |
| |
} |
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<div>我想垂直居中</div> |
| |
|
| |
</body> |
| |
</html> |
4、浮动
| 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！ |
| |
这种元素自然排列的方式，我们称之为====》标准文档流！ |
| |
|
| |
浮动 float |
| |
左浮动 |
| |
右浮动 |
| |
浮动之后 会脱离 标准文档流 |
| |
|
| |
溢出 overflow |
| |
overflow: |
| |
01.visible:默认显示 |
| |
02.scroll：以滚动条的形式显示溢出部分 |
| |
03.hidden：溢出部分隐藏 |
| |
04.auto：自动跳转 |
| |
|
| |
我们书写了一个页面，里面有很多块元素，默认排版就是标准文档流！ |
| |
|
| |
如果我们想让ul中的li能在一行显示！ |
| |
01.display |
| |
02.浮动 |
| |
|
| |
只要是元素设置了浮动就会脱离标准文档流! |
| |
如果我们的父元素容不下浮动元素！ |
| |
可以选择是否显示溢出的元素！ |
| |
使用overflow! |
| |
|
| |
clear 清除浮动 |
| |
none 默认 |
| |
left 在左侧不允许浮动 |
| |
right 在右侧不允许浮动 |
| |
both 左右侧都不允许浮动 |
| |
|
| |
|
| |
|
| |
防止父级边框塌陷的方式： |
| |
01.给父级盒子设置宽高！ |
| |
02.在父级盒子的最后一个位置增加div没有内容 |
| |
<div class="clear"></div> |
| |
给这个div增加样式 |
| |
.clear{ |
| |
border: 1px solid black; |
| |
clear: both; |
| |
} |
| |
03.在父盒子中设置溢出处理 |
| |
overflow: hidden; |
| |
04.最终使用的方式 :after伪类 |
| |
在父盒子中增加一个class="clear" |
| |
.clear:after{ |
| |
display: block;/*在#main div的左后一个位置增加一个块元素*/ |
| |
content: ''; /*块元素的内容什么都没有*/ |
| |
clear: both; /*清除浮动*/ |
| |
} |
网页布局
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>网页布局</title> |
| |
<!-- 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！ |
| |
这种元素自然排列的方式，我们称之为====》标准文档流！--> |
| |
</head> |
| |
<body> |
| |
<span>11111</span> |
| |
<span>22222</span> |
| |
<span>33333</span> |
| |
<div>33333</div> |
| |
<span>11111</span> |
| |
<span>22222</span> |
| |
<span>33333</span> |
| |
</body> |
| |
</html> |
浮动属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>浮动属性</title> |
| |
<style type="text/css"> |
| |
#main{/*大盒子*/ |
| |
height: 300px; |
| |
width: 300px; |
| |
border: 1px solid red; |
| |
/*针对于浮动之后 内容溢出的处理 |
| |
overflow: |
| |
01.visible:默认显示 |
| |
02.scroll：以滚动条的形式显示溢出部分 |
| |
03.hidden：溢出部分隐藏 |
| |
04.auto：自动调整 |
| |
*/ |
| |
overflow: scroll; |
| |
} |
| |
|
| |
#a,#b,#c{ /*三个小盒子*/ |
| |
height: 150px; |
| |
width: 110px; |
| |
border: 1px solid red; |
| |
margin: 2px; |
| |
/*浮动之后 会脱离 标准文档流*/ |
| |
float: right; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div id="main"> |
| |
<div id="a">这是第1个盒子</div> |
| |
<div id="b">这是第2个盒子</div> |
| |
<div id="c">这是第3个盒子</div> |
| |
</div> |
| |
</body> |
| |
</html> |
清除浮动属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>浮动属性</title> |
| |
<style type="text/css"> |
| |
#main{/*大盒子*/ |
| |
height: 300px; |
| |
width: 300px; |
| |
border: 1px solid red; |
| |
} |
| |
|
| |
#a,#b,#c{ /*三个小盒子*/ |
| |
height: 50px; |
| |
width: 70px; |
| |
border: 1px solid blue; |
| |
margin: 2px; |
| |
float: left; |
| |
}/*第三个盒子清除左浮动 |
| |
#c{ |
| |
clear: left; |
| |
}*/ |
| |
/*清除第二盒子的左浮动*/ |
| |
#b{ |
| |
clear: left; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div id="main"> |
| |
<div id="a">这是第1个盒子</div> |
| |
<div id="b">这是第2个盒子</div> |
| |
<div id="c">这是第3个盒子</div> |
| |
</div> |
| |
</body> |
| |
</html> |
防止父级边框塌陷
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>防止父级边框塌陷</title> |
| |
|
| |
<style type="text/css"> |
| |
#main{ |
| |
border: 1px solid red; |
| |
/*01.给父级div设置高度 |
| |
height: 500px;*/ |
| |
/* 03. 设置溢出处理 overflow: hidden;*/ |
| |
} |
| |
|
| |
#a,#b,#c{ /*三个小盒子*/ |
| |
border: 1px solid red; |
| |
float: left; /* 01.因为 父级div没有设置高度和宽度！ 子的div右浮动了？脱离文档流 位置没了*/ |
| |
} |
| |
|
| |
/*02. 增加空div 防止父级边框塌陷 |
| |
.clear{ |
| |
border: 1px solid black; |
| |
clear: both; |
| |
}*/ |
| |
|
| |
/*04.推荐使用 after伪类 */ |
| |
.clear:after{ |
| |
display: block;/*在#main div的左后一个位置增加一个块元素*/ |
| |
content: ''; /*块元素的内容什么都没有*/ |
| |
clear: both; /*清除浮动*/ |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="main" class="clear"> |
| |
<div id="a"><img src="../images/b.png"></div> |
| |
<div id="b"><img src="../images/b.png"></div> |
| |
<div id="c"><img src="../images/b.png"></div> |
| |
<!--02. 增加空div 防止父级边框塌陷 <div class="clear"></div> --> |
| |
</div> |
| |
</body> |
| |
</html> |
5、网页动画
css变形：transform
平移 translate（x,y）
translateX
translateY
transform:translate(100px,0)
旋转 rotate(deg) 旋转多少度，不会改变元素的形状
缩放 scale（x,y） 如果只书写了一个值，默认第2个参数等于第一个值
scaleX
scaleY
倾斜 skew（x,y） deg 会改变元素的形状
skewX
skewY
如果说我们想给一个元素同时设置多个 变形属性！
transform： 倾斜 缩放 旋转 ；
多个属性之间使用空格隔开！
我们上面的变形属性都是一瞬间就完成了！没有看到中间过程！
如果想看到！使用css过渡属性 transition==>是一个动画的转换过程！
css过渡属性：
transition:property duration timing-function delay
property:过渡或者动画的css属性,例如color,width,如果想都设置使用all
duration:完成过渡效果需要的时间 s为单位
timing-function: 过渡函数
ease：默认值 速度由快到慢
linear：匀速
ease-in:越来越快
ease-out:越来越慢
ease-in-out:先加速后减速
delay：过渡开始的延迟时间 s为单位
CSS动画
01.创建关键帧
@keyframes 名称(animates){
0%{
css属性：属性值；
}
50%{
css属性：属性值；
}
100%{
css属性：属性值；
}
}
02.怎么调用关键帧
animation：关键帧的名称 3s linear 1s;
CSS3变形
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>css3变形</title> |
| |
|
| |
<style type="text/css"> |
| |
*{ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
li{ |
| |
list-style: none; |
| |
float: left; |
| |
margin-left: 15px; |
| |
background: rgba(230,130,0,0.5); |
| |
border-radius: 5px;/*圆角属性*/ |
| |
} |
| |
|
| |
li:hover{ |
| |
/*transform 变形属性*/ |
| |
/* transform:translate(4px,5px) ;平移*/ |
| |
transform: rotate(90deg) scale(1.5);/* 旋转的同时放大1.5倍*/ |
| |
/* transform: skewY(20deg); |
| |
transform: skewX(20deg); 倾斜属性*/ |
| |
} |
| |
|
| |
a{ |
| |
text-decoration: none; |
| |
} |
| |
|
| |
a:hover{ |
| |
background: rgba(150,230,100,0.5); |
| |
border-radius: 5px; |
| |
} |
| |
|
| |
|
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
<ul> |
| |
<li><a href="#">服装城</a></li> |
| |
<li><a href="#">美妆馆</a></li> |
| |
<li><a href="#">超市</a></li> |
| |
<li><a href="#">全球购</a></li> |
| |
<li><a href="#">闪购</a></li> |
| |
<li><a href="#">团购</a></li> |
| |
<li><a href="#">拍卖</a></li> |
| |
<li><a href="#">金融</a></li> |
| |
</ul> |
| |
</body> |
| |
</html> |
CSS3过渡
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>CSS3过渡</title> |
| |
|
| |
<style type="text/css"> |
| |
*{ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
|
| |
|
| |
div{ |
| |
width: 100px; |
| |
height: 100px; |
| |
background-color: pink; |
| |
text-align: center; |
| |
line-height: 100px; |
| |
transition:all 3s linear 2s; |
| |
/** |
| |
all： transition-property |
| |
3s : transition-duration |
| |
linear: transition-timing-function |
| |
2s: transition-delay |
| |
*/ |
| |
} |
| |
|
| |
div:hover{ |
| |
background-color: red; |
| |
font-size: 25px; |
| |
transform: rotate(90deg) scale(1.5); /*旋转的同时放大1.5倍 这两个效果 一次性到位*/ |
| |
/*transition属性的值： |
| |
01.transition-property:过渡的css属性的名称（color,font-size,background）等！ |
| |
想给多个属性设置过渡效果，使用all！ |
| |
02.transition-duration:过渡效果需要的时间！ |
| |
03.transition-timing-function:设置速度曲线！ |
| |
ease：慢速开始，之后变快！ |
| |
linear：匀速! |
| |
ease-in:慢速开始！ |
| |
ease-out:慢速结束！ |
| |
04.transition-delay:过度效果开始前需要等待的时间！默认 0s! |
| |
*/ |
| |
} |
| |
|
| |
|
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div> |
| |
大家辛苦了！ |
| |
</div> |
| |
</body> |
| |
</html> |
CSS3动画
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>CSS3动画</title> |
| |
<style type="text/css"> |
| |
div{ |
| |
height: 50px; |
| |
width: 50px; |
| |
background: pink; |
| |
/*调用动画*/ |
| |
animation:animates 5s linear 1s 2; |
| |
} |
| |
/*创建 关键帧*/ |
| |
@keyframes animates{ |
| |
0%{ |
| |
width: 0px; |
| |
transform: translate(50px,0); |
| |
} |
| |
25%{ |
| |
width: 25px; |
| |
height: 25px; |
| |
transform: translate(150px,0) rotate(90deg); |
| |
} |
| |
50%{ |
| |
width: 50px; |
| |
height: 50px; |
| |
transform: translate(300px,0) rotate(180deg); |
| |
} |
| |
75%{ |
| |
width: 25px; |
| |
height: 25px; |
| |
transform: translate(150px,0) rotate(270deg); |
| |
} |
| |
100%{ |
| |
width: 50px; |
| |
height: 50px; |
| |
transform: translate(50px,0) rotate(360deg); |
| |
} |
| |
} |
| |
|
| |
|
| |
|
| |
</style> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<div></div> |
| |
</body> |
| |
</html> |
6、表单
常见的表单元素：
文本框 type="text" 默认值
密码框 type="password"
单选按钮 type="radio"
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/>
name属性值必须一致！否则会都能选择！
value属性值必须设置！否则后台无法获取属性值！
后台只能获取一个值！
复选框 type="checkbox"
name属性值必须一致！否则会都能选择！
value属性值必须设置！否则后台无法获取属性值！
后台获取时，需要做非空验证！
单选按钮和 复选框 默认被选中使用checked
列表框 type="select"
默认被选中,在option中使用selected
按钮 type="button" 普通按钮 只是一个按钮 后面学了js可以绑定事件
type="reset" 重置按钮 把表单中所有的元素内容变为初始值
type="submit" 提交按钮 会把表单中的所有内容提交到服务器
多行文本域 type="textarea"
邮箱 type="email"
数字 type="number"
滑块 type="range"
搜索 type="search"
登陆页面
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>登录页面</title> |
| |
<!-- |
| |
form表单的意义： |
| |
01.获取用户的输入 ==》收集数据 |
| |
02.将用户的输入发送到服务器===》与服务器产生交互 |
| |
|
| |
|
| |
action:我们获取完用户的输入之后 提交到的服务器地址！ |
| |
#:代表当前页面！ |
| |
也可以不书写！ |
| |
|
| |
method：我们提交的方式！ |
| |
可以理解成 我们 |
| |
普通人 说话 get |
| |
和 |
| |
聋哑人打手语 post |
| |
get和post的区别 安不安全 相对而言 |
| |
|
| |
01.get会在url地址栏中显示我们输入的数据 |
| |
post会在请求头中显示用户的输入 |
| |
F12之后选择 network 向下拉到页面的最底部 有一个 form data |
| |
这里有post请求的数据！ |
| |
|
| |
02.http协议对get和post请求都没有长度限制 |
| |
如果对url的长度进行限制只有两种原因： |
| |
001.浏览器自身的设置 |
| |
002.服务器的设置 |
| |
|
| |
|
| |
input标签中的常用属性： |
| |
name：可以理解成标记！ 用于服务器获取我们这个表单中的元素值！ 必须的！ |
| |
value: 用户在页面中输入的值！ 我们一般可以不写！ |
| |
maxlength:文本框的最大字节数量 |
| |
size:表单元素的初始长度！ |
| |
|
| |
比如说：<input type="text" name="userName" value=""> |
| |
那么再我们点击注册按钮的时候， |
| |
会提交到服务器的数据是 userName="value的属性值" |
| |
服务器根据 name的属性值，获取value的属性值! |
| |
placeholder:占位符，提示语！不是value的值！ 只有在value属性值为空的时候显示！ |
| |
--> |
| |
</head> |
| |
<body> |
| |
|
| |
<form action="#" method="post"> |
| |
昵称: <input type="text" name="userName" size="100" placeholder="请输入用户名" maxlength="50"><br/> |
| |
密码: <input type="password" name="pwd"><br/> |
| |
性别:<input type="radio" name="sex" value="男" checked>男 |
| |
<input type="radio" name="sex" value="女">女<br/> |
| |
爱好:<input type="checkbox" name="love" value="足球" checked>足球 |
| |
<input type="checkbox" name="love" value="乒乓球">乒乓球 |
| |
<input type="checkbox" name="love" value="羽毛球">羽毛球 |
| |
<input type="checkbox" name="love" value="篮球">篮球<br/> |
| |
|
| |
民族:<select name="nation" size="1"> |
| |
<option value="" >请选择</option> |
| |
<option value="汉族" selected>汉族</option> |
| |
<option value="满族">满族</option> |
| |
<option value="维吾尔族" >维吾尔族</option> |
| |
</select><br/> |
| |
|
| |
协议:<textarea name="protocol" rows="20" cols="20"> |
| |
xxx xxx |
| |
xxx xxx |
| |
xxx xxx |
| |
</textarea> |
| |
<br/> |
| |
文件上传： <input type="file"> |
| |
选择颜色： <input type="color"> |
| |
日期： <input type="date"> |
| |
时间： <input type="time"> |
| |
邮箱:<input type="email" name="email"><br/> |
| |
数字:<input type="number" name="num" max="50" min="1"><br/> |
| |
滑块:<input type="range" max="200" value="150" step="50"><br/> |
| |
搜索:<input type="search" name="search"><br/> |
| |
QQ只读:<input name="qq" value="501804292" readonly><br/> |
| |
隐藏域: <input type="hidden" name="hidden" value="a"><br/> |
| |
|
| |
|
| |
<label> 密码: <input type="password" name="pwd"></label> |
| |
<label for="pwd"> 密码: <input type="password" name="pwd" id="pwd"></label> |
| |
<br/> |
| |
|
| |
正则验证手机号：<input name="phoneNum" required pattern="^1[34578]\d{9}$"> |
| |
|
| |
<input name="userName" required placeholder="必填项"> |
| |
<input type="button" value="普通"> |
| |
<input type="reset" value="重置"> |
| |
<input type="submit" value="注册" disabled> <!-- disabled 按钮禁用--> |
| |
|
| |
<button type="submit" >button</button> <!-- 默认就是提交按钮，没有value属性--> |
| |
|
| |
</form> |
| |
|
| |
|
| |
</body> |
| |
</html> |
7、初识CSS
CSS(Cascading Style Sheet) 级联（层叠）样式表！ 网页样式的设计！
96年 css1.0
04年 css2.1
10年 css3.0
优势：
01.页面和样式的分离
02.便于我们修改和使用
03.多个页面的应用，css样式可以复用
04.层叠，一个元素可以多次设置样式！
05.页面压缩
设置HTML文件样式的计算机语言！
可以对网页中的文字，颜色，字体大小，边框，背景，高度，网页定位等样式的设定！
例子：
之前设计表格的时候！ 每一个单元格都是td！
我们想让每个td的内容都居中显示？？？ 我们怎么做？？
在每个td上 都加上align="center"! 但是麻烦！
现在 我们可以通过 css的选择器 来统一给整个页面中的所有td设置样式！
怎么设置呢？？
td{ //页面中所有的td内容 水平居中！
text-align:center;
}
CSS的语法规则：
选择器｛ //开发者模式 便于阅读
属性1：值1;
属性2：值2;
属性3：值3; //最后一个;可以省略不写！但是不建议省略！
｝
选择器｛属性1：值1;属性2：值2;属性3：值3;｝ //生产者模式 减少内存
HTML中引入CSS样式的3种方式：
例子：
假如我们是一个包工头，现在需要对我们已经建好的楼房进行装修！
两种选择：
01.自己装修 == 》行内样式 <a href="#" style="color:red">百度</a>
02.别人装修
001.自己人装修 == 》内部样式
002.其他人装修 == 》外部样式
如果说自己人和其他人以及你自己都想干装修！
肯定是自己说了算！！！！
css样式的优先级：
行内样式 > 内部样式 > 外部样式
导入外部样式的两种方式：
01.链接式 <link rel="stylesheet" href="外部文件位置" type="text/css">
02.导入式
<style type="text/css">
@import "外部文件位置";
</style>
链接式的导入式的区别：
01.链接式的link属性XHTML @import 属于css2.1
02.链接式优先加载css样式，再加载页面中的html内容！
03.@import先加载页面中的html内容，再加载css样式！
04.@import存在浏览器兼容性问题！
css中最重要就是 选择器：
选择器：
1.基本选择器
01.标签选择器 p{} a{} div{}
02.类选择器 .a 获取页面中class属性值是a的元素 可以有N个
<span class="a">第一个span标签</span>
<span class="a">第二个span标签 </span>
<span class="a">第三个span标签</span>
<div class="a">第1个div标签</span>
<div class="a">第2个div标签</span>
03.id选择器 #a 获取页面中id属性值是a的元素 只能有1个
<div id="a"></div>
2.高级选择器
01.交集选择器
02.并集选择器
03.层次选择器
01.后代选择器
02.子选择器
03.相邻兄弟选择器 之后的一个兄弟元素
04.通用兄弟选择器 之后的所有兄弟元素
04.结构伪类选择器 *****
05.属性选择器 [属性=属性值]
标签选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>标签选择器</title> |
| |
<!-- 内部样式设置 style标签应该写在head标签中 |
| |
<style type="text/css"> |
| |
h1{ /* h1 页面中所有的h1标签*/ |
| |
color: red; /*color 属性 red 属性值*/ |
| |
font-size: 50px; |
| |
} |
| |
</style> 我们css的优势之一是 网页和样式的分离--> |
| |
|
| |
<!-- 链接式 |
| |
<link rel="stylesheet" type="text/css" href="css/first.css">--> |
| |
|
| |
<!--导入式--> |
| |
<style type="text/css"> |
| |
@import "css/first.css"; |
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<!--需求：让页面中所有的h1标签 字体颜色为 红色 字体大小50px--> |
| |
<h1 style="color: pink">这是1级标题</h1> <!--验证优先级--> |
| |
<h1>这是1级标题</h1> |
| |
<h1>这是1级标题</h1> |
| |
|
| |
|
| |
|
| |
|
| |
</body> |
| |
</html> |
类选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>类选择器</title> |
| |
<!--需求： 让页面中的class属性值为box的盒子颜色变成红色--> |
| |
<style type="text/css"> |
| |
.box{ /*.box 类选择器 选取页面中的class属性值为box的元素*/ |
| |
color:red; |
| |
} |
| |
|
| |
/* 我想让2 3 盒子也有这个样式*/ |
| |
.boxSize{ |
| |
font-size: 52px; |
| |
} |
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<div class="boxSize">这是第1个盒子</div> |
| |
<!--说明这个div同时具有两个class样式--> |
| |
<div class="box boxSize">这是第2个盒子</div> |
| |
<div class="box boxSize">这是第3个盒子</div> |
| |
<div class="box">这是第4个盒子</div> |
| |
|
| |
</body> |
| |
</html> |
id选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>id选择器</title> |
| |
<!--在一个页面中id属性值相同的而只能有一个！ 页面id唯一！--> |
| |
|
| |
<style type="text/css"> |
| |
/*给id="box2"的元素设置 颜色为 红色*/ |
| |
#box2{ |
| |
color: red; |
| |
} |
| |
/*给id="box3"的元素设置 字体大小 50px*/ |
| |
#box3{ |
| |
font-size: 50px; |
| |
} |
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div>这是第1个盒子</div> |
| |
<div id="box2">这是第2个盒子</div> |
| |
<div id="box3">这是第3个盒子</div> |
| |
<div>这是第4个盒子</div> |
| |
</body> |
| |
</html> |
选择器的优先级
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>选择器的优先级</title> |
| |
<!--需求： |
| |
分别使用 标签，类和id三种选择器 设置div的样式 |
| |
--> |
| |
<style type="text/css"> |
| |
div{ |
| |
color: red; |
| |
} |
| |
.myDiv{ |
| |
color: black; |
| |
} |
| |
#name{ |
| |
color: pink; /* 页面显示的是 粉色*/ |
| |
} |
| |
/* |
| |
id选择器 > 类选择器 > 标签选择器 |
| |
*/ |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div id="name" class="myDiv">开始验证优先级</div> |
| |
|
| |
</body> |
| |
</html> |
| |
元素样式的继承性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>元素的继承性</title> |
| |
<!-- 需求 ： |
| |
给页面中id为first的div设置样式 |
| |
给页面中id为second的div设置样式 |
| |
|
| |
--> |
| |
|
| |
<style type="text/css"> |
| |
#first{ |
| |
color: red; |
| |
} |
| |
|
| |
#second{ |
| |
color: pink; |
| |
} |
| |
#third{ |
| |
color: greenyellow; |
| |
} |
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="first"> 第一个 |
| |
<div id="second"> 第二个 |
| |
<div id="third"> |
| |
第三个 |
| |
</div> |
| |
</div> |
| |
</div> |
| |
</body> |
| |
</html> |
并集选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>并集选择器</title> |
| |
<!-- 需求 |
| |
给id="mySpan1" ，class="mySpan2" 标签是div的所有元素 |
| |
设置相同的样式！ |
| |
--> |
| |
<style type="text/css"> |
| |
/* 多个选择器都具有的样式. 每个选择器之间使用,隔开 |
| |
多个选择器没有顺序 |
| |
*/ |
| |
#mySpan1,.mySpan2,div{ |
| |
color:red; |
| |
} |
| |
</style> |
| |
|
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<div>第1个盒子</div> |
| |
<div>第2个盒子</div> |
| |
<span id="mySpan1">这是第1个span</span> |
| |
<span class="mySpan2">这是第2个span</span> |
| |
</body> |
| |
</html> |
交集选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>交集选择器</title> |
| |
<!-- 交集选择器的规则 |
| |
01：标签选择器+id选择器 |
| |
02：标签选择器+类选择器 |
| |
03.多个选择器直接连着写，不需要有符号隔开 |
| |
必须标签选择器在前！--> |
| |
|
| |
|
| |
<style type="text/css"> |
| |
/* 需求： |
| |
页面中 class="mySpan2" 并且 标签是div的元素 设置样式 |
| |
*/ |
| |
div.mySpan2{ |
| |
color: red; |
| |
} |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div>第1个盒子</div> |
| |
|
| |
<div class="mySpan2">第2个盒子</div> |
| |
|
| |
<span id="mySpan1">这是第1个span</span> |
| |
|
| |
<span class="mySpan2">这是第2个span</span> |
| |
</body> |
| |
</html> |
后代选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>后代选择器</title> |
| |
<!-- 需求： |
| |
改变body中 所有span元素的样式 |
| |
后代选择器 中间使用空格隔开 |
| |
包含子和孙子等所有的子孙节点 |
| |
--> |
| |
<style type="text/css"> |
| |
body span{ |
| |
color: red; |
| |
} |
| |
</style> |
| |
|
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div> 儿子div1 |
| |
<span>相对于body来说是孙子span1</span> |
| |
</div> |
| |
|
| |
<div>儿子div2 |
| |
<span>相对于body来说是孙子span2</span> |
| |
</div> |
| |
|
| |
|
| |
<span>相对于body来说是儿子span1</span> |
| |
<span>相对于body来说是儿子span2</span> |
| |
|
| |
|
| |
</body> |
| |
</html> |
子选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>子选择器</title> |
| |
<!-- 需求： |
| |
改变body中 所有子元素是span的样式 |
| |
只包含子节点 |
| |
--> |
| |
<style type="text/css"> |
| |
body>span{ |
| |
color: red; |
| |
} |
| |
/*选择body中子元素是div的节点，如果div中还有其他的节点，也会随之改变*/ |
| |
body>div{ |
| |
color: red; |
| |
} |
| |
</style> |
| |
|
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div> 儿子div1 |
| |
<span>相对于body来说是孙子span1</span> |
| |
</div> |
| |
|
| |
<div>儿子div2 |
| |
<span>相对于body来说是孙子span2</span> |
| |
</div> |
| |
|
| |
|
| |
<span>相对于body来说是儿子span1</span> |
| |
<span>相对于body来说是儿子span2</span> |
| |
|
| |
|
| |
</body> |
| |
</html> |
相邻兄弟选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>相邻兄弟节点选择器</title> |
| |
<!-- 需求： |
| |
改变id=""second"的div元素后面第一个兄弟节点的样式 |
| |
--> |
| |
<style type="text/css"> |
| |
#second+span{ |
| |
color: red; |
| |
} |
| |
</style> |
| |
|
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div> 儿子div1 |
| |
<span>相对于body来说是孙子span1</span> |
| |
</div> |
| |
|
| |
<div id="second">儿子div2 |
| |
<span>相对于body来说是孙子span2</span> |
| |
</div> |
| |
|
| |
|
| |
<span>相对于body来说是儿子span1</span> |
| |
<span>相对于body来说是儿子span2</span> |
| |
|
| |
|
| |
</body> |
| |
</html> |
通用兄弟选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>通用兄弟选择器</title> |
| |
<!-- 需求： |
| |
改变id=""second"的div元素后面所有兄弟节点的样式 |
| |
--> |
| |
<style type="text/css"> |
| |
#second~span{ |
| |
color: red; |
| |
} |
| |
</style> |
| |
|
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div> 儿子div1 |
| |
<span>相对于body来说是孙子span1</span> |
| |
</div> |
| |
|
| |
<div id="second">儿子div2 |
| |
<span>相对于body来说是孙子span2</span> |
| |
</div> |
| |
|
| |
|
| |
<span>相对于body来说是儿子span1</span> |
| |
<span>相对于body来说是儿子span2</span> |
| |
<span>相对于body来说是儿子span3</span> |
| |
<span>相对于body来说是儿子span4</span> |
| |
|
| |
|
| |
</body> |
| |
</html> |
结构伪类选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>结构伪类选择器</title> |
| |
<!-- 不需要在节点上新增额外的id或者class属性 ，需要我们知道节点的位置（下标）--> |
| |
<style type="text/css"> |
| |
/*01.改变ul中第一个li的样式 |
| |
ul li:first-child{ |
| |
color: red; |
| |
}*/ |
| |
/*02.改变ul中最后一个li的样式 |
| |
ul li:last-child{ |
| |
color: red; |
| |
}*/ |
| |
|
| |
/*03.改变第3个div的样式 |
| |
body中如果第3个元素是div就改变样式， |
| |
否则都没有效果！ 着重于顺序！ |
| |
body div:nth-child(3){ |
| |
color: red; |
| |
}*/ |
| |
/*04.改变页面中第2个span元素的样式 |
| |
nth-of-type： 先查询类型 再看顺序 |
| |
body span:nth-of-type(2){ |
| |
color: red; |
| |
} |
| |
|
| |
body div:nth-of-type(3){ |
| |
color: red; |
| |
} |
| |
*/ |
| |
</style> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div>div1</div> |
| |
<div>div2</div> |
| |
<span>span1</span> |
| |
<div>div3</div> |
| |
<span>span2</span> |
| |
|
| |
<ul> |
| |
<li>第1个列表的第1项</li> |
| |
<li>第1个列表的第2项</li> |
| |
<li>第1个列表的第3项</li> |
| |
<li>第1个列表的第4项</li> |
| |
</ul> |
| |
<ul> |
| |
<li>第2个列表的第1项</li> |
| |
<li>第2个列表的第2项</li> |
| |
<li>第2个列表的第3项</li> |
| |
<li>第2个列表的第4项</li> |
| |
</ul> |
| |
</body> |
| |
</html> |
属性选择器
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>属性选择器</title> |
| |
|
| |
<style type="text/css"> |
| |
/* 01.改变元素id="first"的样式 |
| |
div[id="first"]{ |
| |
color: red; |
| |
}*/ |
| |
/*02.改变所有id属性元素 |
| |
div[id]{ |
| |
color: red; |
| |
}*/ |
| |
/*03.改变所有id属性值以h开头元素 |
| |
div[id^="h"]{ |
| |
color: red; |
| |
}*/ |
| |
/*04.改变所有id属性值以a结尾元素 |
| |
div[id$="a"]{ |
| |
color: red; |
| |
}*/ |
| |
/*04.改变所有id属性值包含i的元素 |
| |
div[id*="i"]{ |
| |
color: red; |
| |
}*/ |
| |
|
| |
|
| |
</style> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<div id="first">第1个</div> |
| |
<div id="haha">第2个</div> |
| |
<div id="heihei">第3个</div> |
| |
<div>第4个</div> |
| |
<div style="color: red;font-size: 50px">第5个</div> |
| |
</body> |
| |
</html> |
8、盒子模型
盒子模型 div+css3
边框 border
border:1px solid red;
border-color:边框颜色 上右下左四个边
border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-width:边框粗细 上右下左四个边 thin medium thick 可以是像素
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width:5px 10px ; 上下为5px 左右为10px
border-width:5px 10px 20px ; 上为5px 下为20px 左右为10px
border-style:边框样式
dashed 常用
solid 常用
none
hidden
dotted
double
简写：
border:1px solid red; 规范写法
粗细 样式 颜色！
margin:外边距
margin-top
margin-right
margin-bottom
margin-left
margin:5px 10px;上下外边距为5px 左右外边距为10px
margin:0px auto; 网页中的盒子居中显示！
前提：
01.必须是块元素
02.固定宽度
padding:内边距
padding-top
padding-right
padding-bottom
padding-left
padding:5px 10px;上下内边距为5px 左右内边距为10px
盒子模型总尺寸=内容宽度+padding+border+margin
box-sizing:设置盒子模型的大小规则
content-box:盒子的总尺寸
border-box:盒子的宽度或者高度 等于 内容的宽度或者高度
inherit:继承父盒子
圆角属性
border-radius:左上 右上 右下 左下
盒子阴影
box-shadow:inset 10px 10px 1px pink;
inset:阴影类型 内 外
x轴
y轴
阴影半径
阴影颜色
边框border
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>边框border</title> |
| |
|
| |
<!-- |
| |
border的常用属性： |
| |
01. 设置边框的颜色 border-color |
| |
02. 设置边框的粗细 border-width |
| |
03. 设置边框的样式 border-style |
| |
|
| |
|
| |
--> |
| |
|
| |
<style type="text/css"> |
| |
/*设置盒子的宽高*/ |
| |
div{ |
| |
height: 50px; |
| |
width: 50px; |
| |
/* 设置盒子的上边框 |
| |
border-top-color: red; |
| |
border-top-width: 1px; |
| |
border-top-style: dashed; |
| |
*/ |
| |
/*同时设置四个边框 |
| |
border-color: red; |
| |
border-width: 2px; |
| |
border-style: dashed; |
| |
*/ |
| |
/*简写方式 虽然没有顺序 但是我们推荐使用 先 粗细 再 样式 最后 颜色！*/ |
| |
border: 1px solid red; |
| |
} |
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div></div> |
| |
</body> |
| |
</html> |
外边距margin
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>外边距margin</title> |
| |
|
| |
<style type="text/css"> |
| |
*{ /*去掉网页中所有元素的内外边距*/ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
|
| |
|
| |
div{ |
| |
/*设置盒子的宽高*/ |
| |
height: 150px; |
| |
width: 150px; |
| |
/*设置盒子的边框*/ |
| |
border: 1px solid red; |
| |
/*设置外边距 元素以左上角为准 |
| |
margin-top: 50px; |
| |
margin-left: 50px; |
| |
margin-right: 50px; |
| |
margin-bottom: 50px;*/ |
| |
/*设置上下20px 左右50px |
| |
设置边距的时候 顺序 是 上右下左！ |
| |
margin: 20px 50px;*/ |
| |
margin: 20px; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div><img src="../images/b.png" alt="这是一个图片"></div> |
| |
<div><img src="../images/b.png" alt="这是一个图片"></div> |
| |
</body> |
| |
</html> |
内边距padding
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>内边距padding</title> |
| |
|
| |
<style type="text/css"> |
| |
*{ /*去掉网页中所有元素的内外边距*/ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
/*设置大盒子*/ |
| |
#bigBox{ |
| |
/*设置盒子的宽高*/ |
| |
height: 200px; |
| |
width: 200px; |
| |
/*设置盒子的边框*/ |
| |
border: 1px solid red; |
| |
/*padding-left:5px ;设置小盒子距离大盒子的左内边距*/ |
| |
} |
| |
/*设置小盒子*/ |
| |
#image{ |
| |
/*设置盒子的宽高*/ |
| |
height: 150px; |
| |
width: 150px; |
| |
/*设置盒子的边框*/ |
| |
border: 1px dashed pink; |
| |
margin-left: 5px; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div id="bigBox"> <!--大盒子--> |
| |
<div id="image"> <!--小盒子--> |
| |
<img src="../images/b.png" alt="这是一个图片"><!--内容--> |
| |
</div> |
| |
</div> |
| |
</body> |
| |
</html> |
网页居中
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>网页居中</title> |
| |
<!-- |
| |
网页居中的必要条件： |
| |
01.必须是一个块元素 |
| |
02.必须设置固定宽度 |
| |
--> |
| |
<style type="text/css"> |
| |
*{ /*去掉网页中所有元素的内外边距*/ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
/*设置大盒子*/ |
| |
div{ |
| |
height: 200px; /*设置盒子的宽高*/ |
| |
width: 200px; |
| |
/*设置盒子的边框*/ |
| |
border: 1px solid red; |
| |
/*通过外边距设置 居中*/ |
| |
margin:0px auto; |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div> <!--大盒子--> |
| |
</div> |
| |
|
| |
</body> |
| |
</html> |
盒子的尺寸boxsizing
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>盒子的尺寸boxsizing</title> |
| |
|
| |
<style type="text/css"> |
| |
*{ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
#father{/* 大盒子*/ |
| |
width: 100px; |
| |
height: 100px; |
| |
border: 1px solid red; |
| |
box-sizing: border-box; |
| |
} |
| |
|
| |
#son{/* 小盒子*/ |
| |
width: 40px; |
| |
height: 40px; |
| |
border: 1px solid yellowgreen; |
| |
/* box-sizing: content-box;默认值。显示盒子总尺寸*/ |
| |
/* box-sizing: border-box; 盒子的高度和宽度就是内容的高度和宽度*/ |
| |
/*如果大盒子 设置了 盒子的尺寸 我们小盒子 可以适应大盒子尺寸*/ |
| |
box-sizing: inherit; |
| |
} |
| |
|
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="father"> |
| |
<div id="son"></div> |
| |
</div> |
| |
</body> |
| |
</html> |
圆角属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>圆角属性</title> |
| |
|
| |
<style type="text/css"> |
| |
div{ |
| |
height: 50px; |
| |
width: 50px; |
| |
border: 1px solid red; |
| |
|
| |
border-radius: 5px 20px;/* 左上 右下 5px 右上 左下 20px*/ |
| |
/*设置圆角属性 简写 默认是 左上 右上 右下 左下 顺时针方向 |
| |
border-radius: 5px;*/ |
| |
} |
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<div></div> |
| |
</body> |
| |
</html> |
设置半圆
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>设置半圆</title> |
| |
<style type="text/css"> |
| |
div{ |
| |
background: pink; |
| |
margin: 20px; |
| |
} |
| |
div:nth-of-type(1){ |
| |
width: 100px; |
| |
height: 50px; |
| |
border-radius: 50px 50px 0 0;/* 左上和右上*/ |
| |
} |
| |
|
| |
div:nth-of-type(2){ |
| |
width: 100px; |
| |
height: 50px; |
| |
border-radius: 0 0 50px 50px ;/* 左下和右下*/ |
| |
} |
| |
div:nth-of-type(3){ |
| |
width: 50px; /*高度和宽度需要调整*/ |
| |
height: 100px; |
| |
border-radius:50px 0 0 50px ;/* 左上和左下*/ |
| |
} |
| |
div:nth-of-type(4){ |
| |
width: 50px; |
| |
height: 100px; |
| |
border-radius: 0 50px 50px 0 ;/* 右上和右下*/ |
| |
} |
| |
|
| |
|
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div></div> |
| |
<div></div> |
| |
<div></div> |
| |
<div></div> |
| |
</body> |
| |
</html> |
设置圆形和扇形
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>设置圆形和扇形</title> |
| |
<style type="text/css"> |
| |
div{ |
| |
background: pink; |
| |
margin: 20px; |
| |
} |
| |
/*设置圆形*/ |
| |
div:nth-of-type(1){ |
| |
width: 50px; |
| |
height: 50px; |
| |
border-radius: 50px; |
| |
} |
| |
|
| |
div:nth-of-type(2){ |
| |
width: 50px; |
| |
height: 50px; |
| |
border-radius: 50px 0 0 0;/* 左上*/ |
| |
} |
| |
|
| |
div:nth-of-type(3){ |
| |
width: 50px; |
| |
height: 50px; |
| |
border-radius: 0 50px 0 0;/* 右上*/ |
| |
} |
| |
|
| |
div:nth-of-type(4){ |
| |
width: 50px; |
| |
height: 50px; |
| |
border-radius: 0 0 50px 0;/* 右下*/ |
| |
} |
| |
|
| |
div:nth-of-type(5){ |
| |
width: 50px; |
| |
height: 50px; |
| |
border-radius: 0 0 0 50px;/* 左下*/ |
| |
} |
| |
|
| |
|
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div></div> |
| |
<div></div> |
| |
<div></div> |
| |
<div></div> |
| |
<div></div> |
| |
</body> |
| |
</html> |
盒子阴影
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>盒子阴影</title> |
| |
<style type="text/css"> |
| |
div{ |
| |
height: 50px; |
| |
width: 50px; |
| |
border: 1px solid red;/* |
| |
box-shadow: 10px 10px 1px pink; 外阴影*/ |
| |
box-shadow:inset 10px 10px 10px pink; /*内阴影*/ |
| |
} |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div></div> |
| |
</body> |
| |
</html> |
9、定位
定位： position
1.static 默认值 没有定位
2.relative 相对定位，参照物是自身原来的位置
01. 参照物是自身原来的位置
02. 不会脱离标准文档流，对父级盒子和相邻的盒子不会产生影响
03. 自身之前的位置会保留
3.absolute 绝对定位，参照物是当前盒子的父级
01.参照物是当前盒子的父级
02.父级必须是设置了定位（一般父级都是相对定位）
03.如果找不到祖先元素，以浏览器为参照物
04.会脱离标准文档流，
如果相邻的盒子没有设置定位属性，会产生影响，
如果相邻的盒子设置定位属性，不会产生影响，
05.自身之前的位置不会保留
4.fixed 固定定位，参照物是浏览器
顺序离我们最近的是
fixed > relative > absolute > static
z-index:
设置相同层面的元素 堆叠顺序 默认值 是0 值越大 离我们越近
定位属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>定位属性</title> |
| |
<!-- |
| |
position |
| |
01.static ：默认，没有定位！ 离我们最远 |
| |
02.absolute：绝对定位 |
| |
001.脱离了标准文档流 |
| |
002.位置发生变化之后，位置不会被保留!后续元素会顶替之前的位置 |
| |
003.参照离这个设置了定位属性的最近的父级元素！如果没有 就以浏览器为准 |
| |
03.relative：相对定位 |
| |
001.相对于自身原来的位置 |
| |
002.没有脱离标准文档流 |
| |
003.位置发生变化之后，位置会被保留 |
| |
04.fixed：固定定位 |
| |
相对于浏览器 |
| |
--> |
| |
|
| |
<style type="text/css"> |
| |
*{ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
|
| |
div{ |
| |
height: 50px; |
| |
width: 50px; |
| |
} |
| |
#box{ /*大盒子*/ |
| |
height: 300px; |
| |
width: 300px; |
| |
border: 2px solid red; |
| |
} |
| |
|
| |
|
| |
|
| |
#box div:nth-of-type(1){ |
| |
background: red; |
| |
/*绝对定位*/ |
| |
position: absolute; |
| |
left: 20px; /* 距离父级元素 左边20px*/ |
| |
} |
| |
|
| |
#box div:nth-of-type(2){ |
| |
background: orange; |
| |
position:static ;/*默认值*/ |
| |
} |
| |
|
| |
#box div:nth-of-type(3){ |
| |
background: pink; |
| |
/*相对定位*/ |
| |
position: relative; |
| |
bottom:20px; |
| |
} |
| |
|
| |
|
| |
|
| |
#box div:nth-of-type(4){ |
| |
background: red; |
| |
/*固定定位*/ |
| |
position: fixed; |
| |
left: 30px; |
| |
top: 30px; |
| |
} |
| |
|
| |
#box div:nth-of-type(5){ /*如果两个盒子设置的定位属性相同，默认按照html结构元素顺序 后面会覆盖前面*/ |
| |
background: greenyellow; |
| |
/*固定定位 |
| |
position: fixed; |
| |
left: 30px; |
| |
top: 30px;*/ |
| |
} |
| |
|
| |
/*层级关系 |
| |
固定定位 > 相对定位 > 绝对定位 > 默认static |
| |
*/ |
| |
|
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
<div id="box"> |
| |
<div>第1个盒子</div> |
| |
<div>第2个盒子</div> |
| |
<div>第3个盒子</div> |
| |
<div>第4个盒子</div> |
| |
<div>第5个盒子</div> |
| |
</div> |
| |
</body> |
| |
</html> |
z-index属性
| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>z-index属性</title> |
| |
|
| |
<style type="text/css"> |
| |
*{ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
li{ |
| |
list-style: none; |
| |
} |
| |
#content{ |
| |
width: 350px; |
| |
height: 300px; |
| |
border: 1px solid red; |
| |
margin: 0px auto; |
| |
} |
| |
|
| |
.tipBg{ /*带背景的*/ |
| |
background: gray; /*可以使用 rgba*/ |
| |
opacity: 0.5; |
| |
filter: alpha(opacity=50);/*解决低版本IE兼容性*/ |
| |
} |
| |
.tipBg,.tipText{ /*都需要跑到 图片上去*/ |
| |
position: absolute; /* 都是绝对定位*/ |
| |
height: 25px; |
| |
line-height: 25px; |
| |
width: 331px; ; |
| |
top: 102px; |
| |
} |
| |
|
| |
.tipText{ |
| |
z-index:1;/*设置相同层面的元素 堆叠顺序 默认值 是0 值越大 离我们越近*/ |
| |
text-align: center; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="content"> |
| |
<ul> |
| |
<li><img src="../images/maple.jpg" alt="香山红叶" /></li> |
| |
<li class="tipText">京秋魅力•相约共赏香山红叶</li> |
| |
<li class="tipBg"></li> |
| |
<li>时间：11月16日 星期六 8:30</li> |
| |
<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li> |
| |
</ul> |
| |
</div> |
| |
</body> |
| |
</html> |
