一、html
a 元素 - 锚点链接
<!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>
<!--
页面内的锚点效果
1. 在跳转到的元素上添加id
2. 定义a元素, 并且a元素的href属性指向id
-->
<a href="#theme01">跳转到主题一</a>
<a href="#theme02">跳转到主题二</a>
<a href="#theme03">跳转到主题三</a>
<h2 id="theme01">主题一</h2>
<p>
我是coderwhy <br />
哈哈哈哈哈哈
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
<h2 id="theme02">主题二</h2>
<p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
<h2 id="theme03">主题三</h2>
<p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</body>
</html>
1、a 元素 和 img元素结合使用 - 锚点链接
<!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="https://www.mi.com/redmik50" target="_blank">
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ab8e5096ac6f08bd632e4d5a15d1792.jpg?w=632&h=340"
alt=""
/>
</a>
</body>
</html>
2、a 元素的其他链接
<!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>
<!-- 指向链接: zip压缩包 -->
<a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip"
>下载zip包</a
>
<!-- 指向其他协议地址: mailto -->
<a href="mailto:123@qq.com">发邮件给123@qq.com</a>
</body>
</html>
3、iframe 元素
<!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>
<p>呵呵呵呵呵呵</p>
<iframe
src="http://www.taobao.com"
width="800"
height="600"
frameborder="0"
></iframe>
<iframe
src="http://www.mi.com"
width="800"
height="600"
frameborder="0"
></iframe>
<iframe
src="http://www.baidu.com"
width="800"
height="600"
frameborder="0"
></iframe>
<iframe
src="http://www.jd.com"
width="800"
height="600"
frameborder="0"
></iframe>
</body>
</html>
注：服务器添加响应头， X-Frame-Options: sameorigin可以禁用frame，只允许同源
4、全局属性title
<!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 title="coderwhy">我是段落</p>
</body>
</html>
5、字符实体
6、URL/URI
7、元素语义化
强调的内容，h1~h6，有利于提高收录的权重
二、CSS
1、css样式方式一：内联样式
2、css样式方式二：内部样式
3、css样式方式三：外部样式
4、@import引入css
index.css,通过@import引入其他的css样式资源
@import url(./style.css)
/* 可以通过@import引入其他的css资源 */
@import url(./style.css);
@import url(./test.css);
//import './style.css';
/* div {
background-image: url();
}
*/
5、案例讲解
width: 500px;
background-color: skyblue;
// 设置了行内，宽度无效
display: inline;
<!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>
.item {
width: 500px;
background-color: skyblue;
/* 不让div独占一行(单独学习, 了解) */
/* 方式一: 改变元素的特性和垂直方向的布局 */
display: inline-block;
vertical-align: top;
/* 方式二: 通过浮动完成 */
/* float: left; */
}
.album {
width: 500px;
}
.keyword {
font-size: 30px;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<h1>星球介绍</h1>
<!-- 木星的 -->
<div class="item">
<h2>木星</h2>
<!-- alt -> alternative -->
<img class="album" src="../images/muxing.jpg" alt="木星" />
<p>
<span class="keyword">木星(Jupiter)</span
>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
</p>
</div>
<!-- 地球的 -->
<div class="item">
<h2>地球</h2>
<img class="album" src="../images/diqiu.jpg" alt="" />
<p>
<span class="keyword">地球(Earth)</span
>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁，
[1]
它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
</p>
</div>
</body>
</html>
6、link元素
dns-prefetch可进行link性能优化
<!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>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 引入css -->
<link rel="stylesheet" href="./css/style.css" />
<!-- 引入icon(站点的图标) -->
<link rel="icon" href="../images/favicon.ico" />
</head>
<body></body>
</html>
7、进制
8、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>
<style>
.baidu {
text-decoration: none;
}
.span_baidu {
text-decoration: underline;
/* 手指 */
cursor: pointer;
}
</style>
<body>
<a href="http://www.baidu.com" class="baidu">百度一下</a>
<span class="span_baidu">百度一下</span>
</body>
</html>
9、css属性 - text-transform
<!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>
.info {
/* uppercase lowercase none */
/* 实际开发中用js转换更多 */
text-transform: capitalize;
}
</style>
</head>
<body>
<div>my name id chen</div>
</body>
</html>
10、css属性 - text-indent
<!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>
.content {
font-size: 16px;
/* 2个字的大小，我们可以使用em，这里em相对于字体的大小 */
/* 这里相对于字体的2倍 */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>标题</h2>
<p class="content">
客观题（即选择题）必须使用2B铅笔填涂；主观题必须使用0.5毫米黑色签字笔作答（凡是填写的一律用0.5毫米黑色签字笔，凡是涂写的、作图的一律用2B铅笔）。书写一定要字体工整、笔迹清晰，作图时一定要使用规范的作图工具，不得随性而为（作图时，可以先用铅笔作图，确认后，再用0.5毫米黑色签字笔描清楚）。不得在答题卡上乱涂乱画，严禁在条形码和答题区域以外的周围涂写或作标记。在客观题填涂方面，考生应使用考场配发的2B铅笔在答题卡上客观题作答区域进行规范填涂。填涂时，要求涂黑、涂满、涂实、涂匀。在主观题作答方面，考生应使用考点提供（不能自带文具）的0.5毫米黑色签字笔在答题卡上主观题作答区域规范作答。严禁超出作答区域（网上阅卷时无法看到超出作答区域部分的答案），否则答案无效；作文题目从第一页开始作答，不得空出前面区域，直接从后面作答。个别错误可用正确的删除和修改符号进行修改。主观题为选考题时，要规范填涂所选做题号，不要只作答不填涂选做题号，或全部填涂选做题号。
</p>
</body>
</html>
11、css属性 - text-align
12、文本对齐
<!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 {
background-color: #ff0;
/* left right justify: 两端对齐 */
text-align: center;
}
</style>
</head>
<body>
<div class="box">div元素</div>
</body>
</html>
13、图片居中对齐（也是可以用text-align的）
<!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 {
background-color: #ff0;
height: 300px;
/* 居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/muxing.jpg" alt="" />
</div>
</body>
</html>
14、块级元素的居中
注： 图片是行内块元素
<!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 {
background-color: #ff0;
height: 300px;
/* 居中不了的。因为text-align： 只负责行内级元素，div不是。div是块级，可以改div属性 */
/* text-align: center; */
}
.content {
background-color: blue;
height: 200px;
width: 200px;
/*
对于块级元素居中，有两种方式：
方式1： display: inline-block + text-align: center。这样就可以居中
方式2： margin: 0 auto
*/
/* display: inline-block; */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<!-- 居中不了的 -->
<div class="content"></div>
</div>
</body>
</html>
15、css属性 - 字体
15.1、 font-size
<!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 {
/* 继承 */
font-size: 20px;
}
.box {
/* 字体设置方式一px： font-size: 50px; */
/* 父元素字体的尺寸 */
/* 字体设置方式二:em font-size: 2em; */
font-size: 2em;
/* 字体设置方式三:100% font-size: 200% */
}
</style>
</head>
<body>
<div class="home">
<div class="box">我是div元素</div>
</div>
<div class="box1">我是div元素</div>
</body>
</html>
15.2、 font-family
一般在reset.css设置
15.3、 font-weight
15.4、 font-style
16、line-height
注： 这就是line-height能居中的原因： 只限于文本
line-height 文本居中 应用场景案例：
<!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 {
background-color: #ff0;
color: blue;
height: 200px;
line-height: 200px;
/* line-height 减去 文本的高度 = 行距，所以我们使用line-height设置文本的居中*/
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
17、css 选择器
17.1、通用选择器
17.2、简单选择器
17.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>
[title] {
color: red;
}
/* 必须title属性值等于div才选中 */
[title="div"] {
background-color: blue;
}
</style>
</head>
<body>
<div>我是div元素</div>
<div title="div">我是div元素</div>
<p>我是p元素</p>
<h2 title="h2">我是h2元素</h2>
</body>
</html>
17.4、后代选择器
17.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>
.box + .content {
color: red;
}
.box ~ div {
font-size: 30px;
}
</style>
</head>
<body>
<div class="home">
<div class="box">呵呵呵</div>
<div class="content">哈哈哈</div>
<div>嘿嘿嘿</div>
<div>嘻嘻嘻</div>
</div>
</body>
</html>
17.6、交集选择器
<!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 .box，这样就变成后代选择器了 */
div.box {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<p class="box">我是p元素</p>
</body>
</html>
18、伪类
<!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鼠标放上去，文字变成红色 */
/* :hover伪类 */
div:hover {
color: red;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<div class="box">我是div元素2</div>
<div class="box">我是div元素3</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>
/* a元素的链接从未被访问过 */
a:link {
color: red;
}
/* 被访问后 */
a:visited {
color: green;
}
/* a元素鼠标放到上面 */
a:hover {
color: yellow;
}
/* 点击下去未松手 */
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/">百度一下</a>
</body>
</html>
19、伪元素
<!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: 500px;
background-color: red;
color: #fff;
}
/* 需求：第一行变大, 永远选中的是首行 */
.box::first-line {
font-size: 30px;
color: #ff0;
}
/* 首字母 */
.box::first-letter {
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<div class="box">
第26次新疆旅行，在伊宁喀赞其民俗村住了一晚，有种回到摩洛哥蓝城舍夫沙万的感觉。这里商业气氛不浓，很适合闲逛。
住在喀赞其的可赞小院，民宿有个很喜欢的院子，这个季节，院子里的杏子和桑葚成熟了，可以随意采摘。
入目是深深浅浅的蓝色，民宿还贴心的准备了免费的民族服装，可以穿着拍拍照片。
出去逛逛，回到民宿在院子里喝喝茶，就很惬意。如果可以，真想赖着几天不走了。
和可赞小院民宿的老板聊天，是个很有情怀的男人。他还带我们去参加了一场维吾尔族的婚礼，一会儿分享给你们～
</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>
.before {
color: red;
}
.after {
color: green;
}
/* 不加元素插入东西, 但是这么写不够通用，如果有box3 */
.item::before {
/* 要插入的元素 */
content: "前面";
color: red;
font-size: 30px;
}
.item::after {
/* 要插入的元素 */
/* content: "后面"; */
content: url("../images/favicon.ico"); /* 我们改成图片 */
color: red;
font-size: 30px;
}
.box4::after {
/* 使用伪元素的过程中，不要将content省略 */
content: "";
/* 不可省略，伪元素默认是一个行内非替换元素，width,height设置无效 */
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<!-- 需求：在div元素前面或者后面插入 -->
<div class="box">
<span class="before">前面</span>
我是div元素
<span class="after">后面</span>
</div>
<!-- 伪元素方案 -->
<!-- <div class="box2">我是div元素</div> -->
<!-- 通用写法，加上item -->
<div class="box2 item">我是div元素</div>
<div class="box3 item">我是div元素</div>
<div class="box4">我是div元素</div></div>
</body>
</html>
可以实现类似的效果：
20、css - 继承
20.1、默认继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" cont ent="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 给div所有子元素字体设置红色 */
div.box {
color: red
}
</style>
</head>
<body>
<div class="box">
<h1>我是h1标题</h1>
<p>
我是p标题
<span>呵呵呵呵</span>
</p>
<span>我是span标题</span>
</div>
</body>
</html>
20.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>
.box {
color: red;
border: 2px solid purple;
}
/* 如果p元素也想继承border */
.box p {
/* 强制继承父元素 */
border: inherit;
}
</style>
</head>
<body>
<div class="box">
<p>我是p标题</p>
<h1>我是h1标题</h1>
</div>
</body>
</html>
21、css - 层叠
23、HTML类型 及修改
24、css属性 - display
块级元素可以设置宽度和高度（width/height)，行内级元素不可以设置宽度和高度，宽高是由内容决定的。
block 与 inline
<!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: red;
width: 200px;
height: 200px;
}
span {
background-color: blue;
width: 200px;
height: 200px;
}
img {
width: 200px;
height: 200px;
}
input {
height: 66px;
}
</style>
</head>
<body>
<!-- h1/p/div/span/a/img -->
<!-- 问题： 每个元素在页面当中到底占据多大空间 -->
<!-- 某些元素非常重要： 独占一行 -> 类型： 块级元素
某些元素相对不是很重要: 没必要独占 -> 类型： 行内级元素
-->
<div>我是div元素</div>
<span>我是span元素</span>
<!-- 行内级元素不可以设置宽度和高度？？ -> 不严谨 ，应该改为 行内非替换元素不可以设置宽高-->
<!-- 因为img元素， 不仅是inline元素，还是replace元素，即行内替换元素
行内替换元素：
1. 和其他的行内级元素在同一行显示
2. 可以设置宽度和高度
-->
<img src="../images/gouwujie01.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>
</head>
<body>
<div>
<h1></h1>
<p></p>
<img src="" alt="">
</div>
<!-- 特殊：不要在p元素中放div -->
<p>
123
<div>我是p中的div</div>
456
</p>
<!-- 行内级元素中不要放块级元素 -->
<span>
234
<div>hhhhhhhh</div>
<p>drgfd</p>
</span>
</body>
</html>
25、元素隐藏
方式一：display: none 与 visibility: 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>
.box {
/* 不占据空间 */
display: none;
}
.content {
/* 隐藏了，但依然占据空间 */
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<!-- 下面这个元素会顶上去，display:none, 上面的是不占据空间的 -->
<div>我是div元素</div>
<div class="content">我是content元素</div>
<div>呵呵呵呵</div>
</body>
</html>
方式二： alpah 与 opacity
<!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 {
/* 推荐写法 */
/* color: rgba(255, 0, 0, 0.5); */
/* 写法等价， 可以写成.5 */
color: rgba(255, 0, 0, .5);
/* 写法等价 */
/* 不透明，后面跟f */
/* color: #ff0000ff; */
/* 透明0.5, f的一半8*/
/* color: #ff000088; */
/* alpha通过背景颜色透明度来隐藏,只是设置了背景透明度 */
/* background-color: rgba(0, 0, 0, 0) */
}
.box2 {
/* 背景设置透明，上面的东西也跟着出现透明的效果, 会携带所有子元素，包括图片等 */
/* opacity: 0; */
/* opacity: 1; */
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box">
我是div元素
<img src="../images/muxing.jpg" alt="" />
</div>
<div class="box2">我是div元素
<img src="../images/muxing.jpg" alt="" />
</div>
</body>
</html>
26、盒子模型
26.1、宽度和高度
宽度width默认值
<!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 {
background-color: red;
/* width如果没有设置，默认是auto, auto 交给浏览器来决定 */
/* 块级元素，width:auto: 独占一行（父元素的一行，当前父元素是body） */
width: auto;
}
.title {
/* 行内级非替换元素设置宽高无效 */
/* width: auto; */
/* 如果是行内级，width: auto：包裹内容 */
display: inline-block;
width: auto;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<span class="title">我是span元素</span>
<!-- 根据图片的宽度 -->
<img src="../images/muxing.jpg" alt="" />
</body>
</html>
min-max-height
<!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>
body {
/* 对于块级元素，text-align无效 */
/* text-align: center; */
}
.home {
height: 2000px;
background-color: #ff0;
max-width: 750px;
min-width: 600px;
/* 块级元素居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
26.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>
.box {
/* 设置一个红色的实体边距 */
border: 1px solid red;
/* 宽度有内容撑起来 */
display: inline-block;
/* 行高也是可以增加内边距的 */
/* line-height: 36px; */
/* 使用padding */
padding: 10px 0px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
26.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>
.box {
width: 300px;
height: 300px;
/* width */
/* border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px; */
/* 简写 */
border-width: 10px 20px 30px 40px;
/* style */
/* border-top-style: solid;
border-right-style: dashed;
border-bottom-style: groove;
border-left-style: ridge; */
border-style: solid;
/* color */
/* border-top-color: red;
border-right-color: black;
border-bottom-color: blue;
border-left-color: purple; */
border-color: violet blue purple blueviolet;
/* 开发中直接使用border就行了 */
border: 1px solid purple;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
26.4、margin
<!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 {
height: 100px;
background-color: red;
margin-bottom: 30px;
}
.container {
height: 100px;
background-color: green;
/* 上下的magin会折叠，左右是不会的 */
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
</html>
margin基本使用
<!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跟container之间是有间隙的，是由换行等造成的，可以通过font-size\浮动\flex布局解决 */
/* 如果有间距，设置margin就不准确了 */
body {
font-size: 0;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
/* margin-bottom: 30px; */
}
.container {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
/* 上下的magin会折叠，左右是不会的 */
/* margin-top: 30px; */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
</html>
26.5、padding - margin的区别
<!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>
/* 需求： 子元素距离父元素左上有间距
方案： padding 跟 margin
*/
.box {
width: 300px;
height: 300px;
background-color: red;
/* padding-left: 20px; */
/* 如果改成padding-left: 100px。盒子会被撑开。
因为width和height只是在设置内容高度和宽度，一旦加上padding，
整个盒子的大小 = 内容 + padding.这个时候，应该使用box-sizing: border-box
*/
/* 方式一： */
/* box-sizing: border-box;
padding-left: 100px; */
/* 触发BFC */
overflow: auto;
}
.container {
width: 100px;
height: 100px;
background-color: #ff0;
/* 方式二： 还有一种方法，就是margin-left,无须在设置box-sizing: border-box; */
margin-left: 100px;
/* margin-left这种方法也是存在问题的，
如果设置上面的margin-top:100px;会把属性传递给父元素
可以使用overflow: auto
*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
26.5、margin的传递
<!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: 300px;
height: 300px;
background-color: red;
/* 方式一： */
/* transform : rgba(0,0,0,0) */
/* border: 1px solid transparent; */
/* 方式二：触发外面盒子的BFC */
overflow: auto;
}
.container {
width: 100px;
height: 100px;
background-color: #ff0;
/* 左右不传递 */
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
26.6、margin的-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>
<style>
.box {
width: 300px;
/* auto会传递， */
height: auto;
background-color: red;
}
.container {
width: 100px;
height: 100px;
background-color: #ff0;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
<div>hhhhhhhh</div>
</body>
</html>
26.7、上下margin的折叠
<!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 {
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.container {
height: 100px;
background-color: #ff0;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
</html>
26.7、块级元素水平居中
<!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>
body {
margin: 0;
padding: 0;
/* inline盒子 */
/* 行内级：行内非替换元素span/a 行内替换元素input/img */
/* text-align: center; */
}
.box {
width: 100px;
height: 100px;
background-color: red;
/* 方式一： */
/* display: inline-block; */
/* 方式二 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
行内级设置maigin-top无效的
27、盒子阴影 box-shadow
<!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: 100px;
background-color: red;
/* offsetx y 模糊度 延伸 */
box-shadow: 5px 5px 5px #ff0, 15px 15px 15px blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
27.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>
.box {
font-size: 50px;
font-weight: 700;
/* offsetx y 模糊度 */
text-shadow: 5px 5px 5px #ff0, 10px 10px 5px blue, 15px 15px 5px blue;
}
</style>
</head>
<body>
<div class="box">狠人大帝</div>
</body>
</html>
行内非替换元素的特殊性1：上下的padding、border，会被撑起来，但是不占据空间， 案例如下：
<!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>
.content {
background-color: red;
color: #fff;
/* 内容： width/height(压根不生效) */
width: 300px;
height: 300px;
/* 特殊1:padding： 内边距是有生效的，padding-top无效
行内非替换元素，设置左右padding是会占据空间的。
但是，上下的padding，会被撑起来，但是不占据空间
*/
/* padding: 50px; */
/* 特殊2:border: 上下的border，会被撑起来，但是也不占据空间 */
/* border: 50px solid orange; */
/* 特殊3：margin: 上下的margin是不生效的 */
margin: 50px;
}
</style>
</head>
<body>
<span class="content">我是span元素</span>
啊啊啊啊啊啊啊
<!-- 这里div是紧挨着上面span元素的 -->
<div>hehehhehehe</div>
</body>
</html>
1.背景色有设置到border下面
2.前景色会在border没有设置颜色的情况下，显示出了color颜色。
28、案例练习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>
<link rel="stylesheet" href="./css/reset.css" />
<style>
/* a元素样式 */
.new {
/* 默认的a元素不能设置宽度和高度 ，需要display: inline-block;*/
display: inline-block;
width: 70px;
height: 25px;
background-color: red;
color: #fff;
/* 文字水平居中 */
line-height: 25px;
/* 内容居中 */
text-align: center;
border-radius: 12px;
}
</style>
</head>
<body>
<a class="new" href="http://www.baidu.com">新人福利</a>
</body>
</html>
28、案例练习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>
<link rel="stylesheet" href="./css/reset.css" />
<style>
body {
text-align: center;
}
.item {
display: inline-block;
width: 234px;
height: 300px;
padding: 25px 10px;
box-sizing: border-box;
text-align: center;
background-color: #fff;
}
.item:hover {
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
}
.item img {
width: 160px;
height: 160px;
}
.item .desc {
color: #999;
/* 单行显示省略号 */
/* white-space: nowrap; 不换行 */
/* overflow: hidden; 超出部分隐藏 */
/* text-overflow: ellipsis; 文本超出显示省略号 */
/* 多行显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
/* 利用 -webkit-box 属性，flex的前身吧*/
display: -webkit-box;
/* 保留两行 */
-webkit-line-clamp: 2;
/* 方向 */
-webkit-box-orient: vertical;
}
.item .price {
margin-top: 20px;
font-size: 14px;
}
.item .new-price {
color: #ff6700;
}
.item .old-price {
color: #999;
text-decoration: line-through;
}
</style>
</head>
<body>
<a class="item" href="https://www.mi.com/xiaomipad5pro" target="_blank">
<img src="../images/xiaomi" alt="" />
<p>小米手机12</p>
<p class="desc">
40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音40dB宽频主动降噪 |
HiFi高保真音质 | HRTF专业调音40dB宽频主动降噪
</p>
<div class="price">
<span class="new-price">2399元</span>
<span class="old-price">2999元</span>
</div>
</a>
</body>
</html>
29、background
29.1、background-image
<!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: 600px;
/* 没有高度是没有效果出来的，就像在span设置背景一样，没有效果的 */
height: 600px;
background-color: #f00;
/* 设置背景图片 */
background-image: url(../images/xiaomi), url(../images/muxing.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
29.1、background-repeat
29.2、background-size
29.3、background-position
实现背景图片实现
<!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>
body {
margin: 0;
padding: 0;
}
/* 图片随浏览器拉伸显示中间位置,永远可以显示中间的内容 */
.box {
height: 489px;
background-color: #f00;
background-image: url(../images/menghuan.jpg);
background-position: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
29.4、background-attachment
<!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: 300px;
height: 300px;
overflow: scroll;
color: white;
background-color: #f00;
background-image: url(../images/muxing.jpg);
/* 背景图片滚动效果 */
background-attachment: local;
}
</style>
</head>
<body>
<div class="box">
在携程上对目的地和景点有基本的倾向后，我们往往想深入了解一下景点，尤其从别人的真实经历中了解。但携程上只是简单地把游记/点评直接罗列出来，阅读成本高，难以得到所需要的信息。这时我们就需要用到导游犬小Q了，导游犬小Q收集了包括携程、蚂蜂窝等八大平台的点评游记，并对这些点评游记进行语义分析，提炼出景点的标签和各种体验指标，还可以找到这些标签和指标的点评来源，使用户可以快速而客观地了解景点。2.做好攻略，安排好时间和景点，则要及时买好机票和景点门票，还要订好附近的酒店，这些花钱的活儿需要这些APP：
作者：知乎用户VQ92A8
链接：https://www.zhihu.com/question/37990314/answer/118477641 来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
</div>
</body>
</html>
总结：
width/height/margin-top/margin-bottom对行内非替换元素无效果。
padding-top/bottom,border-top/bottom对于行内非替换元素有特殊效果。
30、列表元素
30.1、有序列表 ol、li
<!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>
ol,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<h1>自己喜欢的电影排名：</h1>
<ol>
<li>星际穿越</li>
<li>大话西游</li>
<li>火影忍者</li>
<li>完美世界</li>
<li>斗罗大陆</li>
</ol>
</body>
</html>
30.2、无序列表 ul、li
30.3、定义列表 dl、dt、dd
<!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>
dl,
dt,
dd {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h2>前端开发</h2>
<dl>
<dt>阶段一：</dt>
<dd>HTML</dd>
<dd>css</dd>
<dd>js</dd>
<dt>阶段二：</dt>
<dd>Node基础</dd>
<dd>webpack</dd>
<dd>React</dd>
<dd>Vue</dd>
</dl>
</body>
</html>
30.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>
body,
ul,
li,
a {
padding: 0;
margin: 0;
}
ul,
ol,
li {
list-style: none;
}
ul > li {
margin: 30px 0;
}
a {
text-decoration: none;
color: #333;
}
ul > li > a {
display: inline-block;
}
ul > li > a:hover {
color: #f04242;
}
ul > li .content {
display: inline-block;
}
ul > li .ranking {
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
font-weight: 700;
color: #999;
}
ul > li .icon {
position: relative;
top: 2px;
display: inline-block;
width: 16px;
height: 16px;
background-image: url(../images/hot.svg);
}
/* 结构伪类 */
ul > li:nth-child(1) .ranking {
color: red;
}
ul > li:nth-child(2) .ranking {
color: blue;
}
ul > li:nth-child(3) .ranking {
color: pink;
}
</style>
</head>
<body>
<ul>
<li class="itme">
<a
href="https://www.toutiao.com"
target="_blank"
>
<span class="ranking">1</span>
<div class="content">新闻1...</div>
<i class="icon"></i>
</a>
</li>
<li class="itme">
<a
href="https://www.toutiao.com"
target="_blank"
>
<span class="ranking">2</span>
<div class="content">新闻2...</div>
<i class="icon"></i>
</a>
</li>
<li class="itme">
<a
href="https://www.toutiao.com"
target="_blank"
>
<span class="ranking">3</span>
<div class="content">新闻3...</div>
<i class="icon"></i>
</a>
</li>
<li class="itme">
<a
href="https://www.toutiao.com"
target="_blank"
>
<span class="ranking">4</span>
<div class="content">新闻4...</div>
<i class="icon"></i>
</a>
</li>
<li class="itme">
<a
href="https://www.toutiao.com"
target="_blank"
>
<span class="ranking">5</span>
<div class="content">新闻5...</div>
<i class="icon"></i>
</a>
</li>
</ul>
</body>
</html>
31、表格元素
31.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>
<style>
table {
text-align: center;
/* 两个边框折叠成一个边框 */
border-collapse: collapse;
}
td {
border: 1px solid #333;
padding: 8px 16px;
}
</style>
</head>
<body>
<table>
<tr>
<td>排名</td>
<td>名称</td>
<td>价格</td>
<td>涨幅</td>
</tr>
<tr>
<td>1</td>
<td>贵州茅台</td>
<td>400</td>
<td>1%</td>
</tr>
<tr>
<td>2</td>
<td>五粮液</td>
<td>400</td>
<td>1%</td>
</tr>
<tr>
<td>3</td>
<td>老窖</td>
<td>400</td>
<td>1%</td>
</tr>
</table>
</body>
</html>
31.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>
table {
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid red;
width: 120px;
height: 40px;
}
/* table tr:nth-child(1), table tr:nth-child(2) {
font-weight: 700px;
font-size: 20px;
} */
/* 等价于上面的方法
n的取值：0 和 整数, 负数浏览器不会再处理
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
*/
table tr:nth-child(-n + 2) {
font-weight: 900px;
font-size: 20px;
color: blue;
}
table tr td[rowspan] {
color: gold;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="6">课程表</td>
</tr>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="5">上午</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
</table>
</body>
</html>
32、表单
32.1、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>
</head>
<body>
<!-- <button>我是按钮</button> -->
<form action="">
<input type="text" />
<!-- 用input来实现按钮的效果 -->
<input type="button" value="普通按钮" />
<div>
<!-- 我们一般实现下面这种 -->
<input type="reset" value="重置按钮" />
<!-- button也是有类型的，效果跟上面的一样 -->
<button type="reset">重置按钮</button>
</div>
<div>
<input type="submit" value="提交按钮" />
<button type="submit">提交按钮</button>
</div>
</form>
</body>
</html>
32.2、input与label结合实现
<!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>
<!-- for跟下面的id关联起来, 选中用户就关联到输入框 -->
<label for="username">用户：</label>
<input type="text" id="username" />
</div>
<label for="password">
密码：
<input type="password" id="password" />
</label>
</div>
</body>
</html>
32.3、input作为radio
<!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>
<!-- 提交的url: http://localhost:8080/s?age=12&sex=male -->
<form action="/abc">
<!-- 在类型为radio的inpput中，如果name一样，那么两个radio会互斥 -->
<label for="male">
<input type="radio" id="male" name="sex" value="male" />男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="female" />女
</label>
<!-- 提交 -->
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮"></input>
</form>
</body>
</html>
32.4、input作为checkbox
<!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="/cba">
<div>
您的爱好：
<label for="basketball">
<input
id="basketball"
type="checkbox"
name="hobby"
value="basketball"
/>篮球
</label>
<label for="football">
<input
id="football"
type="checkbox"
name="hobby"
value="football"
/>足球
</label>
</div>
<input type="submit">
</form>
</body>
</html>
32.5、textarea元素
33、补充
34、结构伪类
34.1、nth-child
<!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子元素的第一个 */
ul li:nth-child(1) {
color: red;
}
/* 选中所有偶数， n的取值是0, 1, 2, 3, 4, 5...*/
ul li:nth-child(2n) {
color: blue;
}
/* 所有奇数 */
ul li:nth-child(2n + 1) {
color: orangered;
}
div > div:nth-child(4n + 1) {
color: pink;
}
div > div:nth-child(4n + 2) {
color: tomato;
}
div > div:nth-child(4n + 3) {
color: chartreuse;
}
div > div:nth-child(4n + 4) {
color: gold;
}
/* 前5个 */
div > div:nth-child(-n + 5) {
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
<li>列表元素6</li>
</ul>
<div>
<div>列表元素1</div>
<div>列表元素2</div>
<div>列表元素3</div>
<div>列表元素4</div>
<div>列表元素5</div>
<div>列表元素6</div>
<div>列表元素7</div>
<div>列表元素8</div>
<div>列表元素9</div>
<div>列表元素10</div>
</div>
</body>
</html>
34.2、nth-last-child
<!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 > li:nth-last-child(2) {
color: red;
}
/* 倒数的后几个是 */
ul > li:nth-last-child(-n + 3) {
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
<li>列表元素6</li>
<li>列表元素7</li>
<li>列表元素8</li>
</ul>
</body>
</html>
34.3、nth-of-type
<!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中的div元素，并且是第三个div元素 */
.box > div:nth-child(3) {
color: red;
}
/* 需求： 选择box中的第三个div元素， 排除干扰项 */
.box > div:nth-of-type(3) {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<div>列表元素1</div>
<p>我是p元素</p>
<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
<div>列表元素2</div>
<div>列表元素3</div>
<div>列表元素4</div>
<div>列表元素5</div>
<div>列表元素6</div>
<div>列表元素7</div>
<div>列表元素8</div>
<div>列表元素9</div>
<div>列表元素10</div>
</div>
</body>
</html>
34.4、其他伪类
34.5、否定伪类
35、border的图形
<!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: 100px;
/* background-color: #f00; */
/* border: 30px solid orange; */
/* 出现四个三角形 */
border: 50px solid orange;
border-right-color: transparent;/* transparent设置成透明 */
border-left-color: transparent;
border-top-color: transparent;
/* border-right-color: blue;
border-left-color: green;
border-top-color: red; */
/* 默认是content-box */
box-sizing: border-box;
/* 三角形是可以旋转的 */
transform-origin: center 25% ;/* 中心的点*/
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
36、web字体
<!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>
/* 将YunFengJingLongXingShu-2字体引入到网页中 */
@font-face {
font-family: "chen";
src: url("./fonts/YunFengJingLongXingShu-2.ttf");
}
.box {
font-family: "chen";
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
37、字体图标
38、精灵图
<!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 {
background-color: #333;
}
.topbar {
background-image: url(../images/topbar.png);
background-repeat: no-repeat;
display: inline-block;
}
i.hot-icon {
background-position: -192px 0;
width: 26px;
height: 13px;
}
i.logo-icon {
background-position: 0 -19px;
width: 157px;
height: 33px;
}
</style>
</head>
<body>
<div class="box">
<!-- 很多网站都使用i元素展示图标 -->
<i class="topbar hot-icon"></i>
<i class="topbar logo-icon"></i>
</div>
</body>
</html>
39、cursor
40、布局 - 定位
40.1、位置微调整
40.2、定位
注：定位跟浮动是可以脱离标准流的
40.3、静态定位 - static
40.4、相对定位 - relative
<!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 {
position: relative;
/* 右边的元素也会跟着移动 */
/* margin-left: 30px; */
/* 右边的元素不会跟着移动，脱离标准流了 */
/* left, top是相对于原来的位置 */
left: 30px;
top: 50px;
}
</style>
</head>
<body>
<span>我是span元素</span>
<strong class="text">我是strong元素</strong>
<img src="../images/muxing.jpg" alt="" />
<div>我是div元素</div>
</body>
</html>
40.5、relative练习
<!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 {
font-size: 20px;
}
span {
font-size: 12px;
position: relative;
bottom: 8px;
}
</style>
</head>
<body>
<div>3<span>2</span> + 2<span>3</span> = 17</div>
</body>
</html>
40.6、背景图片居中 - relative练习
方案一
<!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>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
background-color: #f00;
overflow: hidden;
}
.box img {
position: relative;
/* left值是图片的一半 */
/* 图片一半写死了，可以使用transform, translate中的百分比相对于自己 */
/* left: -557px; */
transform: translate(-50%);
/* 向右边移动div的一半 */
margin-left: 50%;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/menghuan.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>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
background-color: #f00;
background: url(../images/menghuan.jpg) center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
relative:还是在原来的标准流里面，占据着原来的位置
40.6、fixed
<!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 {
position: fixed;
right: 30px;
top: 30px;
}
</style>
</head>
<body>
<span>我是span元素</span>
<strong class="text">我是strong元素</strong>
<img src="../images/muxing.jpg" alt="" />
<div>我是div元素</div>
</body>
</html>
40.7、fixed 练习
<!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>
.handle {
position: fixed;
right: 30px;
bottom: 30px;
}
.handle .item {
width: 80px;
height: 40px;
background-color: brown;
color: white;
text-align: center;
line-height: 40px;
border-radius: 8px;
cursor: pointer;
}
.handle .item:hover {
background-color: turquoise;
}
.top {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="handle">
<div class="item top">顶部</div>
<div class="item bottom">反馈</div>
</div>
</body>
</html>
40.8、绝对定位 - position
脱离标准流, 相对的是最邻近的祖先元素的定位元素
<!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>
.content {
width: 1000px;
height: 800px;
background-color: red;
/* 相对的是红色区域, 设置成定位元素，但是它脱标了， 所以应该是relative,是一个定位元素，也没脱离标准流 */
position: relative;
}
.box {
width: 800px;
height: 600px;
background-color: #0f0;
position: relative;
}
.text {
/* 脱离标准流, 相对的是最邻近的祖先元素的定位元素 */
position: absolute;
/* 设置四个值： left right top bottom */
/* 在没有祖先元素定位的情况下， 相对于的是谁？ 这里是视口 */
right: 0;
top: 0;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>哈哈哈哈哈</div>
<div class="content">
<div class="box">
<span>我是span元素</span>
<strong class="text">我是strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="" />
<div>我是div元素</div>
</div>
</div>
<div>呵呵呵呵</div>
</body>
</html>
40.9、绝对定位 - position练习
<!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>
.content {
width: 1000px;
height: 600px;
background-color: red;
position: relative;
}
.box {
width: 600px;
height: 400px;
background-color: #0f0;
position: absolute;
right: 0;
bottom: 0;
}
.text {
position: absolute;
left: 0;
bottom: 0;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>哈哈哈哈哈</div>
<div class="content">
<div class="box">
<span>我是span元素</span>
<strong class="text">我是strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="" />
<div>我是div元素</div>
</div>
</div>
<div>呵呵呵呵</div>
</body>
</html>
40.10、没必要记这个啦（子绝父绝呢？不要记这些）
40.11、绝对定位的元素的特点
注：一旦将position设置为absolute/fixed的时候，就不用考虑它是块级和行内级元素了。可以随意设置宽高
特点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>
<style>
.content {
width: 1000px;
height: 600px;
background-color: red;
position: relative;
}
.box {
width: 600px;
height: 400px;
background-color: #0f0;
position: absolute;
right: 0;
bottom: 0;
}
.text {
/* 行内元素不在受限，可以设置宽高 */
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 80px;
background-color: #00f;
color: white;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>哈哈哈哈哈</div>
<div class="content">
<div class="box">
<span>我是span元素</span>
<strong class="text">我是strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="" />
<div>我是div元素</div>
</div>
</div>
<div>呵呵呵呵</div>
</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>
<style>
.box {
background-color: #f00;
}
.box strong {
/* 红色盒子看不见了 */
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<strong>我是strong元素</strong>
</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: 800px;
height: 300px;
background-color: red;
position: relative;
}
.container {
height: 100px;
background-color: #0f0;
/* 如果不设置宽度，width:auto， */
/* width: 200px; */
width: 200px;
/* margin: 0 auto; */
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
/* 在包含块居中(包括水平垂直，用绝对定位居中，这种方式不存在兼容性问题) */
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
40.12、position值对比
40.13、网易云音乐 - 绝对定位的案例练习
<!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 {
text-decoration: none;
color: #333;
}
.item {
width: 140px;
margin: 0 auto;
}
.item .top {
background-color: red;
position: relative;
}
/* 如果不加的话，会有一点红色 */
.item .top img {
/* 将图片下面的多出来的区域去除掉， 方法一：*/
/* vertical-align: top; */
/* 方法二： */
display: block;
}
.item .top .cover {
/* 这么写宽度和高度写死了，可以设置right bottom */
/* width: 140px;
height: 140px; */
/* 使用背景颜色盖上去 */
/* background-color: rgba(0, 0, 0, 0.5); */
/* 使用背景图片盖上去 */
background-image: url(../images/coverall.png);
background-position: 0 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item .top .info {
position: absolute;
bottom: 0;
/* 这里如果设置top:0，那就完全覆盖掉了 */
left: 0;
right: 0;
height: 27px;
font-size: 12px;
color: #ccc;
line-height: 27px;
padding-left: 10px;
/* background-color: rgba(0, 0, 0, .5); */
background-image: url(../images/top-cover.png);
background-position: 0 -537px;
}
.item .top .info .icon {
display: inline-block;
width: 14px;
height: 11px;
/* background-color: red; */
background-image: url(../images/iconall.png);
background-position: 0 -24px;
}
.item .top .info .icon-play {
display: inline-block;
width: 16px;
height: 17px;
background-image: url(../images/iconall.png);
background-position: 0 0;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
.item .bottom {
display: block;
font-size: 14px;
}
.item .bottom:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="item">
<div class="top">
<img src="../images/yujie.jpg" alt="御姐" />
<a
class="cover"
href="https://music.163.com/#/playlist?id=6948263379"
></a>
<div class="info">
<i class="icon"></i>
<span>43333万</span>
<i class="icon-play"></i>
</div>
</div>
<a class="bottom" href="https://music.163.com/#/playlist?id=6948263379"
>还是会想你，特别是晚上哈哈哈哈哈哈</a
>
</div>
</body>
</html>
40.14、粘性定位 - sticky
<!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>
.nav {
background-color: green;
color: white;
/* 方式一： 以前是这么做的，position:relative,然后监听滚动 */
/* position: fixed;
top: 0px;
left: 0px;
right: 0px; */
/* 方式二： */
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<div class="nav">
<span>电脑</span>
<span>手机</span>
<span>衣服</span>
<span>鞋子</span>
</div>
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
<li>商品5</li>
<li>商品6</li>
<li>商品7</li>
<li>商品8</li>
<li>商品9</li>
<li>商品10</li>
<li>商品11</li>
<li>商品12</li>
<li>商品13</li>
<li>商品14</li>
<li>商品15</li>
<li>商品16</li>
<li>商品17</li>
<li>商品18</li>
<li>商品19</li>
<li>商品20</li>
<li>商品21</li>
<li>商品22</li>
<li>商品23</li>
<li>商品24</li>
<li>商品25</li>
<li>商品26</li>
<li>商品27</li>
<li>商品28</li>
<li>商品29</li>
<li>商品30</li>
<li>商品31</li>
<li>商品32</li>
<li>商品33</li>
<li>商品34</li>
<li>商品35</li>
<li>商品36</li>
<li>商品37</li>
<li>商品38</li>
<li>商品39</li>
<li>商品40</li>
<li>商品41</li>
<li>商品42</li>
<li>商品43</li>
<li>商品44</li>
<li>商品45</li>
<li>商品46</li>
<li>商品47</li>
<li>商品48</li>
<li>商品49</li>
<li>商品50</li>
<li>商品51</li>
<li>商品52</li>
<li>商品53</li>
<li>商品54</li>
<li>商品55</li>
<li>商品56</li>
<li>商品57</li>
<li>商品58</li>
<li>商品59</li>
<li>商品60</li>
<li>商品61</li>
<li>商品62</li>
<li>商品63</li>
<li>商品64</li>
<li>商品65</li>
<li>商品66</li>
<li>商品67</li>
<li>商品68</li>
<li>商品69</li>
<li>商品70</li>
<li>商品71</li>
<li>商品72</li>
<li>商品73</li>
<li>商品74</li>
<li>商品75</li>
<li>商品76</li>
<li>商品77</li>
<li>商品78</li>
<li>商品79</li>
<li>商品80</li>
<li>商品81</li>
<li>商品82</li>
<li>商品83</li>
<li>商品84</li>
<li>商品85</li>
<li>商品86</li>
<li>商品87</li>
<li>商品88</li>
<li>商品89</li>
<li>商品90</li>
<li>商品91</li>
<li>商品92</li>
<li>商品93</li>
<li>商品94</li>
<li>商品95</li>
<li>商品96</li>
<li>商品97</li>
<li>商品98</li>
<li>商品99</li>
<li>商品100</li>
</ul>
</body>
</html>
40.15、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>
.item {
position: fixed;
width: 100px;
height: 100px;
left: 0;
top: 0;
background-color: red;
}
.box2 {
left: 20px;
top: 20px;
background-color: green;
z-index: 1;
}
.box3 {
left: 40px;
top: 40px;
background-color: blue;
}
</style>
</head>
<body>
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
</body>
</html>
41、浮动
