目录
HTML
文档结构
<!DOCTYPE html> <!-- 文档声明头，表示这个页面使用哪个HTML版本进行编译，这里是HTML5的声明 -->
<html> <!-- html最外层标签，表示网页内容的开始 -->
<head>
<title>网站标题在这里</title>
</head>
<body> <!-- 包含网页中的课件元素 -->
</body>
</html>
常用标签
- h1~h6 标题
- p 段落
- strong/em 加粗/斜体
- hr/br 分割线/换行
- ul/ol/dl 无序列表/有序列表/自定义列表
- li 定义列表项目
- div/span 容器
- table 表格
- a 链接
- img 图片
- form 表单
- input 搜集用户信息
- textarea 文本域
- select 下拉列表
- button 按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是网站标题</title>
</head>
<body>
<div id="nav"> <!-- div用于页面布局-->
<dl><!--dl，自定义列表-->
<dt>目录</dt> <!--dt，自定义列表的术语部分-->
<dd><a href="#jh" title="诗词" target="_blank">菊花</a></dd> <!--a，链接，href链接的地址，title额外信息，target定义打开链接的方式-->
<dd><a href="#zs" title="关键字注解">注释</a></dd> <!--dd，定义自定义列表中的描述部分-->
<dd><a href="#ck" title="查阅书籍">参考</a></dd>
</dl>
</div>
<div class="content">
<div id="cover">
<img src="https://s3.ax1x.com/2020/12/26/r422FS.jpg" alt="菊花图片" width="100px"> <!--图片标签，src图片的资源链接，alt图片加载失败显示的文字-->
</div>
<div id="poem">
<p id="jh">菊花</p><!--p，段落-->
<p><strong>元稹</strong> <em>[唐代]</em></p> <!--strong加粗强调与em斜体-->
<p>
秋丛绕舍似陶家，遍绕篱边日渐斜。<br>
不是花中偏爱菊，此花开尽更无花。<br>
</p>
</div>
<div id="comment">
<p id="zs">注释</p>
<ol><!--有序列表-->
<li>秋丛：指丛丛秋菊。</li> <!--li有序列表的项部分-->
<li>舍（shè）：居住的房子。</li>
<li>陶家：陶渊明的家。陶，指东晋诗人陶渊明。</li>
<li>遍绕：环绕一遍。</li>
<li>篱（lí）：篱笆。</li>
<li>日渐斜（xiá）：太阳渐渐落山。斜，倾斜。因古诗需与上一句押韵，所以应读xiá。</li>
<li>尽：完。</li>
<li>更（gèng）：再。</li>
</ol>
</div>
<div id="references">
<p id="ck">参考</p>
<ul><!--ul，无序列表-->
<li>萧涤非 等．《唐诗鉴赏辞典》：上海辞书出版社，1983：857-858页</li>
<li>雅瑟．《唐诗三百首鉴赏大全集》：新世界出版社，2011：327-328页</li>
</ul>
</div>
<div id="info">
<table border="1px" cellspacing="0"><!--table表格，border边框属性，cellspacing表格间隔大小属性-->
<caption>信息</caption><!--表格的标题-->
<tr><!--表格的行-->
<th>作品名称</th><!--包含表头信息单元格-->
<th>作品出处</th>
<th colspan="2">创作年代-作者</th> <!--colspan列合并-->
<!-- <th>作者</th>-->
<th>文学体裁</th>
</tr>
<tr>
<td>《菊花》</td><!--标准单元格-->
<td rowspan="2">《元氏长庆集》</td> <!--rowspan行合并-->
<td rowspan="2">中唐</td>
<td rowspan="2">元稹</td>
<td>七言绝句</td>
</tr>
<tr>
<td>《行宫》</td>
<!-- <td>《元氏长庆集》</td>-->
<!-- <td>中唐</td>-->
<!-- <td>元稹</td>-->
<td>五言绝句</td>
</tr>
</table>
</div>
<div id="registered">
<form action="http://localhost" method="post"> <!--表单，action提交的服务器，method提交方式-->
<p>
<input type="text" placeholder="用户名"> <!--type表示不同的类型，text表示文本类型，placeholder提示字段-->
</p>
<p>
<input type="password" placeholder="密码"> <!-- password表示密码类型-->
</p>
<p>
<label for="male">男</label> <!--可以通过点击在label标签内的文字选择单选框，for表示绑定到哪个元素上-->
<input type="radio" name="sex" checked="checked" id="male"> <!--radio表示单选框，相同的name的单选框只能选一个，checked表示默认选择-->
<label for="female">女</label>
<input type="radio" name="sex" id="female">
</p>
<p>
喜好：唐诗<input type="checkbox" checked="checked">宋词<input type="checkbox">元曲<input type="checkbox"> <!--多选框-->
</p>
<p>
<select name="q"> <!--单选下拉框，name表示下拉框的名字-->
<option selected="selected">设置密保问题</option> <!--下拉选项标签，selected属性表示默认选中这个选项-->
<option value="q1">无密保问题</option> <!--value必须要有用于区分选择的项-->
<option value="q2">你的生日是？</option>
<option value="q3">你的母亲的姓名是？</option>
</select>
</p>
<p>
<select name="w" multiple="multiple"> <!--multiple属性，多选下拉框-->
<option selected="selected">---了解途径---</option>
<option value="w1">朋友介绍</option>
<option value="w2">游览发现</option>
<option value="w3">平台推送</option>
</select>
</p>
<textarea placeholder="个人描述" rows="5" cols="30"></textarea> <!--文本框，maxlength长度限制，rows默认框的长度，cols默认框的宽度-->
<p>
<input type="submit" value="注册"> <!--submit表示提交按钮，将表单提供给服务器-->
<input type="reset" value="重置"> <!--reset重置表单内容-->
</p>
</form>
</div>
</div>
<hr> <!--分割线-->
<div id="footer">
<button>按钮</button> <!--按键标签-->
<a href="mailto:12345678@gmail.com">联系我</a> <!--发送邮件-->
</div>
</body>
</html>
CSS
三种引用方式
- 内联式：不易维护，拥有相同样式的选择器会有非常多的重复代码。
- 内部式：减少了选择器重复的代码，但是只能在一个页面内使用，多个页面使用相同样式也是代码冗余。
- 外部式：解决代码冗余，易于维护，但是需要额外请求样式文件，推荐使用。
因为html的渲染是从上至下执行，当三种引用方式都使用的时候，后面的引用方式的样式会覆盖前面的样式。
内联式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="color: red;">这是什么颜色？</div> <!--这是内联式-->
</body>
</html>
内部式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> <!--这是内部式-->
div{
color: red;
}
</style>
</head>
<body>
<div>这是什么颜色？</div>
</body>
</html>
外部式
/*外部样式文件test.css*/
div{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="test.css"> <!--引入外部样式-->
</head>
<body>
<div>这是什么颜色？</div>
</body>
</html>
选择器
- 标签（元素）选择器，直接指定元素
- 选择器分组，使用逗号隔开指定选择器进行相同样式设置
- 类（class）选择器，使用 . 加class名选中归属同一类的元素
- ID（唯一值）选择器，使用 # 加id名选中唯一元素
- 属性选择器，选中拥有这个属性的元素
- 后代选择器，选中某个元素的所有指定的后代元素
- 子代选择器，选中某个元素的子代元素
- 相邻选择器，选中拥有相同父元素的某个元素的相邻的元素
- 伪类，向选择器添加特殊效果
- 伪元素，向选择器添加特殊效果
标签选择器
<!--
会选中所有指定的标签设置样式，如下选中所有div进行样式设置。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
color: red;
}
</style>
</head>
<body>
<div>这是什么颜色？</div>
<div>COLOR</div>
</body>
</html>
组合选择器
<!--
用逗号隔开选择不同的选择器设置相同的样式，如下选择div和a两个标签进行相同样式设置。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div, a{
color: orange;
}
</style>
</head>
<body>
<div>
这是什么颜色？
</div>
<a>COLOR</a>
</body>
</html>
类选择器
- 单类选择器
- 多类选择器
<!--
单类选择器，选中归属于相同类的标签进行样式设置，如下选择拥有相同class属性的标签进行设置。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c1{
color: red;
}
.c2{
font-size: 30px;
}
</style>
</head>
<body>
<div class="c1">这是什么颜色？</div>
<div class="c1 c2">COLOR</div>
</body>
</html>
<!--
多类选择器（.c1.c2 ）
.c1 .c2 表示c1类下的c2类
.c1,.c2 表示选中包含c1或c2的类的元素
.c1.c2 表示选中同时包含c1和c2类的元素
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.d1{
color: yellow;
}
.d2{
color: blue;
}
.d1.d2 {
color: red;
}
</style>
</head>
<body>
<div class="d1">A</div>
<div class="d1 d2">
这是什么颜色？
</div>
<div class="d2">B</div>
</body>
</html>
ID选择器
<!--
选中指定id的标签进行样式设置，如下选择拥有指定id属性为div1的元素进行样式设置。
id选择器前面有个#号，也称为棋盘号或井号。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">这是什么颜色？</div>
<div id="div2">COLOR</div>
</body>
</html>
属性选择器
- 选择拥有指定属性的元素
- 选择拥有指定属性并且拥有指定值得元素
<!--
选择拥有指定属性的元素进行设置。
如下第一个选择的是拥有title属性的元素，第二个是拥有id属性，
第三个是同时拥有title和id属性的元素。
通配符：
[title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
a[href^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
a[href$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[href*="abc"] 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[title]{
color: red;
}
[id]{
color: blue;
}
[title][id]{
color: blueviolet;
}
</style>
</head>
<body>
<div title="test">
这是什么颜色？
<div id="d2" title="test2">A</div>
</div>
<div id="d1">COLOR</div>
</body>
</html>
<!--
指定具体属性值选择器，如下选择div标签中有title属性并且等于test1的元素。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div[title="test1"]{
color: blue;
}
</style>
</head>
<body>
<div title="test1">
这是什么颜色？
</div>
<div title="test2">COLOR</div>
</body>
</html>
后代选择器
<!--
选择指定选择器下的所有指定的选择器，如下选择div下的所有的p标签进行设置。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div p{
color: orange;
}
</style>
</head>
<body>
<div>
<p>这是什么颜色？</p>
</div>
<p>COLOR</p>
</body>
</html>
子代选择器
<!--
使用>号表示子代，选择指定选择器下的子代选择器，不是所有，仅仅是子代，如下选择的是div
下的和p同一级的所有a标签，p下的a标签并未被选中。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>a{
color: orange;
}
</style>
</head>
<body>
<div>
<p>
<a>
这是什么颜色？
</a>
</p>
<a>COLOR</a>
</div>
</body>
</html>
相邻选择器
<!--
两个元素有相同的父元素，并且他们是相邻的，会选中加号后面的元素。
如下选择的是p元素后相邻的是a的元素进行设置。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p + a{
color: orange;
}
</style>
</head>
<body>
<div title="test1">
<p>这是什么颜色？</p>
<a title="test2">COLOR</a>
<p>test</p>
</div>
</body>
</html>
伪类
伪类用于向某些选择器添加特殊的效果。
- 锚伪类
- first-child 伪类
- lang 伪类（略）
<!--
锚伪类，向文档中的超链接的不同状态添加不同的颜色或者其他样式。
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 鼠标按住选定的链接
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
如下选择的是a标签并且类是test的元素。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a.test:link{color: #1400ff; font-size: 30px}
a.test:visited{color: #00ffb0; font-size: 20px}
a.test:hover{color: rgba(119, 0, 255, 0.65); font-size: 25px}
a.test:active{color: red; font-size: 60px}
</style>
</head>
<body>
<div>
<a class="test" href="test.css">这是什么颜色？</a>
<a href="test.html">COLOR</a>
</div>
</body>
</html>
<!--
first-child 伪类，用于选中某个元素的第一个子元素是指定元素的元素。
如下第一个选中的是某个元素的第一个子元素是p的子元素。
如下第二个选中的是某个元素的第一个子元素是a的子元素。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p:first-child{
font-size: 30px;
}
a:first-child{
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>
这是什么颜色？
</p>
<p>
<a href="">COLOR</a>
</p>
</div>
</body>
</html>
伪元素
伪元素用于向某些选择器设置特殊效果。
- first-line 伪元素
- first-letter 伪元素
- before 伪元素
- after 伪元素
<!--
first-line 伪元素，向文本的首行设置特殊样式。
first-line伪元素只能用于块级元素。
下面的属性可应用于 "first-line" 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
如下向p元素的第一行添加样式。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p::first-line{
color: red;
}
</style>
</head>
<body>
<div>
<p>
这是什么颜色？<br>
COLOR<br>
</p>
</div>
</body>
</html>
<!--
first-letter 伪元素，用于向文本的首字母设置特殊样式。
下面的属性可应用于 "first-letter" 伪元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
如下选择的是p标签的首字母设置样式。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p::first-letter{
color: red;
font-weight: bolder;
}
</style>
</head>
<body>
<div>
<p>
这是什么颜色？<br>
COLOR<br>
</p>
</div>
</body>
</html>
<!--
before 伪元素，可以在元素的内容前面插入新内容。
如下选择的是p标签前添加内容。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p::before{
content: ">>>>>>>>>>>>>";
}
</style>
</head>
<body>
<div>
<p>
这是什么颜色？<br>
COLOR<br>
</p>
</div>
</body>
</html>
<!--
after 伪元素，可以在元素的内容后面插入新内容。
如下选择的是p标签后面添加内容。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p::after{
content: "<<<<<<<<<<<<<<<<<<<<";
}
</style>
</head>
<body>
<div>
<p>
这是什么颜色？<br>
COLOR<br>
</p>
</div>
</body>
</html>
选择器权重
- 第一等级：代表 内联样式，权值为 1000。
- 第二等级：代表 ID选择器，权值为 100。
- 第三等级：代表 class、伪类、属性选择器，权值为 10。
- 第四等级：代表 标签、伪元素选择器，权值为 1。
- 继承的样式权值最低，接近于0。
此外，通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0。
总权重=第一等级数量×1000+第二等级数量×100+第三等级数量×10+第四等级数量
除了上面的权值外还有一个属性 !important，设置这个属性权重为最高，但只在特定情况下使用，因为会破坏权值的规则。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*对文字进行颜色设置*/
/*文字通过继承设置颜色，权重0*/
body{
color: #ff6661;
}
/*文字通过标签选择器设置颜色，权重1*/
div{
color: #fff408;
}
/*文字通过标签选择器设置颜色，权重4*/
div p a strong{
color: #009dff;
}
/*文字通过类选择器和标签选择器设置颜色，权重11*/
.d1 strong{
color: #03ff16;
}
/*文字通过类选择器和ID选择器和标签选择器设置颜色，权重111*/
.d1 #s1 strong{
color: #0b00ff;
}
/*权重210*/
.d1 #s1 #s2{
color: #ff00fe;
}
/*权重211*/
.d1 p #s1 #s2{
color: #ffaf04;
}
/*添加!important属性，权重最高*/
strong{
color: black !important;
}
</style>
</head>
<body>
<div class="d1">
<p>
<a id="s1">
<strong id="s2">COLOR</strong>
</a>
</p>
</div>
</body>
</html>
基本样式
字体属性
- font-family 设置字体的系列，如果样式不存在则选择下一个
- font-size 设置字体大小
- px（像素）
- cm（厘米）
- mm（毫米）
- ...
- color 设置字体颜色
- rgb（三原色）表示
- rgba（多了一个透明度）表示
- hex（十六进制）表示
- font-style 设置字体样式
- normal（标准）
- italic（斜体）
- oblique（倾斜）
- inherit（继承父元素）
- font-size 设置字体粗细，一般取值为100-900的数，400为标准。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*12*/
.box1 p a{
font-family: "华文彩云", "微软雅黑", serif;
font-size: 150px;
color: #36e1f5;
font-style: italic;
font-weight: 700;
}
/*22*/
.box1 p a:hover{
color: blue;
}
</style>
</head>
<body>
<div class="box1">
<p>
<a href="test.html">COLOR</a>
</p>
</div>
</body>
</html>
文本属性
- text-decoration 添加文本的修饰
- none（无）
- underline（下划线）
- overline（上划线）
- line-through（删除线）
- inherit（继承）
- text-indent 规定文本块首行的缩进。
- line-height 设置行高。
- letter-spacing 设置字符间距。
- word-spacing 设置单词间距。
- text-align 规定文本的水平对齐方式，左中右（left/center/right）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
width: 48em;
}
.box1 p:first-child{
word-spacing: 10px;
color: red;
text-decoration: none;
text-align: center;
}
.box1 p {
color: #000000;
text-decoration: #2f8b93 underline;
text-indent: 2em;
line-height: 2em;
letter-spacing: 0;
}
</style>
</head>
<body>
<div class="box1">
<p>Prose Title</p>
<p>
这次我看到了草原。那里的天比别处的更可爱。空气是那么清鲜，天空是那么明朗，使我总想高歌一曲，表示我满心的愉快。在天底
下，一碧千里，而并不茫茫。四面都有小丘，平地是绿的，小丘也是绿的。羊群一会儿上了小丘，一会儿又下来，走到哪里都像给无
边的绿毯绣上了白色的大花。那些小丘的线条是那么柔美，就像只用绿色渲染，不用墨线勾勒的中国画那样，到处翠色欲流，轻轻流
入云际。这种境界，既使人惊叹，又叫人舒服;既愿久立四望，又想坐下低吟一首奇丽的小诗。在这境界里，连骏马和大牛都有时候
静立不动，好像回味着草原的无限乐趣。
</p>
</div>
</body>
</html>
继承性
<!--
对父级元素进行设置某些属性，后代会继承这个属性。
如下对body设置字体颜色，后代会继承这个颜色。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
color: orange;
content: ">>>>>>>>";
}
</style>
</head>
<body>
<div>
<p>
<strong>
<a href="">
COLOR
</a>
</strong>
</p>
</div>
</body>
</html>
清除默认样式
一些标签默认的样式会影响排版布局，所以需要将一些标签的默认样式清除。
下面是网上已经有人写好的清除样式。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: \'\';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
元素分类
display属性
- 块级元素，独占一行，可以设置宽高，不设置宽度继承父元素宽度，默认display:block;
** div、ul、ol、p、h、table、form - 行内元素，在一行内显示，不能设置宽高，宽高根据文本内容决定，默认display:inline;
** a、span、em、strong、label - 行内块级元素，在一行内显示，可以设置宽高，默认display:inline-block;
** input、img
display控制元素显示的方式。除了上面的值还有一个none，在需要隐藏元素的时候使用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
background-color: #e5dd7a;
width: 200px;
height: 200px;
color: red;
}
a,span{
color: #ffffff;
text-decoration: none;
background-color: #0087ff;
/*设置宽高无效*/
width: 500px;
height: 500px;
}
img{
color: green;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="box1">
块级元素独占一行，可以设置宽高。
</div>
<a href="">行内元素在一行内显示</a><span>不能设置宽高</span>
<img src="https://s3.ax1x.com/2020/12/26/r422FS.jpg" alt="行内块元素，一行显示，可以设置宽高">
</body>
</html>
顶部栏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
text-decoration: none;
}
.top_bar{
width: 60%;
height: 60px;
background-color: #333333;
font-size: 25px;
}
.top_bar a{
color: rgba(255, 255, 255, 0.8);
line-height: 60px;
/* 将a标签变为行内块元素就可以设置宽高，增加了链接点击区域的范围 */
display: inline-block;
}
.top_bar a:hover{
color: #ffffff;
}
.top_bar span{
color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<div class="top_bar_nav">
<a href="">首页</a>
<span>|</span>
<a href="">商城</a>
<span>|</span>
<a href="">新闻</a>
<span>|</span>
<a href="">服务</a>
</div>
</body>
</html>
盒子模型
在CSS中，"box model"这一术语是用来设计和布局时使用，网页中基本上都会显示一些方方正正的盒子。
我们称为这种盒子叫盒模型。
盒模型的属性：
- width/heigth，内容的宽高
- padding，内边距，也就是内容到表框的距离
- margin，外边距，就是盒子边框到另外一个盒子的距离
- border，边框，指盒子边框的大小
盒模型的真实高度=width+2×padding+2×border
盒模型的真实宽度=height+2×padding+2×border
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
}
a{
text-decoration: none;
}
.top_bar_nav{
width: 60%;
height: 60px;
background-color: #333333;
font-size: 25px;
padding-left: 20px;
border: 1px solid orange;
margin: auto;
}
.top_bar_nav a{
color: rgba(255, 255, 255, 0.8);
line-height: 60px;
display: inline-block;
}
.top_bar_nav a:hover{
color: #ffffff;
}
.top_bar_nav span{
color: rgba(255, 255, 255, 0.1);
}
input{
width: 360px;
height: 60px;
font-size: 30px;
padding: 0 20px;
outline: none;
margin: 20px 375px;
}
input:hover{
border: orange 2px solid;
}
</style>
</head>
<body>
<div class="header">
<div class="top_bar_nav">
<a href="">首页</a>
<span>|</span>
<a href="">商城</a>
<span>|</span>
<a href="">新闻</a>
<span>|</span>
<a href="">服务</a>
</div>
</div>
<input type="text" placeholder="改变输入框">
</body>
</html>
浮动
标准文档流
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。
并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
标准文档流会出现的现象：
- 空白折叠现象
- 高矮不齐，底边对其
- 自动换行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1, .test2, .test3{
border: 2px red solid;
margin-bottom: 20px;
}
.test1 img{
width: 100px;
}
.test2 span{
font-size: 32px;
}
.test3{
width: 100px;
}
</style>
</head>
<body>
<div class="test1">
<p>
空白折叠现象，不论写 （前面有10个空格）多少空格都会被折叠成一个。
</p>
<div>
<p>换行写的img</p>
<img src="https://s3.ax1x.com/2020/12/26/r422FS.jpg" alt="">
<img src="https://s3.ax1x.com/2020/12/26/r422FS.jpg" alt="">
</div>
<div>
<p>一行写的img</p>
<img src="https://s3.ax1x.com/2020/12/26/r422FS.jpg" alt=""><img src="https://s3.ax1x.com/2020/12/26/r422FS.jpg" alt="">
</div>
</div>
<div class="test2">
<span>文字</span>大小不一，底边对齐。
</div>
<div class="test3">
<p>
文字超出宽度，将会自动换行。一个单词就超出长度是不会换行的。AAAAAAAAAA BBB
</p>
</div>
</body>
</html>
浮动现象
float 属性定义元素在哪个方向浮动。left/right/none/inherit
浮动的现象：
- 文字环绕
- 脱离标准文档流，行内元素也可也设置宽高
- 浮动元素互相贴靠
- 浮动元素有收缩现象（当未设置宽度时，浮动收缩为内容宽度）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1, .test2{
width: 300px;
height: 300px;
margin-bottom: 20px;
background-color: brown;
}
.box1, .box2{
width: 100px;
height: 100px;
float: left;
}
.box1{
background-color: orange;
}
.box2{
background-color: green;
}
/*文字环绕*/
.test1 p{
color: #333333;
/*超过宽度文字自动换行*/
word-break: break-all;
font-size: 20px;
}
/*浮动收缩现象，这里继承父元素的宽度*/
.test3 div{
width: inherit;
}
</style>
</head>
<body>
<!--文字环绕-->
<div class="test1">
<div class="box1"></div>
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
</div>
<!--浮动元素互相贴靠-->
<div class="test2">
<div class="box1"></div>
<div class="box2"></div>
</div>
<!--浮动收缩现象-->
<div class="test3">
<div class="box1">AAAA</div>
<div class="box2">BBBB</div>
</div>
</body>
</html>
浮动元素的破坏性
浮动元素的破坏性是指当浮动元素脱离标准文档流造成的结构混乱。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1{
border: 1px orange solid;
}
.box1, .box2{
width: 100px;
height: 100px;
background-color: red;
border: white 1px solid;
}
/*可以通过注释box1和box2查看效果*/
.box1{
float: left;
}
.box2{
float: right;
}
.test2{
background-color: purple;
height: 200px;
}
</style>
</head>
<body>
<!--当父元素没有设置高度，并且子元素都设置了浮动脱离了标准文档流的时候，
那么原本靠子元素的宽度撑起的父元素高度将不存在，原本的结构将会塌陷。
-->
<div class="test1">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="test2"></div>
</body>
</html>
浮动元素破坏性解决方法
- 增加父元素的高度
- 内墙法
- 伪元素清除
- overflow
增加父元素的高度
增加父元素的高度，缺点，当需要修改时不仅要修改父元素的高度还要修改子元素的高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1{
border: 1px orange solid;
}
.box1, .box2{
width: 100px;
height: 100px;
background-color: red;
border: white 1px solid;
}
.box1{
float: left;
}
.box2{
float: right;
}
.test2{
background-color: purple;
height: 200px;
}
/*方法一，给父元素添加高度*/
.test1{
height: 100px;
}
</style>
</head>
<body>
<div class="test1">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="test2"></div>
</body>
</html>
内墙法
内墙法，内墙法也就是在需要浮动的元素最后用一堵墙把原来的浮动堵起来，使用一个空的div元素，将浮动都清除。
缺点，结构冗余，因为需要在每一个需要清除浮动的后面都要加一个div。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1{
border: 1px orange solid;
}
.box1, .box2{
width: 100px;
height: 100px;
background-color: red;
border: white 1px solid;
}
.box1{
float: left;
}
.box2{
float: right;
}
.test2{
background-color: purple;
height: 200px;
}
/*方法二，内墙法，在浮动元素最后添加一个空的div设置为清除浮动*/
.clear_float{
clear: both; /*元素左右两边都不允许有浮动*/
}
</style>
</head>
<body>
<div class="test1">
<div class="box1"></div>
<div class="box2"></div>
<div class="clear_float"></div>
</div>
<div class="test2"></div>
</body>
</html>
伪元素清除
伪元素清除，伪元素清除的方法是在方法二上优化。
::after伪元素，在浮动元素的父元素最后添加一个清除浮动的块元素清除浮动带来的影响。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1{
border: 1px orange solid;
}
.box1, .box2{
width: 100px;
height: 100px;
background-color: red;
border: white 1px solid;
}
.box1{
float: left;
}
.box2{
float: right;
}
.test2{
background-color: purple;
height: 200px;
}
/*方法三，伪元素清除法*/
.clear_float::after{
content: \'.\';
display: block;
clear: both; /*元素左右两边都不允许有浮动*/
height: 0;
visibility: hidden; /* 添加的内容隐藏 */
}
</style>
</head>
<body>
<div class="test1 clear_float">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="test2"></div>
</body>
</html>
overflow
overflow:hidden，overflow属性规定当内容溢出元素框时发生的事情，hidden表示隐藏。
使用这个方法是因为会形成一个BFC区域。BFC区域的一条规则：浮动的元素也参与BFC区域高度的计算。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.test1{
border: 1px orange solid;
/*方法四，形成BFC区域使浮动的元素也参与父元素高度的计算*/
overflow: hidden;
}
.box1, .box2{
width: 100px;
height: 100px;
background-color: red;
border: white 1px solid;
}
.box1{
float: left;
}
.box2{
float: right;
}
.test2{
background-color: purple;
height: 200px;
}
</style>
</head>
<body>
<div class="test1">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="test2"></div>
</body>
</html>
BFC
FC是W3C的规范中的一种概念，是页面中的一块渲染区域并且有一套渲染规则，决定元素如何定位以及与其它元素的关系和相互作用。
常见的FC有：
- Block fomatting context（BFC）
- Inline formatting context （IFC）
BFC（Block Formatting Context），块级格式化上下文，一个独立的渲染区域，
只有块级盒子参与，规定了内部块级盒子如何布局，区域与外部之间毫不相干。
BFC布局规则：
- 区域内部的盒子会在垂直方向，一个接一个的放置。
- 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。
- 每个元素的左边margin会与包含这个元素的左边border相接触（从左往右的格式化，否则相反），即使浮动也是如此。
- BFC的区域不会与浮动元素重叠。
- BFC是页面上的一个隔离的区里容器，容器里面的子元素不会影响到外面的元素，反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
形成BFC条件
- 根元素（html）
- float属性不为none
- position为absolute或fixed
- display为inline-block
- overflow不为visible
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
list-style: none;
}
[class*="test"]{
border: orange 4px solid;
overflow: hidden;
}
.test1 .box1{
margin-top: 20px;
width: 300px;
height: 200px;
background-color: #ff0000cc;
float: left;
}
.test1 .box2{
width: 700px;
height: 100px;
background-color: #0000ff66;
margin-bottom: 50px;
}
.test1 .box3{
width: 300px;
height: 200px;
background-color: #8000809c;
margin-top: 100px;
overflow: hidden;
}
.test2{
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="test1">
<div class="box1">
<ul>
<li>1.浮动元素，也与父元素左border接触</li>
<li>2.垂直方向一个一个放置</li>
</ul>
</div>
<div class="box2">
<ul>
<li>1.左边margin与父元素左border接触</li>
<li>2.垂直方向一个一个放置</li>
<li>3.垂直margin区域重叠</li>
<li>4.计算BFC的高度时，浮动元素也参与计算</li>
</ul>
</div>
<div class="box3">
<ul>
<li>1.不会与浮动元素重叠</li>
<li>2.垂直方向一个一个放置</li>
<li>3.垂直margin区域重叠</li>
<li>4.计算BFC的高度时，浮动元素也参与计算</li>
</ul>
</div>
</div>
<div class="test2">1.不会影响外部元素</div>
</body>
</html>
导航栏
遇到的问题：
- 在使用两个不同类型的input标签的时候发现无法对齐且两个标签之间有空白折叠。
- submit类型的input标签是border-box，设置的宽度和高度直接是盒模型最终的宽高。
空白折叠：在父元素添加font-size:0解决。
无法对齐：添加垂直对齐属性vertical-align解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
border: none;
outline: none;
}
body{
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
/*overflow-y: scroll;*/
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.site-topbar{
height: 40px;
background-color: #333;
}
.center{
width: 1226px;
margin: 0 auto;
overflow: hidden;
}
.header-logo a{
display: block;
width: 55px;
height: 55px;
background: url(https://s3.ax1x.com/2021/01/04/si4lCj.png) #ff6700 50% 50% no-repeat;
text-align: center;
}
.header-logo{
float: left;
margin-top: 22px;
width: 62px;
}
.nav{
width: 850px;
float: left;
}
.nav ul{
padding: 12px 0 0 30px;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: block;
color: #333;
padding: 26px 10px 38px;
font-size: 16px;
}
#first_li a{
padding: 26px 0 38px;
text-align: right;
width: 127px;
padding-right: 15px;
}
.search{
float: right;
width: 296px;
margin-top: 25px;
}
.search form{
height: 50px;
width: 296px;
font-size: 0;
margin-bottom: 14px;
position: relative;
}
.search input[type=\'text\']{
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
}
.search input[type=\'submit\']{
width: 52px;
height: 50px;
background-color: #fff;
border: 1px solid #e0e0e0;
padding: 1px 6px;
font-size: 24px;
line-height: 24px;
margin-left: -1px;
vertical-align: top;
}
.search input[type=\'submit\']:hover{
background-color: #ff6700;
}
.hot_word{
position: absolute;
top: 1px;
right: 52px;
}
.hot_word span{
line-height: 48px;
font-size: 14px;
padding: 0 5px;
margin-right: 5px;
background-color: #eee;
color: #757575;
}
.hot_word span:hover{
/*改变鼠标悬浮的样式*/
cursor: pointer;
color: #fff;
background-color: #ff6700;
}
</style>
</head>
<body>
<!-- 网页的头部 -->
<div class="header">
<!-- 网站的顶部 -->
<div class="site-topbar"></div>
<!-- 网站的头 -->
<div class="site-header">
<!-- 头里居中展示的部分 -->
<div class="center">
<!-- 网站的logo -->
<div class="header-logo">
<a href="#" class="logo"></a>
</div>
<!-- 网站的导航栏 -->
<div class="nav">
<ul>
<li id="first_li"><a href="#">全部商品分类</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi 红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="search">
<form action="#">
<input type="text" placeholder="小米10">
<input type="submit" value="