HTML+CSS从入门到精通（一）
1.HTML+CSS概述
（1）课程介绍
①系统软件：Windows、Linux、MacOS
②应用软件：Office QQ
③游戏软件：王者荣耀、魔兽世界
④分类：服务器与客户端
⑤服务器开发语言：Java/PHP/C#/Python/Node.js（前端工程师）
⑥客户端：文字客户端（用命令来使用软件）、图形化界面（Windows/MacOS/Android/iOS C/S架构）、网页（B/S架构）
⑦网页的特点：无需安装，无需更新，跨平台（无论是iOS还是Android、MacOS、Windows都可以），网页中使用的语言：HTML、CSS、JavaScript。
（2）网页简史
①蒂姆·伯纳斯-李爵士，万维网的发明人。
②1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。
③浏览器与网页，浏览器就是工具，负责渲染网页。
④浏览器的种类：谷歌、IE、2345、火狐、猎豹、百度、搜狗，不同浏览器的渲染效果是不同的。
⑤1994页伯纳斯李在1994建立万维网联盟W3C，W3C制定网页开发的标准。使同一个网页在不同的浏览器中有相同的效果。所以我们需要遵循W3C的规范。
⑥结构HTML、表现CSS、行为JS
2.HTML
（1）HTML概述
①HTML Hypertext Markup Language 超文本标记语言。
②写一个简单的HTML文件，只有文本就可以，后缀.html即可用浏览器打开。
（2）第一个网页
<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8">
<meta name="referrer" content="never">
<title>HTML+CSS</title>
</head>
<body>
<!--创建一个外部的div,来作为大的容器-->
<!--标题6分钟-->
<h1>回乡偶书</h1>
<p>少小离家老大回,乡音无改鬓毛衰。</p>
<p>儿童相见不相识,笑问客从何处来。</p>
</body>
<style>
</style>
<script>
//
</script>
</html>
（3）安装Notepad++
https://notepad-plus.en.softonic.com/?ex=THD-324.2
（4）自动结束语注释
①注释在网页中看不到，只能在源码中看到。
②自结束标签一般以/结尾。
<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8">
<meta name="referrer" content="never">
<title>HTML+CSS</title>
</head>
<body>
<!--创建一个外部的div,来作为大的容器-->
<!--标题6分钟-->
<h1>回乡偶书</h1>
<p>少小离家老大回,乡音无改鬓毛衰。</p>
<p>儿童相见不相识,笑问客从何处来。</p>
<!--自结束标签-->
<img src="siteJsCssTool/1.jpg" />
<input type="text" value="这是一个自结束标签"/>
</body>
<style>
</style>
<script>
</script>
</html>
（5）标签中的属性
<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8">
<meta name="referrer" content="never">
<title>HTML+CSS</title>
</head>
<body>
<!--创建一个外部的div,来作为大的容器-->
<!--属性,在标签中设置,在开始标签或者自结束标签中设置属性color: red;-->
<!--属性应该根据文档的规定来编写,有些属性是有属性值,
单有的没有属性值,如果有则需要用引号引起来,单引双引号都可以。-->
<h1><span style="color: red;">第三个</span>网页</h1>
</body>
<style>
</style>
<script>
</script>
</html>
（6）文档声明
<!--这里就是表示HTML5-->
<!DOCTYPE html>
（7）关于进制
①十进制，满10进1。计数 0 1 2 3….
②二进制：满2进1。0 1…计算机底层的进制。内存可以想象为多个小格子组成的容器，每一个小格子可以存一个1或0，这一个小格子在内存中被称为1位（bit）。8bit=1byte（字节）。1024byte=1kb（千字节）。1024kb=1mb（兆字节）。
1024mb=1gb(吉字节)。1024gb=1tb(特字节)。1024tb=1pb。
③八进制、十六进制0 1 …. a b c d e f：
（8）字符编码
①HIT—>111010010110
111010010110—>HIT
所有的数据在计算机中存储时都是以二进制的形式存储的，文字也不例外，所以一段文字在存储到内存中时，都需要转换为二进制编码，当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。
②编码：将字符转换为二进制码的过程。（发电报+加密）
解码：将二进制码转为为字符的过程。（解电报）
字符集：就是编码与解码所采用的规则。（密码本）
③乱码问题：如果编码和解码采用的字符集不同就回出现乱码的问题。
④常见的字符集：ASCII、ISO89591、GB2312、GBK、UTF-8（万国码）
⑤通过meta标签类设置网页字符集，避免乱码问题。
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8">
（9）文档的使用
①离线文档已经下载存储百度网盘。
（10）VSCode的安装
下载地址：https://code.visualstudio.com/
①下载插件
②设置字体大小
（11）安装LiveServer插件
①作用是边写边出结果，只要保存即可
②也可以在设置里设置自动保存，每隔1S保存一次，则自动刷新
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--
1.安装VsCode
2.安装语言包/主题插件包
3.创建一个目录
4.创建HTML文件
-->
<h1>回乡偶书</h1>
</body>
</html>
（12）实体
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--
1.安装VsCode
2.安装语言包/主题插件包
3.创建一个目录
4.创建HTML文件
-->
<h1>回乡偶书</h1>
<!--
1.多个空格会被保存为一个？
2.那么如何写多个空格呢？
3.还有想写数据的表达式？
4.如果需要这些则需要"实体"来写
5.© 版本符号
-->
<span>©今天     天气怎么样</span>
<span>a<b>c</span>
</body>
</html>
（13）meta标签
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--meta标签用来设置网页的元数据-->
<!-- meta主要是设置页面中的元数据
1.charset指定网页的字符集
2.name指定的数据的名称
3.content 指定数据的内容
4.keywords 可以被网站搜索到,可以指定多个关键字
5.也可以用来对网页进行重定向
-->
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<!--keywords 可以被网站搜索到,可以指定多个关键字 -->
<meta name="keywords" content="HTML5,前端,CSS">
<!--description 网上搜索到京东下面的对应描述 -->
<meta name="description" content="这是一个非常不错的网站"/>
<!--
1.title浏览器的标题栏展示
2.作为百度搜索引擎搜到的超链接-->
<title>HTML+CSS</title>
</head>
<body>
<!--标签与元素指的是同一个内容。-->
<h1>回乡偶书</h1>
</body>
<style>
</style>
<script>
</script>
</html>
（14）语义化标签
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.网页中HTML专门负责网页的结构,所以我们应该关注它的结构
,而不是他的样式。
2.h1最重要,h6最次要,一般页面中只有一个h1。一般只用h1-h3
-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!--标题组-->
<hgroup>
<h1>回乡偶书</h1>
<h2>其二</h2>
</hgroup>
<!--
1.em标签,用来表示语音语调的加重
2.在页面中不会独占一行的元素,我们叫做inline element
3.<p></p>独占一行的叫做块元素
-->
<span>今天天气<em>真</em>不错</span>
<!--
1.strong表示强调
2.blockquote表示引用
3.q表示短引用
4.<br/>表示页面中的换行
-->
<span>今天必须要<strong>完成作业</strong></span><br/>
<span>
鲁迅说:
<blockquote>
这句话我没有说过。
</blockquote>
孔子曰:<q>学而时习之,不亦说乎</q>
<p>大家好:</p>
<p>欢迎各位领导的到来。</p>
</span>
</body>
<style>
</style>
<script>
</script>
</html>
（15）块与行内元素
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.块block element属于网页的布局
2.行内元素inline element主要用来包裹文字
3.会在块元素中放行内元素,不会在行内元素放块元素。
4.p元素中不能放任何的块元素。
5.我们浏览器在解析我们网页时,会自动对网页中不符合规范的
内容进行修改,比如HTML元素写在了根元素的外部,比如p元素
中防止了块元素==。
6.可以通过F12的Elements里查看纠正结果。
-->
</body>
<style>
</style>
<script>
</script>
</html>
（16）语义化标签
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.布局标签
2.main一个网页中只有一个
3.语义化标签使用也比较少
-->
<header>网页的头部</header>
<main>表示网页的主题部分</main>
<footer>表示网页的底部</footer>
<nav>表示网页中的导航</nav>
<aside>网页中的解释说明、侧边栏</aside>
<article>表示独立的文章</article>
<section>网页中的其他部分分区</section>
<div>没有语义,就是表示一个区块,可以代表上面的标签</div>
<span>行内元素,没有语言,一般用于在网页中选中文字</span>
</body>
<style>
</style>
<script>
</script>
</html>
（17）列表
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.列表
2.有序列表、无序列表、定义列表
3.li来表示列表项
4.列表之间可以互相嵌套
-->
<!--无序列表,用的多点-->
<ul>
<li>Java</li>
<li>JS</li>
<li>Python</li>
</ul>
<!--有序列表-->
<ol>
<li>Java</li>
<li>JS</li>
<li>Python</li>
</ol>
<!--定义列表,用的比较少-->
<dl>
<dt>Java</dt>
<dd>是一门开发语言</dd>
</dl>
</body>
<style>
</style>
<script>
</script>
</html>
（18）超链接
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.超链接:从一个页面跳转到其他页面,或者跳转到当前页面的指定位置
2.使用a标签,是行内元素,可以嵌套自身外的任何元素
-->
<a href="https://www.baidu.com">百度</a>
</body>
<style>
</style>
<script>
</script>
</html>
（19）相对路径
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.相对路径
2.当我们需要跳转到服务器内部的页面时,一般都会使用
相对路径,会使用./或者../开头,./可以省略不写。如果没写
与写了是一样的。
3../表示当前所在的目录,../表示当前所在目录的上一层目录,
而且开发工具会有相关的提示。
-->
<a href="https://www.baidu.com">百度</a>
</body>
<style>
</style>
<script src="../static/jsRepository/myJquery.js"></script>
<script src="./jsRepository/myJQuery-UI.js"></script>
<script>
</script>
</html>
（20）超链接别的用法
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.target属性,用来指定打开的位置
2._self 默认值,当前页面打开超链接
3._blank,在新页面中打开页面。
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<!--这样就可以跳转到id为bottom的元素位置-->
<br><a href="#bottom">去底部</a>
<div style="width: 600px;">
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
<br><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores excepturi facere hic, id incidunt ratione repellendus saepe voluptatibus. Atque dolor doloremque doloribus fuga id impedit inventore minus quae unde, veritatis.</span>
</div>
<!--可以用href属性设置为#,这样不会跳转,而是会回到页面顶部
id:唯一不重复的,每个标签都可以添加这个属性。页面中不能有
重复的id属性。
-->
<a href="#" id="bottom">回到顶部</a>
<!--此时点击这个超链接什么也不会发生-->
<a href="javascript:;" >不会响应</a>
</body>
<style>
</style>
<script src="../static/jsRepository/myJquery.js"></script>
<script src="./jsRepository/myJQuery-UI.js"></script>
<script>
</script>
</html>
（21）图片标签
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.图片标签:用于向当前页面中引入一个外部的图片
2.src用来指定路径
3.img属于一种替换元素,介于块与行内元素之间。
4.alt是对图片的描述,默认情况不会显示,有些浏览器会在图片
无法显示时展示。alt也是为了让谷歌、百度这些搜索到。
5.width指定宽度,height指定高度,单位是像素
6.一般是需要多大让美工做多大,也有大图缩小的情况
-->
<img src="./siteJsCssTool/1.jpg" alt="美女" />
</body>
<style>
</style>
<script src="../static/jsRepository/myJquery.js"></script>
<script src="./jsRepository/myJQuery-UI.js"></script>
<script>
</script>
</html>
（22）图片的格式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.图片格式
2.jpeg(jpg)支持颜色丰富,支持透明效果,不支持动图
3.gif支持颜色少,支持简单透明,支持动图
4.png支持颜色丰富,支持透明效果,不支持动图
5.效果一样用小的,效果不同用好的
6.webp谷歌推出的专门表示图片的一种格式,大集成者,缺点就是
兼容性不好。
7.base64可以将图片进行base64编码,这样可以将图片转换为字符
,然后通过字符的形式来引入,一般都是需要和网页一起加载的图
片才会使用到。重要的图片可以这么写
-->
<img src="./siteJsCssTool/1.jpg" alt="美女" />
<!--网页上转好粘贴过来就可以-->
<img src="data:image/jpeg;base64,/0J/4Q....."/>
</body>
<style>
</style>
<script src="../static/jsRepository/myJquery.js"></script>
<script src="./jsRepository/myJQuery-UI.js"></script>
<script>
</script>
</html>
（23）内联框架
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.内联框架,和图片很像,用于向当前页面中引入一个其他页面
2.现在使用的比较少了
-->
<iframe src="https:www.qq.com" frameborder="0"></iframe>
</body>
<style>
</style>
<script src="../static/jsRepository/myJquery.js"></script>
<script src="./jsRepository/myJQuery-UI.js"></script>
<script>
</script>
</html>
（24）音视频播放
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--
1.音视频播放
2.音视频引入时,默认是不允许用户播放的,controls表示控制,
加上后就可以允许用户播放。
3.autoplay 自动播放,加上后会自动播放。但是目前大部分浏览器
是不支持的。
4.loop是指循环播放
5.除了src也可以通过source来指定。音视频一般都不放在自己的服务器。（成本问题）
-->
<audio src="./siteJsCssTool/1.mp3" controls></audio>
<!--这种方式如果第一种格式不支持,可以支持第二种-->
<audio>
<source src="./siteJsCssTool/1.mp3">
<source src="./siteJsCssTool/1.mp3">
</audio>
<video src="./siteJsCssTool/1.avi"></video>
<video controls>
<source src="./siteJsCssTool/1.avi">
<source src="./siteJsCssTool/1.mp4">
</video>
</body>
<style>
</style>
<script src="../static/jsRepository/myJquery.js"></script>
<script src="./jsRepository/myJQuery-UI.js"></script>
<script>
</script>
</html>
3.CSS
（1）CSS概述
①CSS3可以简单理解为CSS的第三个版本
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<span style="color: red;">少小离家老大回,乡音无改鬓毛衰。</span>
</body>
<style>
/*
1.表现:CSS
2.层叠样式表,网页从底部到上部是有多层的,虽然我们只能看到上层。
3.总是CSS就是设置网页元素中的样式,就是给网页化妆的。
4.使用CSS修改元素的样式
(1)在标签内部通过style,内联样式/行内样式
(2)
*/
</style>
<script>
</script>
</html>
（2）CSS编写位置
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<span>少小离家老大回,乡音无改鬓毛衰。</span>
<span>出师未捷身先死,长使英雄泪满襟。</span>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<style>
</style>
<script>
</script>
</html>
/*
1.表现:CSS
2.层叠样式表,网页从底部到上部是有多层的,虽然我们只能看到上层。
3.总是CSS就是设置网页元素中的样式,就是给网页化妆的。
4.使用CSS修改元素的样式
(1)在标签内部通过style,内联样式/行内样式,不推荐使用
(2)是因为当多个span的使用,样式无法复用还有当样式变
更时难以维护,注意开发时绝对不要使用内联样式。
(3)第二种方式直接编写到style标签里,也就是下面的方式。
(4)可以为多个标签设置样式,修改时只需要修改一处。所以
更加方便重复使用。
(5)内部的样式表不能跨页面复用,第三种方式是外部样式表
,可以将CSS样式编写到外部的CSS文件中。
(6)外部样式表要使用link标签引用,使得样式可以在不同的页面
之间复用。开发中最佳的使用方式。
(7)可以最大限度的使用浏览器的缓存极致,提高用户的体验。
*/
span{
color: red;
font-size: 20px;
}
（3）CSS基本语法
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>今日偶感</h1>
<span>少小离家老大回,乡音无改鬓毛衰。</span>
<span>出师未捷身先死,长使英雄泪满襟。</span>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<script>
</script>
</html>
/*
1.这个位置就无需<style></style>标签了。
2.注释标签/*再加个* /
3.基本语法
4.选择器与声明块
5.通过选择器:可以选择页面中的指定元素,如span就是选中所有的span
6.声明块:通过声明块来为元素设置一个样式。声明块由一个一个的
声明组成。声明是一个名值对结构,名与值之间以冒号连接,以分号
结尾。
*/
span{
color: red;
font-size: 20px;
}
h1{
color: green;
}
（4）常用选择器
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>今日偶感</h1>
<p id="firstP" class="class1">少小离家老大回,乡音无改鬓毛衰。</p>
<p class="class1">出师未捷身先死,长使英雄泪满襟。</p>
<p>无限江山,别时容易见时难。</p>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<script>
</script>
</html>
/*
1.所有的段落设置为红色
元素选择器
语法:就是标签名,是页面中所有的整个标签
2.希望第一段为红色
id选择器
语法:#id属性值{}
3.希望1/2段变红,3不变
class选择器/类选择器
根据元素的class来选中一组元素
语法:.class{}
注意:可以为一个元素指定多个class
4.通配选择器,作用:选中页面中的所有元素
语法:*{}
*/
/*p{
color: red;
font-size: 20px;
}*/
/*#firstP{
color:red;
}*/
/*.class1{
color: red;
}
h1{
color: green;
}*/
*{
color: blue;
}
（5）复合选择器
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>选择器</h1>
<div class="use1">我是div</div>
<p class="use1">我是p元素</p>
<span>哈哈哈</span>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<script>
</script>
</html>
/*
1.复合选择器/组合选择器
2.将class为use1的div元素设置为30元素
交集选择器,作用就是同时复合多个条件的元素
语法:选择器1选择器2...中间无空格
交集选择器如果有元素选择器,必须以元素选择器开头
3.并集选择器
语法:选择器1,选择器2{}
*/
/*
.use1{
color: red;
}*/
div.use1{
color: red;
}
/*选择器分组/并集选择器*/
h1,span{
color: green;
}
（6）关系选择器
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div>
我是一个div
<p>我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div元素中的span</span>
<span>我是div元素中的span</span>
<span>我是div元素中的span</span>
</div>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<script>
</script>
</html>
/*
1.关系选择器
2.父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代的元素,父元素也是子元素的祖先元素
后代元素:直接或间接被祖先元素包含的元素
兄弟元素:拥有相同父元素的元素
3.为div的子元素span设置为红色
子元素选择器:选中指定父元素的子元素
语法:父元素>子元素
4.后代选择器:选中指定元素内的指定后代元素
语法:祖先 后代
5.兄弟选择器:选择下一个兄弟
语法:前一个+下一个
选择下边所有的兄弟 兄 ~ 弟
*/
/*
div > span{
color: red;
}
div span{
color: blue;
}*/
/*p + span{
color: red;
}*/
p ~ span{
color: red;
}
（7）属性选择器
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>今日偶感</h1>
<p title="start">独自莫凭栏</p>
<p title="middle">无限江山</p>
<p>别时容易见时难</p>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<script>
</script>
</html>
/*
1.属性选择器
元素[属性名] 选择含有指定属性的元素
元素[属性名=属性值]选择含有指定属性且值为指定的的元素
元素[属性名^=属性值]表示属性值以...开头的元素
元素[属性名$=属性值]表示属性值以...结尾的元素
元素[属性名*=属性值]属性值中含有...的元素
*/
/*p[title]{
color: red;
}*/
p[title="start"]{
color: red;
}
（8）伪类选择器
ul>li 然后tab可以自动生成列表代码。
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<link rel="stylesheet" href="../static/siteJsCssTool/Controller.css">
<script>
</script>
</html>
/*
1.伪类选择器
2.将ul中的第一个li设置为红色
3.伪类就是是一个不存在的类,用来描述元素的状态。
特点:一般是:号开头,:first-child第一个子元素
4.:not否定伪类,除了...以外的元素
*/
/*p[title]{
color: red;
}*/
/*ul > li:first-child{
color: red;
}*/
/*ul > li:last-child{
color: green;
}*/
/*这里如果写n,则全选中nth-child(n)
2n+1或odd表示选中奇数位元素;2n或even表示偶数位位置*/
/*
ul > li:nth-child(3){
color: blue;
}*/
ul > li:not(li:first-child){
color: red;
}
（9）超链接的伪类
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<br>
<a href="https://www.baidu.com" target="_blank">百度2</a>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.超链接的伪类
访问过的超链接,没有访问过的超链接
link表示没有访问过的链接
visited表示访问过的链接
visited只能改变颜色,其他为了保护隐私都不能改变。
*/
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
（10）伪元素
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<p>清明时节雨纷纷,路上行人欲断魂。</p>
<div>借问酒家何处是,牧童遥指杏花村。</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.伪元素:表示页面中一些特殊的并不真是存在的元素
::双冒号 ::first-letter
*/
p::first-letter{
font-size: 50px;
color: red;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: #2e8bf0;
}
div:before{
content:'陈翔六点半';
color: red;
}
div:after{
content:'茅台';
color: #13c2c2;
}
（11）餐厅练习介绍
①HTML元素选择练习小游戏
（12）继承
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<p>我是p元素
<span>我是p元素中的span</span>
</p>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.样式的继承:我们为元素设置的样式同时也会设置到它的后代元素。
2.比如只设置p的颜色,里面的span也会变色。
3.继承的设置是为了方便我们的开发,设置一次即可让所有元素获取。
4.如设置网页字体的整体大小。
5.注意:并不是所有的样式都会被继承,如背景相关的,布局相关的都
不会被继承。
6.逆向思维的重要性。
*/
p{
color:red;
}
body{
font-size: 12px;
}
（13）选择器的权重
/*
1.选择器的权重
2.样式的冲突,不同的选择器选中了相同的元素,并且为相同的样式
设置不同的值。此时就发生了样式的冲突。
3.发生冲突时,由选择器的优先级决定。
内联样式1000>id选择器100>类与伪类选择器10>元素选择器1>通配选择器0>继承的样式没有优先级
4.组合选择器是相加计算,分组选择器是单独计算的。选择器的累加
不会超过其最大的数量级,类选择器再高也不会超过id计算器
5.!important可以获取到最高的优先级,开发中要慎用
*/
div{
color: yellow;
}
.class1{
color: red;
}
#div1{
color: blue;
}
（14）像素和百分比
/*
1.像素和百分比
2.长度单位:像素,显示器实际上是有一个个发光的小点构成的
1920*1080,像素越小屏幕就越清晰。
3.百分比,可以设置为相对其父元素的百分比。可以跟随父元素改变
而改变。
*/
.class1{
width: 200px;
height: 200px;
background-color: orange;
}
.class2{
width: 50%;
height: 50%;
background-color: blue;
}
（15）em和rem
/*
1.像素和百分比
2.长度单位:像素,显示器实际上是有一个个发光的小点构成的
1920*1080,像素越小屏幕就越清晰。
3.百分比,可以设置为相对其父元素的百分比。可以跟随父元素改变
而改变。
4.1em= 1 font-size 根据字体的大小而改变
5.rem是相对于根元素(HTML)的字体大小来计算的
*/
.class1{
width: 200px;
height: 200px;
background-color: orange;
}
.class2{
width: 50%;
height: 50%;
background-color: blue;
}
.class3{
font-size: 10px;
width: 10em;
height: 10em;
background-color: #87e8de;
}
（16）RGB值
/*
1.
*/
.class1{
width: 200px;
height: 200px;
/*1.颜色单位可以使用颜色名,也可以使用RGB值设置
2.但是在CSS中用颜色名不太方便,所以要用RGB值
red/green/blue 0-255 之间
3.语法RGB()
4.RGBA可以设置透明,四个参数,A就是表示透明度
1表示完全不透明,0表示完全透明
5.十六进制的RGB值*/
/*background-color: rgb(255,255,255);*/
background-color: #f29100;
}
（17）HSL值
/*
1.HSL值
H色相 0-360
S饱和度 0-100%
L亮度 0-100%
*/
.class1{
width: 200px;
height: 200px;
background-color:hsl(30,100%,50%);
}
（18）文档流
/*
1.布局
2.文档流:网页有多层结构,通过CSS可以为每一层设置样式,用户只能
看到最上层。这些层中最底层就叫做文档流。
3.对于我们来说元素主要有两种状态,一个是在文档流中,脱离文档流。
4.元素在文档流中的特点:块元素/行内元素
(1)块元素会在页面中独占一行
(2)默认宽度是父元素的全部,默认高度与字一样是被子元素撑开的。
(3)行内元素不会独占一行,只占自身的大小。如果一行中不能容纳,
则会换到第二行继续向右放。
(4)行内元素默认的宽度与高度都是被内容撑开。
*/
.class1{
background-color: yellow;
}
span{
background-color: green;
}
（19）盒子模型
/*
1.盒子模型
2.CSS将页面中的所有元素都设置为了矩形的盒子。将元素设置为矩形
的盒子后,对页面的布局就是将盒子摆放到不同的位置。
3.每一个盒子都有以下几个部分组成。
(1)盒子里面的空间,叫做内容区content
(2)边框border,用来限制盒子的大小。
(3)内边距,padding,内容区和边框之间的距离
(4)外边距,margin,盒子与盒子之间的距离
4.内容去由width与height来设置,用来存放子元素和文本内容。
*/
.class1{
width: 200px;
height: 200px;
background-color: #87e8de;
/*边框 border,设置边框至少设置3个样式
1.边框宽度 border-width
2.边框颜色 border-color
3.边框的风格 border-style
4.边框的大小会影响盒子的大小*/
border-width:10px;
border-color: red;
border-style: solid;
}
（20）盒子模型-边框
/*
1.盒子模型-边框
2.border-width默认值是3px,最好指定下,可以指定4个方向的值。
3个方向的值,2个方向的值,1个方向的值。
3.border-color用来指定边框的颜色,也可以指定4个值。
4.border-style指定边框的样式,实线,虚线...
5.border的简写属性, border:10px red solid;先后顺序不影响。
*/
.class1{
width: 200px;
height: 200px;
background-color: #87e8de;
/*边框 border,设置边框至少设置3个样式
1.边框宽度 border-width
2.边框颜色 border-color
3.边框的风格 border-style
4.边框的大小会影响盒子的大小*/
border:10px red solid;
/*border-width:10px;
border-color: red;
border-style: solid;*/
}
（21）盒子模型-内边距
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="class1">
<div class="class2"></div>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.盒子模型-内边距:内容区和边框之间的距离
2.也是分为4个方向padding-top,padding-bottom,
padding-right,padding-left。
3.背景颜色会延伸到内边距,可以通过文本方式区分,或者通过内部
元素的背景颜色来区分
4.盒子大小由内容区、内边距、边框的大小共同决定。这就是
可见框的总大小。padding是内边距的简写属性,可以同时指定
四个方向的内边距大小。
*/
.class1{
width: 200px;
height: 200px;
background-color: black;
border: 10px red solid;
/*padding-top: 15px;*/
padding: 15px;
}
.class2{
width: 100%;
height: 100%;
background-color: #87e8de;
}
（22）盒子模型-外边距
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="class1">
<div class="class2"></div>
</div>
<div class="class3"></div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.盒子模型-外边距
2.一个有四方方向的外边距:margin-top/margin-bottom/
margin-left/margin-right。
3.margin-top设置正值,往下走,若负值则往相反方向走
4.margin-left设置正值,往右走,若负值则往相反方向走
5.元素在页面中的布局是自左向右的,如果设置上或者左元素会自动
移动,而设置下和右会移动其他元素,而不会移动自身。
6.margin可以同时设置四个方向的外边距
*/
.class1{
width: 200px;
height: 200px;
background-color: black;
border: 10px red solid;
/*padding-top: 15px;*/
padding: 15px;
/*外边距margin,不会影响盒子的大小,但是会影响盒子的位置
1.一个有四方方向*/
/*margin-top: 100px;
margin-bottom: 100px;*/
margin: 100px;
}
.class2{
width: 100%;
height: 100%;
background-color: #87e8de;
}
.class3{
width: 200px;
height: 200px;
background-color: green;
}
（23）盒子模型-水平布局
/*
1.盒子模型-水平布局
2.元素水平方向的位置,由以下几个属性共同决定。
margin-left/border-left/padding-left/width/padding-right
/border-right/margin-right。
3.一个元素在父元素中水平布局必须满足以下等式
(margin-left)+(border-left)+(padding-left)+width+
(padding-right)+(border-right)+(margin-right)=其父元素
内容区的宽度。
(1)以上等式必须满足,如果相加结果使等式不成立,则成为过度约束。
则等式会自动调整。如果7个值中没有auto的情况,则浏览器会自动
调整margin-right的值以满足等式。
(2)width/margin-left/margin-right如果有auto,则自动调整
auto的值以使得其满足。如果3者有2个都是auto,则宽度会调整为
大,设置为auto的外边距为0。如果3者都是auto,宽度最大。
4.子元素在父元素的内容区存在。
*/
.class1{
width: 800px;
height: 200px;
border: 10px red solid;
}
.class2{
/*width: auto;
width默认就是auto*/
width: 200px;
height: 200px;
background-color: #87e8de;
margin-left: 100px;
}
（24）盒子模型-垂直布局
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="class1">
<div class="class2"></div>
<div class="class2"></div>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.盒子模型-垂直布局
2.默认情况下父元素的高度是被内容撑开的
3.如果子元素超过父元素的高度,子元素超出的部分会从父元素中
溢出。
4.overflow可以设置父元素处理子元素溢出的情况。
visible:默认值,会从父元素溢出。
hidden:隐藏,溢出的内容会被裁剪。
scroll:滚动,生成滚动条,可以通过滚动条查看完整的内容。
auto:根据需要生成滚动条。推荐使用这个
*/
.class1{
height: 100px;
background-color: #87e8de;
border: 10px red solid;
overflow: auto;
}
.class2{
width: 200px;
height: 200px;
background-color: yellow;
margin-bottom: 100px;
}
（25）盒子模型-外边距的折叠
/*
1.盒子模型-外边距折叠
2.垂直方向的外边距会发生重叠的现象
3.class1、class2的外边距就重叠了100px
4.兄弟元素间的垂直外边距会取两者之间的较大值。
(1)如果一正一负,则取两者的和。
(2)如果都是负的,则取两者中绝对值较大的。
(3)兄弟元素之间的重叠对开发是有利的,不用处理。
5.父子元素的
(1)子元素的外边距会传递给父元素
(2)父子外边距的折叠,会影响页面的整体布局。
(3)解决思路是用内边距,或者让父子元素不相同。
*/
/*.class1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 100px;
}
.class2{
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}*/
.class3{
width: 200px;
height: 200px;
background-color: red;
padding-top: 100px;
}
.class4{
width: 100px;
height: 100px;
background-color: green;
/*margin-top: 100px;*/
}
（26）行内元素的盒子模型
/*
1.行内元素的盒子模型。
2.行内元素设置宽度和高度没有作用,就是由里面的内容决定的。
3.可以设置padding,垂直方向的padding不会影响页面的布局。
4.可以设置border,垂直方向的border不会影响页面的布局。
5.可以设置margin,垂直方向的margin不会影响页面的布局。
6.display
(1)inline 将元素设置为行内元素
(2)block将元素设置为块元素,把行内—>块元素
(3)inline-block 行内块元素,既可以设置宽高,又不会独占一行。
(4)table 将元素设置为表格
(5)none 隐藏元素
(6)visible 默认值,元素在页面中显示
(7)hidden 虽然不显示,但是还占位。
*/
.class1{
width: 200px;
height: 200px;
background-color: red;
padding: 100px;
border: 5px solid green;
}
.class2{
width: 200px;
height: 200px;
background-color: yellow;
}
a{
/*display:用来设置元素显示的类型*/
display: block;
width: 200px;
height: 200px;
background-color: #8391a5;
}
（27）浏览器的默认样式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="class1"></div>
<p>今日偶感</p>
<p>今日偶感</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.浏览器的默认样式
2.会发现div对于浏览器有点默认的间距,这就是浏览器设置的默认
样式。默认样式的存在会影响到页面的布局,通常情况下我们在研发
时会去除掉浏览器的默认样式(PC端页面)。
3.通过通配清除,或者引入三方的CSS清除。
*/
/*这样就可以去除了*/
/*
body{
margin: 0px;
}
.class1{
width: 100px;
height: 100px;
border:1px solid black;
}
p{
margin: 0px;
}
ul{
margin: 0px;
padding: 0px;
!*去除项目符号*!
list-style: none;
}*/
/*所有的都去除*/
.class1{
width: 100px;
height: 100px;
border:1px solid black;
}
*{
margin: 0px;
padding: 0px;
}
（28）布置练习
①京东的图片列表
②京东的分类类表
③网易的列表分布
（29）京东图片列表
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>京东图片列表</h1>
<ul class="ul-class1">
<li>
<a href="javascript:;">
<img src="./siteJsCssTool/1.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="./siteJsCssTool/2.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="./siteJsCssTool/3.jpg" />
</a>
</li>
</ul>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
/*
/*所有的都去除*/
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #4d5669;
}
.ul-class1{
/*设置外部ul的宽高*/
width: 290px;
height: 1200px;
/*裁剪溢出内容*/
overflow: hidden;
margin: 50px auto;
}
.ul-class1 li{
margin-bottom: 9px;
}
.ul-class1 img{
width: 100%;
}
（30）京东左侧导航
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>京东左侧导航栏</h1>
<div class="div-class1">
<div class="div-class2"><a href="javascript:;">家用电器</a></div>
<div class="div-class2"><a href="javascript:;">吊顶</a></div>
<div class="div-class2"><a href="javascript:;">窗帘</a></div>
<div class="div-class2"><a href="javascript:;">洗手台</a></div>
<div class="div-class2"><a href="javascript:;">木桌</a></div>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
/*
/*所有的都去除*/
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #4d5669;
}
.div-class1{
width: 190px;
height: 450px;
padding: 10px 0px;
background-color: white;
margin: 50px auto;
}
.div-class2{
height: 25px;
/*让文字在父元素中垂直居中*/
line-height: 25px;
/*为了将位子向里移*/
padding-left: 20px;
}
.div-class2:hover{
background-color: gray;
}
.div-class2 a{
color: black;
/*去除下划线*/
text-decoration: none;
/*设置字体大小*/
font-size: 14px;
}
.div-class2 a:hover{
color: red;
}
（31）网易新闻列表
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<h1>网易新闻列表</h1>
<div class="div-class-newsOuter">
<h2 class="h2-class-newsTitle">
<a href="#">体育</a>
</h2>
<div class="div-class-img">
<a href="#">
<img src="./siteJsCssTool/1.jpg"/>
<h3>亚洲第一美女</h3>
</a>
</div>
<!--新闻列表-->
<ul class="ul-class-newsList">
<li>
<a href="#">■ 我爱XX敏,一起打篮球</a>
</li>
<li>
<a href="#">■ 我爱XX敏,一起去旅游</a>
</li>
<li>
<a href="#">■ 我爱XX敏,一起看电影</a>
</li>
<li>
<a href="#">■ 我爱XX敏,一起去爬山</a>
</li>
</ul>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: beige;
}
.div-class-newsOuter{
width: 500px;
height: 800px;
background-color: whitesmoke;
margin: 0 auto;
border-top: 1px solid gray;
}
.div-class-img{
height: 630px;
}
.div-class-img img{
width: 100%;
}
.div-class-img h3{
/*设置字体颜色*/
color: white;
margin-top: -40px;
padding-left: 30px;
}
.div-class-img a{
text-decoration: none;
}
.h2-class-newsTitle{
/*为了边框和文字一致,需要转换下*/
display:inline-block;
height: 30px;
border-top: 1px solid red;
margin-top: -1px;
padding-top: 10px;
}
.h2-class-newsTitle a{
text-decoration: none;
color: #17233d;
font-weight: bold;
}
.ul-class-newsList{
margin-top: 20px;
list-style: none;
}
.ul-class-newsList li a{
text-decoration: none;
font-size: 14px;
color: black;
padding-left: 14px;
}
.ul-class-newsList li a:hover{
color: red;
}
（32）盒子的大小
/*box-sizing用来设置盒子尺寸的计算方式
设置width和height的作用
2.content-box 默认值,宽度和高度用来设置内容去大小
3.border-box 宽度和高度是整个盒子的可见框的大小。写多大是
多大。
*/
*{
margin: 0;
padding: 0;
}
.div-class-box{
width: 100px;
height: 100px;
background-color: #13c2c2;
padding: 10px;
border: 10px solid red;
box-sizing: content-box;
}
（33）轮廓阴影和圆角
/*
1.轮廓阴影和圆角
2.outline 轮廓,用来设置元素的轮廓线,用法和border一样。不同
的点是轮廓不会影响可见框的大小。
outline: 10px solid red;在鼠标移入时可能会用到。
3.阴影box-shadow 用来设置元素的阴影效果。
box-shadow: 10px 10px #f29100; 前两个值代表偏移量
默认都是0,位于元素的正下方。
第三个值魔火半径,值越大越模糊。
4.圆角border-radius
border-top-left-radius:四个方向的值。
border-radius: 15px 20px;还可以用来指定椭圆
可以写3或4个方向的值。50%可以变成圆形。
*/
*{
margin: 0;
padding: 0;
}
.div-class-box{
width: 200px;
height: 200px;
background-color: #13c2c2;
border: 10px solid red;
box-shadow: 10px 10px 5px rgba(0,0,0,.5);
}
.div-class-box2{
width: 200px;
height: 200px;
background-color:darkolivegreen;
/*border-radius: 15px;*/
border-radius: 50%;
}
4.CSS水平布局
（1）浮动的简介
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
</div>
<div class="div-class-box2">
</div>
<div class="div-class-box3">
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*1.通过移动可以使元素向其父元素的左则或者右侧移动
2.float none默认值,不浮动
left 左浮动,right 右浮动
3.注意,元素设置浮动以后,水平布局的等式就不需要强制成立了。
(1)元素设置浮动以后,会从文档流中脱离。不再占用文档流的
位置,所以元素下还在文档流中的元素会自动向上移动。
(2)设置浮动以后,元素会想父元素的左侧或者右侧移动。
(3)浮动元素不会从父元素中移出。
(4)浮动元素不会盖住其他的浮动元素。
(5)元素想水平排版,必须都浮动才能实现。
(6)如果浮动元素上面是没有浮动的块元素,则浮动元素无法上去。
(7)如果所有的浮动元素挤满一行时,会自动换一行。
*/
.div-class-box1{
width: 200px;
height: 200px;
background-color: #13c2c2;
float: left;
}
.div-class-box2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.div-class-box3{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
（2）浮动的特点
/*1.浮动的其他特点
(1)浮动元素不会覆盖文字。
(2)元素设置浮动后将会从文档流中脱离,元素的一些特点也会发生
变化。
2.脱离文档流的特点
(1)块元素不再独占一行。
(2)脱离后,块元素的宽高是被呢日用撑开的。
(3)行内元素脱离文档流后会变成块元素,特点和块元素一样。
*/
.div-class-box1{
width: 100px;
height: 100px;
background-color: #13c2c2;
float: left;
}
.div-class-box2{
background-color: #52c41a;
float: left;
}
.span-class-1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
（3）导航条练习
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<ul class="ul-class-list">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Spring</a></li>
</ul>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*1.导航条
*/
.ul-class-list{
width: 1210px;
height: 48px;
background-color: gray;
margin: 100px auto;
}
.ul-class-list li{
float: left;
line-height: 48px;
list-style: none;
}
.ul-class-list a{
display: block;
text-decoration: none;
font-size: 18px;
padding: 0 80px;
}
.ul-class-list a:hover{
background-color: #17233d;
color: white;
}
（4）简单的布局
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-header"></div>
<div class="div-class-main">
<div class="div-class-main-nav">
</div>
<div class="div-class-main-article">
</div>
<div class="div-class-main-aside">
</div>
</div>
<div class="div-class-footer"></div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*1.网页的布局
*/
*{
margin: 0px;
padding: 0px;
}
/*公共样式提取出来*/
.div-class-header,.div-class-main,.div-class-footer{
width: 1000px;
margin: 0px auto;
}
.div-class-header{
height: 150px;
background-color: gray;
}
.div-class-main{
height: 500px;
background-color: darkgreen;
margin: 10px auto;
}
/*提取公共代码*/
.div-class-main-nav,.div-class-main-article,.div-class-main-aside{
height: 100%;
float: left;
}
.div-class-main-nav{
width: 190px;
background-color: yellow;
}
.div-class-main-article{
width: 600px;
background-color: orange;
margin: 0px 10px 0px 10px;
}
.div-class-main-aside{
width: 190px;
background-color: plum;
}
.div-class-footer{
height: 150px;
background-color: tomato;
}
（5）高度塌陷和BFC
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-outer">
<div class="div-class-inner">
</div>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*1.网页的布局
2.内容的多少可能会影响main部分的高度,所以不能写死
3.在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动
后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素
,导致父元素的高度丢失,即为高度塌陷。
4.父元素的高度丢失后,其下的元素会上移,导致布局混乱,所以高度
塌陷是浮动布局中常见的一个问题,这个问题我们必须进行处理。
解决方案:就是固定父元素的高度,但是又与我们根据内容变化决定
父元素的高度初衷相悖。
5.块级格式化环境BFC。
BFC 是我们CSS中隐含的属性,可以为一个元素开启BFC,开启BFC
后该元素会变成一个独立的布局区域。
元素开启BFC后的特点:
(1)开启BFC的元素不会被浮动元素覆盖。
(2)开启BFC的元素子元素和父元素的外边距不会重叠。
(3)开启BFC的元素可以包含浮动的子元素。
6.可以通过特殊的方式来开启元素的BFC
(1)设置元素的浮动float: left;会发现高度没有塌陷,而且宽度没了。
(2)将元素设置为行内块元素。
(3)前两种都不推荐,将元素的overflow设置为非visible的值。
overflow: hidden 以开启BFC
*/
.div-class-outer{
border: 10px solid red;
/*float: left;*/
/* display: inline-block;*/
overflow: hidden;
}
.div-class-inner{
width: 100px;
height: 500px;
background-color: #13c2c2;
float: left;
}
（6）BFC的演示
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
<div class="div-class-box3">
</div>
</div>
<!--<div>
</div>-->
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.块级格式化环境BFC。
BFC 是我们CSS中隐含的属性,可以为一个元素开启BFC,开启BFC
后该元素会变成一个独立的布局区域。
元素开启BFC后的特点:
(1)开启BFC的元素不会被浮动元素覆盖。
(2)开启BFC的元素子元素和父元素的外边距不会重叠。
(3)开启BFC的元素可以包含浮动的子元素。
2.开启BFC的方式有很多中方式。
overflow/display/float/
*/
.div-class-box1{
width: 200px;
height: 200px;
background-color: darkseagreen;
/*float: left;*/
/*这里开启了BFC,则box3就往下移动100px
,和父元素的外边距不会重叠了。*/
overflow: hidden;
}
.div-class-box2{
width: 200px;
height: 200px;
background-color: orange;
/*这里开启了BFC,则不被浮动元素覆盖*/
overflow: hidden;
}
.div-class-box3{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
（7）Clear
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">1</div>
<div class="div-class-box2"></div>
<div class="div-class-box3">3</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.clear
2.由于box1浮动导致box3位置上移,box3受到了浮动的影响,位置
发生了改变。
3.如果我们不希望元素不因为其他元素浮动的影响而改变位置,
我们可以通 过clear属性来清除元素浮动对当前元素的影响。
4.clear
(1)left清除左侧浮动元素对当前元素的影响
(2)right清除右侧浮动元素对当前元素的影响
(3)设置清除浮动以后,浏览器会为元素添加一个上外边距,使得
其位置不受其他元素的影响。
(4)both是指清除较大的一侧浮动
*/
.div-class-box1{
width: 200px;
height: 200px;
background-color: darkolivegreen;
float: left;
}
.div-class-box2{
width: 400px;
height: 400px;
background-color: blue;
float: right;
}
.div-class-box3{
width: 200px;
height: 200px;
background-color: orange;
/*clear: left;*/
clear: right;
}
（8）使用after伪类解决高度塌陷
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
<div class="div-class-box2"></div>
<!-- <div></div>-->
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.高度塌陷问题的解决
2.overflow虽然可以解决,我们需要更完美的方式
3.通过box3来撑起box2的高度,这样写副作用就很少了。
4.但是还是有box3多余标签出现,所以要使用伪元素。
*/
.div-class-box1{
border: 10px solid red;
}
.div-class-box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
.div-class-box3{
clear: both;
}
*/
/*伪元素*/
.div-class-box1::after{
/*必须要转换为块元素*/
content:"";
display: block;
clear: both;
}
（9）Clearfix
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
<div class="div-class-box2"></div>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.margin-top: 100px;box2的却作用于了box1。
2.解决外边距重叠。
3.而一起写可以解决塌陷与重叠两个问题。
*/
.div-class-box1{
width: 200px;
height: 200px;
background-color: orange;
}
/*伪元素*/
.div-class-box1::before,.div-class-box1::after{
content: "";
display: table;
clear: both;
}
.div-class-box2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
（10）相对定位
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">1</div>
<div class="div-class-box2">2</div>
<div class="div-class-box3">3</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.定位position,使用其来设置定位。
2.通过定位,我们可以将元素排放到任意位置。
static是默认值,元素是静止的,没有开启定位
3.relative 开启相对定位
(1)开启相对定位后,如果不设置"偏移量",元素不会发生任何变化。
(2)什么是偏移量?offset,开启定位后,可以通过偏移量来设置元素的
位置。top bottom left right四个偏移量。
垂直方向 top bottom
水平方向 left right
4.absolute 开启绝对定位
5.fixed 开启固定定位
6.sticky 开启粘滞定位
*/
*{
margin: 0px;
padding: 0px;
}
.div-class-box1{
width: 200px;
height: 200px;
background-color: darkolivegreen;
}
.div-class-box2{
width: 200px;
height: 200px;
background-color: red;
/*定位position,更加高级的布局手段*/
position: relative;
/*1.必须开启定位才能用,一般使用top与left即可
2.相对定位是参照元素在文档流中的位置定位的,它的定位
是它自己的"左上角",也就是它自己。
3.相对定位会提升元素的层级,会在顶层
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质是块还是行内*/
top: -200px;
left: 200px;
}
.div-class-box3{
width: 200px;
height: 200px;
background-color: orange;
}
（11）绝对定位
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">1</div>
<div class="div-class-box2">2</div>
<div class="div-class-box3">3</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.定位position,使用其来设置定位。
2.通过定位,我们可以将元素排放到任意位置。
static是默认值,元素是静止的,没有开启定位
4.absolute 开启绝对定位
*/
*{
margin: 0px;
padding: 0px;
}
.div-class-box1{
width: 250px;
height: 250px;
background-color: darkolivegreen;
}
.div-class-box2{
width: 200px;
height: 200px;
background-color: red;
/*定位position,更加高级的布局手段*/
position: absolute;
/*1.绝对定位
2.如果不设置偏移量,元素的位置不会发生变化
3.开启决定定位,元素会从文档流中脱离
4.绝对定位会改变元素的性质,行内变成块。
5.绝对定位会使元素提升一个层级。
6.绝对定位元素是相对于其包含块进行定位的。
(1)包含块:
-正常情况下,就是距离当前元素最近的祖先元素。
-绝对定位的包含块,就是离它最近的开启了定位的祖先元素。
如果所有的"祖先元素"都没开启定位,则相对于根元素。
*/
top: 0px;
left: 0px;
}
.div-class-box3{
width: 300px;
height: 300px;
background-color: orange;
}
（12）固定定位
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">1</div>
<div class="div-class-box4">4
<div class="div-class-box5">5
<div class="div-class-box2">2
</div>
</div>
</div>
<div class="div-class-box3">3</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.定位position,使用其来设置定位。
2.固定定位fixed,也是一种绝对定位。
(1)固定定位是参照与浏览器的视口进行定位,固定定位的元素不会
随着网页的滚动条而滚动。
(2)用来制作固定东西以及表格的表头
*/
*{
margin: 0px;
padding: 0px;
}
.div-class-box1{
width: 250px;
height: 250px;
background-color: darkolivegreen;
}
.div-class-box2{
width: 200px;
height: 200px;
background-color: red;
/*定位*/
position: fixed;
top: 0px;
left: 0px;
}
.div-class-box3{
width: 300px;
height: 300px;
background-color: orange;
}
.div-class-box4{
width: 350px;
height: 350px;
background-color: gray;
}
.div-class-box5{
width: 400px;
height: 400px;
background-color: green;
}
（13）粘滞定位
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<ul class="ul-class-list">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Spring</a></li>
</ul>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.定位position,使用其来设置定位。
2.粘滞定位,很多浏览器不支持的,我们了解一下。
当元素到某个位置以后不动了。
(1)粘滞定位可以在元素到达某个位置时将其固定。
*/
*{
margin: 0px;
padding: 0px;
}
/*1.导航条
*/
body{
height: 3000px;
}
.ul-class-list{
width: 1210px;
height: 48px;
background-color: gray;
margin: 100px auto;
position: sticky;
top: 0px;
}
.ul-class-list li{
float: left;
line-height: 48px;
list-style: none;
}
.ul-class-list a{
display: block;
text-decoration: none;
font-size: 18px;
padding: 0 80px;
}
.ul-class-list a:hover{
background-color: #17233d;
color: white;
}
由于兼容性不太好，了解下就可以了。
（14）绝对定位元素的位置
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
<div class="div-class-box2">
</div>
</div>
</body>
<link rel="stylesheet" href="./siteJsCssTool/Controller.css" />
<script>
</script>
</html>
/*
1.绝对定位元素的位置
2.水平布局原有的等式就增加了left与right,由7个值变为了9个值。
3.开启了决定定位后:水平方向的布局等式需要添加left和right两个
值,发生过渡约束时,如果9个值中没有auto,则自动调整right以使得
等式成立。如果有auto则调整auto的值。
可以设置auto的值 margin width left right。
left+[margin-left]+[border-left]+[padding-left]+width
+[padding-right]+[border-right]+[margin-right]+right
4.垂直方向布局,也有个等式
top+[margin-top]+[margin-bottom]+[padding-top]+
[padding-bottom]+[border-top]+[border-bottom]+height
=包含块的高度
(1)实现元素居中
*/
.div-class-box1{
width: 500px;
height: 500px;
background-color: #f29100;
/*要开启定位*/
position: relative;
}
.div-class-box2{
width: 100px;
height: 100px;
background-color: darkgreen;
/*要开启定位*/
position: absolute;
/*right: 0px;*/
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
margin: auto;
}
（15）元素的层级
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">1</div>
<div class="div-class-box2">2</div>
<div class="div-class-box3">3
<div class="div-class-box4">4</div>
</div>
</body>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.元素的层级
2.对于开启定位的元素,我们可以通过"z-index"来指定元素的层级,
他的值越大元素的层级越高、元素越优先显示。
3.z-index值越大则越优先显示
4.如果元素的层级一样,则优先显示靠下的。
5.祖先元素的额层级再高,也不会覆盖住后代元素。
*/
*{
margin: 0px;
padding: 0px;
}
.div-class-box1{
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
z-index: 1;
}
.div-class-box2{
width: 200px;
height: 200px;
background-color: rgba(255,0,0,.3);
position: absolute;
top: 100px;
left: 100px;
}
.div-class-box3{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 200px;
left: 200px;
z-index: 3;
}
.div-class-box4{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
（16）京东轮播图
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<ul class="ul-class-imgList">
<li>
<a href="javascript:;">
<img src="./res/1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./res/2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./res/3.jpg" alt="">
</a>
</li>
<div class="div-class-pointer">
<a class="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>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.京东轮播图
*/
*{
margin: 0px;
padding: 0px;
}
/*设置图片容器*/
.ul-class-imgList{
margin: 0px auto;
width: 552px;
height: 827px;
/* 开启相对定位,使ul的pointer可以相对div定位
,而不是相对于html定位*/
position: relative;
list-style: none;
}
.ul-class-imgList img{
width: 552px;
height: 827px;
}
/*设置li*/
.ul-class-imgList li{
position: absolute;
}
.ul-class-imgList li:nth-child(1){
z-index: 1;
}
/*设置导航点样式*/
.div-class-pointer a{
/*display: block;*/
width: 10px;
height: 10px;
background-color: rgba(255,255,255,.3);
border-radius: 50%;
float: left;
margin-left: 6px;
/*transparent是透明的边框*/
border: 2px solid transparent;
/*将背景颜色只设置到内容区*/
background-clip: content-box;
}
.div-class-pointer{
position: absolute;
z-index: 9999;
bottom: 20px;
left: 40px;
}
.div-class-pointer a.a-class-active,
.div-class-pointer a:hover {
background-color: white;
border: 2px solid rgba(255,255,255,.3);
}
（17）字体族
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<p>今天天气真不错,Hello</p>
</body>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.字体族font与background
2.1 em=1 font-size
3.rem相当于根元素的一个font-size
4.font-family字体族,字体的二个是
可选值
serif 衬线字体 写字母带个横衬线
sans-serif 非衬线字体
monospace 等宽字体 指定字体的类别,浏览器自动使用该类别下的字体。
一般不会直接用这三个值。
5.可以同时指定多个字体,优先使用第一个,如果无法使用则使用
第二个。
(1)如:Monaco, Menlo, Consolas, "Courier New", monospace
(2)电脑windows font里可以查看已经安装的字体。
(3)可以把字体放到服务器,@font-face让用户下载。
这样可以指定字体。加载速度与版权问题需要考虑。
*/
*{
margin: 0px;
padding: 0px;
}
@font-face {
/*这里要注意版权问题*/
font-family: "My微软雅黑";
src: url('./res/My微软雅黑.ttf');
}
p{
/*字体相关的样式*/
color: red;
font-size: 30px;
/*按顺序与浏览器支持情况使用*/
font-family: My微软雅黑;
}
（18）图标字体简介
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<span class="fas fa-bell" style="font-size: 20px;"></span>
<span class="fas fa-bell-slash"></span>
<span class="fab fa-accessible-icon"></span>
</body>
<link rel="stylesheet" href="./Controller.css" />
<link rel="stylesheet" href="./res/css/all.css" />
<script>
</script>
</html>
/*
1.图标字体简介,把小图片转为字体iconfont,字体是矢量图。
2.在网页中经常需要一些图标,可以用图片,但是图片本身比较大,
并且非常不灵活,所以在我们使用图标时,可以把图标设置为字体,
然后通过font-face的形式进行引入,以自己的形式来使用图标。
3.下载font awesome、解压、拷贝css与web fonts移动到项目中,
将all.css引入到网页中。使用图标字体
*/
*{
margin: 0px;
padding: 0px;
}
（19）图标字体的其他使用方式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<!--<span class="fas fa-cat"></span>-->
<ul>
<li>儿童相见不相识</li>
<li>笑问客从何处来</li>
</ul>
<!--通过实体来使用图标字体-->
<span class="fas"></span>
</body>
<link rel="stylesheet" href="./Controller.css" />
<link rel="stylesheet" href="./res/css/all.css" />
<script>
</script>
</html>
/*
1.图标字体简介,把小图片转为字体iconfont,字体是矢量图。
2.在网页中经常需要一些图标,可以用图片,但是图片本身比较大,
并且非常不灵活,所以在我们使用图标时,可以把图标设置为字体,
然后通过font-face的形式进行引入,以自己的形式来使用图标。
3.下载font awesome、解压、拷贝css与web fonts移动到项目中,
将all.css引入到网页中。使用图标字体
*/
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
li::before {
/* font-family: "Font Awesome 5 Brands";*/
font-family: "Font Awesome 5 Free";
/*去文档查编码*/
content: "f1b0";
/* display: inline-block;
padding-right: 3px;
vertical-align: middle;*/
font-weight: 900;
color: blue;
}
（20）阿里的iconfont
①https://www.iconfont.cn 注意版权问题
②把资源文件拷贝到项目中去，然后通过CSS引用
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<span class="iconfont"></span>
</body>
<link rel="stylesheet" href="./Controller.css" />
<link rel="stylesheet" href="./res/aliyun/iconfont.css"/>
<script>
</script>
</html>
/*
1.图标字体简介,把小图片转为字体iconfont,字体是矢量图。
2.在网页中经常需要一些图标,可以用图片,但是图片本身比较大,
并且非常不灵活,所以在我们使用图标时,可以把图标设置为字体,
然后通过font-face的形式进行引入,以自己的形式来使用图标。
3.下载font awesome、解压、拷贝css与web fonts移动到项目中,
将all.css引入到网页中。使用图标字体
*/
*{
margin: 0px;
padding: 0px;
}
span.iconfont{
list-style: none;
font-size: 100px;
}
（21）行高
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div>今天天气怎么样 Hello</div>
</body>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.行高line-height。
2.文字占有的实际高度,可以通过line-height设置行高。
3.行高可以直接指定大小,也可以直接为行高设置一个整数,
如果是一个整数,行高会是字体的指定的倍数。
4.默认行高是1.3333,
5.设置字体框就是设置字体存在的格子,设置font-size实际上
就是在设置字体框的高度。
6.行高在字体框的上下平均分配。也就是字体框会在行高中自动
居中。
7.行高还经常用来设置文字的行间距,行间距=行高-字体大小。
*/
*{
margin: 0px;
padding: 0px;
}
div{
font-size: 50px;
line-height: 100px;
border: 2px red solid;
/*是font-size的两倍*/
/*line-height: 2;*/
/*我们经常可以把line-height与height设置一样,
可以让当行文字垂直居中*/
}
（22）字体的简写属性
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div>今天天气怎么样 Hello</div>
</body>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.字体的简写属性
*/
*{
margin: 0px;
padding: 0px;
}
div{
border: 1px red solid;
/*font-size: 50px;
font-family: "Times New Roman";*/
/* 简写属性*/
/*font: 50px "Times New Roman";
/2代表指定行高,如果不指定会使用默认的覆盖前面的
行高,当然可以把行高放在后面指定*/
/*font: 50px/2 "Times New Roman";*/
font:bold italic 50px/2 "Times New Roman";
/*font-weight: bold;
font-style字体风格是否为斜体*/
}
（23）文本的水平和垂直对齐
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div>今天天气怎么样<span>真不错</span></div>
<p><img src="./server/1.jpg"></p>
</body>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.文本对齐
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
2.vertical-align 垂直对齐方式
baseline 基线对齐,文字底部的线
top 顶部对齐,子元素的顶部与父元素的顶部
bottom 底部对齐
middle 居中对齐
还可以用值来指定。
*/
*{
margin: 0px;
padding: 0px;
}
div{
width: 500px;
text-align: justify;
font-size: 30px;
border: 1px solid red;
}
span{
font-size: 10px;
border: 1px solid blue;
vertical-align: top;
}
p{
border: 1px solid orange;
}
img{
vertical-align: top;
}
（24）别的文本样式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<br>
<div class="div-class-box1">
今天天气怎么样,天气真的很不错
</div>
<div class="div-class-box2">
科大讯飞是中国最大的语音技术提供商
</div>
</body>
<link rel="stylesheet" href="./Controller.css" />
<script>
</script>
</html>
/*
1.文本样式text-decoration
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
2.white-space
normal 正常情况
nowrap 不换行
pre 保留空白,保留你所写的格式
3.四个配合才能实现多余内容用...展示
*/
*{
margin: 0px;
padding: 0px;
}
.div-class-box1{
font-size: 50px;
text-decoration: overline;
}
.div-class-box2{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
（25）京东导航-结构
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-outer">
<div class="div-class-topBar">
<!--左侧菜单-->
<div class="div-class-location">
<div class="div-class-currentCity">
<a href="javascript:;">北京</a>
</div>
</div>
<!--右侧菜单-->
<ul class="ul-class-shortCut">
<li>
<a href="javascript:;">你好,请登录</a>
</li>
<!--分割线-->
<li class="li-class-line"></li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">我的京东</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">京东会员</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">企业采购</a>
<div class="div-class-shape"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">客户服务</a>
<div class="div-class-shape"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">网站导航</a>
<div class="div-class-shape"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">手机京东</a>
<div class="div-class-shape"></div>
</li>
</ul>
</div>
</div>
</body>
<link rel="stylesheet" href="./Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.京东导航条
*/
*{
margin: 0px;
padding: 0px;
}
.div-class-box1{
font-size: 50px;
text-decoration: overline;
}
.div-class-box2{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
（26）京东导航-基本样式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-outer">
<div class="div-class-topBar .clearFix">
<!--左侧菜单-->
<div class="div-class-location clearFix">
<div class="fas fa-map-marked-alt"></div>
<div class="div-class-currentCity">
<a href="javascript:;"> 北京</a>
</div>
</div>
<!--右侧菜单-->
<ul class="ul-class-shortCut clearFix">
<li>
<a href="javascript:;">你好,请登录</a>
</li>
<!--分割线-->
<li class="li-class-line"></li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">我的京东</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">京东会员</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">企业采购</a>
<div class="fas fa-angle-double-down"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">客户服务</a>
<div class="fas fa-angle-double-down"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">网站导航</a>
<div class="fas fa-angle-double-down"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">手机京东</a>
<div class="div-class-shape"></div>
</li>
</ul>
</div>
</div>
</body>
<link rel="stylesheet" href="./Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.京东导航条-基本样式
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
/*解决高度塌陷的类*/
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
.div-class-outer{
width: 100%;
background-color: gray;
/*height: 30px;*/
line-height: 30px;
border-bottom: 1px solid #ddd;
float: left;
}
.div-class-topBar{
width: 1190px;
margin: 0 auto;
/*background-color: red;*/
}
/*设置location*/
.div-class-location{
float: left;
}
.ul-class-shortCut{
float: right;
}
.ul-class-shortCut li{
float: left;
margin-left: 20px;
list-style-type: none;
}
.div-class-topBar a,
.div-class-topBar div{
text-decoration: none;
}
.div-class-topBar a{
color: whitesmoke;
}
.div-class-location .fas{
color: red;
/* float: left;*/
}
.div-class-currentCity{
float: right;
}
.div-class-topBar a:hover{
color: red;
}
.ul-class-shortCut .li-class-line{
width: 1px;
height: 10px;
background-color: black;
margin: 11px 12px;
}
（27）京东导航-下拉框
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-outer">
<div class="div-class-topBar .clearFix">
<!--左侧菜单-->
<div class="div-class-location clearFix">
<div class="fas fa-map-marked-alt"></div>
<div class="div-class-currentCity">
<a href="javascript:;"> 北京</a>
</div>
<div class="div-class-cityList">
</div>
</div>
<!--右侧菜单-->
<ul class="ul-class-shortCut clearFix">
<li>
<a href="javascript:;">你好,请登录</a>
</li>
<!--分割线-->
<li class="li-class-line"></li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">我的京东</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">京东会员</a>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">企业采购</a>
<div class="fas fa-angle-double-down"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">客户服务</a>
<div class="fas fa-angle-double-down"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">网站导航</a>
<div class="fas fa-angle-double-down"></div>
</li>
<li class="li-class-line"></li>
<li>
<a href="javascript:;">手机京东</a>
<div class="div-class-shape"></div>
</li>
</ul>
</div>
</div>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.京东导航条-基本样式
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
/*解决高度塌陷的类*/
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
.div-class-outer{
width: 100%;
background-color: gray;
/*height: 30px;*/
line-height: 30px;
border-bottom: 1px solid #ddd;
float: left;
}
.div-class-topBar{
width: 1190px;
margin: 0 auto;
/*background-color: red;*/
}
/*设置location*/
.div-class-location{
float: left;
}
.ul-class-shortCut{
float: right;
}
.ul-class-shortCut li{
float: left;
margin-left: 20px;
list-style-type: none;
}
.div-class-topBar a,
.div-class-topBar div{
text-decoration: none;
}
.div-class-topBar a{
color: whitesmoke;
}
.div-class-location .fas{
color: red;
/* float: left;*/
}
/*1.position是为了不让其占页面位置,撑开背景颜色
*/
.div-class-location .div-class-cityList{
width: 16%;
height: 430px;
background-color: white;
border: 1px solid rgb(204,204,204);
display: none;
/*设置绝对定位使其不占用页面的位置*/
position: absolute;
box-shadow: 0 0px 2px rgba(0,0,0,.3);
}
/*1.绑定给父元素,给到后代元素显示
*/
.div-class-location:hover .div-class-cityList{
display: block;
}
.div-class-currentCity{
float: right;
padding: 0 10px;
z-index: 9999;
}
.div-class-location:hover .div-class-currentCity{
background-color: orange;
border: 1px solid rgb(204,204,204);
border-bottom: none;
}
.div-class-topBar a:hover{
color: red;
}
.ul-class-shortCut .li-class-line{
width: 1px;
height: 10px;
background-color: black;
margin: 11px 12px;
}
（28）PS的安装
Adobe_PhotoShop安装，用来选色和设计网页。
（29）背景一
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
</div>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.背景图片,会自动在元素里平铺,给它铺满
2.如果背景图片大于背景元素,则背景无法显示。
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
/*解决高度塌陷的类*/
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
.div-class-box1{
width: 500px;
height: 500px;
background-image: url("../server/1.jpg");
/*沿着X轴平铺repeat-x,
不平铺 no-repeat
background-repeat: no-repeat;*/
/*背景图片居中
background-position: center center;*/
}
（30）背景二
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
</div>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.背景图片,会自动在元素里平铺,给它铺满
2.如果背景图片大于背景元素,则背景无法显示。
3.background-clip 设置背景的范围
(1)border-box 默认值,背景会出现在边框
(2)padding-box 不会出现在边框,只出现在内容区和内边距
(3)背景只出现在内容区
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
/*解决高度塌陷的类*/
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
.div-class-box1{
width: 500px;
height: 500px;
background-color: #0086b3;
/* background-image: url("../server/1.jpg");*/
/*沿着X轴平铺repeat-x,
不平铺 no-repeat
background-repeat: no-repeat;*/
/*背景图片居中
background-position: center center;*/
border: 5px solid rebeccapurple;
padding: 10px;
background-clip: content-box;
/*设置背景图片的大小*/
/*background-size: 200px 200px;*/
/*可以固定背景图片*/
/*background-attachment: fixed;*/
/*background背景相关的简写方式*/
/*background: #0086b3 center center no-repeat;*/
}
（31）背景练习
根据想要的效果截图一个像素，然后以这一个像素为背景进行平铺，就可以达到想要的效果。
（32）背景练习二
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<a href="javascript:;"></a>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.背景练习二
2.浏览器加载图片时,用到的时候才会加载
3.link一开始会加载,而hover与active会在触发的时候才会
加载,而加载需要时间,所以第一次会出现一闪的情况。
怎么解决这个问题呢?
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
a:link{
display: block;
width: 315px;
height: 90px;
background-image: url("../server/4.jpg");
}
a:hover{
display: block;
width: 315px;
height: 90px;
background-image: url("../server/5.jpg");
}
a:active{
display: block;
width: 315px;
height: 90px;
background-image: url("../server/6.jpg");
}
（33）雪碧图
把三个图片合并为一张。
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<a href="javascript:;"></a>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.解决图片闪烁问题可以将多个小图片保存到一个大图片中,
可以有效的避免闪烁问题。然后通过调整background-position
来显示响应的图片。这个技术在网页中应用十分广泛,被称为
CSS-精灵,这种图我们称为雪碧图。
2.雪碧图的使用步骤
(1)先确定要使用的图标
(2)测量图标的大小
(3)根据测量结果来创建一个元素
(4)将雪碧图设置为元素的背景图片
(5)设置一个偏移量以显示正确的图片
3.雪碧图的特点
(1)一次性将多个图片加载进页面,降低请求的次数,加快返回速度,
提升用户体验。
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
a:link{
display: block;
width: 170px;
height: 50px;
background-image: url("../server/7.jpg");
}
a:hover{
background-position:-170px 0 ;
}
a:active{
background-position:-340px 0 ;
}
（34）线性渐变
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
</div>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.线性渐变,可以设置一些复杂的背景颜色
(1)渐变是图片,需要通过background-image来设置
(2)linear-gradient沿着一条直线发生变化
(3)红色开头,黄色结尾,中间是过渡区域
(4)可以指定渐变的方向 to top to left to right
deg表示度数,turn表示圈
(5)渐变可以指定多个颜色,多个颜色默认情况下平均分布,也
可以手动的指定渐变的分布情况。可以在red 后跟 50px;
这样颜色就会先分布50px的红色,然后才开始过渡。
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
.div-class-box1{
width: 200px;
height: 200px;
/*background-image: linear-gradient(to right,red,yellow);*/
background-image: repeating-linear-gradient(red 50px,yellow 100px);
}
（35）放射渐变
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-box1">
</div>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.放射渐变background-image: radial-gradient(red,yellow);
2.放射性的效果,由中间向四周。
3.默认情况下圆心是根据元素的形状来计算的。
4.指定径向渐变的大小
5.大小 at位置,颜色 位置,颜色 位置
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
.div-class-box1{
width: 200px;
height: 200px;
background-image: radial-gradient(100px 100px,red,yellow);
}
（36）电影卡片练习
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<div class="div-class-outer">
<!--创建图片容器-->
<div class="div-class-imgWrapper clearFix">
<img src="./server/film.jpg">
<div class="div-class-info">
<h2 class="h2-class-title">
<i class="fas fa-map-marked-alt"></i>
动画电影
</h2>
<h3 class="h3-class-kinds">动画</h3>
<p class="p-class-introduce">
这是一部非常好看的电影,如果有时间请务必一看...
</p>
</div>
<div class="div-class-score">
<ul class="ul-class-star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
</ul>
</div>
<ul class="div-class-share">
<li class="fab fa-weibo"></li>
</ul>
</div>
</div>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.电影卡片练习
*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
.div-class-outer{
width: 240px;
margin: 100px auto;
/*设置阴影效果*/
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
/*.div-class-imgWrapper{
border: 1px red solid;
}*/
/*设置图片*/
.div-class-imgWrapper img{
width: 100%;
vertical-align: bottom;
}
/*设置标题*/
.div-class-info{
padding: 0 18px;
}
.div-class-info .h2-class-title{
color: #666666;
font-size: 18px;
margin: 13px 0 15px 0;
}
.div-class-info .h3-class-kinds{
color: #969896;
font-size: 14px;
}
/*设置简介的信息*/
.div-class-info .p-class-introduce{
margin-left: 0px;
margin-top: 20px;
line-height: 20px;
}
/*设置下边的内容*/
.ul-class-star{
height: 46px;
line-height: 46px;
border-top: 1px solid #e9e9e9;
}
.div-class-score{
float: left;
}
.div-class-share{
float: right;
}
.div-class-score .light{
color: #669900;
}
5.HTML剩余
（1）表格的概述
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td rowspan="2">单元格4</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td colspan="2">单元格3</td>
</tr>
</table>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
1.表格:课程表、人名单、成绩单...
2.在网页里我们可以通过table标签来创建一个表格
3.colspan横向合并
4.rowspan纵向合并
（2）长表格
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<table border="1">
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
<tr>
<td>2021</td>
<td>200000</td>
<td>100000</td>
<td>100000</td>
</tr>
</table>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.长表格,可以将一个表格分为三个部分
thead/tbody/tfoot/。
2.th表示表格头部的单元格,会自动加粗
*/
（3）表格的样式
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>110161</td>
<td>刘新雷</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>110162</td>
<td>刘亦菲</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>110163</td>
<td>杨幂</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>110164</td>
<td>佟丽娅</td>
<td>女</td>
<td>22</td>
</tr>
</table>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
/*
1.表格的样式
2.td是默认垂直居中的,可以通过vertical-align来指定
*/
table{
width: 50%;
border: 1px solid black;
/* border-spacing: 0px;*/
/*指定单线的边框*/
border-collapse: collapse;
margin: 0 auto;
}
td,th{
border: 1px solid black;
text-align: center;
}
tr:nth-child(2n+1){
background-color: gray;
}
/*
tr:first-child{
background-color: red;
}
*/
/*------------------------------*/
/*默认的代码*/
*{
margin: 0px;
padding: 0px;
font-size: 14px;
}
.clearFix::before,
.clearFix::after{
content: '';
display: table;
clear: both;
}
（4）表单
<!--这里就是表示HTML5-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!--http-equiv设置http协议-->
<meta http-equiv="Content-Type"
content="application/json;
charset=UTF-8">
<title>HTML+CSS</title>
</head>
<body>
<form action="/bind">
<!--添加表单项
注意:文本要提交到服务器,必须指定一个name的值-->
<input type="text" placeholder="文本" name="name"/>
<br><br>
<input type="password" name="password" />
<br><br>
<!--checked可以设置默认选中-->
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<br><br>
<!--多选框-->
<input type="checkbox" name="love" value="apple"/>apple
<input type="checkbox" name="love" value="orange"/>orange
<input type="checkbox" name="love" value="tomato"/>tomato
<br><br>
<select name="downCheck">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<input type="submit" value="提交" />
</form>
</body>
<link rel="stylesheet" href="./res/Controller.css" />
<link rel="stylesheet" href="./res/css/all.css"/>
<script>
</script>
</html>
上一篇： 基于ssm基于HTM
下一篇： 实操——使用uplo