前端基础----三件套
[TOC]
一、前言
Zeal64位下载wwr.lanzoui.com/iQhP5urk3gb Html5文档下载wwr.lanzoui.com/iqAiiurklfi CSS3文档下载wwr.lanzoui.com/iA86gurklgj 文档下载完解压，将html.docset和css.docset放到Zeal-x64/docset文件夹下 启动zeal.exe程序就可以直接使用了
1、客户端
2、网页
3、历史
蒂姆·伯纳斯李爵士--- 万维网的发明人
1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。
第一个网站：info.cern.ch/hypertext/W…
4、浏览器和网页
5、浏览器的问题
不同浏览器可能解析出来的页面不一样
6、W3C的建立
7、网页的结构
1、结构、表现、行为
- 结构
- HTML用于描述页面的结构
- 表现
- CSS用于控制页面中元素的样式
- 行为
- JavaScript用于响应用户操作
二、HTML
HTML：超文本标记语言
负责网页三要素之中的结构
使用标签的形式来标识网页中的不同组成部分
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另外一个页面
纯文本只能存储数据
1、第一个网页
用记事本编写第一个网页
<html>
<head>
<title>哈哈哈</title>
</head>
<body>
<h1>hello</h1>
</body>
</html>
1、根标签<html></html>
2、头部标签<head></head>
3、title标签<title></title>
4、body标签<body></body>
2、第二个网页
用notepad++编写
<html>
<head>
<title>这个第二个网页</title>
</head>
<body>
<h1>hello第二个网页</h1>
<!--标签一般成对出现，但是也存在一些自结束标签
注释不会在网页中显示，但是可以在网页的源代码中查看
注意:注释不能嵌套-->
<!--
<img/>
<input/>
-->
</body>
</html>
3、第三个网页
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<!--
在标签中（开始标签或自结束标签）可以设置属性
属性是一个名值对结构（x=y）
属性可以用来设置标签中的内容如何显示
属性和标签名或其他属性应该用空格隔开
属性不能瞎写，有些属性有属性值，属性值注意不能漏了引号，有些属性没有
可以自定义属性
-->
<h1>这是我的<font color="red" size="3">第三个网页!</font></h1>
</body>
</html>
4、第四个网页
<!Doctype HTML>
<html>
<head>
<!--可以通过meta标签来设置网页的字符集，避免乱码问题-->
<meta charset="utf-8">
<title>网页的基本结构</title>
</head>
<body>
<!--
迭代
网页的版本
HTML4
XHTML2.0
HTML5
...
文档声明（doctype）
-文档声明用来告诉浏览器当前网页的版本
-html的文档声明
<!doctype html>
进制：
十进制：满10进1
-计数：0 1 2 3 4 5 6 7 8 9 10...
-单位数字:10个（0-9）
八进制：满8进1
-计数：0 1 2 3 4 5 6 7 10 11 12...
-单位数字：8个（0-7）
二进制：满2进1（底层）
-计数：0 1 10 11 100 101 110 111...
-单位数字：2个（0-1）
-扩展:
-所有数据在计算机底层都是以二进制形式保存
-可以将内存想象成为一个有多个小各自组成的容器，每一个小格子可以存储一个1或0
一个格子在内存中称为1位（bit）
8bit = 1byte（字节）
最小操作单位字节
1024byte = 1kb（千字节）
1024kb = 1mb（兆字节）
1024mb = 1gb（吉字节）
1024gb = 1tb（特字节）
1024tb = 1pb
十六进制：满16进1（一般显示一个二进制数字时，都会转换位16进制）
-计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12...
-单位数字：16个（0-f）
字符编码：
小林 -> 1010100101
1010100101 -> 小林
-所有数据在计算机底层都是以二进制形式保存，文字也不例外
所以一段文字在存储进内存时，都会转换成为二进制编码
当我们查看这段文字时，计算机会将编码转换为字符，给我们阅读
-编码
-将字符转换为二进制码
-解码
-将二进制码转换为字符
-字符集（charset）
-编码和解码所采用的规则成为字符集
-乱码问题
-如果编码和解码所采用的字符集不同就会出现乱码
-常见的字符集：
ASCII
ISO88591
GB2312
GBK
UTF-8（万国码）首选
-->
</body>
</html>
5、第五个网页
<!--文档声明,声明当前网页的版本-->
<!doctype html>
<!--html的根标签（元素），网页中所有的内容都要写根元素的里面-->
<html>
<!--head是网页的头部，head内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页-->
<head>
<!--
meta标签用来设置网页的元数据
这里meta用来设置网页的字符集，避免乱码问题
-->
<meta charset="utf-8">
<!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
<title>网页的标题</title>
</head>
<!--body是html是子元素，显示网页的主体，网页中所有可见的内容都要写在body的里面-->
<body>
<!--h1设置一级标题-->
<h1>一级标题</h1>
</body>
</html>
6、文档工具
软件：zeal
7、vscode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1、安装vscode
2、安装中文语言包
3、安装ayu主题
4、打开一个文件目录
5、创建一个新网页
6、安装liveServer
7、通过liveserver运行网页
8、设置自动保存
-->
<h1>hello</h1>
<p>hhhhhh</p>
</body>
</html>
8、实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--
在网页中编写的多个空格默认情况都会自动被浏览器解析为一个空格
在Html中有些时候，不能直接书写一些特殊符号
比如：多个连续空格，比如字母两侧的大于和小于号
如果我们需要在网页书写这些特殊符号，则需要使用html中的实体（转义字符）
实体的语法：
&实体的名字;
空格
>大于号
<小于号
©版权符号
-->
<!-- 表示一个空格 -->
<p>
今天 天气真不错
</p>
<p>
<!-- < >分别表示小于号和大于号 -->
a<b>c
</p>
</body>
</html>
9、meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta标签主要用于设置网页的一些元数据，元数据不是给用户看的
charset：指定网页的字符集
name：指定数据的名称
content：指定数据的内容
keywords 表示网站的关键字（搜索引擎搜索出的关键字）,
可以同时指定多个关键字，关键字间使用,隔开
<meta name="keywords" content="qq,微信,淘宝">
description用于指定网站的描述
<meta name="description" content="这是一个非常不错的网站">
网站的描述会显示在搜索引擎的搜索结果中
title标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywords" content="HTML5,CSS,JavaScript">
<meta name="description" content="这是一个非常不错的网站">
<!--
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
将页面重定向到另一个网站
-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<title>meta标签</title>
</head>
<body>
</body>
</html>
10、语义化标签1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</title>
</head>
<body>
<!--
在网页中HTML专门用来辅助网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签：
h1-h6 一共有六级标题
从h1-h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1标签
一般情况下标题标签只会使用到h1-h3，h4-h6很少用
标题标签都是块元素
在页面中独占一行的元素成为块元素（block element）
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup标签用来给标题分组，可以将一组相关的标题同时放入到hgroup
-->
<hgroup>
<h1>哈哈哈哈哈</h1>
<h2>六六六六六</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>标签表示页面中的一个段落</p>
<p>标签表示页面中的一个段落</p>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline element）
-->
<p>今天天气<em>真</em>不错!</p>
<!--
strong表示强调，重要内容！
-->
<p>你今天必须<strong>完成作业！</strong></p>
鲁迅说：
<!--
blockquote表示一个长引用
-->
<blockquote>
这句话我可是从来没说过！
</blockquote>
<!--
q表示一个短引用
-->
子曰：<q>学而时习之，不亦说乎！</q>
<!--
br标签表示页面中的一个换行
-->
<br>
<br>
今天天气很不错！
</body>
</html>
11、语义化标签2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</title>
</head>
<body>
<!--
块元素（block element）
-在网页中一般通过块元素来对页面进行布局
行内元素(inline element)
-行内元素主要用来包裹文字
-一般情况下会在块元素中放行内元素，而不会在行内元素中方块元素
-块元素中基本都可以放任何元素
-p元素不能放任何块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
...
开发者工具可以看到代码在内存中的存放情况
-->
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
12、语义化标签3.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header表示网页的头部
main表示网页的主体部分,一个页面只会有一个main
footer表示网页的底部
nav表示网页中的导航
aside表示和主体相关的其他内容，侧边栏
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，但它表示一个区块，目前来讲div还是我们主要的布局元素
span是行内元素，没有语义，一般用于在网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
13、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表(list)
1、铅笔
2、尺子
3、橡皮
在html也可以创建列表，分为三种
1、无序列表
2、有序列表
3、定义列表
无序列表，使用ul标签来创建
使用li标签标识列表的列表项
有序列表，使用ol标签来创建
使用li标签标识列表的列表项
定义列表，使用dl标签来创建
使用dt标签标识定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>bbb</li>
<li>ccc
<ul>
<li>ddd</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
14、超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面
也可以跳转到我们当前页面的其他位置，或者其他页面指定的位置
使用a标签来定义超链接
属性：
href：指定跳转的目标路径
-值可以是外部网站的地址
-也可以写一个内部页面的地址
-
超链接也是行内元素，在a标签中可以嵌套除了它自身之外的任何元素
-->
<a href="https://www.baidu.com">超链接1</a><br/><br/>
<a href="07.列表.html">超链接2</a><br/><br/>
<a href="https://bilibili.com">超链接3</a><br/><br/>
<a href="https://douyin.com">超链接4</a><br/><br/>
</body>
</html>
15、相对路径
<!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>
<!--
当我们需要跳转到服务器或项目内部的页面时，一般使用相对路径
相对路径都会使用.或..开头
./
../
./可以省略不写，如果不写./也不写../相当于写了./
./表示当前文件所在目录
- 当前页面就是09.相对路径.html
- ./就相当于09.相对路径.html所在的目录path
../表示当前文件所在目录的上一级目录
-->
<a href="../07.列表.html">超链接1</a>
<br><br>
<a href="./inner/target.html">超链接2</a>
<br><br>
<a href="../out/target2.html">超链接3</a>
</body>
</html>
16、超链接2.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>
</head>
<body>
<!--
target属性：用来指定超链接打开的方式
可选值：
_self默认值，在当前页面打开超链接
_blank 在新窗口打开超链接
-->
<a href="07.列表.html" target="_blank">超链接</a>
<br><br>
<!--
给a标签声明id属性
使用#id属性值给href赋值
跳转到指定id值标签位置
-->
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去p3</a>
<br><br>
<!--
在开发中，可以用#作为超链接的路径的占位符使用
-->
<a href="#">新的超链接</a>
<!--
可以使用javascript:;来作为href的属性值，此时点击这个超链接不会有反应
-->
<br><br>
<a href="javascript:;">新的超链接2</a>
<p>书是朋友，它能带着我们畅游知识的海洋；书是老师，在我有问题不懂的时侯，它能给我解答；书是家，在我们孤独寂寞的时候，它能给我们带来温暖和快乐……
自记事的那天起，无论是幼儿园时看的连环画、小人书，还是一二年级时读的儿童文学，又或是三四五年级时读的少年文学，直到现在，放眼望去，他们都还整整齐齐的在书柜里边儿仿佛排列着队伍等着我随时的检阅。
记得那是一个周末的早上，天有点冷，我包裹着被子把头伸向窗外，雨淅淅沥沥的下着，不愿起床的我随手拿着一本名为《假如给我三天光明》的书看了起来，可是我要怎么理解这本书呢？
我见过午后明媚的阳光透过学校后面的小树林，随着徐徐微风轻轻地起舞，就像好多星星一样的眼睛又明亮又可爱的在那里眨巴眨巴。
我见过隔壁阿姨家的小朋友，虽然还那么小，每当她从我手里抢走棒棒糖并塞到嘴里的时候，笑得跟朵花儿似的。
我还见过，见过高年级的大哥哥大姐姐们穿着漂亮的衣服照毕业照。想着他们小学的美好时光，就在照相师傅快门咔嚓一声后就永远的定格在了那，我也会想，想自己毕业的那天穿的是不是妈妈特意买的新衣服，扎的是小学时候的羊角辫还是属于初中时的大马尾，无限憧憬无限期望……
假如给我三天光明，如果可以，我想把它捐给从来就没看见过爸爸妈妈、看见过这个五彩世界的人。大熊猫的世界里还有黑色、白色；而失明人的世界里就只有一种单调的颜色，那就是“黑”。如果这个世界都是盲人，他们不可怜，因为这样就有好多好多人陪在他们的身边，大家互相帮助，一起生活。可是，世界并不是这样，在正常人的世界里，他们需要人帮助。
如果我能借给他们三天光明，我一定要督促他们多走多看，看擦身而过的每一个笑脸；
如果我能借给他们三天光明，我一定要呼吁更多的人帮助他们，在时间没到之前，谁也不许打扰他们；
多美好的“如果”啊！可是，我知道没有如果。
如果可以，我希望能给他们的不是三天光明，我要做一位医生，我要用最先进的仪器和我最精湛的医术给他们一辈子光明。
书，我们的朋友、我们的老师，我们的家，书让我们插上力量的翅膀，飞向美好的明天，也让我们对未来有了无限期待。
</p>
<p>书是朋友，它能带着我们畅游知识的海洋；书是老师，在我有问题不懂的时侯，它能给我解答；书是家，在我们孤独寂寞的时候，它能给我们带来温暖和快乐……
自记事的那天起，无论是幼儿园时看的连环画、小人书，还是一二年级时读的儿童文学，又或是三四五年级时读的少年文学，直到现在，放眼望去，他们都还整整齐齐的在书柜里边儿仿佛排列着队伍等着我随时的检阅。
记得那是一个周末的早上，天有点冷，我包裹着被子把头伸向窗外，雨淅淅沥沥的下着，不愿起床的我随手拿着一本名为《假如给我三天光明》的书看了起来，可是我要怎么理解这本书呢？
我见过午后明媚的阳光透过学校后面的小树林，随着徐徐微风轻轻地起舞，就像好多星星一样的眼睛又明亮又可爱的在那里眨巴眨巴。
我见过隔壁阿姨家的小朋友，虽然还那么小，每当她从我手里抢走棒棒糖并塞到嘴里的时候，笑得跟朵花儿似的。
我还见过，见过高年级的大哥哥大姐姐们穿着漂亮的衣服照毕业照。想着他们小学的美好时光，就在照相师傅快门咔嚓一声后就永远的定格在了那，我也会想，想自己毕业的那天穿的是不是妈妈特意买的新衣服，扎的是小学时候的羊角辫还是属于初中时的大马尾，无限憧憬无限期望……
假如给我三天光明，如果可以，我想把它捐给从来就没看见过爸爸妈妈、看见过这个五彩世界的人。大熊猫的世界里还有黑色、白色；而失明人的世界里就只有一种单调的颜色，那就是“黑”。如果这个世界都是盲人，他们不可怜，因为这样就有好多好多人陪在他们的身边，大家互相帮助，一起生活。可是，世界并不是这样，在正常人的世界里，他们需要人帮助。
如果我能借给他们三天光明，我一定要督促他们多走多看，看擦身而过的每一个笑脸；
如果我能借给他们三天光明，我一定要呼吁更多的人帮助他们，在时间没到之前，谁也不许打扰他们；
多美好的“如果”啊！可是，我知道没有如果。
如果可以，我希望能给他们的不是三天光明，我要做一位医生，我要用最先进的仪器和我最精湛的医术给他们一辈子光明。
书，我们的朋友、我们的老师，我们的家，书让我们插上力量的翅膀，飞向美好的明天，也让我们对未来有了无限期待。
</p>
<p id="p3">书是朋友，它能带着我们畅游知识的海洋；书是老师，在我有问题不懂的时侯，它能给我解答；书是家，在我们孤独寂寞的时候，它能给我们带来温暖和快乐……
自记事的那天起，无论是幼儿园时看的连环画、小人书，还是一二年级时读的儿童文学，又或是三四五年级时读的少年文学，直到现在，放眼望去，他们都还整整齐齐的在书柜里边儿仿佛排列着队伍等着我随时的检阅。
记得那是一个周末的早上，天有点冷，我包裹着被子把头伸向窗外，雨淅淅沥沥的下着，不愿起床的我随手拿着一本名为《假如给我三天光明》的书看了起来，可是我要怎么理解这本书呢？
我见过午后明媚的阳光透过学校后面的小树林，随着徐徐微风轻轻地起舞，就像好多星星一样的眼睛又明亮又可爱的在那里眨巴眨巴。
我见过隔壁阿姨家的小朋友，虽然还那么小，每当她从我手里抢走棒棒糖并塞到嘴里的时候，笑得跟朵花儿似的。
我还见过，见过高年级的大哥哥大姐姐们穿着漂亮的衣服照毕业照。想着他们小学的美好时光，就在照相师傅快门咔嚓一声后就永远的定格在了那，我也会想，想自己毕业的那天穿的是不是妈妈特意买的新衣服，扎的是小学时候的羊角辫还是属于初中时的大马尾，无限憧憬无限期望……
假如给我三天光明，如果可以，我想把它捐给从来就没看见过爸爸妈妈、看见过这个五彩世界的人。大熊猫的世界里还有黑色、白色；而失明人的世界里就只有一种单调的颜色，那就是“黑”。如果这个世界都是盲人，他们不可怜，因为这样就有好多好多人陪在他们的身边，大家互相帮助，一起生活。可是，世界并不是这样，在正常人的世界里，他们需要人帮助。
如果我能借给他们三天光明，我一定要督促他们多走多看，看擦身而过的每一个笑脸；
如果我能借给他们三天光明，我一定要呼吁更多的人帮助他们，在时间没到之前，谁也不许打扰他们；
多美好的“如果”啊！可是，我知道没有如果。
如果可以，我希望能给他们的不是三天光明，我要做一位医生，我要用最先进的仪器和我最精湛的医术给他们一辈子光明。
书，我们的朋友、我们的老师，我们的家，书让我们插上力量的翅膀，飞向美好的明天，也让我们对未来有了无限期待。
</p>
<!--
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部位置
-->
<!--
id属性（唯一不重复）
-每一个标签都可以添加一个id属性
-id属性就是元素的唯一标识，同一页面不能出现重复的id属性
-->
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
17、图片标签
<!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标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块元素和行内元素之间,具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径，路径规则和超链接是一样的
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt的内容来识别图片，如果不写alt属性，则图片不会被搜索引擎所收录
width 图片的宽度（单位的像素）
height 图片的高度
-宽度和高度如果只修改了一个，则另一个会等比例缩放（一般情况下只指定一个属性）
注意：
一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁剪多大
但是在移动端，经常需要对图片进行缩放（大图缩小较多）
图片的格式：
jpeg（jpg）
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示图片
gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一的图片，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明（专为网页而生）
webp
-这种格式是谷歌新推出的专门用来表示网页中的一种样式
-它具有其他图片格式所有优点，而且文件还特别的小
-缺点：兼容性不好
base64
-将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64，可以通过百度在线转换
效果一样，用小的
效果不一样，用效果好的（均衡）
-->
<img src="./img/女侠客.jpg" width="500" alt="松鼠">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.l8B9TkGhy_umXB5oCD8PawHaJ4?w=186&h=248&c=7&r=0&o=5&dpr=2&pid=1.7" alt="钢铁侠">
</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>
</head>
<body>
<!--
audio标签用来向页面中一引入一个外部的音频文件的
音视频文件引入后，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放，没有属性值
autoplay 音频文件是否自动播放
-如果设置了autoplay，则音乐在打开页面时会自动播放
但是目前来说大多数浏览器不会自动对音乐进行播放
loop 音乐是否循环播放
写了就生效
-->
<!-- <audio src="./source/audio.mp3" controls autoplay></audio> -->
<!-- <audio src="./source/audio.mp3" controls loop></audio> -->
<!--
除了提供src指定外部文件路径以外，还支持通过source标签来指定文件路径
-->
<!-- <audio controls>
对不起，您的浏览器不支持播放音频，请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio> -->
<!--
会自动播放
type指定文件格式 audio/mp3
-->
<!-- <embed src="./source/audio.mp3" type=""> -->
<audio controls>
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3">
</audio>
<!--
使用video标签引入视频文件
使用方式根audio基本是一样的
属性跟audio差不多
-->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
</body>
</html>
三、CSS
1、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标签里
然后通过CSS的选择器选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
-内部样式更加方便对样式进行复用
-问题：
内部样式表只能对一个网页起作用
他里边的样式不能跨页面进行复用
-->
<!-- <style>
p{
color: blue;
font-size: 50px;
}
</style> -->
<!--
第三种方式(外部样式表)最佳实践
-可以将CSS样式编写到一个外部的CSS文件
然后通过link标签来引入外部的CSS文件
-属性:
href:css文件的路径
-外部样式表需要通过link标签进行引入,
意味这只要只要想使用这些样式的网页都可以对他进行引用
使样式可以在不同的页面之间进行复用
-将样式编写到外部的css文件中,可以使用到浏览器的缓存机制
从而加快网页的加载是速度,提高用户的体验
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--
网页分成三个部分：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS
-层叠样式表
-网页实际上是一个多层结构，通过CSS可以分别为网页的每一个层来设置样式
而最终我们看到的只是最上边的一层
-总而言之，CSS是用来设置网页中的元素的样式
-->
<!--
使用CSS来修改元素的样式
第一种方式(内联样式，行内样式）：
-在标签内部通过style属性来设置元素的样式
-问题
使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中复制一遍
并且当样式发生变化时，还要一个一个修改，非常不方便
-注意，开发时绝对不要使用内联样式
-->
<!-- <p style="color:green ; font-size: 50px;">哈哈哈哈哈哈</p> -->
<!-- <p style="color:green ; font-size:60px">今天天气真不错！</p> -->
<p>哈哈哈哈哈</p>
<p>hhhh</p>
</body>
</html>
2、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>
/*
css中的注释:注释中的内容自动被浏览器所忽略
css的基本语法
选择器 声明块
选择器,通过选择器可以选中页面中的指定元素
比如p的作用就是选择页面中的所有p元素
声明块,通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值,名和值之间以:连接,以;结尾
*/
p{
color: red;
font-size: 20px;
}
h1{
color: green;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<h1>333</h1>
</body>
</html>
3、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>
/*
将所有段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
*/
/* p{
color: red;
}
h1{
color: blue;
} */
/*
将DDDDDDD设置为绿色
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值
例子：#box{}
*/
/* #D{
color: green;
} */
/*
将A和C设为黄色
class选择器（类选择器）
作用：根据元素的class属性值选择多个元素
语法：.class属性值
例子：.grenn{}
class是一个标签的属性，和id属性类似，但是它可以重复使用，id不行
可以为一个元素指定多个class属性,空格隔开即可
*/
/* .pink{
color: pink;
}
.big{
font-size: 30px;
} */
/*
通配选择器
作用：选中页面中的所有元素
语法：*{}
*/
*{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p class="pink big">HAHAHAHAHA</p>
<p>BBBBBBBBBB</p>
<p class="pink">CCCCCCCCCC</p>
<p id="D">DDDDDDDDDD</p>
<p>EEEEEEEEEE</p>
<p>FFFFFFFFFF</p>
</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>
/*
将class为red的元素设置为红色（字体）
*/
.red{
color: red;
}
/* 将class为red的div元素字体大小设置为30px */
/*
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器n{}
注意点：
如果选择器中有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
font-size: 20px;
}
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器n{}
#b1,.p1,h1,span，div.red{}
*/
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>这是标题</h1>
<span>hhhh</span>
</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>
/*
为div的子元素span设置字体颜色为红色
（为div直接包含的span设置字体颜色）
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
*/
/* div.box > span{
color: orange;
} */
/*
后代元素选择器：
作用 ：选中指定元素的指定后代元素
语法：祖先 后代
*/
/* div span{
color: blue;
} */
/*
选择下一个兄弟元素
语法：前一个+后一个
注意：如果紧挨着的下一个元素不是指定的元素，则不生效
*/
/* p + span{
color: aqua;
} */
/*
选择所有兄弟元素
语法：兄~弟
注意是兄后面的，前面的不会记录
*/
p ~ span{
color: aqua;
}
</style>
</head>
<body>
<!--
父元素
-直接包含子元素的元素叫做父元素
子元素
-直接被父元素包含的元素是子元素
祖先元素
-直接或间接包含后代元素的元素叫做祖先元素
-一个元素的父元素也是它的祖先元素
-只能有一个父元素，可以有多个祖先元素
后代元素
-直接或简介被祖先元素包含的元素叫做后代元素
-子元素也是后代元素
-可以有多个子元素和后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素
-->
<div class="box">
我是一个div
<span>我是div中的span元素</span>
<p>我是div中的p元素
<span>我是div中的p中的span元素</span>
</p>
<div></div>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<div>
我是div
<span>我也是div的子元素</span>
</div>
</body>
</html>
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>
/*
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=值]选择属性值以值为开头的元素
[属性名$=值]选择属性值以值结尾的元素
[属性值*=值]选择属性值中含有某值的元素
*/
p[title]{
color: orange;
}
p[title=这是c]{
font-size: 20px;
}
p[title^=aa]{
font-size: 30px;
}
p[title$=dd]{
color: aqua;
}
/* p[title*=这是]{
font-size: larger;
} */
</style>
</head>
<body>
<p title="aa这是a">aaaaa</p>
<p title="aa这是b">bbbbb</p>
<p title="这是c">ccccc</p>
<p title="这是dd">ddddd</p>
<p>eeeee</p>
<p>fffff</p>
</body>
</html>
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>
/*
将ul中的第一个li设置为红色
*/
/*
伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
比如，第一个子元素，被点击的元素，鼠标移入的元素...
-伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child最后一个子元素
:nth-child(n)选择第n个元素
特殊值：
n 全选，取值范围是0到正无穷
2n 或 even 表示选择偶数位的元素
2n+1 或 odd 表示选择奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序的
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上面的类似，不同点是这三个是在同类型进行排序的
-not()否定伪类
-将符合条件的元素从选择器中去除
*/
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: orange;
}
ul > li:nth-child(3){
color: blue;
}
ul > li:first-of-type{
color: aqua;
}
ul > li:not(:nth-child(3)) {
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<span>hhh</span>
<li>000</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
</html>
8、超链接的伪类
<!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>
/*
:link表示没访问过的链接（正常的链接）
*/
a:link{
color: red;
}
/*
:visited表示访问过的链接
由于隐私的原因，所以visted这个伪类只能修改颜色这个样式
*/
a:visited{
color: blue;
}
/*
:hover用来表示鼠标移入的状态
*/
a:hover{
color: aqua;
font-size: 20px;
}
/*
:active用来表示鼠标点击的状态
*/
a:active{
color: green;
}
</style>
</head>
<body>
<!--
1、访问过的链接
2、没访问过的链接
-->
<a href="https://www.douyin.com">抖音</a>
<br><br>
<a href="https://www.baidu123.com">baidu123</a>
</body>
</html>
9、伪元素选择器
<!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-size: 20px;
}
/*
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的元素）
伪元素使用::开头
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before元素的开始位置
::after元素的最后位置
-beforeheafter必须结合content属性来使用
*/
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: aqua;
}
P::selection{
background-color: gray;
}
/* div::before{
content:'开始无法选中' ;
color: aqua;
}
div::after{
content: '最后无法选中';
color: aqua;
} */
div::after{
content: '】';
}
div::before{
content: '【';
}
</style>
</head>
<body>
<q>我自带引号</q>
<div>我是一个div哈哈哈</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis accusantium sed fugiat voluptas consequuntur nisi labore voluptatem quod? Maiores enim, sint placeat corporis qui dolore debitis quae quasi iusto et.
</p>
</body>
</html>
10、样式的继承
<!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{
font-size: 20px;
}
/*
样式的继承，我们为一个元素设置的样式也会应用到它的后代元素上
继承是发生在祖先和后代之间的
继承的设计是方便我们的开发，利用继承可以将一些通用的样式设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有样式都会被继承，
比如背景相关的，布局相关的这些样式都不会被继承
*/
p{
color: red;
background-color: yellow;
}
div{
color: aqua;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是一个span元素</span>
<div>
我是一个div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
</body>
</html>
11、选择器的权重
<!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,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级计算后相同，此时使用靠下的样式，即后面的会覆盖前面的
可以在某一个样式的后边添加！important，则此时该样式会获取到最高的优先级，甚至超过内联样式
注意：在开发中一定要慎用！
*/
#box1{
color: orange;
}
.red{
color: red;
font-size: 30px;
}
.d1{
color: purple !important;
}
*{
font-size: 50px;
}
div{
font-size: 10px;
}
/* div#box1{
color: yellow;
} */
</style>
</head>
<body>
<div style="color: green ;" id="box1" class="red d1">
我是div
<span>我是div中的span</span>
</div>
</body>
</html>
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>
/*
长度单位：
像素
-屏幕(显示器)实际上是由一个一个的小点构成的
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
-所以同样的200px在不同的设备下显示效果不一样
百分比
-也可以将属性值设置为相对于父元素属性的百分比
-设置百分比可以使子元素随父元素的改变而改变
em
-em是相对于自身元素的字体大小来计算的
-1em= 1font-size
-em会根据字体大小的改变而改变
rem
-rem是相对于根元素的字体大小来计算的
*/
.box1{
width: 300px;
height: 100px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 30px;
/* width: 10em;
height: 10em; */
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
html{
font-size: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
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>
.box1{
width:100px;
height: 100px;
/*
颜色单位：
在css中可以直接使用颜色名来设置各种颜色，如blue，red，green
但是在css中直接使用颜色名称是非常的不方便的
RGB值：
-RGB通过三种原色的不同浓度来调出不同的配色
-R red，G green，B，Blue
-每一种颜色的范围在0-255（0%-100%）之间
-语法：RGB(红色，绿色，蓝色)
RGBA:
在RGB的基础上增加了A，A用来设置透明效果
第四个值表示不透明度，1为完全不透明，0完全透明
十六进制的RGB值：
-语法：#红色绿色蓝色
-颜色浓度：00-ff
-每种颜色用两位数字表示
-如果颜色两位两位重复，则可以进行简写
#aabbcc->#abc
HSL值，HSLA值
H色相（0-360）
S饱和度，颜色的浓度(0%-100%)
L亮度,颜色的亮度(0%-100%)
A透明度
*/
background-color: red;
background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color: trgb(0,0,255);
background-color: rgb(0,0,0);
background-color: rgb(255,255,255);
background-color: #0037ff;
background-color: hsl(80, 100%, 50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
三、layout
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>
.box1{
background-color: yellow;
width: 100px;
}
.box2{
background-color: aqua;
width: 100px;
}
#span1{
background-color: black;
}
#span2{
background-color: blue;
}
</style>
</head>
<body>
<!--
文档流（normal flow）
-网页时一个多层的结构，一层摞着一层
-通过css可以分别为每一层来设置样式
-作为用户来讲只能看到最顶上的一层
-这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列的
-对我们来说元素主要有两个状态
在文档流中
不在文档流中（脱离文档流）
-元素在文档流中有什么特点：
-块元素
-块元素在页面中独占一行（自上向下垂直排列）
-块元素默认宽度是父元素的全部（会把父元素撑满）
-默认高度是被内容撑开（子元素）
-注意独占一行不受其他影响
-行内元素
-行内元素不会独占页面一行，只占自身的大小
-行内元素在页面中左向右水平排列，如果一行中不能容纳所有的行内元素
则会换到第二行继续自左向右排列（书写习惯一致）
-默认宽度和高度都是被内容撑开
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span id="span1">我是span1</span>
<span id="span2">我是span2</span>
</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>
.box1{
/*
内容区（content），元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
width设置内容区的宽度
height设置内容区的高度
*/
background-color: aquamarine;
width: 200px;
height: 200px;
/*
边框（border），边框属性盒子边缘，边缘里边属性盒子内部，出了边框都是盒子外部
边框的大小会影响整个盒子的大小
设置边框，至少要设置三个样式
边框的宽度border-width
边框的颜色border-color
边框的样式border-style
*/
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<!--
盒模型、盒子模型、框模型（box model）
-css将页面中的所有元素都设置为了一个矩形的盒子
-将元素设置为矩形的盒子后，对页面的布局就是将不同的盒子摆放到不同的位置
-每一个盒子都由以下几个部分组成
-内容区（content）
-内边距（padding）
-边框（border）
外边距(margin)
-->
<div class="box1"></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>
.box1{
background-color: #bfa;
width: 200px;
height: 200px;
/*
边框
边框宽度
边框颜色
边框的样式
*/
/*
border-width: 10px;
默认值：一般是3个像素
可以指定四个方向的边框宽度
值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有border-x-width
x可以是top，right，bottom，left
颜色风格也是如此
*/
color: green;
/* border-top-width: 10px; */
/* border-width: 10px 20px 30px 40px; */
/*
border-color用来指定边框的颜色，同样可以分别指定四个边框的颜色
也可以省略不写，省略了自动使用color的颜色值
*/
/* border-color: orange; */
/*
border-style指定边框的样式
solid实线
dotted点状虚线
dashed虚线
double双线
默认值是none：没有边框
*/
/* border-style: solid; */
/*
border简写属性：可以同时设置边框所有样式，没有顺序要求
除了border以外还有四个border-xx
border-top
border-right
border-bottom
border-left
*/
border: solid 10px orange;
}
</style>
</head>
<body>
<div class="box1"></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>
.box1{
background-color: aquamarine;
width: 200px;
height: 200px;
border: 10px orange solid;
/*
内边距（padding）
-内容区和边框之间的距离是内边距
-一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
-内边距的设置会影响盒子的大小
-背景颜色会延申到内边距上
-盒子的可见框的大小，由内容区和边框和内边距共同决定
所以在计算盒子大小时，需要将这三个区域加一起计算
*/
/* padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px; */
padding: 10px 20px 30px 40px ;
padding: 10px 20px 30px;
padding: 10px 20px;
padding: 10px;
}
.inner{
background-color: yellow;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner"></div>
</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>
.box1{
width: 200px;
height: 200px;
background-color: aquamarine ;
border: 10px red solid;
padding: 30px;
/*
外边距（margin）
-外边距不会影响盒子可见性的大小
-但是会影响盒子的位置
-一共有四个方向的外边距
margin-top
上外边距，设置一个正值，元素向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距，设置一个正值，其下边的元素会向下移动
margin-left
左外边距，设置一个正值，元素会向右移动
-元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距就会移动自身元素
而设置下和右外边距会移动其他元素
-margin也可以设置负值，如果是负值则元素会向相反的方向移动
-margin的简写
margin可以同时设置四个方向的外边距，用法都一样
margin会影响盒子实际占用页面的大小
*/
/* margin-top: 100px;
margin-left: 100px; */
/* margin-bottom: 100px; */
/* margin-right: 100px; */
/* margin-bottom: 100px;*/
/* margin-top: -200px;
margin-left: -200px; */
/* margin-bottom: -100px; */
margin: 100px;
}
.box2{
background-color: orange;
width: 280px;
height: 280px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
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>
.outer{
width: 800px;
height: 200px;
border: orange 10px solid;
}
.inner{
width:200px;
height: 200px;
background-color: #bfa;
/*
元素的水平方向的布局：
元素在器父元素中水平方向的位置由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding0-left+width+margin-right+border-right+padding-right=其父元素内容区的宽度（必须满足）
0+0+0+200+0+0+0 = 800？
以上等式必须满足，如果相加结果使等式不满足，则称为过度约束，则等式会自动调整
-调整的情况：
-如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right的值以使等式满足
-这7个值钟有三个值可以设置为auto
width
margin-left
margin-right
-如果某个值为auto，则会调整auto那个值以使等式满足
-例子：width为auto，其他不设置，则width为被调整为800
width默认为auto
-如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
-如果将三个值都设置为auto，则外边距都是0，宽度设置为最大
-如果将两个外边距设置为auto，width为固定值，则会外边距平分
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
width：xxpx;
margin:0 auto;
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
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>
.outer{
background-color: #bfa;
height: 600px;
/*
默认情况下父元素的高度被内容撑开
*/
}
.inner{
height: 200px;
width:100px;
background-color: orange;
margin-bottom: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
子元素在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选项
visible：默认值，子元素会从父元素溢出，在父元素外的位置显示
hidden：溢出内容会被裁剪不会显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：根据需要生成滚动条
overflow-x
overflow-y
*/
overflow: auto;
}
.box2{
width: 100px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<!-- <div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div> -->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
8、外边距的折叠
<!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;
font-size: 100px;
}
.box1{
background-color: #bfa;
/* 设置一个下外边距 */
margin-bottom: 100px;
}
/*
垂直外边距的重叠（折叠）
-相邻的垂直方向外边距会发生重叠现象
-兄弟元素
-兄弟元素间的相邻的垂直外边距会取两者之间的较大值（两者都是正值）
-特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取绝对值较大的
-兄弟元素之间的外边距的重叠，对于开发时有利的，所以我们不需要处理
-父子元素
-父子元素间相邻的外边距，子元素会传递给父元素（上外边距）
-父子外边距的折叠会影响到页面的布局，必须要进行处理
*/
.box2{
background-color: orange;
/* 设置一个上外边距 */
margin-top: 100px;
}
.box3{
width: 200px;
height: 200px;/*199px*/
background-color: #bfa;
/* padding-top: 100px; */
/* border: top 1px #bfa solid ; */
}
.box4{
width: 100px;
height: 100px;/*99px*/
background-color: orange;
/* margin-top: 100px; */
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
9、行内元素的盒模型
<!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>
.s1{
background-color: yellow;
/*
行内元素的盒模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding。但是垂直方向不会影响页面的布局（会覆盖）
-行内元素可以设置border，垂直方向不会影响页面布局
-行内元素可以设置margin，垂直方向不会影响页面布局
*/
/* width: 100px;
height: 100px; */
/* padding: 100px; */
/* border: 100px solid red; */
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
a{
width: 100px;
height: 100px;
/*
display用来设置元素的显示类型
可选值：
inline将元素设置为行内元素
block将元素设置为块元素
inlin-block 将元素设置为行内块元素
行内块元素，既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none元素不在页面中显示。隐藏且不占据位置
visbility用来设置元素的显示状态
可选择：
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏不显示，但依然会占据页面的位置
*/
/* display: block; */
background-color: orange;
}
</style>
</head>
<body>
<a href="javascript:;">超链接</a>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
10、浏览器的默认样式
<!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/normalize.css">
<!-- <link rel="stylesheet" href="./css/reset.css"> -->
<!--
重置样式表,专门用来对浏览器的样式进行重置的
reset.css直接去除了浏览器的默认样式
normalize.css对默认样式进行统一
-->
<style>
/*
默认样式：
-通常情况下，浏览器都会为元素设置一些默认样式
-默认样式的存在会影响页面的布局，
通常情况下我们在编写网页时要去除浏览器的默认样式（pc端网页）
*/
/* body{
margin: 0px;
}
p{
margin: 0px;
} */
/* ul{
margin: 0px;
padding: 0px;
/* 去除项目符号 * /
list-style: none;
} */
/* *{
margin: 0px;
padding: 0px;
} */
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
11、盒子的尺寸
<!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-color: #bfa;
padding: 10px;
border: 10px red solid;
/*
默认情况下，盒子的可见框的大小由内容区，内边距和边框共同决定
box-sizing，用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子的可见框的大小
width和height指的是内容区和内边距和边框的总大小
*/
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
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>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/* border: 10px red solid; */
/*
outline用来设置元素的轮廓线。用法和border一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
*/
/*
box-shadow用来设置元素的阴影效果，不会影响页面的布局
第一个值：水平偏移量 设置阴影的水平位置 正值向右移动，负值向左移动
第二个值：垂直偏移量 设置阴影额垂直位置 正值向下移动，负值向上移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色
*/
box-shadow: 20px 20px 20px gray;
}
/* .box1:hover{
outline: 10px red solid;
} */
.box2{
width: 200px;
height: 200px;
background-color: orange;
/*
border-radius: ;设置圆角
还有另外四个方向的样式
左上 右上 左下 右下
*/
/* 可以指定两个值，第一个x方向的半径，第二个y方向的半径 */
/* border-top-left-radius: 50px 80px; */
/*
可以分别指定四个角的值
四个值：左上 右上 右下 左下（顺时针）
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
一个值：全部角
*/
border-radius: 30px;
/* 用/隔开指定两个值，变椭圆的两个半径 */
/* border-radius: 30px / 70px;*/
/* 将元素设置为一个圆形 */
/* border-radius: 50%; */
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<span>hello</span> -->
<div class="box2"></div>
</body>
</html>
四、练习
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>图片列表</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
/* 设置body的背景颜色 */
body{
background-color: antiquewhite;
}
/* 设置外部ul的样式 */
.img-list{
/* 设置ul宽度 */
width:190px;
/* 设置ul高度 */
height: 470px;
/* 裁剪溢出的内容 */
overflow: hidden;
/* 使ul在页面中居中 */
margin: 50px auto;
background-color: rgb(244, 244, 244);
}
/* 设置li的位置 */
.img-list li:not(last-child){
margin-bottom: 9px;
}
/* 设置图片大小 */
.img-list img{
width: 100%;
}
</style>
</head>
<body>
<!-- <div>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
</div> -->
<ul class="img-list">
<li>
<a href="javascript:;">
<img src="./img/01/1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/01/2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/01/3.jpg" alt="">
</a>
</li>
</ul>
</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>京东侧边导航</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
/* 设置body背景颜色 */
body{
/* 设置网页背景颜色方便查看 */
background-color: #bfa;
}
/* 设置菜单外部容器 */
.left-nav{
/* 设置宽度 */
width: 190px;
/* 设置高度 */
height: 450px;
/* 设置padding */
padding: 10px 0;
/* 设置背景颜色 */
background-color: #fff;
margin: 50px auto;
}
/* 设置菜单内部item */
.left-nav .item{
height: 25px;
/* 要让一个文字在其父元素中垂直居中，只需要将父元素的line-height设置为一个和父元素height一样的值 */
line-height: 25px;
/* margin-left: 18px; */
/* 设置item的左内边距，将文字向右移动18px */
padding-left: 18px;
font-size: 12px;
}
/* 为item设置一个鼠标移入的状态 */
.item:hover{
background-color: #d9d9d9;
}
/* 设置超链接的颜色 */
.item a{
/* 设置字体大小 */
font-size: 14px;
/* 设置字体颜色 */
color: rgb(9, 5, 5);
/* 去除下划线 */
text-decoration: none;
}
.item a:hover{
color: #c81623;
}
</style>
</head>
<body>
<!-- 创建一个外部的容器 nav(div) div(div) ul(li) -->
<nav class="left-nav">
<div class="item">
<a href="#">家用电器</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">电脑</a>/<a href="#">办公</a>
</div>
<div class="item">
<a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
</div>
<div class="item">
<a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a>
</div>
<div class="item">
<a href="#">美妆</a>/<a href="#">个护清洁</a>/<a href="#">宠物</a>
</div>
<div class="item">
<a href="#">女鞋/
<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a>
</div>
<div class="item">
<a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a>
</div>
<div class="item">
<a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a>
</div>
<div class="item">
<a href="#">母婴</a>/<a href="#">玩具乐器</a>
</div>
<div class="item">
<a href="#">食品</a>/<a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a>
</div>
<div class="item">
<a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a>
</div>
<div class="item">
<a href="#">医药保健</a>/<a href="#">计生情趣</a>
</div>
<div class="item">
<a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">电子书</a>
</div>
<div class="item">
<a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a>
</div>
<div class="item">
<a href="#">理财</a>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a>
</div>
<div class="item">
<a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a>
</div>
<div class="item">
<a href="#">工业品</a>
</div>
</nav>
</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>网易新闻导航</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
body{
background-color:aqua ;
}
/* 设置容器的样式 */
.news-wrapper{
/* 设置宽度 */
width: 300px;
/* 设置高度 */
height: 357px;
/* 设置居中 */
margin:50px auto;
/* 设置背景颜色 */
background-color: #fff;
/* 设置上边框 */
border-top: 1px solid #ddd;
}
/* 设置news-title */
.news-title{
/* 为了边框和文字宽度一致，需要将h2转换为行内块元素 */
display: inline-block;
height: 30px;
border-top: 1px solid red;
/* 通过margin-top将h2上移，盖住上边框 */
margin-top: -1px;
line-height: 30px;
}
/* 设置title中的超链接 */
.news-title a{
/* 去除下划线 */
text-decoration: none;
/* 设置颜色 */
color: #40406B;
/* 设置文字的加粗效果 */
font-weight: bold;
}
a{
/* 统一去除下划线 */
text-decoration: none;
}
/* 设置图片容器的高度 */
.news-img{
height: 150px;
}
/* 设置图片文字效果 */
.news-img .img-title{
/* font-size: 15px; */
/* 向上移动文字 */
margin-top: -30px;
/* 设置字体颜色 */
color: #fff;
/* 设置加粗 */
font-weight: bold;
padding-left: 30px;
}
/* 设置新闻列表 */
.news-list{
/* 设置上外边距 */
margin-top: 20px;
/* 设置左外边距 */
/* padding-left: 14px; */
/* 设置项目符号 */
/* list-style: square; */
}
/* 设置li */
.news-list li{
/* 设置下外边距 */
margin-bottom: 17px;
}
/* 设置li中的文字 */
.news-list a{
/* 设置字体大小 */
font-size: 14px;
/* 设置字体颜色 */
color: #666;
}
/* 设置a标签鼠标移入效果 */
.news-list a:hover{
color: red;
}
/* 伪元素为每一个li添加项目符号 */
.news-list li::before{
content: '■';
color: rgb(218, 218, 218);
font-size: 10px;
margin-right: 4px;
margin-left: 4px;
}
</style>
</head>
<body>
<!-- 创建新闻列表外层的容器 -->
<div class="news-wrapper">
<!-- 创建一个标题标签 -->
<h2 class="news-title">
<a href="#">体育</a>
</h2>
<!-- 创建图片容器 -->
<div class="news-img">
<a href="#">
<img src="./img/03/1.jpeg" alt="费德勒">
<!-- 创建图片标题 -->
<h3 class="img-title">
费德勒首负迪米 扶额摇头不满发挥
</h3>
</a>
</div>
<!-- 新闻列表 -->
<ul class="news-list">
<li>
<a href="#">乔治:我爱LA 喜欢和LBJ一起打球</a>
</li>
<li>
<a href="#">格林:3年前降薪就在等KD 特别T恤嘲讽LBJ</a>
</li>
<li>
<a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a>
</li>
<li>
<a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a>
</li>
</ul>
</div>
</body>
</html>
4、w3school导航条
<!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>w3school导航条</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
.nav-wrapper {
background-color: gainsboro;
height: 40px;
width:1100px;
/* padding-left: 32px; */
}
li{
float: left;
/* width: 170px; */
/* margin-right: 72px; */
line-height: 40px;
}
li a{
color: rgb(127, 127, 126);
text-decoration: none;
text-align: center;
padding: 0 35px;
}
li:hover{
background-color: #3F3F3F;
}
</style>
</head>
<body>
<div class="nav-wrapper">
<ul>
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</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>导航条</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
.nav{
/* 设置宽度高度*/
height: 48px;
width: 1200px;
/* 设置背景颜色 */
background-color: gainsboro;
/* 设置居中 */
margin: 100px auto;
}
/* 设置nav中的li */
.nav li{
/* 设置li向左浮动，已使菜单横向排列 */
float: left;
/* 设置li高度和垂直居中 */
line-height: 48px;
/* height: 48px; */
}
.nav a{
/* 将a转换为块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
/* 字体颜色和大小 */
color: #777777;
font-size: 18px;
padding: 0 39px;
}
/* 设置鼠标移入效果 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">Xml</a>
</li>
<li>
<a href="#">Web Buliding</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</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>京东轮播图</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
/* 设置图片的容器 */
.img-list{
width: 590px;
height: 470px;
margin: 100px auto;
/*
为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块定位
*/
position: relative;
}
.img-list li{
position: absolute;
}
/* 通过修改元素的层级来显示指定的图片 */
.img-list li:nth-child(4){
z-index: 1;
}
/* 设置导航点的样式 */
.pointer{
position: absolute;
z-index: 9999;
bottom: 20px;
left: 40px;
}
.pointer a{
/* display: block; */
/* 设置元素向左浮动 */
float: left;
width: 10px;
height: 10px;
margin: 0px 2px;
border-radius: 50%;
background-color: rgba(255,255,255,0.6);
/* 将背景颜色只设置到内容区，边框和内边距不再有背景颜色 */
background-clip: content-box;
border: 2px solid transparent;
}
.pointer a.active,
.pointer a:hover{
background-color: #fff;
border:2px solid rgba(255,255,255,0.6) ;
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="javascript:;"><img src="./img/05/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/4.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/5.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/6.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/7.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./img/05/8.jpg" alt=""></a></li>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>
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>京东顶部导航条</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<link rel="stylesheet" href="./fa/css/all.css">
<style>
body{
/* 设置字体 */
font: 12px/1.5 Microsoft YaHei,HeTi SC,tahoma,arial;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
/* 设置外部容器样式 */
.top-bar-wrapper{
height: 30px;
/* 设置宽度 */
width: 100%;
/* 设置背景颜色 */
background-color: #E3E4E5;
/* height: 30px; */
/* 设置边框 */
border-bottom: 1px #dddddd solid;
/* 设置行高 */
line-height: 30px;
}
/* 设置内部容器样式 */
.top-bar{
/* 固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
position: relative;
}
/* 设置字体颜色样式 */
.top-bar a,
.top-bar span,
.top-bar i{
color: #999;
text-decoration: none;
}
/* 设置鼠标移入效果 */
.top-bar a:hover,
.top-bar a.highlight{
color: #f10215;
}
/* 设置location */
.location{
float: left;
}
/* 设置location下的小图标 */
.location .fas{
/* font-size: 14px; */
color: #f10215;
}
/* 设置城市列表效果 */
.location .city-list{
width: 300px;
height: 436px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
display: none;
/* 设置绝对定位，使其不占据页面的位置 */
position: absolute;
top: 31px;
z-index: 999;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
/* 当鼠标移入到location时，让city-list显示 */
.location:hover .city-list{
display: block;
}
.current-city{
padding: 0 10px;
/* background-color: white;
border: 1px solid rgb(204,204,204);
border-bottom: none; */
border: 1px solid transparent;
border-bottom: none;
position: relative;
z-index: 9999;
}
/* 设置current-city的移入效果 */
.location:hover .current-city{
background-color: white;
border: 1px solid rgb(204,204,204);
border-bottom: none;
padding-bottom: 1px;
}
/* 设置shortcut */
.shortcut{
float: right;
}
/* 设置分割线 */
.shortcut .line{
width: 1px;
height: 10px;
background-color: rgb(204, 202, 202);
margin: 12px 12px 0;
}
/* 设置li */
.shortcut li{
float: left;
}
</style>
</head>
<body>
<!-- 创建外围容器 -->
<div class="top-bar-wrapper clearfix">
<!-- 创建内层容器 -->
<div class="top-bar">
<!-- 左侧位置菜单 -->
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:;">北京</a>
</div>
<!-- 放置城市列表 -->
<div class="city-list">
</div>
</div>
<!-- 右侧快捷菜单 -->
<ul class="shortcut clearfix">
<li>
<a href="javascript:;">你好,请登录</a>
<a class="highlight" href="javascript:;">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<li class="line"></li>
<li>
<a href="javascript:;">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<a href="javascript:;">京东会员</a>
</li>
<li class="line"></li>
<li>
<a class="highlight" href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
<li class="line"></li>
</ul>
</div>
</div>
</body>
</html>
7、背景练习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>
.box1{
width: 990px;
height: 32px;
margin: 0 auto;
/* background-image: url("./img/07/bg.png");
background-repeat: repeat-x; */
background: url("./img/07/bg.png") repeat-x;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
8、按钮练习1.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>
a:link{
display: block;
width: 93px;
height: 29px;
background-image: url("./img/08/link.png");
}
a:hover{
background-image: url("./img/08/hover.png");
}
a:active{
background-image: url("./img/08/active.png");
}
/*
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载
浏览器加载外部资源是按需加载的，用则加载，不用则不需要加载
像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载
*/
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>
9、按钮练习2.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>
a:link{
display: block;
width: 93px;
height: 29px;
background-image: url("./img/09/btn.png");
}
a:hover{
background-position: -93px 0;
}
a:active{
background-position: -186px 0;
}
/*
解决图片闪烁的问题
可以将多个小图片保存到一个大图片中，然后通过调整background-position来显示图片的部分
这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题
这个技术在网页中应用很广泛，被称为css-Sprite，这种图被称为雪碧图
雪碧图的使用步骤：
1、先确定要使用的图标
2、测量图标的大小
3、根据测量结果来创建一个元素
4、将雪碧图设置为元素的背景图片
5、设置偏移量以显示正确的图标
雪碧图的特点：
一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验
*/
.box1{
width: 128px;
height: 46px;
background-image: url(./img/09/amazon-sprite_.png);
}
.box2{
width: 42px;
height: 30px;
background-image: url("./img/09/amazon-sprite_.png");
background-position: -58px -338px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<a href="javascript:;"></a>
</body>
</html>
10、电影卡片
<!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="../layout/css/reset.css">
<link rel="stylesheet" href="./fa/css/all.css">
<style>
.outer{
width: 240px;
margin: 100px auto;
/* 设置阴影 */
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
/* 设置图片 */
.img-wrapper img{
width: 100%;
vertical-align: bottom;
}
.info{
padding: 0 18px;
font-size: 14px;
color: #acaaaa;
}
/* 设置标题 */
.info .title{
color: #717171;
font-size: 18px;
margin: 13px 0 15px 0;
}
/* .info .category{
font-size: 14px;
color: #acaaaa;
} */
.info .category i{
margin-right: 7px;
margin-left: 4px;
}
/* 设置简介的样式 */
.info .intro{
margin-left: 4px;
margin-top: 18px;
margin-bottom: 18px;
line-height: 20px;
}
/* 设置评价样式 */
.star-wrapper{
line-height: 46px;
height: 46px;
border-top: 1px solid #e9e9e9;
color: #ddd;
padding: 0 16px;
}
/* 设置星星样式 */
.star{
float: left;
}
.star-wrapper .light{
color: #b9cb41;
}
/* 设置微博 */
.star-wrapper .weibo{
float: right;
}
</style>
</head>
<body>
<!-- 创建一个外层容器 -->
<div class="outer">
<!-- 创建图片容器 -->
<div class="img-wrapper">
<img src="./img/10/1.jpg" alt="">
</div>
<!-- 创建内容区容器 -->
<div class="info">
<h2 class="title">
熊出没之拯救公主
</h2>
<h3 class="category">
<i class="fas fa-map-marker-alt"></i>
动画
</h3>
<p class="intro">
熊大和熊二经历九九八十一难成功救下了美丽的公主!
</p>
</div>
<!-- 创建评分的容器 -->
<div class="star-wrapper">
<!-- 创建星星 -->
<ul class="star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
</ul>
<!-- 创建微博图标 -->
<ul class="weibo">
<li class="fab fa-weibo"></li>
</ul>
</div>
</div>
</body>
</html>
11、米兔的动画
<!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{
height: 271px;
width: 132px;
margin: 0 auto;
background-image: url("./img/11/bigtap-mitu-queue-big.png");
background-position: 0 0;
transition: all 1s steps(3);
}
.box1:hover{
background-position: -396px 0;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
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>
.box1{
width: 256px;
height: 256px;
margin: 0,auto;
background-image: url("./img/12/bg2.png");
animation: run 1s steps(6) infinite;
}
/* 创建关键帧 */
@keyframes run{
form{
background-position: 0 0;
}
to{
background-position: -1536px 0;
}
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
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>
*{
margin: 0;
padding: 0;
}
.clock-wrapper{
width: 500px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
/* background-color: #bfa; */
border-radius: 50%;
/* border:10px solid black; */
position: relative;
background-image: url(./img/13/bg3.jpg);
background-size: cover;
}
.clock-wrapper>div{
top: 0;
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
/* 设置时针 */
.hour-wrapper{
width: 70%;
height: 70%;
/* background-color: #bfa; */
animation: run 86400 linear infinite;
}
.hour{
height: 50%;
width: 6px;
background-color: #000;
margin: 0 auto;
}
/* 设置分针 */
.min-wrapper{
height: 80%;
width: 80%;
/* background-color: #bfa; */
animation: run 3600s steps(3600) infinite;
}
.min{
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto;
}
/* 设置秒针 */
.sec-wrapper{
height: 95%;
width: 95%;
animation: run 60s steps(60) infinite;
}
.sec{
height: 50%;
width: 2px;
background-color: #f00;
margin: 0 auto;
}
/* .sec-wrapper{
width: 500px;
height: 500px;
background-color: #bfa;
border-radius: 50%;
animation: run 60s;
} */
/* .sec{
height: 250px;
width: 4px;
background-color: red;
margin: 0 auto;
animation: run 60s;
} */
/* 旋转的关键帧 */
@keyframes run {
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- <div class="sec-wrapper"><div class="sec"></div></div> -->
<!-- 创建表的容器 -->
<div class="clock-wrapper">
<!-- 创建时针 -->
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<!-- 创建分针 -->
<div class="min-wrapper">
<div class="min"></div>
</div>
<!-- 创建秒针 -->
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
</body>
</html>
14、复仇者联盟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
perspective: 800px;
}
.cube {
width: 200px;
height: 200px;
/* background-color: #bfa; */
margin: 100px auto;
/* 设置3d变形效果 */
transform-style: preserve-3d;
/* transform: rotateX(45deg) rotateZ(45deg); */
animation: rotate 20s infinite linear;
/* transform:rotateY(45deg) scaleZ(2); */
}
.cube>div {
width: 200px;
height: 200px;
/* 为元素设置透明效果 */
opacity: 0.7;
position: absolute;
}
img {
vertical-align: top;
}
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
transform:rotateY(180deg) translateZ(100px);
}
.box6 {
transform: rotateY(0deg) translateZ(100px);
}
@keyframes rotate {
form{
transform:rotateX(0) rotateZ(0)
}
to{
transform:rotateX(1turn) rotateZ(1turn)
}
}
</style>
</head>
<body>
<!-- 创建一个外部的容器 -->
<div class="cube">
<!-- 引入图片 -->
<div class="box1">
<img src="./img/14/1.jpg">
</div>
<div class="box2">
<img src="./img/14/2.jpg">
</div>
<div class="box3">
<img src="./img/14/3.jpg">
</div>
<div class="box4">
<img src="./img/14/4.jpg">
</div>
<div class="box5">
<img src="./img/14/5.jpg">
</div>
<div class="box6">
<img src="./img/14/6.jpg">
</div>
</div>
</body>
</html>
15、弹性的w3导航条
<!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="../layout/css/reset.css">
<style>
.nav{
width: 1210px;
height: 48px;
line-height: 48px;
margin: 50px auto;
background-color: #E8E7E3;
display: flex;
}
.nav li{
/* 设置增长系数 */
flex-grow: 1;
}
.nav a {
display: block;
color: #808080;
text-decoration: none;
font-size: 16px;
text-align: center;
}
.nav a:hover{
background-color: #636363;
color: #fff;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
</body>
</html>
16、淘宝导航条----弹性
<!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;
}
/* 设置外层容器 */
.nav{
width: 400px;
margin: 100px auto;
}
/* 设置每一行的容器 */
.nav-inner{
/* 设置为弹性容器 */
display: flex;
/* 设置主轴的空白分布 */
justify-content: space-around;
}
.item{
width: 18%;
/* background-color: #bfa; */
/* flex: auto; */
text-align: center;
}
.item img{
/* 设置图片宽度和父元素宽度一样 */
width: 100%;
}
.item a{
text-decoration: none;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 创建一个外层的容器 -->
<nav class="nav">
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="./img/16/1.png" alt="">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/2.png" alt="">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/3.png" alt="">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/4.png" alt="">
<span>外卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/5.png" alt="">
<span>天猫超市</span>
</a>
</div>
</div>
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="./img/16/6.png" alt="">
<span>充值中心</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/7.png" alt="">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/8.png" alt="">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/9.png" alt="">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/16/10.png" alt="">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
</html>
17、移动端网页
<!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>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./fa/css/all.min.css">
</head>
<body>
<!-- 创建头部容器 -->
<div class="top-bar">
<div class="menu-btn">
<a href="#">
<i class="fas fa-stream"></i>
</a>
</div>
<h1 class="logo">
<a href="#">
爱学习
</a>
</h1>
<div class="search-btn">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<!-- banner -->
<div class="banner">
<a href="#">
<img src="./img/17/banner.png" alt="">
</a>
</div>
<div class="menu">
<a class="course" href="#">
<i class="fas fa-book"></i>
我的课程
</a>
<a class="star" href="#">
<i class="fas fa-cut"></i>
明星讲师
</a>
<a class="sub" href="#">
<i class="fas fa-envelope"></i>
我的订阅
</a>
<a class="download" href="#">
<i class="fas fa-globe"></i>
我的下载
</a>
</div>
<!-- 课程列表 -->
<div class="course-list">
<!-- 列表标题 -->
<div class="title">
<h2>最新课程</h2>
<a href="#" class="more">更多+</a>
</div>
<div class="item-list">
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<!-- 列表标题 -->
<div class="title">
<h2>最新课程</h2>
<a href="#" class="more">更多+</a>
</div>
<div class="item-list">
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="./img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="./img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
</body>
</html>
less
*{
margin: 0;
padding: 0;
}
@total-width: 750;
.w{
width: (693/40rem);
margin: 0 auto;
}
//设置根元素
html{
// 设置rem比值
font-size: (100vw/@total-width) * 40;
background-color: #eff0f4;
}
a{
text-decoration: none;
}
// 设置头部header
.top-bar:extend(.w){
// 设置弹性容器
display: flex;
// 设置高度
height: (175/40rem);
// 设置对齐方式
justify-content: space-between;
//设置辅轴对齐方式
align-items: center;
line-height: (175/40rem);
a{
color: #24253d;
font-size: (50/40rem) ;
i{
color: #999;
font-size: (40/40rem);
}
}
}
// 设置banner
.banner:extend(.w){
img{
width: 100%;
}
}
// 设置中间菜单
.menu:extend(.w){
// 确定元素的高度
height: (329/40rem);
// 设置弹性元素
display: flex;
// 设置换行
flex-flow: row wrap;
// 设置对齐方式
justify-content: space-between;
// 设置辅轴方向的对齐方式
align-content: space-evenly ;
// 设置框的大小
a{
width: (327/40rem);
height: (104/40rem);
line-height: (104/40rem);
color: white;
border-radius: (10/40rem);
i{
margin: 0 (20/40rem) 0 (38/40rem);
}
}
.course{
background-color:#f97053;
}
.star{
background-color:#cd6efe;
}
.sub{
background-color:#fe4479;
}
.download{
background-color:#1bc4fb;
}
}
// 设置课程列表
.course-list:extend(.w){
height: (394/40rem);
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: (46/40rem);
.title{
display: flex;
// 主轴空间
justify-content: space-between;
// 辅轴对齐方式
align-items: center;
h2{
font-size: (33/40rem);
color:#24253d;
border-left: 2px solid #3a84ff;
padding-left: 5px;
}
a{
font-size: (28/40rem);
color: #656565;
}
}
}
// 设置课程列表
.item-list{
overflow: auto;
display: flex;
// flex-flow: wrap;
}
.item{
flex: none;
box-sizing: border-box;
width: (320/40rem);
height: (324/40rem);
background-color: #fff;
box-shadow: 0 0 (10/40rem) rgba(0,0,0,.3);
border-radius: (10/40rem);
padding: 0 (22/40rem);
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-right: (45/40rem);
// 设置图片宽度
img{
width: 100%;
vertical-align: top;
}
// 课程标题
.course-title{
font-size: (32/40rem);
color: #24253d;
}
// 设置用户信息容器
.user-info{
display: flex;
align-items: center;
}
// 头像
.avatar{
width: (42/40rem);
height: (42/40rem);
}
// 昵称
.nickname{
font-size:(24/40rem);
color:#969393;
margin-left: (8/40rem);
}
}
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>
<link rel="stylesheet" href="../layout/css/reset.css">
<link rel="stylesheet" href="./meitu/style.css">
<link rel="stylesheet" href="./fa/css/all.min.css">
</head>
<body>
<!--
响应式设计的网页
-移动端优先
-渐进增强
-->
<div class="top-bar-wrapper">
<!-- 顶部容器 -->
<div class="top-bar">
<!-- 左侧菜单 -->
<div class="left-menu">
<!-- 创建菜单图标 -->
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 创建菜单 -->
<ul class="nav">
<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="#">
<i class="fas fa-search"></i>
</a>
<span>搜索Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!-- 用户信息 -->
<div class="user-info">
<a href="#">
<i class="fas fa-user"></i>
</a>
</div>
</div>
</div>
</body>
</html>
less
a{
text-decoration: none;
color: #fff;
&:hover{
color: rgb(197,196,196);
}
}
.top-bar-wrapper{
// width: 100%;
background-color: #000;
}
// 导航条的外部容器
.top-bar{
max-width: 1200px;
margin: 0 auto;
height: 48px;
background-color: #000;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
// 设置左侧导航图标
.left-menu{
&:active{
// 显示隐藏菜单
.nav{
display: block;
}
}
// 设置菜单
.nav{
display: none;
position: absolute;
top: 48px;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
padding-top: 60px;
li{
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #757474;
a{
display: block;
line-height: 44px;
font-size: 14px;
}
&:last-child a{
display: inline-block;
margin-right: 6px;
}
span{
color: #fff;
font-size: 14px;
}
}
}
// 图标
.menu-icon{
width: 18px;
height: 48px;
// background-color: #bfa;
position: relative;
// 导航线
li{
width: 18px;
height: 1px;
background-color: #fff;
position: absolute;
// 设置旋转原点
transform-origin: left center;
transition: 0.5s;
}
li:nth-child(1){
top: 18px;
}
li:nth-child(2){
top: 24px;
}
li:nth-child(3){
top: 30px;
}
// 鼠标移入效果，正常项目使用js
&:active{
li:nth-child(1){
// 向下旋转
transform: rotateZ(40deg);
}
li:nth-child(2){
// 隐藏
// visibility: hidden;
opacity: 0;
}
li:nth-child(3){
// 向上旋转
transform: rotateZ(-40deg);
}
}
}
}
// 设置logo
.logo{
a{
text-indent: -9999px;
display: block;
width: 122px;
height: 32px;
background-image: url("../img/18/dff63979.sprites-index@2x.png");
background-size: 400px 400px;
}
}
// 设置媒体查询
// 设置断点768px
@media only screen {
// 断点768px
@media (min-width:768px){
.left-menu{
order: 2;
flex: auto;
// 显示菜单
.nav{
display: flex;
position: static;
padding: 0;
justify-content: space-around;
li{
margin: 0;
width: auto;
border-bottom: none;
a{
line-height: 48px;
}
span{
display: none;
}
}
}
// 隐藏菜单图标
.menu-icon{
display: none;
}
}
.logo{
order: 1;;
}
.user-info{
order: 3;
}
}
}
五、float
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>
.box1{
width: 400px;
height: 200px;
background-color: green;
/*
通过浮动可以使一个元素在其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值：
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右浮动
注意：元素设置为浮动以后，水平布局的等式不需要强制成立了
元素设置玩浮动以后，会完全从文档流中脱离，不在占用文档流的位置
所以元素下边的还在文档流值的元素会向上移动
浮动的特点：
1、浮动元素会完全脱离文档流，不再占用文档流的位置
2、设置浮动后，元素会向父元素的左侧或右侧移动
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过前边的其他浮动元素
5、如果浮动元素上边是没有浮动的元素，则浮动元素无法上移
6、浮动元素不会超过上边的浮动的兄弟元素，最多最多只能是和它一样高
简单总结：
浮动目前来讲他的主要作用就是让页面元素可以水平排列
通过浮动可以制作一些水平方向的布局
*/
float: left;
}
.box2{
width: 400px;
height: 200px;
background-color: orange;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></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>
.box1{
width: 100px;
height: 100px;
background-color: green;
/*
浮动元素不会盖住文字，文字会自动环绕元素的周围
所以我们可以利用浮动来设置文字环绕图片的效果
*/
float: left;
}
*{
margin: 0;
padding: 0;
}
.box2{
background-color: yellowgreen;
/*
元素设置浮动后，将会从文档流中脱离，脱离后，元素的一些特点也会发生改变
脱离文档流的特点：
块元素：
1、块元素不再独占页面的一行
2、脱离文档流后，块元素的宽度和高度由内容撑开决定
行内元素：
行内元素脱离文档流后会变成块元素，特点和块元素一样
脱离文档流后，不再区分块和行内元素了
*/
float: left;
}
.box3{
background-color: orange;
}
.s1{
width: 200px;
height: 200px;
float: left;
background-color: yellow;
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<!-- <p>
去年冬天，我回到了故乡下柴市。
傍晚，我一个人坐在门前的晒谷场上。
柔和的光亮盘桓在村庄上空。白昼将去未去、夜晚将来未来，那暝色很好看很清新，散溢着泥土的芬芳，干净得没一点渣子。它把田埂掩盖，把小桥托在空中，把树木藏进风里，把狗叫声拉长，把鸡撵进笼里，把旷野清理得干干净净。
往天上瞅，褐色的天空里间杂着白色，云在风里羊群样蠕动。
那时候，水稻已经归仓，黄豆收进了院落，树叶都落光了，所有多余的粉饰都拿掉了；原野洗尽了风尘，褪尽了铅华，恢复了它天然无雕饰的纯真素颜与本来模样；万物毫不戒备地显露出最根本的坦荡。大地像生过婴儿的母亲，幸福地舒展在开阔的天空下，躺着。
暗黑，从远处漫过来。最先漫过大湖，然后漫过大堤，来到村庄，来到晒谷场上，最后漫过心田。黄昏，终于阖上眼睑。一切都安安静静、舒舒服服地浸在里面。
我坐在暮色里，没有开灯。
没有灯的时候看黑，黑色很美。它不是黑洞洞的旋涡似的、深井似的吓人，它透着微微的亮光，安宁而纯粹，单纯而透明，像母亲的怀抱。
乡村的夜色真是好看，尽是起起伏伏的黑。
看着看着，人清澈得什么似的，渐渐地松软下来，像要飞一样。
我突然想一个人走走，在村庄内和田野里，像石头一样滚动。
暗黑的夜空中，有一些大雁在悠闲地旅行。蝙蝠在我头上忽东忽西毫无规则地飞翔。无言的黑影，让夜变得富有、神秘和亲近。
树枝上零星的夜露懒懒地向下滑落，滴在下面的野草上，像是小孩子滑滑梯似的，很是调皮。灌木、竹林、棉花杆，安静温和，没一点芒剌，和我一同站在夜色里。我和它们离得很近，仿佛手拉手的兄弟。白天看它们，它们就凌厉，一副眼珠子朝上拒绝人的样子。唉！万物不设防的状态真好，不设防才能彼此亲近。
童年里的北斗星就在这时候出现，母亲讲述的牛郎星织女星也在这时候出现。北斗星、牛郎星织女星也都没有偏离原来的位置，它们好像是在等我回来，好一下子在星群里找到它们。多少年了，我没有寻觅过它们，没有看过这样的满天星星。我现在的居住地广州，也是可以看到星星的，在我家阳台上就能够看到它们，但我已经很久没有在阳台上看星星了。一个个夜晚，我耽搁于手机里的花边新闻，耽搁于对文字的自我围困，也耽搁于对一些不可得的感情的纠缠……
我看见了月光，纯粹的月光，没有一点点灯光参进来。朦朦胧胧的，如薄雾，如出水的香芋苗，如刚刚绽放开来的荷花，又如清晨含着露珠的丝瓜花，纯洁得让我不敢呼吸，丰满得让我心生喜爱。天空，从南到北，一眼能望那么远，那么高，那么一大片，从东到西也一样的宽广无边……我几乎屏住了呼吸——我的一次呼吸就像是一次破坏。如果这个时候我说一句话，那几乎是不可思议的事情，也幸亏我身边没有可以说话的人。
明月给周围的一切披上银装。大湖银星万点，小溪银波微漾，浸过露水的枯草，也闪着银色的光芒。月光穿过树枝间的缝隙，在小道上，印上一道道纵横交错的影子。这些已经落叶的树，白天一派萧瑟之气，夜间掩在林间的月光，把它们映照得流光溢彩，好像提早回到勃勃的春天了。
我背着手，抬头望着天空那轮明月，几颗星星点缀在两旁，仿佛我们兄弟几个依偎在母亲的身旁听那些古老的民间故事。唉！那时候，母亲说话的声音年轻得一跳一跳的，柔和的脸上总是带着笑容，眼睛特别的亮。可如今，那个给我们讲故事的母亲，那个将我从乡村送进城市的母亲己经作古。而头上这轮照过古人也照过今人的明月，依然奔波于天地之间，依然像那些流逝的过往岁月，正缓缓拂过我的身体。
今夜，我走在故乡的土地上，内心饱满得如同盛夏的果实，一切都如我所愿，一切都如我所想。在这满月的清辉之下，从树木的底下往上端详的那一轮月亮，把错综着生长的树木变成一幅木刻版画，那样的黑白分明，那样的似曾相识。
在这个没有灯光、没有车龙马水的夜晚。我独行在故乡的田间小道上，可以横着走，竖着走，踏着圈走，倒着走，想怎么走就怎么走。月光像水银般从高天流泻下来，小路上的漫步便成了我的独舞，迷蒙中，我感觉有类似二胡协奏的音律在耳边萦回，有千万只燕子在空中飞翔，渐渐的，我脱去了人造的面具，氤氲出一份不错的心情，喜爱的氛围激荡在我的心胸，内心充满了对乡村、对故乡乃至新生活的想象和渴望。
我喜欢故乡的夜！
</p> -->
<!-- <div class="box2">hello1</div>
<div class="box3">hello2</div> -->
<span class="s1">我是一个span</span>
</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>
header,main,footer{
width: 1000px;
margin: 0 auto;
}
/* 设置头部 */
header{
height: 150px;
background-color: silver;
}
/* 设置主体 */
main{
height: 500px;
background-color: #bfa;
margin: 30px auto;
}
nav,article,aside{
float: left;
height: 100%;
}
/* 设置左侧导航 */
main nav{
width: 170px;
background-color: yellow;
}
/* 设置中间内容 */
main article{
margin: 0 30px;
width: 600px;
background-color: aqua;
}
/* 设置右侧边栏 */
main aside{
width: 170px;
background-color: green;
}
footer{
height: 150px;
background-color: tomato;
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 创建网页主题 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间内容 -->
<article></article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!-- 网页的底部 -->
<footer></footer>
</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>
.outer{
border: 10px red solid;
/* height: 100px; */
/*
BFC(Block Formatting Context)块级格式化环境
-BFC是一个CSS中隐含的熟悉，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
-元素开启BFC后的特点
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素
-可以通过特殊方式开启BFC：
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值
-常用的方式：为元素设置overflow:hidden 开启BFC（以使其可以包含浮动元素）
*/
/* float: left; */
/* display: inline-block; */
overflow: hidden;
}
.inner{
height: 100px;
width: 100px;
background-color: #bfa;
/*
高度塌陷的问题：
在浮动布局中，父元素的高度默认使被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
-写死高度（不满足实际需求）
-
*/
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="box2"></div>
</body>
</html>
5、BFC
<!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-color: #bfa;
/* float: left; */
overflow: hidden;
/* border: 1px red solid; */
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
overflow: hidden;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
/* padding-top: 100px; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<!-- <div class="box2">
</div> -->
</body>
</html>
6、clear
<!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: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: #ff0;
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
/*
由于box1的浮动，导致box3的位置上移
也就是box3受到了box1的影响，位置发生了改变
如果我们不希望某个元素因为其他浮动元素的影响而改变位置，
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear
作用：清除浮动元素对当前元素所产生的影响
可选值：
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧较大影响的那侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个外边距，
以使其位置不受其他元素的影响
*/
/* clear: left; */
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2"></div>
<div class="box3">3</div>
</body>
</html>
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>
.box1{
border: 10px red solid;
/* overflow: hidden; */
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box3{
clear: both;
}
/* 最佳解决方案 */
.box1::after{
/* 伪元素默认是行内元素 */
display: block;
content: '';
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3">
</div> -->
</div>
</body>
</html>
8、clearfix
<!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-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
/* .box1::before{
content: '';
display: table;
} */
/* clearfix可以同时解决高度塌陷和外边距重叠的问题，当你遇到这些问题的时候，直接使用clearfix这个类即可 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
六、position
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>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/* margin-left: 200px;
margin-top: -200px; */
/*
定位（position）
-定位是一种更加高级的布局手段
-通过定位可以将元素摆放到页面的任意位置
-使用position属性来设置定位
-可选值
-static 默认值，元素是静止的没有开启定位
-relative 开启元素相对定位
-absolute 开启元素绝对定位
-fixed 开启元素的固定定位
-sticky 开启元素的粘滞定位
-相对定位
-当元素的position属性值设置为relative时则开启了元素的相对定位
-相对定位的特点：
1、元素开启相对定位后，如果不设置偏移量元素不会发生任何变化
2、相对定位是参照于元素在文档流中的位置！！！
3、相对定位会提升元素的层级
4、相对定位不会使元素脱离文档流
5、相对定位不会改变元素的性质，块还是块，行内还是行内
-偏移量（offset）
-当元素开启定位后，可以通过偏移量来设置元素的位置
top
-定位元素和定位位置上边的距离
bottom
-定位元素和定位位置下边的距离
-定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中之一
-top值越大，越向下
-bottom越大，越向上
left
-定位元素和定位位置的左侧距离
right
-定位元素和定位位置的右侧距离
--定位元素水平方向的位置由left和right两个属性来控制
通常情况下我们只会使用其中之一
-left值越大，越向右
-right越大，越向左
注意：一定要开启定位后才生效
*/
position: relative;
/* top: 100px; */
bottom: 200px;
left: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
/* margin-top: 200px; */
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</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>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/*
绝对定位
-当元素的position属性值设置为absolute时，则开启了元素的绝对定位
-绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变化
2、开启绝对定位后，元素会从文档流中脱离
3、绝对定位会改变元素的性质，行内变成块，块的宽度被内容撑开
4、绝对定位会使元素提升一个层级
5、绝对定位元素是相对于包含块进行定位的
包含块（containing block）
-正常情况下
包含块就是离当前元素最近的祖先块元素
<div><div></div></div>
<div><span><em></em></span></div>
-开启绝对定位的包含块：
包含块就是理他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
-html（根元素、初始包含块）
*/
position: absolute;
bottom: 0;
right: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
}
.box5{
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</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>
body{
font-size: 60px;
height: 2000px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/*
固定定位：
-将元素的position属性值设置为fixed则开启了固定定位
-固定定位也是一种绝对定位，所以固定定位的大部分特点跟绝对定位一样
唯一不同的是，固定定位永远参考于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
*/
position: fixed;
left: 0;
top: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
}
.box5{
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</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>导航条</title>
<link rel="stylesheet" href="../layout/css/reset.css">
<style>
body{
height: 2500px;
}
.nav{
/* 设置宽度高度*/
height: 48px;
width: 1200px;
/* 设置背景颜色 */
background-color: gainsboro;
/* 设置居中 */
margin: 100px auto;
/*
粘滞定位
-当元素的position属性值设置为sticky时则开启了元素的粘滞定位
-粘滞定位和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定
*/
position: sticky;
top: 10px;
}
/* 设置nav中的li */
.nav li{
/* 设置li向左浮动，已使菜单横向排列 */
float: left;
/* 设置li高度和垂直居中 */
line-height: 48px;
/* height: 48px; */
}
.nav a{
/* 将a转换为块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
/* 字体颜色和大小 */
color: #777777;
font-size: 18px;
padding: 0 39px;
}
/* 设置鼠标移入效果 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">Xml</a>
</li>
<li>
<a href="#">Web Buliding</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</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>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
/*
开启绝对定位后，要满足以下等式
水平布局
left + margin-left + border-left + padding-left + width +padding-right + border-right + margin-right + right = 包含块元素的宽度
-当我们开启了绝对定位后：
水平方向的布局等式就需要添加left和right两个值
此时规则和之前只是多了两个值：
当发生过度约束：
如果9个值中没有auto，则自动调整right值以使等式满足
如果要auto，自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
垂直方向布局的等式也必须要满足
top + margin-top/bottom + padding-top/bottom + height +bottom
*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
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>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
position: absolute;
/*
对于开启了定位的元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高越优先显示
如果层级一样，则优先显示靠下的元素
祖先元素的层级再高也不会盖住后代元素
*/
z-index: 1;
}
.box2{
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.3);
position: absolute;
top:50px;
left: 50px;
z-index: 2;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:100px;
left: 100px;
z-index: 3;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div>
</div>
</body>
</html>
七、font&background
1、字体->font-family
<!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>
/*
font-face可以将服务器中的字体直接提供给用户去使用
问题：
1、加载速度慢
2、版权
3、字体格式（兼容问题），可以指定多个url
*/
@font-face {
/* 指定字体的名字 */
font-family:'myfont' ;
src: url(./font/ZCOOLKuaiLe-Regular.ttf) format("truetype"),
url(./font/ZCOOLXiaoWei-Regular.ttf);
}
p{
/*
字体相关样式
color 前景色，通常用来设置字体颜色
font-size 字体的大小
font-size相关单位
em相当于当前元素的一个font-size
rem 相当于根元素的一个font-size
font-family 字体族(字体的格式)
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
-指定字体的类别，浏览器会自动使用该类别下的字体
-font-family可以同时指定多个字体。字体之间用空格隔开
字体生效时优先使用第一个，如果第一个无法使用则使用第二个，以此类推
*/
color: green;
font-size: 40px;
/* font-family: 'Courier New', Courier, monospace ; */
font-family: 'myfont';
}
</style>
</head>
<body>
<p>
今天天气真不错，Hello, Boy！
</p>
</body>
</html>
2、图标字体1.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>
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
<!--
图标字体（iconfont）
-在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片本身大小比较大，并且非常不灵活
-所以在使用图标时，我们可以将图标设置为字体
然后通过font-face的形式来对字体进行引入
-这样我们就可以通过使用字体的样式来使用图标
fontawesome使用步骤：
1、下载链接https://fontawesome.com/
2、解压
3、将css和webfonts移动到项目中
4、将all.css引入网页中
5、使用图标字体
-直接通过类名来使用图标字体
class="fas fa-bell" fas或fab固定，空格后使用图标名
class="fab fa-accessible-icon"
-->
<i class="fas fa-bell" style="font-size: 80px ;color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
</body>
</html>
3、图标字体2.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>
<link rel="stylesheet" href="./fa/css/all.css">
<style>
li{
list-style: none;
}
li::before{
/*
通过伪元素来设置图标字体
1、找到要设置图标的元素通过before或after选中
2、在content中设置编码
3、设置字体的样式
fab:
font-family: 'Font Awesome 5 Brands';
fas:
font-family: 'Font Awesome 5 Free';
font-weight:900;
*/
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- <i class="fas fa-cat"></i> -->
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
通过实体来使用图标字体：
&#x图标的编码;
-->
<spa class="fas"></span>
</body>
</html>
4、阿里的图标字体库.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>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
i.iconfont{
font-size: 100px;
}
p::before{
content: '\e6f2';
font-family: 'iconfont';
font-size: 100px;
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont icon-auto"></i>
<p>Hello</p>
</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>
div{
/* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */
height: 200px;
line-height: 200px;
font-size: 50px;
/*
行高（line height）
-行高指的是文字占用的实际高度
-可以通过直接指定一个大小（px em）
也可以直接为行高设置一个整数
如果是一个整数的话，行高会是字体的指定整数的倍数
默认是1.33
行高经常还用来设置文字的行间距
行间距=行高-字体大小
字体框
-字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
*/
border: 1px solid red;
/* line-height: 200px; */
}
</style>
</head>
<body>
<div>今天天气真不错呀！Boy！今天天气真不错呀！Boy！今天天气真不错呀！Boy！</div>
</body>
</html>
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{
border: 1px solid red;
/* line-height: 2; */
/*
font可以设置字体相关的所有属性
语法：
font:字体大小/行高 字体族
行高 可以省略不写 如果不写使用默认值
*/
/* font-size: 50px;
font-family: 'Time New Roman',Times,serif; */
font: bold italic 50px/2 微软雅黑, 'Time New Roman',Times,serif;
/* font: normal normal 50px/2 微软雅黑, 'Time New Roman',Times,serif; */
/* line-height: 2; */
font-size: 50px;
/*
font-weight 字重 字体的加粗效果
可选值
normal默认值，不加粗
bold加粗
100-900 九个级别（没什么用）
取决于是否都有9个级别的字体
font-style 字体的风格
可选值
normal正常
italic斜体
*/
/* font-weight: bold; */
/* font-weight: normal;
font-style: italic; */
}
</style>
</head>
<body>
<div>今天天气真不错！Hello Boy！</div>
</body>
</html>
7、文本的样式1.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>
div{
width: 500px;
border: 1px solid red;
/*
text-align 文本的水平对齐
可选值：
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
*/
/* text-align: center; */
font-size: 50px;
}
span{
font-size: 20px;
border: 1px solid blue;
/*
设置元素垂直对齐的方式
可选值：
baseline 默认值，基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
也可直接指定值
*/
vertical-align: baseline ;
}
p{
border: 1px red solid;
}
img{
vertical-align: top;
}
</style>
</head>
<body>
<div>今天天气 Boy x<span>真不错！Boy</span></div>
<!-- <div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae quod aliquam sint similique deleniti fugit et sit aspernatur, nulla, eum eos facere! Eligendi nemo ut modi, laboriosam magni assumenda neque.
</div> -->
<p>
<img src="../Html/img/城堡.png" alt="">
</p>
</body>
</html>
8、文本的样式2.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>
.box1{
font-size: 50px;
/*
text-decoration设置文本修饰
可选值：
none默认值，什么都没有
underline 下划线
line-through 删除线
overline 上划线
*/
/* text-decoration: underline; */
/* text-decoration: underline red dotted; */
}
.box2{
width: 200px;
/*
用来设置网页如何处理空白
可选值：
normal正常
nowrap 不换行
pre 保留空白（代码什么样，页面什么样）
以下三个组合使用
*/
white-space: nowrap ;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">
今天天气很不错！
</div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam vitae veniam dolores temporibus pariatur ipsum reiciendis omnis eius suscipit impedit. Praesentium assumenda quae eaque magnam adipisci minus explicabo repudiandae aliquam.
</div>
</body>
</html>
9、背景1.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>
.box1{
width: 1000px;
height: 1000px;
/*
background-color设置背景颜色
*/
background-color: #bfa;
/*
background-image: ;设置背景图片
-可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景色
-如果背景图片小于元素，则背景图片会自动在元素中平铺将元素铺满
-如果背景图片大于元素，将会有一部分背景无法完全显示
-如果背景图片和元素一样大，则直接正常显示
*/
background-image: url("./img/default.jpg");
/*
background-repeat: ;设置背景的重复方式
可选值：
repeat默认值，背景沿着x轴和y轴方向重复
repeat-x沿着x方向重复
repeat-y沿着y方向重复
no-repeat不重复
*/
background-repeat: no-repeat;
/*
background-position 用来设置图片的位置
设置方式：
通过top left right bottom center几个表示方位的词来设置背景图片的位置
使用方位时必须同时指定两个值，如果只有一个值，默认第二个值为center
通过偏移量指定背景图片的位置
水平方向的偏移量 垂直方向的偏移量
*/
/* background-position: top center; */
background-position: 100px 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
10、背景2.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>
.box1{
width: 500px;
height: 500px;
overflow: auto;
/*
background-color设置背景颜色
*/
background-color: #bfa;
background-image: url("./img/mm.jpg");
background-repeat: no-repeat;
/* background-position: 100px 100px; */
/*
设置背景的范围
background-clip
可选值：
border-box默认值，背景出现在边框的下边
padding-box 背景不会出现在边框下，只出现在内边距和内容区下
content-box 背景只会出现在内容区
background-origin背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区开始计算
border-box 背景图片的偏移量从边框开始计算
*/
background-origin: border-box ;
background-clip: content-box;
/*
background-size:设置背景图片的尺寸 ;
第一个值表示宽度
第二个值表示高度
-如果只写一个值，则第二个值默认是auto
cover图片的比例不变，将元素铺满
contain图片比例不变，将图片在元素中完整显示
*/
/* background-size: 100% auto; */
/* background-size: cover; */
background-size: contain;
/* border: 10px red double; */
/*
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
-background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须要写的
注意：
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size
background-origin background-clip两个样式，origin必须在clip前面
*/
}
.box2{
width: 300px;
height: 1000px;
/* background-color: orange; */
background-image: url("./img/1.png");
background-repeat: no-repeat;
/*
background-attachment
背景图片是否跟随元素移动
可选值：
scroll 默认值，背景图片会跟随元素移动
fixed 背景图片固定在页面中，不会随元素移动
*/
background-attachment: fixed;
}
.box3{
border: 10px red double;
padding: 50px;
width: 500px;
height: 500px;
background: #bfa url(./img/2.jpg) center center/contain border-box content-box no-repeat ;
}
</style>
</head>
<body>
<!-- <div class="box1">
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum incidunt consequatur modi beatae voluptatem debitis ipsum nesciunt at quam impedit voluptas animi repellat nostrum minus, iusto aliquam sequi possimus.
</div>
</div> -->
<div class="box3"></div>
</body>
</html>
11、渐变-线性
<!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-color: #bfa; */
/*
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过度的效果
！！！渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条直线发生变化
linnear-gradient()
linear-gradient(red,yellow)红色开头，黄色结尾，中间是过渡区域
可以指定渐变的方向
to left
to right
to bottom
to top 这些属性值可以组合
默认是向下
deg表示度数 0度是向上
turn表示圈数
-渐变可以同时指定多个颜色，多个颜色默认情况平均分配
也可以手动指定渐变的分布情况
repeating-linear-gradient()可以平铺的线性渐变
*/
/* background-image: linear-gradient(to right, red,yellow,#bfa,orange); */
/* background-image: linear-gradient(red 50px,yellow 100px,green 150px,orange 200px); */
background-image: repeating-linear-gradient(red ,yellow 50px);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
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>
.box1{
width: 300px;
height: 500px;
/*
radial-gradient()径向渐变（放射性的效果）
默认情况下径向渐变的形状根据元素的形状来计算的
正方形：圆形
长方形：椭圆形
我们也可以手动指定径向渐变的大小 100px 100px
circle
ellipse
也可以指定渐变的位置
top left right bottom center
0 0
语法：
radial-gradient(大小 at 位置,颜色 位置,颜色 位置)
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top left right bottom center
*/
/* background-image: radial-gradient(100px 200px,red,yellow); */
background-image: radial-gradient(circle at 0 0,red,greenyellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
八、HTML--->补充
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>
<!--
在现实生活中，我们经常需要使用表格来表示一些格式化的数据
课程表、人名单、成绩单。。
同样在网页我们也需要使用表格，我们通过table标签来参加一个表格
-->
<table border="1" width="50%" align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!--
rowspan纵向的合并单元格
-->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<!-- <td>D3</td> -->
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">C4</td>
<!-- <td>D4</td> -->
</tr>
</table>
</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>
<table border="1" width="50%" align="center">
<!--
可以将一个表格分为三部分
头部thead
主体tbody
底部tfoot
三个位置顺序不定
th表示头部的单元格
-->
<thead>
<tr>
<th>日期</td>
<th>收入</td>
<th>支出</td>
<th>合计</td>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>1000</td>
</tr>
</tfoot>
</table>
</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>
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing:指定边框之间的距离 ; */
/* border-spacing: 0; */
/* border-collapse: collapse; 设置边框的合并*/
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 50px;
/*
默认情况下元素是垂直居中的，可以通过vertical-align属性设置
*/
vertical-align: middle;
text-align: center;
}
/*
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
tr不是table的子元素
*/
tbody > tr:nth-child(odd){
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>500</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>唐僧</td>
<td>男</td>
<td>20</td>
<td>东土大唐</td>
</tr>
<tr>
<td>3</td>
<td>猪八戒</td>
<td>男</td>
<td>300</td>
<td>高老庄</td>
</tr>
<tr>
<td>4</td>
<td>沙僧</td>
<td>男</td>
<td>400</td>
<td>流沙河</td>
</tr>
</table>
</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>
</head>
<body>
<!--
表单
-在现实生活中用于提交数据
-网页中使用表单。网页中的表单用于将本地的数据交给远程的服务器
-使用form标签来创建一个表单
-->
<!--
form的属性
action 表单要提交的服务器的地址
-->
<form action="target.html" method="">
<!--
文本框text
注意：数据要提交给服务器中，必须要为元素指定一个name属性
-->
账号:<input type="text" name="userno">
<br><br>
密码:<input type="password" name="password">
<br><br>
<!--
单选按钮radio,name属性值要一样才是一组的
像这种选择框，必须指定一个value属性，value属性值才会被服务器接收到
checked可以将单选按钮设置为默认选中
-->
性别:
男<input type="radio" value="man" name="sex" checked>
女<input type="radio" value="woman" name="sex">
<br><br>
<!-- 多选框checkbox -->
技能:
Java<input type="checkbox" name="skills" value="java" checked>
C语言<input type="checkbox" name="skills" value="c">
Python<input type="checkbox" name="skills" value="python">
<br><br>
<!--
下拉列表select标签
-->
期望工资:
<select name="monkey">
<option value="5k">5000</option>
<option value="1w" selected>10000</option>
<option value="1.5w">15000</option>
</select>
<br><br>
<!--
提交按钮submit
-->
<input type="submit" value="注册">
</form>
</body>
</html>
5、表单2.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>
</head>
<body>
<form action="target.html">
<!--
placeholder设置文本框提示信息
-->
<input type="text" name="username" placeholder="请填写用户名">
<br><br>
<!-- 普通按钮 -->
<input type="button" value="按钮">
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<br><br>
<!-- 双标签里面还可以放其他标签，扩展性高 -->
<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br><br>
<!-- <input type="color">
<br><br> -->
<!-- 邮箱<input type="email"> -->
<!--
autocomplete="off" 关闭自动补全
readonly将表单项设置为只读,数据会提交
disabled将表单项设置为禁用，数据不会提交
autofocus设置表单项自动获取焦点
-->
<input type="text" name="username" autocomplete="off" value="xiaolin" readonly><br><br>
<input type="text" name="b" value="bbb" disabled><br><br>
<input type="text" name="c" autofocus><br><br>
</form>
</body>
</html>
九、小米官网项目
1、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>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="../layout/css/reset.css">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="./fa/css/all.css">
<!-- 引入当前页面的css样式表 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 设置网站图标（标题栏和收藏栏） -->
<link rel="icon" href="./favicon.ico">
</head>
<body>
<!-- 顶部导航条 -->
<!-- 顶部导航条外层容器 -->
<div class="topbar-wrapper" id="top">
<!-- 内部容器 -->
<div class="topbar w clearfix">
<!-- 左侧导航条 -->
<ul class="service">
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">loT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证照</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li class="app-wrapper">
<a class="app" href="javascript:;">
下载app
<!-- 添加一个弹出层 -->
<div class="qrcode">
<img src="./img/download.png" alt="">
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!-- 购物车 -->
<ul class="shop-cart">
<li>
<a class="cart" href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
<!-- 添加一个弹出层 -->
<div class="cart-msg">
<span>购物车中还没有商品,赶快选购吧！</span>
</div>
</a>
</li>
</ul>
<!-- 用户信息 -->
<ul class="user-info">
<li><a href="javascript:;">登录</a></li>
<li class="line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
<!-- 创建一个头部的外部容器 -->
<div class="header-wrapper">
<div class="header w clearfix">
<!-- 创建一个logo -->
<h1 class="logo" title="小米">
小米官网
<a class="home" href="/"></a>
<a class="mi" href=""></a>
</h1>
<!-- 创建中间导航条的容器 -->
<div class="nav-wrapper">
<!-- 创建导航条 -->
<ul class="nav clearfix">
<li class="all-goods-wrapper">
<a class="all-goods" href="#">全部商品分类</a>
<!-- 创建一个左侧导航菜单 -->
<ul class="left-menu">
<li>
<a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">电视盒子<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">家电 插线板<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">智能 路由器<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">电源 配件<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">健康 儿童<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a>
</li>
<li>
<a href="#">生活 箱包<i class="fas fa-angle-right"></i></a>
</li>
</ul>
</li>
<li class="show-goods"><a href="#">小米手机</a></li>
<li class="show-goods"><a href="#">Redmi 红米</a></li>
<li class="show-goods"><a href="#">电视</a></li>
<li class="show-goods"><a href="#">笔记本</a></li>
<li class="show-goods"><a href="#">家电</a></li>
<li class="show-goods"><a href="#">路由器</a></li>
<li class="show-goods"><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<!-- 创建弹出层 -->
<div class="goods-info">
</div>
</ul>
</div>
<!-- 创建一个搜索款容器 -->
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-inp" type="text">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
</div>
<!-- 创建banner的容器 -->
<div class="banner-wrapper">
<div class="banner w">
<ul class="img-list">
<li>
<a href="#">
<img src="./img/banner1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner5.jpg" alt="">
</a>
</li>
</ul>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<div class="prev-next">
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
</div>
<!-- 设置固定定位工具条 -->
<div class="back-top">
<a href="#top">点击回到顶部</a>
</div>
<!-- 创建广告容器 -->
<div class="ad w">
<ul class="shortcut">
<li>
<a href="#">
<i class="fas fa-clock"></i>
小米秒杀
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
企业团购
</a>
</li>
<li>
<a href="#">
<i class="fas fa-frog"></i>
F码通道
</a>
</li>
<li>
<a href="#">
<i class="fas fa-keyboard"></i>
米粉卡
</a>
</li>
<li>
<a href="#">
<i class="fas fa-robot"></i>
以旧换新
</a>
</li>
<li>
<a href="#">
<i class="fas fa-sim-card"></i>
话费充值
</a>
</li>
</ul>
<ul class="ad-img">
<li>
<a href="#">
<img src="./img/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/3.jpg" alt="">
</a>
</li>
</ul>
</div>
</body>
</html>
2、base.css
/* 公共样式 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
/* 去除a的下划线 */
a{
text-decoration: none;
color: #333;
}
body{
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
/* 防止body太小溢出 */
min-width: 1226px;
}
/* 设置一个类，用来表示中间容器的宽度 */
.w{
/* 固定容器的宽度 */
width: 1226px;
/* 设置容器居中 */
margin: 0 auto;
}
3、index.css
/* 主页index.html的样式表 */
/* 顶部导航条的容器 */
.topbar-wrapper{
/* 设置全屏宽度 */
width: 100%;
/* 设置高度和行高 */
height: 40px;
line-height: 40px;
/* 设置背景颜色 */
background-color: #333;
}
/* 设置超链接的字体大小和颜色 */
.topbar a{
font-size: 12px;
color: #b0b0b0;
display: block;
}
/* 设置超链接移入效果 */
.topbar a:hover{
color: white;
}
/* 设置中间分割线样式 */
.topbar .line{
font-size: 12px;
color: #424242;
margin: 0 8px;
}
/* 设置左侧导航条左浮动 */
.service,.topbar li{
float: left;
}
.app{
position: relative;
}
/* 设置app下的小三角 */
/* .app-wrapper:hover>.app::after{ */
.app::after{
content: '';
display: none;
/* 设置绝对定位 */
position: absolute;
bottom:0;
left: 0;
right: 0;
margin: auto;
/* display: block; */
width: 0;
height: 0;
/* 设置四个方向的边框 */
border: 8px solid transparent;
/* 去除上边框 */
border-top: none;
/* 单独设置下边框的颜色 */
border-bottom-color: #fff;
}
/* .app-wrapper:hover>.app .qrcode{
display: block;
} */
.app:hover .qrcode,
.app:hover::after{
display: block;
height: 148px;
}
/* 设置下载app的下拉框 */
.app .qrcode{
/* display: none; */
position: absolute;
/* left: 22px; */
left: -40px;
/* margin-left: -62px; */
width: 124px;
/* height: 148px; */
height: 0;
overflow: hidden;
line-height: 1;
text-align: center;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
z-index: 999;
/* transition: ;用于为样式设置过渡效果 */
transition: height 0.3s;
}
/* 设置二维码图片 */
.app .qrcode img{
width: 90px;
margin: 17px;
margin-bottom: 10px;
}
/* 设置二维码文字 */
.app .qrcode span{
font-size: 14px;
color: #000;
}
/* 设置右侧导航栏右浮动 */
.shop-cart,.user-info{
float: right;
}
/* 设置购物车样式 */
.shop-cart{
margin-left: 26px;
}
/* 设置购物车的样式 */
.shop-cart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.shop-cart:hover a{
background-color: #fff;
color: #ff6700;
}
.shop-cart i{
margin-right: 2px;
}
.cart{
position: relative;
}
.shop-cart:hover .cart-msg{
display: block;
color:#b0b0b0;
}
.cart-msg{
display: none;
position: absolute;
left: -180px;
width: 300px;
height: 100px;
line-height: 1;
/* text-align: center; */
background-color: #fff;
/* box-shadow: 0 0 10px rgba(0, 0, 0, .3); */
border: 1px solid rgba(0, 0, 0, .1);
border-top: none;
z-index: 9999;
}
.cart-msg span{
display: block;
margin-top: 43px;
font-size: 14px;
}
.header-wrapper{
position: relative;
}
/* 设置中间的header */
.header{
height: 100px;
/* background-color: #bfa; */
}
/* 设置logo的h1 */
.header .logo{
float: left;
margin-top: 22px;
width: 55px;
height: 55px;
position: relative;
overflow: hidden;
/* 隐藏logo中的字 */
text-indent: -9999px;
}
/* 统一设置logo的超链接 */
.header .logo a{
/* display: block; */
position: absolute;
left: 0;
width: 55px;
height: 55px;
/* background-image: url("../img/mi-logo.png"); */
background-image: url("../img/logo-mi2.png");
background-size: 55px 55px;
background-position: center;
transition: left 0.3s;
}
/* 设置home图标 */
.header .logo .home{
background-color: #ff6700;
background-image: url("../img/mi-home.png");
left: -55px;
}
/* 设置鼠标移入后改变图标的效果 */
.header .logo:hover .mi{
left: 55px;
}
.header .logo:hover .home{
left: 0;
}
/* 设置中间的导航条 */
.header .nav-wrapper{
float: left;
margin-left: 7px;
width: 850px;
}
/* 设置导航条 */
.header .nav{
/* width: 792px; */
/* background-color: #bfa; */
height: 100px;
line-height: 100px;
/* margin-left: 58px; */
padding-left: 58px;
}
/* 设置导航条中的li */
.nav > li{
float: left;
}
.all-goods-wrapper{
position: relative;
/* background-color: red; */
}
/* 设置左侧导航条样式 */
.left-menu{
width: 234px;
height: 420px;
background-color: rgba(0,0,0,.6);
position: absolute;
z-index: 999;
left: -120px;
line-height: 1;
padding: 20px 0;
}
ul .left-menu li a{
height: 42px;
display: block;
line-height: 42px;
color: white;
margin-right: 0;
padding: 0 30px;
font-size: 14px;
}
ul .left-menu li a:hover{
color: white;
background-color: #ff6700;
}
.left-menu a i{
float: right;
line-height: 42px;
}
.nav-wrapper li a{
display: block;
font-size: 16px;
margin-right: 20px;
}
.nav-wrapper li a:hover{
color: #ff6700;
}
/* 隐藏全部商品 */
.all-goods{
visibility: hidden;
}
/* */
.nav .goods-info{
height: 0px;
overflow: hidden;
transition: height 0.5s;
/* height: 228px; */
width: 100%;
background-color: #fff;
/* border-top: 1px solid rgb(224, 224, 224); */
position: absolute;
top:100px;
left: 0px;
z-index: 9999;
/* box-shadow: 0 5px 3px rgba(0, 0, 0, .2); */
}
/* */
/* .nav li:not(:first-of-type):not(:last-of-type):not(:nth-child(9)):hover ~ .goods-info, */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover{
height: 228px;
border-top: 1px solid rgb(224, 224, 224);
box-shadow: 0 5px 3px rgba(0, 0, 0, .2);
}
/* 设置搜索框容器 */
.search-wrapper{
width: 296px;
height: 50px;
float: right;
background-color: #bfa;
margin-top: 25px;
}
.search-wrapper .search-inp{
float: left;
height: 50px;
padding: 0;
border: none;
width: 244px;
padding: 0 10px;
font-size: 15px;
box-sizing: border-box;
border: 1px solid rgb(224, 224, 224);
outline: none;
}
/* 设置input获取焦点后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button{
/* outline: 1px solid #ff6700; */
border-color: #ff6700;
}
.search-wrapper .search-btn{
height: 50px;
width: 52px;
float: left;
padding: 0;
border: none;
background-color: #fff;
color: #616161;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
border-left: none;
}
.search-wrapper .search-btn:hover{
background-color: #ff6700;
color: white;
border: none;
}
/* 设置banner */
.banner{
position: relative;
height: 460px;
}
.banner .img-list li{
position: absolute;
}
.banner img{
width: 100%;
vertical-align: top;
}
/* 设置五个导航点 */
.pointer{
position: absolute;
bottom: 22px;
right: 35px;
}
.pointer a{
float: left;
width: 6px;
height: 6px;
border: 2px rgba(255, 255, 255, .4) solid;
border-radius: 50%;
background-color: rgba(0, 0, 0, .4);
margin-left: 6px;
}
.pointer a:hover,
.pointer a.active{
border-color: rgba(0,0,0,.4);
background-color: rgba(255, 255, 255, .4);
}
/* 设置两个箭头 */
.prev-next a{
width: 41px;
height: 69px;
/* background-color: red; */
position:absolute;
top: 0;
bottom: 0;
margin: auto 0;
background-image: url("../img/icon-slides.png");
}
.prev-next .prev{
left: 234px;
background-position: -84px 0;
}
.prev-next .prev:hover{
background-position: 0 0;
}
.prev-next .next{
right: 0;
background-position: -125px 0;
}
.prev-next .next:hover{
background-position: -42px 0;
}
/* 设置回到顶部的元素 */
.back-top{
width: 26px;
height: 160px;
background-color: orange;
/* 开启固定定位 */
position: fixed;
bottom: 60px;
right: 50%;
text-align: center;
margin-right: -639px;
padding-top: 40px;
/*
布局的等式
left + margin-left + width + margin-right + right=视口宽度
auto + 0 + 26 + 0 + 60 = 视口宽度
auto + 0 + 26 +0 + 50% = 视口宽度
*/
}
/* 设置底部广告栏 */
body .ad{
height: 170px;
margin-top: 14px;
/* background-color: red; */
}
.ad .shortcut,
.ad .ad-img,
.ad li{
float: left;
}
/* 设置左侧快捷方式 */
.ad .shortcut{
width: 228px;
height: 168px;
background-color: #5f5750;
margin-right: 14px;
padding-top: 2px;
padding-left: 6px;
}
.ad .shortcut li{
position: relative;
}
/* 设置上边框 */
.ad .shortcut li::before{
content: '';
position: absolute;
width: 64px;
height: 1px;
background-color: #665e57;
left: 0;
right: 0;
top: 0;
margin: 0 auto;
}
/* 设置左边框 */
.ad .shortcut li::before{
content: '';
position: absolute;
width: 1px;
height: 70px;
background-color: #665e57;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
}
/* 设置快捷方式中的超链接 */
.ad .shortcut a{
display: block;
color: #cfccca;
width: 76px;
height: 84px;
text-align: center;
font-size: 12px;
overflow: hidden;
}
.ad .shortcut a:hover{
color: #fff;
}
/* 设置ad的图标字体 */
.ad .shortcut i{
display: block;
margin-top: 20px;
font-size: 20px;
margin-bottom: 5px;
}
/* 设置右侧图片 */
.ad .ad-img li{
width: 316px;
margin-right: 15px;
}
.ad .ad-img li:last-child{
margin: 0;
}
.ad .ad-img img{
width: 100%;
vertical-align: top;
}
4、reset.css
/* v2.0 | 20110126
http://meyerweb.com/eric/tools/css/reset/
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;
}
十、animation（动画）
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>
*{
margin: 0;
padding: 0;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box2{
margin-left: 700px;
background-color: #bfa;
/*
过渡transition
通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验
*/
/* transition: all 2s; */
/*
transition-property: ; 指定要执行过渡的属性
多个属性用逗号,隔开，全部属性用all
大部分属性都支持过渡效果
*/
/* transition-property: all; */
/*
transition-duration:指定过渡效果要持续的时间
时间单位s和ms
也可以分别指定时间，用逗号隔开
*/
/* transition-duration: 5s; */
/*
transition-timing-function: ;过渡的时序函数
指定动画过渡执行的方式
可选值：
ease默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier()来指定时序函数
https://cubic-bezier.com
steps()分布执行过渡效果
可以设置第二个值
end默认值，在时间段结束时执行过渡
start在时间段开始时执行过渡
*/
/* transition-timing-function: cubic-bezier(.32,1.64,.43,-1.23); */
/* transition-timing-function: steps(5,start); */
/* transition-delay: ;过渡效果的延迟，等待一段时间后执行过渡 */
/* transition-delay: 2s; */
/* tansition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间 */
transition: margin-left 2s 2s;
}
.box1:hover div{
/* width: 200px;
height: 200px;
background-color: blue; */
margin-left: 0;
}
.box3{
margin-left: 700px;
background-color: orange;
/* transition-property:all ; */
/* transition-duration: 5s; */
/* transition-timing-function: ease; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
<div class="box2">
</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>
*{
margin: 0;
padding: 0;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 0;
}
.box2{
background-color: #bfa;
/* transition: 2s; */
/* 设置box2的动画 */
/* animation-name 要对当前元素生效关键帧的名字 */
animation-name: test;
/* animation-duration动画的执行时间 */
animation-duration: 2s;
/* 动画延迟 */
animation-delay: 2s;
/* 函数 */
animation-timing-function: ease-in-out;
/*
animation-iteration-count:动画执行的次数 ;
可选值：
整数
infinite 无限执行
*/
animation-iteration-count:3 ;
/*
animation-direction: ;
指定动画运行的方向
可选值
默认值normal 从from到to运行，每次都这样
reverse从to到from运行，每次都是这样
alternate 从from到to运行，重复执行动画时折返
alternate-reverse从to到from运行，重复执行动画时折返
*/
animation-direction: normal;
/*
animation-play-state: 设置动画的执行状态;
可选值：
running默认值，动画执行
paused动画暂停
*/
animation-play-state: running;
/*
animation-fill-mode:动画的填充模式 ;
可选值：
none默认值 动画执行完回到元素原来的位置
forwards动画执行完停到结束的位置
backwards动画延迟等待时，元素就会处于开始位置
both结合了forwards和backwards
*/
animation-fill-mode: backwards;
/* animation简写属性 */
animation: test 2s 3 1s alternate;
}
.box1:hover div{
animation-play-state: paused;
}
/* .box1:hover div{
margin-left: 700px;
} */
/*
动画和过渡类似，都是可以实现一些动态的效果
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须先设置一个关键帧，关键帧设置了动画执行的每一个步骤
*/
@keyframes test {
/* to表示动画开始的位置 也可以使用百分率表示%*/
from{
margin-left: 0;
background-color: #fff;
}
/* to表示动画结束的位置 */
to{
margin-left: 700px;
background-color: orange;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</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>
.outer{
height: 500px;
border-bottom: 10px black solid;
margin: 50px auto;
overflow: hidden;
}
.outer div{
float: left;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #bfa;
animation: ball 0.5s forwards linear infinite alternate;
}
.outer .box1{
background-color: orange;
animation-delay: 0.1s;
}
.outer .box2{
background-color: bisque;
animation-delay: 0.2s;
}
.outer .box3{
background-color: red;
animation-delay: 0.3s;
}
.outer .box4{
background-color: green;
animation-delay: 0.4s;
}
.outer .box5{
background-color: blue;
animation-delay: 0.5s;
}
.outer .box6{
background-color: purple;
animation-delay: 0.6s;
}
.outer .box7{
background-color: pink;
animation-delay: 0.7s;
}
.outer .box8{
background-color: yellow;
animation-delay: 0.8s;
}
/* 创建小球下落的动画 */
@keyframes ball {
from{
margin-top: 0;
}
to{
margin-top: 400px;
}
/* 20%,60%,to{
margin-top: 400px;
animation-timing-function: ease-out;
}
40%{
margin-top: 100px;
}
80%{
margin-top: 200px;
} */
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</body>
</html>
4、变形----X、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>
body{
background-color: rgb(238, 235, 229);
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0px auto;
margin-top: 200px;
/*
变形就是通过css来改变元素的形状或位置
变形不会影响页面的布局
transform用来设置元素的变形效果
-平移：
translateX()沿着x轴方向平移
translateY()沿着Y轴方向平移
translateZ()沿着Z轴方向平移
平移元素的百分比是相对于自身计算的
*/
/* transform: translateY(-100px); */
transform: translateX(100%);
}
/* .box2{
width: 200px;
height: 200px;
background-color: orange;
margin: 0px auto;
} */
.box3{
/* width: 100px;
height: 100px; */
background-color: orange;
position: absolute;
/*
这种方式只适用于元素的大小确定的
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto; */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box4,.box5{
width: 220px;
height: 300px;
background-color: white;
float: left;
margin: 0 10px;
transition: all .3s;
}
.box4:hover{
transform: translateY(-4px);
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- <div class="box3">
aaa
</div> -->
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
5、Z轴平移
<!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{
/* 设置当前网页的视距为800px 人眼距离网页的距离 */
perspective: 800px;
}
.box1{
color: red;
width: 474px;
height: 355px;
/* background-color: #bfa; */
background-image: url(./OIP-C.jpg);
background-size: 100%;
margin: 200px auto;
/*
z轴平移，调整元素在z轴的位置，正常情况下是调整元素和人眼之间的距离
距离越大，离人越近
z轴平移属性立体效果（近大远小），默认情况下网页是不支持透视的
如果需要看到效果，必须设置网页的视距
*/
transition:all 2s ;
}
.box1:hover{
transform: translateZ(780px);
}
</style>
</head>
<body>
<div class="box1">点我一下</div>
</body>
</html>
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>
body{
/* 设置当前网页的视距为800px 人眼距离网页的距离 */
perspective: 800px;
}
.box1{
color: red;
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
transition:all 2s ;
}
.box1:hover{
/*
通过旋转可以使元素沿着x，y或z旋转指定的角度
rotateX()
rotateY()
rotateZ()
deg
turn
*/
/* transform: rotateZ(360deg); */
/* transform: rotateX(360deg); */
/* transform: rotateY(360deg); */
/* transform: rotateY(180deg) translateZ(400px); */
/* transform:translateZ(400px) rotateY(180deg) ; */
transform: rotateY(180deg);
/* 设置是否显示元素的背面 */
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="box1">
<img src="./OIP-C.jpg" alt="">
</div>
</body>
</html>
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>
html{
perspective: 800px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
transition: 2s;
margin: 100px auto;
/* 变形原点 默认值center */
transform-origin: 0 0;
}
.box1:hover{
/*
对元素进行缩放的函数
scaleX()水平方向
scaleY()垂直方向
scale双方向缩放
*/
transform: scale(2);
}
.img-wrapper{
width: 200px;
height: 200px;
border: 1px solid red;
overflow: hidden;
}
img{
transition: 2s;
}
.img-wrapper:hover img{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="img-wrapper">
<img src="an.jpg" width="100%">
</div>
</body>
</html>
十一、less
1、less的简介
<!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>
html{
/* css原生也支持变量的设置 */
--color:orange;
--lenght:100px;
}
.box1{
/* calc()计算函数 */
width: calc(1000px/10);
height: var(--lenght);
background-color: var(--color);
}
.box2{
width: var(--lenght);
height: var(--lenght);
color: var(--color);
}
.box3{
width:var(--lenght);
height: var(--lenght);
border: 10px solid var(--color);
}
</style>
</head>
<body>
<!--
less是一门css的预处理语言
-less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
-在less中添加了许多新特性，像对变量的支持，对mixin的支持.....
-less的语法大致和css语法是一致的，但是less中增添了许多css的扩展
所以浏览器无法直接执行less代码，要执行必须要将less转换为css，再由浏览器执行
-->
<!-- .box$*3 -->
<div class="box1">aaaa</div>
<div class="box2">aaaa</div>
<div class="box3">aaaa</div>
</body>
</html>
2、less的语法
//less中的单行注释，注释内容不会被解析到css中
/*
css中的注释，内容会被解析到css文件中
*/
.box1{
background-color: #bfa;
.box2{
background-color: orange;
.box4{
background-color: red;
}
}
.box3{
background-color: green;
}
}
// 变量，在变量可以存储一个任意的值
//并且我们可以在需要时，任意的修改变量中的值
//变量的语法，@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
// 使用变量时，如果是直接使用则以 @变量名 的形式使用
width: @a;
color: @b;
}
// 作为类名时，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
width: @a;
background-image: url("@{c}/1.jpg");
}
@d:300px;
@d:400px;
div{
// 变量发生重名时，晚赋值的会覆盖前面的
@d:1000px;
width: @d;
height: @e;
}
// 可以在变量声明前就使用变量
@e:335px;
div{
width: 300px;
height: $width;
}
.box1{
.box2{
color: red;
}
>.box3{
color: red;
&:hover{
color: blue;
}
}
// 为box1设置一个hover
// &表示外层的父元素
&:hover{
color: orange;
}
div &{
width: 100px;
}
}
.p1{
width: 100px;
height: 100px;
}
// .p2{
// width: 100px;
// height: 100px;
// color: orange;
// }
// :extend()对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
color: orange;
}
.p3{
//直接对指定的样式进行引用，这里相对于将p1的样式在这里进行了复制
.p1();
}
//使用类选择器时可以在选择器后边加一个括号，这时，我们实际上就创建了一个mixins
// 自己不存在，但是别人可以引用
.p4(){
width: 100px;
height: 100px;
background-color: #bfa;
}
.p5{
.p4;
}
// 混合函数,在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
//调用混合函数，按顺序传递参数
// .test(200px,300px,#bfa);
//也可以直接指定对应值
// .test(@bg-color:red,@w:300px,@h:200px);
// 指定了默认值，参数数量可以小于总参数数量
.test(300px);
}
span{
// 取颜色的平均值
color: average(red,yellow);
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
background-color: #bfa;
}
body:hover{
// darken加深颜色
background-color: darken(#bfa,20%);
}
3、less的补充
// 可以通过import直接导入其他less文件到此文件
@import "syntax2.less";
.box1{
//在less中所有的数值可以直接进行运算
// + - * /
width: 100px * 10;
// 除法需要括号
height: (100px/2);
background-color: #bfa;
}
在设置的扩展中，修改json文件，添加从插件处复制的一段代码，全部设置为true
方便浏览器查找样式位置
十二、flex
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>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border:10px solid red;
display: flex;
/*
flex-direction指定容器中弹性元素的排列方式
可选值：
row默认值，弹性元素在容器中水平排列（左向右）
主轴：自左向右
row-reverse，弹性元素在容器中水平排列（右向左）
主轴：自右向左
column 弹性元纵向排列（自上向下）
column-reverse 弹性元素方向纵向排列（自下向上）
主轴：
弹性元素排列的方向称为主轴
侧轴：
与主轴垂直的方向称为侧轴
*/
flex-direction: row;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
/* float: left;会高度塌陷 */
line-height: 100px;
/*
弹性元素的属性：
flex-grow:指定弹性元的伸展系数
-当父元素有多余的空间时，子元素如何伸展
-父元素的剩余空间，会按照给定的系数换算的比例进行分配
flex-shrink:指定弹性元素的收缩系数 ;
-当父元素的空间不足以容纳所有子元素时，如何对子元素进行收缩
-0不收缩
*/
/* flex-grow: 0; */
flex-shrink: 0;
}
li:nth-child(1){
/* flex-grow: 1; */
flex-shrink:1;
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
flex-shrink: 2;
}
li:nth-child(3){
background-color: orange;
/* flex-grow: 3; */
flex-shrink: 3;
}
</style>
</head>
<body>
<!--
flex弹性盒、伸缩盒
-是css中的又一种布局手段，他主要用来代替浮动来完成页面的布局
兼容选浮动，未来选flex
-flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
-弹性容器
-要使用弹性盒，必须将一个元素设置为一个弹性容器
-我们通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
-弹性元素
-弹性容器的直接子元素是弹性元素（弹性项）
-注意是直接！！！
-一个元素可以同时是弹性容器和弹性元素
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</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>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border:10px solid red;
/* 设置ul为弹性容器 */
display: flex;
/* flex-direction: column; */
/*
flex-wrap: ;
设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，不自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse元素沿着辅轴反方向换行
*/
/* flex-wrap: nowrap; */
/* flex-flow: wrap 和direction的简写属性 */
/* flex-flow: row wrap; */
/*
justify-content
如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值;
flex-start:元素沿着主轴的起边排列
flex-end:元素沿着主轴的终边排列
center:元素居中排列
space-around 空白分布到元素两侧
space-evenly 空白分布到元素的单侧
space-between 空白均匀分布到元素间
*/
/* justify-content: flex-start; */
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</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>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 800px;
border:10px solid red;
/* 设置ul为弹性容器 */
display: flex;
/* flex-direction: column; */
/*
flex-wrap: ;
设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，不自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse元素沿着辅轴反方向换行
*/
/* flex-wrap: nowrap; */
/* flex-flow: wrap 和direction的简写属性 */
flex-flow: row wrap;
/*
justify-content
如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值;
flex-start:元素沿着主轴的起边排列
flex-end:元素沿着主轴的终边排列
center:元素居中排列
space-around 空白分布到元素两侧
space-evenly 空白分布到元素的单侧
space-between 空白均匀分布到元素间
*/
/* justify-content: flex-start; */
/*
align-items: 元素在辅轴上如何对齐;
元素间的操作
可选值：
stretch 默认值。将元素的高度设置为相同的值（行与行）
flex-start 元素不会拉伸，沿着辅轴的起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐
*/
/* align-items: stretch; */
/*
align-content: 辅轴空白空间的分布;
可选值与justify-content一样
*/
/* align-content: center; */
}
li{
width: 200px;
/* height: 100px; */
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
li:nth-child(1){
/* align-self: ;用来覆盖当前弹性元素上的align-items */
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
li:nth-child(4){
background-color: green;
}
li:nth-child(5){
background-color: black;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2
<div>2</div>
</li>
<li>3
<div>3</div>
<div>3</div>
</li>
<li>1</li>
<li>2
<div>2</div>
</li>
</ul>
</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;
list-style: none;
}
ul{
width: 800px;
border:10px solid red;
/* 设置ul为弹性容器 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex-grow
弹性的增长系数
*/
/* flex-grow: 1; */
/*
弹性系数缩减系数
-缩减系数的计算方式比较复杂
-缩减多少是根据 缩减系数和元素大小来计算的
*/
/* flex-shrink: 1; */
/*
元素的基础长度
flex-basic 指定的是元素在主轴上的基础长度
如果主轴是横向的，则该值确定的就是元素的宽度
如果主轴是纵向的，则该值确定的就是元素的高度
-默认值是auto，表示参考元素自身的高度或宽度
-如果传递了一个具体的数值，则以该值为准
*/
/* flex-basis: auto; */
/*
flex可以设置弹性元素所有的三个样式
flex 增长 缩减 基础（按照顺序）
initial: 0 1 auto
auto: 1 1 auto
none: 0 0 auto 弹性元素没有弹性
*/
flex: initial;
}
li:nth-child(1){
/* order 指定弹性元素的排列顺序 */
order: 2;
}
li:nth-child(2){
background-color: pink;
order: 3;
}
li:nth-child(3){
background-color: orange;
order: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</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>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
像素：
-屏幕是由一个一个发光的小点构成的，这一个个的小点就是像素
-分辨率。1920x1080 说的就是屏幕中的像素数量
-在前端开发中像素要分成两种情况讨论，css像素和物理像素
-物理像素，上述所说的小点就属于物理像素
-css像素，编写网页时，我们所用像素都是css像素
-浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
-一个css像素最终由几个物理像素显示，由浏览器决定
默认情况下在pc端，一个css像素，一个物理像素
视口（viewport）
-视口就是屏幕中用来显示网页的区域
-我们可以通过查看视口的大小，来计算css像素和物理像素的比值
-默认情况下
视口宽度 1920px（css像素）
1920px（物理像素）
-此时，css像素和物理像素的比是1:1
放大两倍的情况：
视口宽度960px（css像素0
1920px(物理像素)
-此时，cs像素和物理像素的比是1:2
我们可以通过改变视口的大小，来改变css像素和物理像素的比值
-->
<div class="box1"></div>
</body>
</html>
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>
.box1{
width: 900px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
在不同的屏幕。单位像素的大小是不同的，像素越小越清晰
24寸 1920x1080
iphone6 4.7寸 750x1334
智能手机的像素点 远远小于计算机的像素点
问题：一个宽度为900px的网页在iPhone6中如何显示
默认情况下，移动端的网页都会将视口设置为980像素(css像素)
以确保pc端的网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动缩放以显示完整的网页
https://material.io/resources/devices/
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往不会有一个好的体验
为了解决这个问题，大部分网站都会单独为移动端设计一个网页
-->
<div class="box1"></div>
</body>
</html>
7、移动端的页面.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"> -->
<!-- 设置视口大小 device-width表示设置的宽度（完美视口）-->
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--
移动端默认的视口是980px（css像素）
默认情况下，移动端的像素比就是 980/移动端的宽度
如果直接在网页中编写移动端代码，这样在980视口下，像素比是非常不好的
导致网页中的内容非常的小
编写移动端页面时，必须要确保有一个比较合理的像素比
1css像素 对应两个物理像素
1css像素 对应3个物理像素
我们可以通过meta标签来设置视口大小
-每一款移动设备设计时，都会有一个最佳的像素比，
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小，我们称其为完美视口
将网页的视口设置为完美视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
结论：以后写移动端的页面，就把上边这个玩意先写上
-->
<div class="box1"></div>
</body>
</html>
8、视口
<!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;
}
.box1{
width: 100vw;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
不同的设备完美的视口大小是不一样的
iphone 6 --375
iphone6p --414
由于不同设置视口和像素比不同，所以同样375像素在不同的设备下意义是不一样的
比如在iphone6中，375就是全屏，但到了plus中375就会缺一块
所以在移动端开发时，就不能在使用px来进行布局了
vw表示的是视口的宽度（viewport width）
100vw = 一个视口的宽度
-1vw = 百分之一视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度
750px X 1125px
设计图
750px
使用vm作为单位
100vw
创建一个48px x 35px大小的元素
100vw = 750px（设计图）
6.4vw = 48px
4.667vw =35px
-->
<div class="box1">
</div>
</body>
</html>
9、vw的适配方案
<!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{
/*
网页中字体的大小是12px，不能设置一个比12px像素还小的字体
如果我们设置了设置了一个小于12px的字体，则字体自动设置为12px
0.1333333vw = 1px
5.3333vw = 40px
*/
font-size: 5.3333vw;
}
.box1{
/*
em
- 1rem = 1 html的字体大小
1rem = 40px（设计图）
*/
width: 1.2rem;
height: 0.875rem;
background-color: #bfa;
}
</style>
</head>
<body>
<!--
48px x 35px
-->
<div class="box1">
</div>
</body>
</html>
10、响应式布局
<!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>
/*
使用媒体查询
语法：@media 查询规则{}
媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
可以使用,连接多个媒体类型，这样他们之间就是一个或的关系
可以在媒体类型前添加一个only表示只有
only的使用主要是为了兼容一些老版本的浏览器
*/
/* @media print,screen {
body{
background-color: #bfa;
}
} */
@media only screen {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
<!--
响应式布局
-网页可以根据不同的设备或窗口大小呈现出不同的效果
-使用响应式布局，可以使一个网页使用于所有设备
-响应布局的关键就是媒体查询
-通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
-->
</body>
</html>
11、媒体查询
<!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：视口的宽度
height：视口的高度
要刚刚好=500px才会生效
min-width 视口的最小宽度（大于等于宽度时生效）
max-width 视口的最大宽度（小于等于宽度时生效）
*/
/* @media (min-width: 500px){
body{
background-color: #bfa;
}
} */
/*
样式的切换的分界点，我们称其为断点，也就是页面的样式会在这个点是发生变化
一般常用的断点
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px
*/
@media only screen and (min-width: 500px ) and (max-width:800px){
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
</body>
</html>
十三、grid布局--网格布局
1、开启方式
display:grid;
2、设置列数
//可以直接指定每列的宽度
grid-template-columns: 100px 100px 100px;
//也可以使用fr，按比例分配
grid-template-columns: 1fr 1fr 1fr;//这个代表平分成三列
3、设置列或行之间的间距
column-gap:24px;//设置列间距
row-gap:24px;//设置行间距
gap:24px;//统一为列和行设置间距
4、分配区域
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
header{
grid-area:header;
}
main{
grid-area:content;
}
aside{
grid-area:sidebar;
}
footer{
grid-area:footer;
}
5、对齐
//垂直方向,center,end
align-items:center;
//水平方向,center,end,space-between
justify-items:center;
//整个布局对于页面的对齐
//垂直方向center,end
align-content:center;
//水平方向,center,end,space-between
justify-
