HTML学习笔记-程序员宅基地
技术标签： html
一、HTML基本语法
1、<常规标记>也叫双标记
<标记></标记>
<标记 属性=“属性值” 属性=“属性值”></标记>
标记也可以叫标签或叫元素
例如：<head></head>
2、空标记也叫单标记
<标记/>
<标记 属性=“属性值”/>
例如：<br/>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<center>
锣鼓喧天，<br/>黄金万两。
</center>
</body>
</html>常用标签
1、文本标题（h1-h6）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题H3</h3>
<h4>四级标题H4</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
文本
</body>
</html>2、段落文本(p)
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
3、换行(br)
<br />
换行是一个空标记(强制换行)
4、水平线
<hr />空标记
5、加粗有两个标记(推荐strong)
<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本
6、倾斜有两个标记(推荐em)
<em>强调文本</em>
<i>倾斜文本</i>
7、删除线有两个标记(推荐del)
<s>文本</s>删除线
<del>文本</del>删除线
8、扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“秦始皇”穿越街头推广反诈APP：下载会被士兵“拖走”</title>
</head>
<body>
<h1>“秦始皇”穿越街头推广反诈APP：下载会被士兵“拖走”</h1>
<p>
近日，陕西西安，一段“秦始皇”<sup>[1]</sup>在兵马俑<sub>[2]</sub>广场宣传国家反诈中心APP的视频走红。
<br/>
<strong>
由演员扮演的“秦始皇”随机问路人是否下载反诈APP，未下载者会被士兵“拖走”
</strong>
</p>
<p>
视频策划方临潼区融媒体相关负责人称，希望利用“秦始皇”这个IP，
以地域文化和诙谐幽默的方式，<br/><strong><em>传递正能量</em></strong>
</p>
<p>
此前，他们还策划过秦始皇乘坐地铁9号线、秦始皇邀您一起打疫苗等几部短剧，
累计播放量已经超过3个亿。
</p>
<p>
国家反诈中心APP是由公安部推出的一款手机防骗软件，集资源整合、情报研判、侦查指挥为一体，在打击、防范、治理电信网络诈骗等新型违法犯罪中发挥着重要作用。
</p>
<p>
门票不要<s>998</s>，不要<del>99</del>，只要<b><u>9.9</u></b>
</p>
<hr/>
</body>
</html>百度词条案例
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML5</h1>
<p>
本词条由<strong>“科普中国"科学百科词条编写与应用工作项目</strong>审核。
</p>
<p>
HTML5是构建Web内容的一种语言猫述方式，HTML5是联网的下一代标准，
是<strong>构建以及呈现互联网容的一种语言方式</strong>，被认为是互联网的孩心技术之一。
HTML产生于1990年，1997年HTML4成为互联网际准，并广泛应用于互联网应用的开发。
</p>
<p>
HTML5是Web中核心语言HTML的范，<strong><em>用户使用任何手段进行网项时看到的
内原本都是HTML格的</em></strong>，在测器中通过一些技术处理将其转换成为了可
识的信息，HTML5从前<del>HTML4.01</del>的基础上进行了一定的改进，虽然技术人
员在开发过程中可能不会将这些新技术投入应用，
但是对于该种技术的新特性，网开发技术人员是必须要有所了解的。<sup>[1-2]</sup>
</p>
<h2>Html5的新特性</h2>
<hr/>
<p>
HTML5将Web带入一个成熟的应用平台，在这个平台上，<strong>视频、音频、图像、
动画以及与设备的交互</strong>都进行了规范。
</p>
<h3>智能表单</h3>
<p>
表单是实现用户与页面后合交互主要组成部分，HTML5在表单的设计上功能便加强大，
input类型和属性的多样性大大增了HTML可表达的表单形式，再加上新增加的一些表单
标签，使得原本需要javaScript来实现的控件可以直接使用HTML5的表单来实现：
一些如内容提示、焦点处理、数验证等功能，也可以通过THML5的智能表单属性标签
来完成。<sup>[6]</sup>
</p>
<h3>多媒体</h3>
<p>
HTML5最大特色之一就是支持音频视频，在通过增加了audio、video两标签来实现
对多媒体中的音频、视频使用的 支持，只要在Web网页中入这两个标签，
而无需第三方播件如Flash就可以实现音视频的播放功能。HTML5对音频、视频
文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载度，扩展了互联
网多媒体技术的发展空间.
</p>
</body>
</html>hr属性的应用
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr color="green">
<hr color="blue">
<hr color="red">
<hr color="green" width="300">
<hr color="green" width="600">
<hr color="red" width="300" align="left">
<hr color="red" width="300" align="right">
<hr/>
<hr noshade>
<hr noshade="noshade">
</body>
</html>特殊符号
| 特殊符号 |
解释 |
| 尖角号 |
<左尖角号 |
| >右尖角号 |
|
| 空格 |
该空格占据宽度受[字体] 影响明显而强烈 |
| 占据的宽度正好是1个中文宽度且基本上不受字体影响 |
|
| 版权 |
Ⓒ |
| 商标 |
TM（上标） Ⓡ |
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
上一节中讲的内容是hr，用法是：<hr noshade/>
</p>
<p>
<hr noshade/>
</p>
</body>
</html><!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
赵钱孙李，周吴郑王（不推荐）
</p>
<p>
赵钱孙李，周吴郑王
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, delectus ipsa eius atque recusandae deleniti sapiente? Minus, nulla dicta necessitatibus, odio id possimus facere voluptatem eum doloribus dolor, debitis dolorum.
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
©
</p>
<p>
™
</p>
<p>
®
</p>
<p>
😀
</p>
</body>
</html>div和span标签
div标签，没有具体含义，用来划分页面的区域，独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>11111</div>
<div>22222</div>
<div>33333</div>
</body>
</html>span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就span，占用多宽的空间距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>体育<span style="color: gray;">sports</span></h3>
</body>
</html>列表
| 无序列表 |
有序列表 |
自定义列表 |
| <ul> <li>无序列表</li> <li>无序列表</li> </ul> |
<ol type=”A”start=”4”> <li>有序列表</li> <li>有序列表</li> </ol> type类型 start开始 |
<dI> <dt>可以是文字也可以</dt> <dd>相关文字</dd> </dl> |
1、有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 注释：Ctrl+/ -->
<!--
1、li里面可以随意放标签，但是ol里面只能放li。
2、数字是自动生成的。
3、type：1,a,A,i,I
start：取值只能是一个数字
-->
<ol>
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="1">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="a">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="A">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="i">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="I">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="a" start="3">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
<ol type="a" start="27">
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
</body>
</html>2、无须列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
快捷键：ul>li*3回车
-->
<!--
1、ul里面只能放li，li里面可以放其他标签
2、默认的是黑色的实心圆
3、type：disc、circle、square、none
-->
<ul>
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
<ul type="disc">
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
<ul type="circle">
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
<ul type="square">
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
<ul type="none">
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
</body>
</html>3、自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
</body>
</html>二、图片
图片标签的路径
路径分类：绝对路径、相对路径
1、绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的E:\book\网页布局代码\第2章”目录下，那么“bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg”。
注意：绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布代码第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录的分隔字符
2、相对路径
相对路径，就是相对于自己的目标文件位置
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名
<img src="pic4.gif"/>
2)当当前文件与目标文件在不同目录下
./：当前文件夹
../：上一级文件夹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
同级目录：./
上级目录：../
-->
<img src="code.png">
<img src="./code.png">
<img src="../image/1.png">
<!--
全路径：运行--右键--View In Browser
-->
<img src="D:\Documents\VSCode\code\code.png">
</body>
</html>图片标签的属性
<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
只有width或height图片会等比例缩放
-->
<img src="code.png" title="图片的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px"/>
<img src="1.png" title="图片的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px"/>
<img src="code.png" width="200px"/>
<img src="code.png" height="200px"/>
</body>
</html>案例：费曼技巧：最强的学习方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>费曼技巧：最强的学习方法</title>
</head>
<body>
<h1>费曼技巧：最强的学习方法</h1>
<p>
作者：秋小曦 2017.04.10 14:12:19 字数 1,086 阅读 19,865
</p>
<h3>一、“费曼技巧”的概念</h3>
<p>
来源，这个技巧的灵感，源于诺贝尔物理奖获得者，理查德·费曼(Richard Feynman)。
在他的自传里，他提到曾纠结于某篇艰深的研究论文。他的办法是，
仔细审阅这篇论文的辅助材料(supporting material) ，
直到他掌握了相关的知识基础、足以理解其中的艰深想法为止。
</p>
<img src="../image/费曼.png" title="理查德·费曼(Richard Feynman)"/>
<p>
费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，
切成小知识块，再逐个对付，你最终能填补所有的知识缺口，否则，
这些缺口将阻挤你理解这个想法。
</p>
<p>
<strong>费曼技巧”是一种学习方法，是一种以教促学的学习方法，</strong>
是通过假定模拟讲课的方式而将要学习的内容讲给自己听。
</p>
<h3>二、“费曼技巧”的实施步骤：</h3>
<p>
第1步：选择一个你想要理解的概念选择一个你想要理解的概念，
然后拿出一张白纸，把这个概念写在白纸的最上边
</p>
<p>
第2步：<strong>设想一种场景，你正要向别人传授这个概念(模拟教学) </strong>
在白纸上写下你对这个概念的解释，就好像你正在教导一位新接触
这个概念的学生一样，当你这样做的时候，你会更清楚地意识到关
于这个概念你理解了多少，以及是否还存在理解不清的地方。
</p>
<img src="../image/费曼技巧.png" alt="">
<h3>三、掌握“费曼技巧”需要注意的关键点</h3>
<p>
费曼技巧之所以有效，很大一部分原因是由于其充分动用了我们的大脑，
我们会提前对知识做一个总结，归纳，输出，这也是为什么我们给别人
解释过某些事情后对之理解更深的原因所在。费曼技巧本质上就是把知
识讲解给自己听，这个转换的过程中涉及到了几个比较重要的关键点，
有利于把资料转换为知识。
</p>
<p>
1.<strong>挑重点</strong>：人的精力毕竟是有限的，成功的人也总
是挑重要的事情来干。我们学生时代最兴奋的事情莫过于老师划重点了。
但你有没有想过自己划重点的，在知识的阐述过程中有利于分清主次，重点攻克。
</p>
<img src="../image/敲黑板.png" alt="">
<p>
2.<strong>简化</strong>：看起来跟第一点相似，但其实两点是在两
个层面上进行的。一个是在知识点中挑选重要的。另一个是在挑出的知
识点中对资料进行简化，可视化，已达到即使外行人也能了解的程度。
</p>
<p>
3.<strong>总结和连接</strong>：在输出的时候毫无疑问会和你大
脑原有的知识进行比对，进而比较分析，加深理解。
</p>
<p>
<strong>费曼学习法的具体步骤，很简单</strong>
</p>
<ol>
<li>确定学习目标;</li>
<li>模拟教学学习法;</li>
<li>回顾;</li>
<li>简化。</li>
</ol>
</body>
</html>三、超链接标签
能够实现不同页面的跳转
<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何打开文档">内容</a>
target属性：规定在何处打开文档。
A. target="_self"默认值
B. target="_blank"新窗口打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="16-费曼技巧：最强的学习方法.html" target="_blank">费曼技巧：最强的学习方法</a>
<a href="http://www.baidu.com" title="百度查询" target="_blank">
<img src="code.png" alt=""/>
</a>
</body>
</html>三、table表格
table表格的基本结构
行、列、单元格
特点：通常情况下，同行的高度一致，同列的宽度一致
数据表格的创建：
<table> <!-- 创建表格 -->
<tr> <!-- tr表示行 -->
<td>1</td> <!-- td表示单元格 -->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
创建table快捷键：
table>tr>td*2
table>(tr>td*2)*2
table>tr*2>td*2
-->
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>table表格的相关属性
1、宽度 width
2、高度 height
3、边框 border
4、边框颜色 bordercolor
5、背景颜色 bgcolor
6、水平对齐 align="left或right或center"
7、cellspacing="单元格与单元格之间的间距"
8、cellpadding="单元格与内容之间的空隙"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
创建table快捷键：
table>tr>td*2
table>(tr>td*2)*2
table>tr*2>td*2
-->
<!-- width px，百分比%（相对于父元素的） -->
<!-- height px，百分比%（相对于父元素的） -->
<table border="1" width="50%" height="500px" align="center"
bordercolor="red" bgcolor="green" cellspacing="0" cellpadding="10">
<tr>
<td>11111</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>行tr属性
1、高度 height
2、背景颜色 bgcolor
3、文字水平对齐 align="left或right或center"
4、文字垂直对齐 valign="top或middle或bottom"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr bgcolor="orange" height="100" align="center" valign="middile">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>单元格td属性
1、宽度 width
2、高度 height
3、背景颜色 bgcolor
4、文字水平对齐 align="left或right或center"
5、文字垂直对齐 valign="top或middle或bottom"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
td：如果一个单元格设置宽度，影响的是整个一列的宽度
td：如果一个单元格设置高度，影响的是整个一行的高度
-->
<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr>
<td width="200">1</td>
<td height="200">2</td>
</tr>
<tr>
<td bgcolor="red">3</td>
<td align="right" valign="top">4</td>
</tr>
</table>
</body>
</html>表格合并列
colspan="所要合并的单元格的列数"，必须给td。
rowspan="所要合并的单元格的行数"，必须给td。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="300" height="300">
<tr>
<td>1</td>
<td colspan="2" rowspan="2">2</td>
<!-- <td>3</td> -->
</tr>
<tr>
<td>4</td>
<!-- <td colspan="2">5</td> -->
<!-- <td>6</td> -->
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50" align="center">
<td width="100">会员姓名</td>
<td width="150"></td>
<td width="100">出生日期</td>
<td width="150"></td>
</tr>
<tr height="50" align="center">
<td>身份证号</td>
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr height="50" align="center">
<td>通信地址</td>
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr height="50" align="center">
<td>联系电话</td>
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr height="50" align="center">
<td>会员卡号</td>
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
</table>
</body>
</html>四、表单标签
表单的作用：收集用户信息。
<form method="get或者post" action="向何处发送表单数据">
<input />
A.属性 type定义输入框的类型
a) 文本框 type="text" 密码框 type="password"
b) 提交框 type="submit"和 <button>提交钮</button> 一样
c) 按钮框 type="button"单纯的按钮
d) 重置框 type="reset"清空的效果
B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.属性 value
</form>
Form当中method的post和get的区别?
1.get是从服务器上获取数据，post是向服务器传送数据
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4 (Internet Information Service 互联网信息服务)中最大量为80KB，IIS5中为100KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户信息：<input type="text" placeholder="请输入您的用户名" name="用户名">
<br/>
密码：<input type="password" placeholder="请输入您的密码" name="密码">
<br/>
<!-- <input type="submit" name="登录"> -->
<button type="submit">登录</button>
<!-- 提交信息到action指定的地址 -->
<input type="reset" value="重新输入一遍">
<button type="reset">重新输入一遍</button>
<input type="button" value="aaaa">
</form>
</body>
</html>五、CSS样式表
英文全名：cascading style sheets(百度百科)=== cascading style sheet 层叠样式表WEB标准中的表现标准语言，表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0
CSS语法：
1) 每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值
2) 属性必须放在花括号中，属性与属性值用冒号连接。
3) 每条声明用分号结束。
4) 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开
5) 在书写样式过程中，空格、换行等操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: red;
}
h3{
color:blue;
}
</style>
<style>
h2{
color:yellow;
}
</style>
</head>
<body>
<h1>11111111</h1>
<h2>22222222</h2>
<h3>33333333</h3>
</body>
</html>CSS外部样式表
扩展知识点：link和import之间的区别?
差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式 (就是闪烁)，网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的3才能识别，而link标签无此问题。
index.css
h1{
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 方法一 -->
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
<!-- 方法二 -->
<style>
@import url(css/index.css);
</style>
</head>
<body>
<h1>111111111111</h1>
</body>
</html>CSS行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:red;">1111111-aaa</h1>
<h1 style="color:blue;">1111111-bbb</h1>
<h2 style="color:yellow;">2222222</h2>
<h3>3333333</h3>
</body>
</html>CSS样式表的优先级
index-26.css
div{
color: red!important;
background-color: aqua;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index-26.css"/>
<style>
div{
color:yellow;
}
</style>
</head>
<body>
<!--
就近原则
!important>行内>内部>外部
important最高
-->
<div style="color:blue;">11111111</div>
</body>
</html>六、标签的选择器
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
1、选择器
元素选择符/类型选择符 (element选择器 ) 如: div{width:100px; height:100px; background:red;}
语法：元素名称{属性:属性值;}如: div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li....等
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body,div,p,img,em,strong,span....等.
b)所有的页面元素都可以作为选择符：
用法：
1)如果想改变某个元素得默认样式时，可以使用类型选择符，
(如：改变一个div、p、h1样式)
2)当统一文档某个元素的显示效果时，可以使用类型选择符
(如：改变文档所有p段落样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: yellow;
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<div>111111111</div>
<div>222222222</div>
<h1>3333333333</h1>
<p>4444444444</p>
</body>
</html>class选择器/类选择器
语法：class名{属性: 属性值}
说明：
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B)class选择符的语法格式是:
如: <div class="top"></div>
.top{width:200px; height:100px; background:green;}
用法：class选择符更适合定义一类样式;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ibm{
background-color: blue;
}
.cm{
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<!--
两个类选择器有相同的属性：就近原则（在style中）
-->
<div>11111111111</div>
<div class="ibm">22222222222</div>
<div class="ibm cm">33333333333</div>
<div class="ibm">444444444444</div>
<div>555555555555</div>
</body>
</html>id选择器
语法：#id名{属性: 属性值;}
说明：
A)当我们使用id选择符时，应该为每个元素定义一个id属性
如：<div id="box"></div>
B)id选择符的语法格式是“#”加上自定义的id名
如：#box{width:300px; height:300px;}
C)起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：head标记
D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
background-color: red;
}
#box2{
background-color: yellow;
}
#box3{
background-color: blue;
}
</style>
</head>
<body>
<!-- box1 box2：不是box1和box2 -->
<div id="box1 box2">11111111</div>
<div id="box2">22222222</div>
<div id="box3">33333333</div>
</body>
</html>*通配符/通配选择器
语法：*{属性:属性值;}
说明：通配选择符的写法是“*”，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
/* margin：外边距 */
margin: 0;
/* padding：内边距 */
padding: 0;
}
</style>
</head>
<body>
<h1>标题</h1>
<div>1111111</div>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
</ul>
</body>
</html>群组选择器、包含选择器/后代选择器
群组选择器
语法：选择符1,选择符2,选择符3.....{属性: 属性值;}例: #top1,#nav1,h1{width:960px;}
说明：当有多个选择符应用相同的声明时，可以将选择符用“,”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中
包含选择器/后代选择器
语法：选择符1 选择符2 {属性: 属性值;}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：结构：<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
样式：.list li{background:red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
background-color: yellow;
}
p{
background-color: yellow;
}
h1{
background-color: yellow;
} */
div,p,h1,.box{
background-color: yellow;
}
/* 群组选择器：提出公共代码，节约代码量 */
</style>
</head>
<body>
<div>11111111</div>
<p class=".box">1111111111111</p>
<h1>11111111</h1>
<div>
33333333333
<p>444444444</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器，包含选择器 */
div p{
background-color: yellow;
}
p b{
background-color: red;
}
</style>
</head>
<body>
<div>
<p>1111111111</p>
</div>
<p>22222222222</p>
<p>
<b>333333333</b>
</p>
<div>
<b>444444444</b>
</div>
</body>
</html>伪类选择器
语法：
a:link{属性: 属性值;}超链接的初始状态
a:visited{属性: 属性值;}超链接被访问后的状态
a:hover{属性: 属性值;}鼠标悬停，即鼠标划过超链接时的状态
a:active{属性: 属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态
link--visited--hover--active。
说明:
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:visited,a:hovera:active,错误的顺序有时会使超链接的样式失效
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;)}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始状态 */
a:link{
color: yellow;
}
/* 访问之后 */
a:visited{
color:red;
}
/* 鼠标放上 */
a:hover{
color:orange;
}
/* 点击激活 */
a:active{
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>新闻导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a:link{
background-color: black;
color:white;
}
a:visited{
background-color: black;
color:white;
}
a:hover{
background-color: red;
}
a:active{
background-color: red;
} */
a{
background-color: black;
color: white;
}
a:hover{
background-color: red;
}
.home{
background-color: red;
}
</style>
</head>
<body>
<a href="" class="home">首页</a>
<a href="">国内</a>
<a href="">国外</a>
<a href="">军事</a>
<a href="">财经</a>
</body>
</html>选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
| 个数 | 选择器 | 权重，CSS中用四位数字表示权重，权重的表达方式如: 0，0，0，0 |
| 1 | 类型(元素)选择器 | 0001 |
| 2 | class选择器 (类选择器) | 0010 |
| 3 | id选择器 | 0100 |
| 4 | 包含选择符 | 为包含选择符的权重之和 |
| 5 | 内联样式 | 1000 |
| 6 | !important | 10000 |
| CSS选择器解析规则1： | 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式 | |
| CSS选择器解析规则2： | 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式 | |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: yellow!important;
}
.cdiv{
background-color: red;
}
#iddiv{
background-color: blue;
}
/* id选择器 > class > 元素 */
p{
background-color: aqua;
}
div p{
background-color: green;
}
div .pclass{
background-color: brown;
}
</style>
</head>
<body>
<!--
!important > 行内选择器 > id选择器 > class > 元素
-->
<div class="cdiv" id="iddiv" style="background-color: coral;">111111111111111
<p class="pclass">22222222222222</p>
</div>
<p>3333333333333</p>
</body>
</html>七、文本属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | font-size | 字体大小 | 单位是px，浏览器默认是16px，设计图常用字号是12px |
| 2 | font-family | 字体 | 当字体是中文字体、英文字体中有空格时，需加双引号； 多个字体中间用逗号链接，先解析第1个字体,如果没有解析第2个字体，以此类推 |
| 3 | color | 颜色 | color:red; color:#ff0; color:rgb(255,0,0); 0-255 |
| 4 | font-weight | 加粗 | font-weight:bolder(更粗的)/bold (加粗) /normal (常规) font-weight:100-900;100-500不加粗 600-900加粗 |
| 5 | font-style | 倾斜 | font-style: italic(斜体字)/oblique(倾斜的文字)/normal (常规显示); |
| 6 | text-align | 文本水平对齐 | text-align:left;水平靠左 text-align: right;水平靠右 text-align: center; 水亚居中 text-align:justify;水平2端对齐，但是只对多行起作用 |
| 7 | line-height | 行高 | line-height的数据=height的数据，可以实现单行文本垂直居中 |
| 8 | text-indent | 首行缩进 | text-indent可以取负值；text-indent属性只对第一行起作用 |
| 9 | letter-spacing | 字间距 | 控制文字和文字之间的间距 |
| 10 | text-decoration | 文本修饰 | text-decoration:none没有/underline下划线/overline上划线/line-through删除线 |
| 11 | font | 文字简写 | font是font-style font-weight font-size /line-height font-family 的简写 font:italic 800 30px/80px“宋体”；顺序不能改变，必须同时指定font-size和font-tamily属性时才起作用 |
文本字体：
| 宋体 SimSun |
| 黑体 SimHei |
| 微软雅黑 Microsoft YaHei |
| 微软正黑体 Microsoft JhengHei |
| 新宋体 NSimSun |
| 新细明体 PMingLiU |
| 细明体 MingLiU |
| 标楷体 DFKai-SB |
| 仿宋 FangSong |
| 楷体 KaiTi |
| 仿宋 _GB2312 FangSong_GB2312 |
| 楷体 _GB2312 KaiTi GB2312 |
字体大小和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
/* 浏览器默认的字体大小是16px */
font-size: 13px;
}
.p2{
/* 字体样式可以放多个：第一个无法识别就识别第二个，以此类推... */
font-family: 草书, 宋体;
}
.p3{
/* 浏览器默认的字体样式：微软雅黑 */
font-family: 微软雅黑;
}
</style>
</head>
<body>
<p class="p1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod dolor sed. Culpa eius recusandae placeat voluptas reiciendis architecto aperiam sed labore incidunt. Dignissimos modi excepturi accusamus officia soluta magni.
</p>
<p class="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ex, laborum earum adipisci odio iure facilis temporibus dolore illo debitis tempora unde hic velit deserunt. Hic corporis amet laudantium exercitationem?
</p>
<p class="p3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ex, laborum earum adipisci odio iure facilis temporibus dolore illo debitis tempora unde hic velit deserunt. Hic corporis amet laudantium exercitationem?
</p>
</body>
</html>字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: red;
}
.p2{
/* 0-255 0最弱，255最强 */
color: rgb(255, 0, 0);
}
.p3{
color: #ff0000;
}
</style>
</head>
<body>
<p class="p1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum itaque corporis optio consequuntur eos accusamus magni veniam incidunt unde delectus architecto ea, laudantium doloribus totam quae tenetur iusto laborum quo!
</p>
<p class="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum itaque corporis optio consequuntur eos accusamus magni veniam incidunt unde delectus architecto ea, laudantium doloribus totam quae tenetur iusto laborum quo!
</p>
<p class="p3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum itaque corporis optio consequuntur eos accusamus magni veniam incidunt unde delectus architecto ea, laudantium doloribus totam quae tenetur iusto laborum quo!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum itaque corporis optio consequuntur eos accusamus magni veniam incidunt unde delectus architecto ea, laudantium doloribus totam quae tenetur iusto laborum quo!
</p>
</body>
</html>字体加粗&倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
/*
100-900；
100细体 ligter
400正常 normal
700加粗 bold
900更加粗 bolder
*/
font-weight: 100;
}
.p2{
font-weight: 700;
}
.p3{
font-weight: bold;
}
.p4{
/*
italic倾斜
oblique更倾斜
normal正常
*/
font-style: italic;
}
</style>
</head>
<body>
<p class="p1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, voluptates aliquid blanditiis nisi delectus quas voluptate maxime commodi quisquam obcaecati dolorum quibusdam suscipit ab modi aut rerum alias explicabo velit!
</p>
<p class="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores error dolores at cum cupiditate eius delectus, distinctio, temporibus rerum sunt accusantium provident dicta repudiandae necessitatibus impedit nobis veritatis quas quod.
</p>
<p class="p3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure temporibus rerum molestias porro architecto facere quaerat esse, deserunt vero aliquam minus! Quo nemo quas reiciendis facere nam quibusdam, incidunt quasi.
</p>
<h1>我是标题</h1>
<h1 class="p1">我是标题</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque omnis necessitatibus officiis perspiciatis quo nemo consectetur, ducimus corporis libero voluptates amet nisi quaerat. Reiciendis quasi dicta placeat saepe nesciunt! Assumenda.
</p>
<p class="p4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, iusto. Hic provident minima ex molestiae quia vero. Sapiente laudantium doloremque sunt deleniti ducimus eligendi nemo quia perspiciatis aliquam reiciendis. Aut.
</p>
</body>
</html>水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
/* left,center,right */
text-align: center;
width: 500px;
background-color: yellow;
}
.box2{
text-align: justify;
/* justify 两端对齐，多行文本使用 */
width: 500px;
background-color: green;
}
.box3{
width: 500px;
height: 100px;
background-color: yellow;
line-height: 100px;
text-align: center;
}
.box4{
width: 500px;
height: 100px;
background-color: rgb(43,255,0);
line-height: 30px;
}
</style>
</head>
<body>
<div class="box1">大家好</div>
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi totam velit cum. Quae sint, dignissimos quod nam velit a harum minus blanditiis, vero possimus corporis. Laudantium corrupti neque iure modi!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum doloremque reiciendis ab et, tenetur officia quas voluptatum ea maiores cumque, consequatur ex? Inventore, itaque in soluta illum cumque numquam placeat!
</div>
<div class="box3">
大家好
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem ducimus, delectus commodi at nihil laboriosam fuga voluptatem, saepe porro iure ad molestias dolores eaque quia atque sit enim consectetur suscipit?
</div>
</body>
</html>文本间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 文本间距：词间距，字符间距 */
.p1{
letter-spacing: 20px;
}
.p2{
letter-spacing: 10px;
}
.p3{
word-spacing: 10px;
}
.p4{
word-spacing: 0px;
}
.p5{
word-spacing: -10px;
/* word-spacing: -10px; 交叉 */
}
</style>
</head>
<body>
<p class="p1">
费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，
切成小知识块，再逐个对付，你最终能填补所有的知识缺口，否则，
这些缺口将阻挤你理解这个想法。
费曼技巧”是一种学习方法，是一种以教促学的学习方法，
是通过假定模拟讲课的方式而将要学习的内容讲给自己听。
</p>
<p class="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti labore voluptates minima provident? Cupiditate tenetur nostrum delectus recusandae corporis, quaerat saepe animi perspiciatis magni odio est laboriosam exercitationem cumque assumenda.
</p>
<p class="p3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur dolores quas adipisci doloribus tempora voluptas accusantium veritatis perferendis! Dicta vitae eveniet alias iusto unde natus est molestias amet sed consectetur!
</p>
<p class="p4">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur dolores quas adipisci doloribus tempora voluptas accusantium veritatis perferendis! Dicta vitae eveniet alias iusto unde natus est molestias amet sed consectetur!
</p>
<p class="p5">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur dolores quas adipisci doloribus tempora voluptas accusantium veritatis perferendis! Dicta vitae eveniet alias iusto unde natus est molestias amet sed consectetur!
</p>
</body>
</html>首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
font-size: 20px;
text-indent: 2em;
}
.p2{
font-size: 20px;
text-indent: -2em;
/* 首行缩进：可以取负值，只对第一行起作用 */
}
</style>
</head>
<body>
<p class="p1">
费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，
切成小知识块，再逐个对付，你最终能填补所有的知识缺口，否则，
这些缺口将阻挤你理解这个想法。
费曼技巧”是一种学习方法，是一种以教促学的学习方法，
是通过假定模拟讲课的方式而将要学习的内容讲给自己听。
</p>
<p class="p2">
费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，
切成小知识块，再逐个对付，你最终能填补所有的知识缺口，否则，
这些缺口将阻挤你理解这个想法。
费曼技巧”是一种学习方法，是一种以教促学的学习方法，
是通过假定模拟讲课的方式而将要学习的内容讲给自己听。
</p>
</body>
</html>文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
text-decoration: underline;
}
.p2{
text-decoration: line-through;
}
.p3{
text-decoration: overline;
}
.p4{
text-decoration: none;
}
.p5{
/* 取最后一个 */
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
/* text-decoration: none; */
}
.p6{
/* 全部起作用 */
text-decoration: underline line-through overline;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
<p class="p1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
<p class="p2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
<p class="p3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
<p class="p4">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
<p class="p5">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
<p class="p6">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, doloribus maxime deserunt dolores cum repudiandae tempore distinctio amet dignissimos accusantium ducimus laudantium eveniet aut enim minus. Aspernatur libero reiciendis nesciunt.
</p>
</body>
</html>案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title{
width: 400px;
height: 50px;
background-color: #808080;
font-size: 25px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 50px;
}
p{
width: 500px;
font-size: 20px;
text-indent: 2em;
}
.sp1{
font-weight: bold;
}
.sp2{
color: red;
}
</style>
</head>
<body>
<div class="title">费曼技巧：最强的学习方法</div>
<p>
来源，这个技巧的灵感，源于诺贝尔物理奖获得者，<span class="sp1">理查德·费曼(Richard Feynman)</span>。
在他的自传里，他提到曾纠结于某篇艰深的研究论文。他的办法是，
仔细审阅这篇论文的<span class="sp2">辅助材料(supporting material)</span> ，
直到他掌握了相关的知识基础、足以理解其中的艰深想法为止。
</p>
<p>
费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，
切成小知识块，再逐个对付，你最终能填补所有的知识缺口，否则，
这些缺口将阻挤你理解这个想法。
</p>
<p>
费曼技巧”是一种学习方法，是一种<span class="sp1">以教促学</span>的学习方法，
是通过<span class="sp2">假定模拟讲课的方式</span>而将要学习的内容讲给自己听。
</p>
</body>
</html>检索大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* text-transform 大小写 */
.p1{
/* text-transform: capitalize;所有单词首字母大写 */
text-transform: capitalize;
}
.p2{
/* text-transform: lowercase;小写显示 */
text-transform: lowercase;
}
.p3{
/* text-transform: uppercase;大写显示 */
text-transform: uppercase;
}
.p4{
/* text-transform: none;无格式 */
text-transform: none;
}
</style>
</head>
<body>
<p class="p1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aperiam ab beatae? Atque quibusdam officia dolorum, enim aliquam, repellat tempora quae, tempore eligendi dolore consequatur voluptates ratione suscipit fuga! Officiis.
</p>
<p class="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aperiam ab beatae? Atque quibusdam officia dolorum, enim aliquam, repellat tempora quae, tempore eligendi dolore consequatur voluptates ratione suscipit fuga! Officiis.
</p>
<p class="p3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aperiam ab beatae? Atque quibusdam officia dolorum, enim aliquam, repellat tempora quae, tempore eligendi dolore consequatur voluptates ratione suscipit fuga! Officiis.
</p>
<p class="p4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aperiam ab beatae? Atque quibusdam officia dolorum, enim aliquam, repellat tempora quae, tempore eligendi dolore consequatur voluptates ratione suscipit fuga! Officiis.
</p>
</body>
</html>font
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font:italic bold 20px/1em 微软雅黑
}
</style>
</head>
<body>
<p>
大家好，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo rem nam odit voluptates, maiores ea itaque ipsam obcaecati enim dignissimos architecto, fugiat ad unde, perferendis numquam. Impedit perferendis tempore molestias?
</p>
</body>
</html>八、列表属性
| 个数 |
属性 |
描述 | 说明 |
| 1 | list-style-type |
定义列表符合样式 | list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉) |
| 2 | list-style-image |
将图片设置为列表符合样式 | list-style-image:url(); |
| 3 | list-style-position |
设置列表项标记的放置位置 | list-style-position: outside;列表的外面默认值 list-style-position: inside; 列表的里面 |
| 4 | list-style |
简写 | list-style:none;去除列表符号 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style-type: disc;
/*
disc：实心圆
circle：空心圆
square：实心正方形
none：无
*/
}
.li1{
list-style-image: url(../image/1.png);
}
.li2{
list-style-image: url(../image/2.png);
}
.li3{
list-style-image: url(../image/3.png);
}
li{
border: 1px solid red;
list-style-position: inside;
}
.box{
list-style: none url(../image/1.png) inside;
/* 复合属性 */
}
</style>
</head>
<body>
<ul>
<li class="li1">111111</li>
<li class="li2">222222</li>
<li class="li3">333333</li>
</ul>
<ul class="box">
<li>444444</li>
<li>555555</li>
<li>666666</li>
</ul>
</body>
</html>九、背景属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | background-color |
背景颜色 | background-color: red; |
| 2 | background-image |
背景图片 | background-image:url(); |
| 3 | background-repeat |
背景图片的平铺 | background-repeat:no-repeat/repeat/repeat-x/repeat-y; |
| 4 | background-position |
背景图片的定位 | background-position: 水平位置垂直位置;可以给负值 |
| 5 | background-attachment | 背景图片的固定 | backaround-attachment :scroll (滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了) ; |
| 可以简写成background | |||
背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
大家好
<div class="box2"></div>
</div>
</body>
</html>背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 1000px;
height: 600px;
background-color: yellow;
background-image: url(../image/玫瑰花.jpg);
/*
repeat：默认平铺
repeat-x：x轴平铺
repeat-y：y轴平铺
no-repeat：不平铺
*/
background-repeat: no-repeat;
/*
1、20px 20px
2、10% 10%
3、left center right
top center bottom
*/
background-position: left center;
}
.box2{
width: 200px;
height: 100px;
background-color: yellow;
background-image: url(../image/雏菊.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>图片背景大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 1000px;
height: 600px;
background-color: yellow;
background-image: url(../image/玫瑰花.jpg);
/*
repeat：默认平铺
repeat-x：x轴平铺
repeat-y：y轴平铺
no-repeat：不平铺
*/
background-repeat: no-repeat;
/*
1、20px 20px
2、10% 10%
3、left center right
top center bottom
*/
background-position: left center;
/*
1、400px 400px
2、100% 100%
3、cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
也许无法显示在背景定位区域中。
4、contain：把图像扩展至最大尺寸，以使其宽度和高度完全适用内容区域。
铺不满盒子，留白
*/
background-size: cover;
}
.box2{
width: 200px;
height: 100px;
background-color: yellow;
background-image: url(../image/雏菊.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>背景的固定和滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 1000px;
}
.box1{
background-color: yellow;
background-image: url(../image/玫瑰花.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}
.box2{
background-image: url(../image/雏菊.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>视觉差案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 750px;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.box1{
background-image: url(../image/梅花鹿.png);
}
.box2{
background-image: url(../image/独角兽.png);
}
.box3{
background-image: url(../image/斑马.png);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>知乎案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 1000px;
background: yellow;
margin: 0 auto;
}
body{
background-image: url(../image/知乎.jpeg);
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>背景的复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
复合写法：
1、用空格隔开
2、顺序可以换
3、可以只取一个值，放在后面能覆盖前面的值
*/
.box1{
width: 600px;
height: 600px;
/*
background-color: yellow;
background-image: url(../image/玫瑰花.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
*/
background: yellow url(../image/玫瑰花.jpg) no-repeat center fixed;
/* background-size只能单独使用 */
}
.box2{
width: 600px;
height: 600px;
background-color: yellow;
background: url(../image/雏菊.jpg) no-repeat center top;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>十、浮动属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | float |
float: left; | 元素靠左边浮动 |
| 2 | float | float: right; | 元素靠右边浮动 |
| 3 | float |
float: none; |
元素不浮动 |
| 浮动的作用1 | 定义网页中其它文本如何环绕该元素显示 | ||
| 浮动的作用2 | 就是让竖着的东西横着来 | ||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background:red;
float: left;
}
.green{
background: green;
float: left;
/* width: 300px; */
/* height: 300px; */
}
.blue{
float: left;
background: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>多个div浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background:red;
float: left;
}
.green{
background: green;
float: left;
/* width: 300px; */
/* height: 300px; */
}
.blue{
float: left;
background: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background:red;
float: right;
}
.green{
background: green;
/* float: left; */
float: right;
}
.blue{
/* float: left; */
background: blue;
float: right;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>特殊浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
background: red;
float: left;
width: 400px;
height: 400px;
}
.green{
background: green;
float: left;
width: 300px;
height: 300px;
}
.blue{
background: blue;
float: left;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green">大家好</div>
<div class="blue"></div>
</body>
</html>
三十四、清浮动
| 个数 | 属性 | 描述 | 说明 |
| 1 | clear | Clear: none; | 允许有浮动对象 |
| 2 | clear | Clear: right; | 不允许右边有浮动对象 |
| 3 | clear | Clear: left; | 不允许左边有浮动对象 |
| 4 | clear | Clear:both; | 不允许有浮动对象 |
| 清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。 | |||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1, .box2{
width: 200px;
height: 200px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color: blue;
}
.box{
width: 300px;
height: 300px;
background-color: red;
/* clear: both; */
}
.container{
/* height: 200px; */
overflow: hidden;
}
/*
1、写固定高度
2、清浮动 clear:none /left,right,both
3、当前浮动元素后面补一个盒子，不设置宽高，clear:both
4、overflow:hidden，让浮动元素计算高度
*/
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<!-- <div style="clear:both;"></div> -->
</div>
<div class="box"></div>
</body>
</html>浮动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
margin: 10px;
}
div img{
width: 187px;
height: 125px;
}
div p{
width: 187px;
font-size: 12px;
text-align: center;
background: #f6f7f8;
}
</style>
</head>
<body>
<div>
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/c6e3a6a268807344c894a9b6f9bcc22a.jpeg?x-bce-process=image/crop,x_54,y_0,w_539,h_362">
<p>鸟语花香春光好</p>
</div>
<div>
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/c6e3a6a268807344c894a9b6f9bcc22a.jpeg?x-bce-process=image/crop,x_54,y_0,w_539,h_362">
<p>鸟语花香春光好</p>
</div>
<div>
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/c6e3a6a268807344c894a9b6f9bcc22a.jpeg?x-bce-process=image/crop,x_54,y_0,w_539,h_362">
<p>鸟语花香春光好</p>
</div>
<div>
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/c6e3a6a268807344c894a9b6f9bcc22a.jpeg?x-bce-process=image/crop,x_54,y_0,w_539,h_362">
<p>鸟语花香春光好</p>
</div>
<div>
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/c6e3a6a268807344c894a9b6f9bcc22a.jpeg?x-bce-process=image/crop,x_54,y_0,w_539,h_362">
<p>鸟语花香春光好</p>
</div>
<div>
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/c6e3a6a268807344c894a9b6f9bcc22a.jpeg?x-bce-process=image/crop,x_54,y_0,w_539,h_362">
<p>鸟语花香春光好</p>
</div>
</body>
</html>十一、盒子模型
盒子模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒子模型。
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 300px;
background: yellow;
text-align: justify;
padding: 10px 20px 30px 40px;
/*
内边距
1个值，4个方向都一样
2个值，上下，左右
3个值，上，左右，下
4个值，上，右，下，左
*/
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos error necessitatibus quae velit adipisci rerum voluptatem, assumenda sit voluptate porro, id minima repellat est tenetur illo suscipit modi. Enim, molestias?
</div>
</body>
</html>内边距特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
1、背景色蔓延到内边距
2、可以设置单一方向吗？
padding-方向:top bottom left right
*/
*{
padding: 0;
}
div{
width: 300px;
height: 300px;
/* padding: 30px 0 0 0; */
padding-top: 10px;
/* 不支持负数 */
background: yellow;
}
ul{
padding-left: 10px;
}
</style>
</head>
<body>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi, suscipit? Itaque perspiciatis delectus aliquam quam aliquid optio laborum ab unde aspernatur. Cumque enim recusandae voluptatum nihil fugit earum. Eaque, optio.
</div>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
</body>
</html>边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background: yellow;
border: 10px solid red;
/* 样式： solid（实线）、double（双实线）、dashed（虚线）、dotted（点线）*/
/* 背景色也能蔓延到边框 */
}
.box2{
width: 100px;
height: 100px;;
background: blue;
border-top: 10px double green;
border-left: 20px dotted orange;
}
.box3{
width: 100px;
height: 100px;
background: yellow;
border-width: 10px 20px 30px 40px;
border-color: red goldenrod blueviolet brown;
border-style: dashed solid double dotted;
/*
1个值，4个方向都一样
2个值，上下，左右
3个值，上，左右，下
4个值，上，右，下，左
*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
width: 100px;
height: 100px;
/* margin: 0; */
}
.box1{
background: red;
border: 1px solid yellow;
/* margin: 50px; */
margin-top: 10px;
/*
1、margin-方向：top bottom left right
2、背景色没有蔓延
3、*{margin:0;}
4、外边距支持负值
5、屏幕居中：margin:0 auto; 横向居中
*/
}
.box2{
background: green;
border: 1px solid blue;
margin: -20px 30px 40px 60px;
/*
1个值，4个方向都一样
2个值，上下，左右
3个值，上，左右，下
4个值，上，右，下，左
*/
}
.box3{
background: black;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>外边距的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
特性问题：
1、兄弟关系，两个盒子垂直外边距与水平外边距问题
- 垂直方向，外边距取最大值
- 水平方向，外边距会进行合并处理
2、父子关系，给子加外边距，但作用于父身上了，怎么解决？
*/
.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
}
.box1{
background: red;
margin-bottom: 100px;
}
.box2{
margin-top: 50px;
background: yellow;
}
.box3{
float: left;
margin-right: 100px;
background: green;
}
.box4{
float: left;
background: orange;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>十二、PS工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
ps====图片处理软件（美工来做图，前端来测量 吸取颜色 切图）
拿到设计稿之后：使用ps打开
1、图片上面右键-=====打开方式ps
2、ps里 文件=>打开
图片放大和缩小
ctrl++
ctrl+-
alt+滚动
图片的移动
按住空格，鼠标变为小手,拖动图片
如何调整出来标尺
ctrl+r
作用：拖动参考线方便测量
视图里面找到标尺，把对勾勾选上
测量图片大小
使用矩形选框工具（左侧竖着第二个）
如何查看数据大小（窗口-----信息面板====wh）
如何修改测量单位：
在标尺上面右键取修改单位====像素
ctrl+d===取消选区
选完后,想调整大小，可以右键->变换选区
吸取颜色
使用吸管工具
吸取颜色完成后，点击左下角的背景色，会右弹窗，在弹窗里面右#十六进制的颜色值可以让你复制
截图
1、使用快捷键截图===每次只能截取一个
使用选框工具框选尼亚截取的区域
ctrl+C=======ctrl+n=======回车=======ctrl
+V=======ctrl+S
回车====== 回车
2、切片工具 （裁剪工具进行切换）
使用切片工具框选你要留住的区域，点击文件，存储为web所用格式
弹窗里面点击存储，
弹窗======格式：仅限图像，切片：所有用户切片
-->
</body>
</html>PS案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#box{
width: 241px;
height: 335px;
background: yellow;
margin: 0 auto;
padding: 11px 11px 18px;
}
.title{
width: 235px;
height: 19px;
background: red;
padding-left: 4px;
border-left: 2px solid #254282;
color: #254282;
line-height: 19px;
font-size: 14px;
font-weight: bold;
margin-bottom: 12px;
}
.bigpic{
width: 241px;
height: 170px;
margin-bottom: 16px;
}
.bigpic p{
width: 241px;
height: 26px;
background: #f6f7f8;
font-size: 12px;
text-align: center;
line-height: 26px;
}
.smallpic{
width: 241px;
height: 120px;
}
.smallpic p{
font-size: 12px;
width: 113px;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div id="box">
<div class="title">女人图片</div>
<div class="bigpic">
<img src="../image/big.png" alt="">
<p>大姐利用异业联盟经营美容院</p>
</div>
<div class="smallpic">
<div class="left">
<img src="../image/small1.png" alt="">
<p>无效传达，无效化妆，容貌焦虑</p>
</div>
<div class="right">
<img src="../image/small2.png" alt="">
<p>小个子不要拍，高人一等的穿搭给你</p>
</div>
</div>
</div>
</body>
</html>十三、溢出属性
1、溢出属性 (容器的)
说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible：默认值，溢出内容会显示在元素之外；
hidden：溢出内容隐藏；
scroll：滚动，溢出内容以滚动方式显示；
auto：如果有溢出会添加滚动条，没有溢出正常显示；
inherit：规定应该遵从父元素继承overflow属性的值。
overflow-x：X轴溢出；overflow-y：Y轴溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: yellow;
/* overflow: visible; 显示溢出 */
/* overflow: hidden; 溢出隐藏，超出的部分不显示 */
/* overflow: scroll; 滚动条，不溢出也出现 */
/* overflow: auto; 溢出时显示滚动条，不溢出不显示滚动条 */
/* overflow: inherit; 继承父元素的效果 */
}
.box{
overflow: auto;
/*
只有X轴显示滚动条
overflow-x: auto;
overflow-y: hidden;
*/
/*
只有Y轴显示滚动条
overflow-x: hidden;
overflow-y: auto;
*/
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores nemo eius nisi ab quisquam inventore pariatur iusto numquam culpa velit non beatae provident nulla neque totam dolores, iste quis mollitia.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem qui earum dolor cupiditate nemo, necessitatibus incidunt numquam quaerat. Accusamus vel iste fuga a quam enim voluptates repellat cumque mollitia modi.
</div>
<div class="box">
<img src="../image/玫瑰花.jpg" alt="">
</div>
</body>
</html>溢出案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 1480px;
height: 923px;
background: yellow;
margin: 0 auto;
overflow: auto;
}
.info{
width: 242px;
height: 420px;
border: 1px solid gray;
padding: 30px 26px 10px 25px;
float: left;
}
.name{
width: 242px;
margin-top: 17px;
font-size: 19px;
}
.info .price{
width: 242px;
margin-top: 17px;
font-size: 19px;
color: red;
}
.category{
width: 242px;
margin-top: 17px;
color: black;
text-align: center;
font-size: 18px;
}
.info:hover div{
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div>
<img src="../image/平板-1.png" alt="">
<p class="name">【官方正品】2023新款晓龙5G平板电脑iPad Pro全网通</p>
<p class="price">$2208.00</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
</div>
</body>
</html>2、空余空间
说明：
white-space: normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白
normal：默认值，空白会被浏览器忽略，
nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
3、省略号显示
说明：
text-overflow:clip/ellipsis
clip：默认值，不显示省略号 (...) ；
ellipsis：显示省略标记
当单行文本溢出显示省略号需要同时设置以下声明：
1、容器宽度: width: 200px;
2、强制文本在一行内显示:white-space: nowrap;
3、溢出内容为隐藏: overflow: hidden;
4、溢出文本显示省略号: text-overflow: ellipsis;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background: yellow;
width: 200px;
height: 200px;
/* 不换行，浏览器被撑开 */
/* white-space: nowrap; */
/* 不换行，显示回车，空格，tab */
/* white-space: pre; */
/* 换行，显示回车，空格，tab*/
/* white-space: pre-wrap; */
/* 换行，显示回车，不显示空格 */
/* white-space: pre-line; */
white-space: nowrap;
overflow: hidden;
/* 多余的使用... */
text-overflow: ellipsis;
/*
当单行文本溢出显示省略号需要同时设置以下声明：
1、容器宽度: width: 200px;
2、强制文本在一行内显示:white-space: nowrap;
3、溢出内容为隐藏: overflow: hidden;
4、溢出文本显示省略号: text-overflow: ellipsis;
*/
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam error corporis facilis vitae veniam placeat ullam voluptatem. Quidem sunt eum consequatur laudantium in eaque sint voluptates, beatae nemo quibusdam dolorum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam officiis fugiat unde nulla quo impedit quia labore. Vel architecto animi, excepturi officiis quibusdam, consequuntur aperiam ex molestiae repudiandae necessitatibus eos!
</div>
<pre>
预格式化文本-保留空格，tab，回车
div{
background: yellow;
width: 200px;
height: 200px;
white-space: nowrap; 不换行，浏览器被撑开
}
</pre>
</body>
</html>十四、元素显示类型
| 元素类型的分类，依据CSS的显示 | ||
| 块元素(block element) | 行内（内联）元素 | 行内块元素 |
| A)块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域； B)默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。 C)块状元素都可以定义自己的宽度和高度； D)块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子 |
A)内联元素的表现形式是始终以行内逐个进行显 示；横着排 B)内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高和宽度来确定，它的最小内容单元也会呈现矩形形状； C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效 |
内联块状元素(inline-block)就是同时具备内联元素、块状元素度的特点 |
| 例如：div p ul li ol li dl dt dd h1-h6等 | 例如：a b em i span strong等 | 例如：img input等 |
块元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: yellow;
}
/*
块元素：
display: block;
display: list-item;
*/
/* p标签放文本可以，不能放块元素 */
</style>
</head>
<body>
<div></div>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<div></div>
<p>111111111</p>
<h1>2222222</h1>
</body>
</html>行内元素和行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
b{
width: 100px;
height: 100px;
background: yellow;
display: inline;
}
/*
display: inline; 行内元素默认的
*/
img{
width: 100px;
height: 100px;
}
/*
img 行内块元素
display: inline-block;
能设置宽高，且在一行显示 */
input{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<b>11111</b>
<em>222222</em>
<span>33333</span>
<strong>444444</strong>
<a href="http://www.baidu.com">55555</a>
<img src="../image/玫瑰花.jpg" alt="">
<input type="text">
</body>
</html>盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid red;
}
span{
background: yellow;
padding: 10px;
}
/* span行内元素 只能设置边距的左右边距，不能设置上下边距 */
/* 行内块元素，支持设置上下左右边距 */
</style>
</head>
<body>
<div></div>
<span>span标签</span>
<div>111111111111111111111</div>
<img src="../image/玫瑰花.jpg" alt="">
<div>222222222</div>
</body>
</html>元素类型互相转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
inline
block
line-block
*/
img{
display: block;
}
div{
width: 100px;
height: 100px;
background: yellow;
display: inline;
}
</style>
</head>
<body>
<img src="../image/玫瑰花.jpg" alt="">
<p>111111111111</p>
<div>
22
</div>
</body>
</html>新闻导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.home{
background-color: red;
}
a{
background-color: black;
color: white;
padding: 10px;
display: inline-block;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<a href="" class="home">首页</a>
<a href="">国内</a>
<a href="">国际</a>
<a href="">军事</a>
<a href="">财经</a>
<div>111111111</div>
</body>
</html>display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide{
display: none;
/* display: none; 隐藏 */
}
.box:hover ul{
display: block;
}
</style>
</head>
<body>
<div class="hide">11111111</div>
<div class="box">
军事
<ul class="hide">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
</div>
</body>
</html>二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
.box .item{
float: left;
width: 148px;
text-align: center;
background-color: yellow;
border: 1px solid blueviolet;
}
.item:hover{
background-color: aqua;
}
.item>ul{
display: none;
background-color: white;
color: black;
}
.item:hover ul{
display: block;
}
.item li:hover{
color: aquamarine;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部视频教程</li>
<li>HTML5视频教程</li>
<li>JAVA视频教程</li>
<li>PYTHON视频教程</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>全部认证考试</li>
<li>HTML5认证考试</li>
<li>JAVA认证考试</li>
<li>PYTHON认证考试</li>
</ul>
</li>
</ul>
</body>
</html>案例：安利首页
index.css
*{
margin: 0;
padding: 0;
}
.con{
width: 670px;
margin: 0 auto;
}
.header{
height: 80px;
}
.logo{
width: 188px;
height: 65px;
background: url(../../image/安利logo.png);
float: left;
}
.headerright{
float: right;
}
ul{
list-style: none;
}
.headerright ul{
height: 36px;
margin-top: 10px;
line-height: 36px;
}
.headerright li{
float: left;
}
.headerright li a{
border-right: 1px solid #b2c7ea;
padding: 0 8px;
font-size: 12px;
color: #b2c7ea;
}
.headerright .last{
padding-right: 0;
border: 0;
}
.headerright li .active{
color: #eb6ca1;
}
.search{
float: right;
width: 158px;
height: 20px;
border: 1px solid #b2c7ea;
}
.search input{
border: 0;
outline: none;
}
.search .left{
width: 128px;
float: left;
height: 20px;
padding-left: 8px;
}
.search .right{
float: right;
width: 16px;
height: 20px;
background: url(../../image/安利search.png) no-repeat left center;
}
.nav{
height: 36px;
line-height: 36px;
border-top: 1px solid #657588;
background: #0c345c;
color: white;
}
.nav li{
float: left;
font-size: 12px;
margin-right: 49px;
}
.banner{
width: 847px;
height: 256px;
background: url(../../image/安利banner.png) no-repeat center;
margin: 0 auto;
}
.list{
height: 140px;
margin-top: 34px;
margin-bottom: 25px;
}
.list .item{
width: 206px;
height: 138px;
border: 1px solid #cccccc;
float: left;
padding-right: 13px;
}
.list .item img{
display: block;
}
.list .item p{
height: 30px;
line-height: 30px;
padding-left: 20px;
font-size: 10px;
color: black;
}
.list .itemlast{
padding-right: 0;
}
.footer{
height: 139px;
border: 1px solid #cccccc;
background: url(../../image/安利footer.png) repeat;
}
.footer ul{
height: 70px;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 1px solid #ecebeb;
line-height: 20px;
}
.footer ul li{
width: 142px;
padding-left: 20px;
font-size: 9px;
color: #336699;
float: left;
}
.footer p{
height: 30px;
line-height: 30px;
padding-left: 20px;
font-size: 9px;
}
.footer p span{
color: #336699;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index-77.css">
<!-- 版心 -->
<!-- 通栏 -->
</head>
<body>
<div class="header con">
<div class="logo"></div>
<div class="headerright">
<ul>
<li><a class="active">安利海外购</a></li>
<li><a>掌上安利</a></li>
<li><a class="active">安利悦享荟</a></li>
<li><a>安利植物研发中心</a></li>
<li><a>各地店铺</a></li>
<li><a class="last active">安利易联网</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="搜索" class="left">
<input type="submit" value="" class="right">
</div>
</div>
<div class="nav">
<ul class="con">
<li>走进安利</li>
<li>产品展馆</li>
<li>公司资讯</li>
<li>企业责任</li>
<li>安利云购</li>
<li>其他</li>
</ul>
</div>
<div class="banner"></div>
<div class="list con">
<div class="item">
<img src="../image/安利list1.png" alt="">
<p>《总裁零距离》薇站</p>
</div>
<div class="item">
<img src="../image/安利list1.png" alt="">
<p>《总裁零距离》薇站</p>
</div>
<div class="item itemlast">
<img src="../image/安利list1.png" alt="">
<p>《总裁零距离》薇站</p>
</div>
</div>
<div class="footer">
<div class="con">
<ul>
<li>安利公益基金</li>
<li>安利培训中心</li>
<li>安利云购</li>
<li>安利轻创业平台</li>
<li>安利公益基金</li>
<li>安利培训中心</li>
<li>安利云购</li>
<li>安利轻创业平台</li>
<li>安利公益基金</li>
<li>安利培训中心</li>
<li>安利云购</li>
<li>安利轻创业平台</li>
</ul>
<p>
版权为安利（中国）日用品有限公司所有 未经许可不得转载或链接，粤ICP备
<span>05013154</span>号
</p>
</div>
</div>
</body>
</html>十五、定位
1、定位
| 定位position | |||||
| 个数 | 书写语法 | 说明 | 文档流 | 偏移位置 (top left right bottom) 时候的参照物 | 层叠顺序 (z-index) |
| 1 | position: static; | 默认值 | 默认 | 默认 |
z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层；设置后，数值越大,层越靠上; |
| 2 | position: absolute; | 绝对定位 | 脱离 | A) 当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 B) 有父元素且父元素有定位，父元素 |
|
| 3 | position: relative; | 相对定位 | 不脱离 | 自己的初始位置 | |
| 4 | position: fixed; | 固定定位 | 脱离 | 浏览器的当前窗口 | |
| 5 | position: sticky; | 粘性定位 | 可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好 | ||
2、静态定位与相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background: yellow;
}
.box2{
background: blue;
position: relative;
top: 100px;
left: -100px;
/* 负值也有效 */
/*
bottom: 100px;
有top: 100px;后，不起作用*/
/*
position: static;
top: 100px;
不支持，没有任何变化
*/
}
.box3{
background: red;
position: static;
top: 100px;
/*
position: static;
top: 100px;
不支持，没有任何变化
*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>3、绝对定位
父没有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ratione esse eveniet sit veniam dicta voluptatibus fugiat nostrum aut ad. Et reiciendis sint perferendis voluptate cupiditate illum officia? Excepturi, atque.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti vitae voluptate dolorum, aperiam distinctio delectus iste amet error a officiis placeat veritatis non, nobis quidem fuga molestiae, provident possimus expedita.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium laudantium quos odio soluta quis fuga dolorem, sint laborum cupiditate atque saepe. Quae voluptatum natus quos aliquid esse, a consequuntur reiciendis?
</div>
<div class="box"></div>
</body>
</html>父有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background: yellow;
margin: 0 auto;
position: relative;
top: 100px;
left: 100px;
}
.child{
width: 200px;
height: 200px;
background: red;
left: 100px;
top: 100px;
position: absolute;
}
/*
一般设置子盒子为绝对定位，父盒子为相对定位
*/
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>4、固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 1500px;
background: yellow;
}
.ad{
width: 100px;
height: 200px;
background: red;
position: fixed;
right: 0;
bottom: 100px;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="ad">
</div>
</body>
</html>5、粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background: yellow;
}
.nav{
width: 500px;
height: 50px;
margin: 0 auto;
background: red;
position: sticky;
top: 0px;
/* top: -30px; 可以设置负值 */
}
.body{
height: 1000px;
background: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="body"></div>
</body>
</html>定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 668px;
height: 441px;
margin: 0 auto;
}
.box{
width: 198px;
height: 198px;
border: 6px solid #d2cbcd;
position: relative;
float: left;
margin-right: 20px;
margin-bottom: 22px;
}
.boxlast{
margin-right: 0;
}
.box .pic{
width: 100%;
height: 100%;
}
.box .icon{
position: absolute;
left: 4px;
bottom: 2px;
}
.box .greenicon{
display: none;
}
.box:hover .greenicon{
display: block;
}
.box p{
position: absolute;
left: 0;
top: 0;
color: white;
padding: 7px 5px;
display: none;
}
.box:hover p{
display: block;
}
.box:hover .pic{
opacity: 0.7;
/* opacity：图片透明度（0-1）；0为完全透明； */
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="../image/定位-1.png" alt="" class="pic">
<img src="../image/定位tu.png" alt="" class="icon">
<img src="../image/定位tu2.png" alt="" class="icon greenicon">
<p>
<img src="../image/定位logo.png" alt="">
<span>
Lorem ipsum dolor sit amet consectetur
</span>
</p>
</div>
<div class="box">
<img src="../image/定位-1.png" alt="" class="pic">
<img src="../image/定位tu.png" alt="" class="icon">
<img src="../image/定位tu2.png" alt="" class="icon greenicon">
<p>
<img src="../image/定位logo.png" alt="">
<span>
Lorem ipsum dolor sit amet consectetur
</span>
</p>
</div>
<div class="box boxlast">
<img src="../image/定位-1.png" alt="" class="pic">
<img src="../image/定位tu.png" alt="" class="icon">
<img src="../image/定位tu2.png" alt="" class="icon greenicon">
<p>
<img src="../image/定位logo.png" alt="">
<span>
Lorem ipsum dolor sit amet consectetur
</span>
</p>
</div>
<div class="box">
<img src="../image/定位-1.png" alt="" class="pic">
<img src="../image/定位tu.png" alt="" class="icon">
<img src="../image/定位tu2.png" alt="" class="icon greenicon">
<p>
<img src="../image/定位logo.png" alt="">
<span>
Lorem ipsum dolor sit amet consectetur
</span>
</p>
</div>
<div class="box">
<img src="../image/定位-1.png" alt="" class="pic">
<img src="../image/定位tu.png" alt="" class="icon">
<img src="../image/定位tu2.png" alt="" class="icon greenicon">
<p>
<img src="../image/定位logo.png" alt="">
<span>
Lorem ipsum dolor sit amet consectetur
</span>
</p>
</div>
<div class="box boxlast">
<img src="../image/定位-1.png" alt="" class="pic">
<img src="../image/定位tu.png" alt="" class="icon">
<img src="../image/定位tu2.png" alt="" class="icon greenicon">
<p>
<img src="../image/定位logo.png" alt="">
<span>
Lorem ipsum dolor sit amet consectetur
</span>
</p>
</div>
</div>
</body>
</html>三角形案例
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 0px;
height: 0px;
border-top: 20px solid red;
border-left: 20px solid rgba(0, 0, 0, 0);
border-right: 20px solid rgba(0, 0, 0, 0);
border-bottom: 20px solid transparent;
}
.box2{
width: 0px;
height: 0px;
border: 20px solid transparent;
border-bottom: 20px solid blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 50px;
line-height: 50px;
text-indent: 20px;
background: lightblue;
color: white;
}
span{
width: 0;
height: 0;
display: inline-block;
border: 5px solid transparent;
border-top: 5px solid black;
position: relative;
top:2.5px;
}
.box:hover span{
border: 5px solid transparent;
border-bottom: 5px solid white;
top:-2.5px;
}
</style>
</head>
<body>
<div class="box">
导航
<span></span>
</div>
</body>
</html>层级z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background: yellow;
position: relative;
top: 100px;
left: 100px;
z-index: 1;
/* z-index: 1; 层级 */
}
.box2{
background: red;
position: relative;
z-index: -1;
/* z-index: ; 可以设置负数；越大层级越大，越靠上显示 */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>绝对定位——父子关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: yellow;
position: relative;
/* z-index: 1; 层级关系失效 */
}
.child{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 10px;
left: 10px;
z-index: -1;
}
/* 父子关系只能通过在子中设置负数实现层级关系 */
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>绝对定位——兄弟关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
.box2{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
/* 可以把行内元素变为块元素 */
}
/*
行内元素变为块元素：
1、display: block;
2、position: absolute;
3、float: left;
*/
</style>
</head>
<body>
<span>hello</span>
</body>
</html>水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: yellow;
/* margin: 0 auto; */
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background: yellow;
margin: 0 auto;
position: relative;
}
.child{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>浮动与定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
/* float: left; 文字环绕*/
position: absolute;
}
.box2{
width: 300px;
height: 300px;
background: yellow;
}
/*
float：半脱离，文字环绕
absolute：全脱离，不会出现文字环绕效果
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores eveniet, ullam sequi pariatur itaque placeat aliquam animi laborum atque? Eum cum a rem quasi voluptatum, mollitia modi totam porro iste.
</div>
</body>
</html>锚点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
position: fixed;
right: 0px;
top: 100px;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
div{
height: 600px;
border: 1px solid #ccc;
}
/*
锚点作用：页面不同区域的跳转，使用a链接。
<a href="#描点名字"></a>
<div id="锚点名字"></div>
*/
</style>
</head>
<body>
<ul>
<li><a href="#a">京东秒杀</a></li>
<li><a href="#b">双十一</a></li>
<li><a href="#c">频道优选</a></li>
<li><a href="#d">特色广场</a></li>
</ul>
<div id="a">京东秒杀</div>
<div id="b">双十一</div>
<div id="c">频道优选</div>
<div id="d">特色广场</div>
</body>
</html>精灵图
Css Sprites的原理 (图片整合技术)(CSS精灵)/雪碧图
一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用backqround-position来实现背景图片的定位技术。
二、图片整合的优势
1)通过图片整合来减少对服务器的请求次数，从而提高 面的加载速度
2)通过整合图片来减小图片的体积
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 103px;
height: 32px;
float: left;
margin: 10px;
background: yellow url(../image/京东.png);
}
.box1{
background-position: -205px -111px;
}
.box2{
background-position: -205px -75px;
}
.box3{
background-position: -205px 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适。
宽度自适应高度自适应
（1）宽度自适应
元素宽度的默认值为auto
（2）高度自适应
元素高度的默认值{height:auto;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
/* width: 100px; */
/* width: auto; 宽度自适应 浏览器宽度 */
/* width: 100%; 宽度自适应 浏览器宽度 */
width: 100%;
height: 100px;
padding-left: 100px;
/* 宽度自适应时，padding-left 不起作用 */
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.header,.footer{
width: 100%;
height: 50px;
background: yellow;
}
.body{
/* height: auto; 自适应高度*/
background: red;
max-height: 300px;
}
li{
height: 100px;
max-width: 500px;
margin: 0 auto;
background: blue;
}
/*
min-height 最小高度
max-height 最大高度
min-width 最小宽度
max-width 最大宽度
*/
</style>
</head>
<body>
<div class="header"></div>
<div class="body">
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>浮动元素的高度自适应
父元索不写高度时，子元素写了浮动后，父元素会发生高度塌陷
方法1：给父元素添加声明overflow:hidden;（缺点: 会隐藏溢出的元素）
方法2：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both; height;0; overflow:hidden; （缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）
方法3：万能清除浮动法
选择符：after(content:""; clear:both; display:block; height:0; visibility:hidden;/overflow:hidden;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left,.right{
width: 100px;
height: 100px;
float: left;
}
.left{
background: yellow;
}
.right{
background: red;
}
.content{
width: 200px;
height: 200px;
background: green;
}
/* .box{
height: 100px; 如果浮动过多，换行，就会出现问题
} */
.box{
overflow: hidden;
/* 溢出隐藏，文字过多会被隐藏 */
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<!-- <div style="clear: both;"></div> 空标签，代码可读性降低 -->
</div>
<div class="content"></div>
</body>
</html>伪元素
1）after：与content属性一起使用，定义在对象后的内容。
如：div:after{content:url(logo.jpg)}
div:after{content:"文本内容";}
2）before：与content属性一起使用，定义在对象前的内容。
如：div:before{content:"在其前放内容";}
3）first-letter：定义对象内第一个字符的样式
4）first-line：定义对象内第一行文本的样式
伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪元素（使用双引号） */
div::first-letter{
font-size: 30px;
color: red;
}
div::first-line{
background: yellow;
}
div::before{
content: "aaa";
}
div::after{
content: "bbb";
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt assumenda ad esse repellendus ducimus. Numquam impedit placeat molestias nihil quia temporibus quam, non illo minus quo deleniti perferendis vitae eveniet.
</div>
</body>
</html>隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background: yellow;
/* display: none; */
/* display: none; 不占位隐藏 */
visibility: hidden;
/* visibility: hidden; 占位隐藏 */
}
.box2{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>窗口自适应
盒子根据窗口的大小进行改变
设置方法：height,body{height:100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100%;
background: yellow;
/*
width: 100%;
height: 100%;
不会显示
*/
}
html,body{
height: 100%;
}
.child1{
background: blue;
height: 50%;
}
.child2{
background: red;
height: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.box1{
width: 200px;
height: 100%;
background: red;
float: left;
}
.box2{
height: 100%;
background: yellow;
margin-left: 200px;
width: 100%;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>calc()函数的使用
calc()函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算；
calc()函数支持"+""-,"*","/”运算；
calc()函数使用标准的数学运算优先级规则；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.box1{
width: 200px;
height: 100%;
background: red;
float: left;
}
.box2{
width: calc(100% - 200px);
height: 100%;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.left,.right{
width: 200px;
height: 100%;
}
.left{
background: yellow;
float: left;
}
.right{
background: red;
float: right;
}
.center{
height: 100%;
background: blue;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.left,.right{
width: 200px;
height: 100%;
}
.left{
background: yellow;
float: left;
}
.right{
background: red;
float: right;
}
.center{
height: 100%;
background: blue;
width: calc(100% - 200px - 200px);
float: left;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.top,.bottom{
width: 100%;
height: 50px;
background: yellow;
}
.middle{
height: calc(100% - 50px - 50px);
background: red;
}
.left,.right{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.center{
width: calc(100% - 200px);
height: 100%;
background: blueviolet;
float: left;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>表单进阶-单选框</h1>
<div>你对于京东首页满意度如何</div>
<div>
<!-- <input type="radio" name="aaa" checked="checked">非常满意 -->
<input type="radio" name="aaa" checked>非常满意
</div>
<div>
<input type="radio" name="aaa">满意
</div>
<div>
<input type="radio" name="aaa">一般
</div>
<div>
<input type="radio" name="aaa">不满意
</div>
<div>
<div>你的性别</div>
<div>
<input type="radio" name="bbb" id="man">
<label for="man">男</label>
</div>
<div>
<input type="radio" name="bbb" id="woman">
<label for="woman">女</label>
</div>
</div>
</body>
</html>复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>表单进阶-复选框（多选）</h1>
<div>
<div>你的兴趣爱好：</div>
<div>
<input type="checkbox" name="aaa">听音乐
<input type="checkbox" name="aaa" checked="checked">读书
<input type="checkbox" name="aaa" checked>旅游
</div>
</div>
<div>
<div>你擅长的技术：</div>
<div>
<input type="checkbox" name="bbb" id="html">
<label for="html">html</label>
<input type="checkbox" name="bbb" id="js">
<label for="js">js</label>
<input type="checkbox" name="bbb" id="css">
<label for="css">css</label>
</div>
</div>
</body>
</html>上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div>请截图说明</div>
<div>
<!-- 上传文件 -->
<input type="file" name="" id="">
</div>
</div>
<div>
<div>图片按钮-代替提交按钮（input type="submit"）</div>
<from action="">
<!-- 上传文件 -->
<input type="image" src="../image/submit.png">
</from>
</div>
<div>
<div>隐藏按钮</div>
<!-- 隐藏 -->
<input type="hidden" name="" id="" value="带给后端的个人信息">
</div>
<div>
<div>禁用disabled，只读readonly</div>
<div>
<button disabled="disabled">注册</button>
<br>
<input type="radio" disabled>不满意
<br>
<input type="text" disabled value="11111">
<input type="text" readonly value="22222">
</div>
</div>
</body>
</html>下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>下拉菜单</h1>
<div>
<div>你的收货地址</div>
<!--
select 支持的属性
1、size：显示几个
2、multiple：多选
-->
<!--
option 支持的属性
1、value：提供给后端需要用的value值。
2、selected：默认选中
-->
<select size="3">
<option value="sh">上海</option>
<option value="js">江苏</option>
<option>山东</option>
<option selected>山西</option>
<option>辽宁</option>
</select>
<select multiple>
<option>上海</option>
<option selected>江苏</option>
<option>山东</option>
<option selected>山西</option>
<option>辽宁</option>
</select>
</div>
</body>
</html>文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{
width: 300px;
height: 300px;
resize: none;
/* resize：重新设置大小 vertical，horizontal，both，none; */
}
</style>
</head>
<body>
<h1>多行文本输入框-文本域</h1>
<div>
<!--
placeholder：提示文字
默认value：卸载双标签内部，注意空格问题
-->
<textarea cols="10" rows="10" placeholder="请输入您的意见">提前设置好的value</textarea>
</div>
</body>
</html>字段集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset{
border: 1px solid blue;
width: 200px;
height: 200px;
}
legend{
border: 1px solid red;
text-align: right;
padding: 10px;
}
</style>
</head>
<body>
<h1>表单进阶-字段集</h1>
<fieldset>
<legend>性别</legend>
<input type="radio" name="aa">男
<br>
<input type="radio" name="aa">女
</fieldset>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="bb">抽烟
<br>
<input type="checkbox" name="bb">喝酒
</fieldset>
</body>
</html>H5新增
1、HTML5发展史
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。HTML 5的第一份正式草案已于2008年1月22日公布，HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经式定。根W3C的发言稿称：“HTML5是开放的Web网络平台的基石。”
2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。
2、HTML5 的浏览器兼容
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，hrome（谷歌浏览器），Safar，Opera等；国内的浏览器览器（Maxthon），以及基于E或Chromium（Chrome的工程版或称实验版）所准出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产测览器样具备支持HTML5的能力。常用的五大浏览器有：IE，chrome，firefox，safari，opera。
3、HTML5语法
内容类型（ContentType）
HTML5的文件扩展符与内容类型保持不变，仍然为“.html”或“.htm”。
DOCTYPE声明
不区分大小写
指定字符集编码
meta charset="UTF-8"
可省略标记的元素
不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、 tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
省略引号
属性值可以使用双引号，也可以使用单引号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
语义化标签
增强型表单
canvas svg
音频视频
本地存储和离线存储
-->
<input type="text" value="aaaa">
<input type="text" value="bbbb">
<ul>
<li>11111
<li>22222
<li>33333
</ul>
</body>
</html>4、HTML5新增语义化标签
section元素：表示页面中的一个内容区块
article元素：表示一块与上下文无关的独立的内容
aside元素：在article之外的，与article内容相关的辅助信息
header元素：表示页面中一个内容区块或整个页面的标题
footer元素：表示页面中一个内容区块或整个页面的脚注
nav元素：表示页面中导航链接部分
figure元素：表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素：表示页面中的主要的内容（ie不兼容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
header,footer{
height: 50px;
line-height: 50px;
text-align: center;
background: yellow;
}
section{
height: calc(100% - 100px);
}
nav,aside{
width: 100px;
height: 100%;
background: red;
float: left;
}
main{
float: left;
width: calc(100% - 200px);
background: blue;
height: 100%;
}
aside p{
font-size: 13px;
color: #ccc;
}
main .article1{
height: 60%;
background: blueviolet;
}
main .article2{
height: 40%;
background: lawngreen;
}
</style>
</head>
<body>
<!-- 这是头部 -->
<header>header</header>
<section>
<nav>
<figure>nav</figure>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</nav>
<main>
<article class="article1">
<header>article-header</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores sequi officia doloribus ipsa? Officia odio exercitationem porro eos est quasi dolorem quod dolor necessitatibus, hic accusamus quia, eveniet consectetur nulla?</p>
<footer>article-footer</footer>
</article>
<article class="article2">
<header>article-header</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores sequi officia doloribus ipsa? Officia odio exercitationem porro eos est quasi dolorem quod dolor necessitatibus, hic accusamus quia, eveniet consectetur nulla?</p>
<footer>article-footer</footer>
</article>
</main>
<aside>
<figure>aside</figure>
<p class="aside_p">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam perspiciatis suscipit, consequatur voluptatum vero cum, nostrum inventore commodi aut eaque corporis perferendis minima accusantium repellat. Doloremque voluptatem tempore minima delectus.</p>
</aside>
</section>
<footer>footer</footer>
</body>
</html>5、Video和audio的应用
video元素 定义视频
<video src="movie.ogg" controls="controls">Video元素</video>
audio元素 定义音频
<audio src="someaduio.wav">Audio元素</audio>
controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性
muted属性：静音属性
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地
文章浏览阅读645次。这个肯定是末尾的IDAT了，因为IDAT必须要满了才会开始一下个IDAT，这个明显就是末尾的IDAT了。，对应下面的create_head()代码。，对应下面的create_tail()代码。不要考虑爆破，我已经试了一下，太多情况了。题目来源：UNCTF。_攻防世界困难模式攻略图文
达梦数据库的导出（备份）、导入_达梦数据库导入导出-程序员宅基地
文章浏览阅读2.9k次，点赞3次，收藏10次。偶尔会用到，记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录，执行导库操作 导出语句：./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释： cwy_init/init_123..._达梦数据库导入导出
js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件，可以删掉不需要要到的jsp，asp，asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件，在页面引入js文件：<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地
文章浏览阅读2.3k次，点赞6次，收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA，我们的数据线就会变为10101010，通过修改不同的内容，即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平，后半周期为低电平的状态。在SPI的通信模式中，CPHA配置会影响该实验，下图展示了不同采样位置的SPI时序图[1]。CPOL = 0，CPHA = 1：CLK空闲状态 = 低电平，数据在下降沿采样，并在上升沿移出CPOL = 0，CPHA = 0：CLK空闲状态 = 低电平，数据在上升沿采样，并在下降沿移出。_stm32g431cbu6
计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地
文章浏览阅读1.2k次，点赞2次，收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决？5.如果在数据链路层不进行帧定界，会发生什么问题？6.PPP协议的主要特点是什么？为什么PPP不使用帧的编号？PPP适用于什么情况？为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
软件测试工程师移民加拿大_无证移民，未受过软件工程师的教育（第1部分）-程序员宅基地
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民，未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
随便推点
Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地
文章浏览阅读304次。Thinkpad X250笔记本电脑，装的是FreeBSD，进入BIOS修改虚拟化配置（其后可能是误设置了安全开机），保存退出后系统无法启动，显示：secure boot failed ，把自己惊出一身冷汗，因为这台笔记本刚好还没开始做备份.....根据错误提示，到bios里面去找相关配置，在Security里面找到了Secure Boot选项，发现果然被设置为Enabled，将其修改为Disabled ，再开机，终于正常启动了。_安装完系统提示secureboot failure
C++如何做字符串分割（5种方法）_c++ 字符串分割-程序员宅基地
文章浏览阅读10w+次，点赞93次，收藏352次。1、用strtok函数进行字符串分割原型： char *strtok(char *str, const char *delim);功能：分解字符串为一组字符串。参数说明：str为要分解的字符串，delim为分隔符字符串。返回值：从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它：strtok函数线程不安全，可以使用strtok_r替代。示例：//借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
2013第四届蓝桥杯 C/C++本科A组 真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯：无论如何都要记日记。他的日记有个与众不同的地方，他从不注明年月日，而是用一个整数代替，比如：4210后来人们知道，那个整数就是日期，它表示那一天是高斯出生后的第几天。这或许也是个好习惯，它时时刻刻提醒着主人：日子又过去一天，还有多少时光可以用于浪费呢？高斯出生于：1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地
文章浏览阅读851次，点赞17次，收藏22次。摘要：本文利用供需算法对核极限学习机(KELM)进行优化，并用于分类。
metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功，进入系统4、测试如下：二、MySQL弱密码登录：1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功，进入MySQL系统3、测试效果：三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
Python学习之路：从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南，从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文，您将能够掌握Python编程的核心概念，为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf