WEB开发 HTMLCSS基础
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
HTML,CSS,JavaScript分别是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性
语言，是一门非常容易入门的语言。 CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。 JavaScript，是一门脚本语言。 HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为
HTML
HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。
1，HTML简介
HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
html是一种标记语言
标记语言既描述了文档本身所要展现的信息，也描述了文档的结构和各部分的作用。而HTML则是世界通用的、用于描述一个网页的信息的标记语言，我们使用的浏览器具有将HTML文档渲染并展示给用户的功能（当你访问知乎网站的时候，实际上你获得了一份由知乎提供给你的HTML文档。浏览器将根据HTML文档渲染出你看到的网页）。
2，开发环境
常用的HTML编辑器：Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。
文件后缀名规范：
文件后缀一般使用.html或.htm。两者均是静态网页后缀名，没有本质上的区别。
3，HTML标签
HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的。
何为标签？
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如<html>、<p>都是标签。
2. HTML中标签**通常**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。
3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。
4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。
4，HTML文档结构
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
代码解释：
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
1，<html></html> 称为根标签，所有的网页标签都在<html></html>中。
2，<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。
3，在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。
5，HTML注释
html中注释的格式：
<!--这里是注释的内容-->
HTML注释中可以直接使用回车换行，并且习惯用注释的标签把HTML代码包裹起来，但是不支持嵌套，也不能写在HTML标签中。
6，head标签
<!DOCTYPE html> <!-- 表示可以进行翻译操作,这里设置默认为翻译成英文 lang="en" --> <html lang="en"> <head> <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） --> <!-- 文档的标题 --> <title>鸣人</title> <!-- 常用两个属性 http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 --> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 2秒之后 重定向 到博客园的网站 --> <!--<meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/wuqiuming/"/>--> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 为了我们的SEO优化(搜索引擎优化) 下面这两句 要写--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="鸣人"> <!-- 定义我们的网站图标 --> <link rel="icon" href="./fav.ico"> <!-- 引入外部样式表 --> <link rel="stylesheet" type="text/css" href="./index.css"> <!-- 定义内部样式表 --> <style type="text/css"> </style> <!-- 定义内部脚本文件 --> <script type="text/javascript"> </script> <script src="./index.js"></script> </head> <body> </body> </html>
head标签的主要内容和作用：
文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。
以下标签是可以用在head标签中的：
<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
①title标签
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
②meta标签
Meta标签介绍：
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
常用的meta标签：
1，http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2，name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="鸣人">
③其他标签
<!--标题--> <title>鸣人</title> <!--icon图标（网站的图标）--> <link rel="icon" href="fav.ico"> <!--定义内部样式表--> <style></style> <!--引入外部样式表文件--> <link rel="stylesheet" href="mystyle.css"> <!--定义JavaScript代码或引入JavaScript文件--> <script src="myscript.js"></script>
7，body标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>常用标签一</title> </head> <body> 带你逐步提升技能 丰富多彩的体验 <!--class显示类，比如段落p1，标注了class p1，都是属于这个区域--> <div class="p1"> <p style="height: 500px" id="p1">顶部</p> </div> <!-- body相关标签 --> <!-- heading :标题 h1~h6 没有h7标题--> <div class="heading"> 对我来说<h3>我热爱python</h3>，丰富多彩的体验 <!-- 块级元素 ： 1.独占一行 2.可以设置宽高--> <h1>我可是很帅的</h1><h2>我可是很帅的</h2> <h3>我可是很帅的</h3> <h4>我可是很帅的</h4> <h5>我可是很帅的</h5> <h6>我可是很帅的</h6> <h7>我可是很帅的</h7> </div> <div class="p1"> <!-- 段落标签 --> <p><strong>鸣人</strong>好好学习天天向上<br>金融分析,<span>人工智能</span>这些都是很实用的技术</p> <hr> <p>韩流喊楼 ,<s>金融分析</s>,的重要性</p> </div> <div class="anchor"> <!-- a标签属于行内标签： 在一行内显示 设置宽高 不起作用--> <!-- _self:默认值：在当前网站打开资源 _blank:在新的网站打开资源 title: 鼠标移上去显示的提示--> <a href="https://www.cnblogs.com/wuqiuming/" target="_blank" title="鸣人二号">鸣人</a> <a href="./a.zip">下载压缩包</a> <a href="mailto:wqmcr@foxmail.com" style=" 1000px;height: 100px">联系我们</a> <!-- 返回页面顶部的内容 --> <a href="#">跳转到顶部</a> <!-- 返回每个id --> <a href="#p1">跳转顶部的段落标签</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了 --> <a href="javascript:alert(123344)">内容</a> <a href="javascript:;">内容</a> </div> <div class="lists"> <!-- 无序列表 --> <ul type="disc" > <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ul> <!-- ol有序列表 --> <ol style="list-style:none"> <li>我的账户></li> <li>我的订单></li> <li>我的优惠券></li> <li>我的收藏></li> <li>退出></li> </ol> </div> a <div class="image"> <!-- 1.可设宽高 2.在一行内显示 它叫行内块标签 1. alt表示图片加载失败显示的内容 2，不标明width和heigth则显示默认宽高度--> <img src="./homesmall.png" alt="python的图片" style=" 200px;height: 200px"> <img src="./homesmall2.png" alt="python2的图片" > </div> <!-- 三种： 1.块级元素（h1标签，） 独占一行，可设宽高 如果不设置宽度 浏览器的宽度 2.行内元素(a标签，) 在一行内展示 不能设置宽高 它的宽高根据内容去填充 3.行内块元素（img标签，） 在一行内展示 可设宽高 展示两张图片 独占一行 鼠标移上去显示小手的状态 --> <div class="anchor"> <a href="https://www.cnblogs.com/wuqiuming/"><img src="./homesmall2.png" alt="python2的图片" style=" 200px;height: 200px"></a> <a href="https://www.cnblogs.com/wuqiuming/"><img src="./homesmall2.png" alt="python2的图片" style=" 200px;height: 200px"></a> </div> </body> </html>
想要在网页上展示出来的内容一定要放在body标签中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鸣人</title>
</head>
<body>
<h1>海燕</h1>
<p>在苍茫的大海上，</p>
<p>狂风卷集着乌云。</p>
<p>在乌云和大海之间，</p>
<p>海燕像黑色的闪电，</p>
<p>在高傲地飞翔。</p>
</body>
</html>
①h1-h6 标题标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。
h1~h6标签的默认样式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鸣人</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
文本样式标签
主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...
1. <b></b>：加粗
2. <i></i>：斜体
3. <u></u>：下划线
4. <s></s>：删除线
5. <sup></sup>：上标
6. <sub></sub>：下标
7.<em></em>:弱强调，斜体表示
8.<strong></strong>:更强烈一点的强调，加粗
②p 段落标签
<p>,paragraph的简写。定义段落
<body>
<p>程序员都好帅</p>
<p>比如像我这样的</p>
</body>
③a 超链接标签
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像
<!DOCTYPE html>
<html>
<head>
<!-- 声明头部的元信息 对我们文档 规定编码格式 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 包含头部的信息 是一个容器 包含 style title meta script link等 -->
</head>
<body>
<!-- a链接 超链接
target:_blank 在新的网站打开链接的资源地址
_self 在当前网站打开链接的资源地址
title: 鼠标悬停时显示的标题
-->
<a href="http://www.baidu.com" target="_blank" title="baidu">百度</a>
<a href="a.zip">下载包</a>
<a href="mailto:wqmcr@foxmail.com">联系我们</a>
<!-- 返回页面顶部的内容 -->
<a href="#">跳转到顶部</a>
<!-- 返回某个id -->
<a href="#p1">跳转到p1</a>
<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:;
表示什么都不执行，这样点击<a>时就没有任何反应。 -->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</body>
</html>
target:_blank 在新的网站打开链接的资源地址
target：_self 在当前网站打开链接的资源地址
title: 表示鼠标悬停时显示的标题
链接其他表现形式：
- 目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)
- 电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：
<a href="mailto:wqmcr@foxmail.com">联系我们</a> - 返回页面顶部的空链接或具体id值的标签 例如：
<a href="#">内容</a>或<a href="#id值">内容</a> - javascript:是表示在触发
<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a> - javascript:;表示什么都不执行，这样点击
<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a>
④ul，ol 列表标签
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容。
<ul>:unordered lists的缩写 无序列表
<ol>:ordered listsde的缩写 有序列表
<!-- 无序列表 type可以定义无序列表的样式-->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定义有序列表的样式 -->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
ul 标签的属性：（无序）
type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
ol 标签的属性：（有序）
type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
列表标识的起始编号
- 默认为1
⑤div 盒子标签
<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>常用标签一</title>
</head>
<body>
<div id="wrap">
<div class="para">
<p style="height: 1000px" id="p1">段落</p>
</div>
<div class="anchor">
我是普通的文本
<h1>
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下载包</a>
<a href="mailto:wqmcr@foxmail.com">联系我们</a>
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到p1</a>
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
</h1>
</div>
<!-- <h2>百度</h2>
<h3>百度</h3>
<h4>百度</h4>
<h5>百度</h4>
<h6>百度</h6> -->
<div class="para">
<!-- 定义段落 通常指文章一段内容 -->
<p>我可是很帅的!</p>
<p>我可是很帅的!</p>
<p>我可是很帅的!</p>
</div>
<div class="lists">
<!-- 无序列表 -->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代码可以下面的层次结构
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘
⑥<img/> 图片标签
一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意：
1，src设置的图片地址可以是本地的地址也可以是一个网络地址。
2，图片的格式可以是png、jpg和gif。
3，alt属性的值会在图片加载失败时显示在网页上。
4，还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
<div>
<span>与行内元素展示的标签<span>
<span>与行内元素展示的标签<span>
<img src="./machine-right.png" alt="金融量化分析" style="200px;height:200px">
<img src="./finance-right.png" alt="人工智能实战" style=" 200px;height: 200px">
</div>
5，浏览器查看效果：行内块元素
6，与行内元素在一行内显示
7，可以设置宽度和高度
8，span标签可以单独摘出某块内容，结合css设置相应的样式
<p>我是最帅的<span>金融分析</span>,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p>
⑦其他标签
换行标签 <br>
<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
分割线 <hr>
<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容
特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。
举个例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鸣人</title>
</head>
<body>
<p>我是最帅的
一个
很帅的 一个 宝宝！</p>
</body>
</html>
上面代码在浏览器上面显示的效果：
所以HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰，仅此而已。
⑧特殊字符
要想输入空格，需要用特殊符号 -- 。
常用的特殊字符：
⑨标签分类
1.块状元素（h1标签等） 独占一行，可设宽高 如果不设置宽度 浏览器的宽度
2.行内元素(a标签，i 加粗等) 在一行内展示 不能设置宽高 它的宽高根据内容去填充
3.行内块状元素（img标签等） 在一行内展示 可设宽高
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input>
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签分类</title> </head> <body> <div class="wrapper"> <!-- 块级元素 ：div p h1~h6 ol ul table form li 1.独占一行 2.可以设置宽度和高度，如果设置了宽度和高度，则就是当前的宽高，如果宽度和高度没有设置，宽度是父盒子的宽度，高度根据内容填充 --> <div class="left"> 这是python的战场 <div>这是我的区域 <!-- <div style=" 500px;height: 100px">这是我的爱好</div> --> <ul> <li> <h2>抽烟</h2> </li> <li> <ol> <li>喝酒</li> <li>烫头</li> </ol> </li> </ul> </div> </div> <div class="right"> <!-- a span br i em strong label 行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充 --> <a href="#" style=" 200px;height: 100px">百度</a> <a href="#">飞机场</a> <span style=" 100px;height: 200px">一些文本</span> <span>一些文本</span> </div> <div class="inline-block"> <!-- 行内块 : 1.在一行内展示 2.可设置宽高 --> <img src="./homesmall.png" alt="一张图片"> <input type="text" name="username" style=" 200px;height: 50px"> </div> <!-- 标签嵌套规则 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1~h6 p --> </div> </body> </html>
⑩标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌
块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>
8，body标签-table
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
table-表格 thead-表格头(tr, th) tbody-表格主体(tr, td) tfoot-表格底部(tr, td) tr-表格行 th-表格头里的单元格（默认加粗并且居中显示） td-表格主体里的单元格 rowspan 合并行(竖着合并) colspan 合并列(横着合并)
主题结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格 border：边框，cellspacing：单元格间隙--> <table border="1" cellspacing="0"> <!-- 表格头 --> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 表格主体 --> <tbody> <!-- 表格主体的每一行 --> <tr> <td rowspan="3">上午</td> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </body> </html>
效果图
9，body标签-form
<!DOCTYPE html> <!--<html lang="en">--> <head> <meta charset="UTF-8"> <title>表单控件</title> </head> <body> <div class="form"> <!-- form标签是一个块级元素 被提交 --> <form action="https://www.baidu.com" method="get"> <p> <!-- label标签行内元素 input是行内块元素 name属性就是网址中&后那个key对象--> <label for='user'>用户名:</label> <input type="text" name="username" id="user" placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <!-- 单选框 checked会被默认选中，产生互斥的效果 name值要相同--> <p> 用户性别： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!-- 复选框 --> <p> 用户的爱好: <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="乐">乐 </p> <p> <!-- 文件上传 --> <input type="file" name="textFile"> </p> <p> <!-- 文本域 --> 自我介绍： <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea> </p> <p> <!-- 下拉列表 --> <select name="sel" size="3" multiple=""> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山东">山东</option> <option value="福建">福建</option> </select> </p> <p> <!-- 显示普通的按钮 --> <input type="button" name="btn" value="提交" disabled="disabled"> <!-- 重置按钮 --> <input type="reset" name=""> <!-- 提交form表单使用 type=submit按钮 --> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按钮</button> </div> </body> </html>
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
代码集合效果图
1，表单的作用
表单用于显示、手机信息，并将信息提交给服务器
语法
<form>允许出现表单控件</form>
2，表单的属性 见下图：
3，表单控件分类 见下图
CSS
1，css简介
①css的出现解决了下面两个问题：
1，将html页面的内容与样式分离
2，提高web开发的工作效率
②何为css
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
③css的优势
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使页面布局更加灵活
4.减少网页的代码量，增加网页浏览器速度，节省网络带宽
5.运用独立页面的css,有利于网页被搜索引擎收录
④如何使用css？
我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。
⑤css语法
声明+选择器
css注释：/*这是注释*/
2，css引入方式
- 内接样式
- 行内样式表
- 外部样式表
- 链接式
- 导入式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*写我们的css代码*/ /*选择器 标签选择器 共性*/ span{ color: pink; } </style> <!-- <style type="text/css"> @import url('./index.css'); </style> --> <!-- 链接式 --> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 1.行内样式 2.内接样式 3.外接样式 3.1链接式 3.2导入式 --> <!--行内样式--> <div> <p style="color: red">我是一个段落</p> </div> <!--内接样式--> <div> <div> <span>我是另一个段落</span> <span>我是另一个段落</span> <span>我是另一个段落</span> <a href="#">陌上花开</a> </div> </div> </body> </html>
内接样式
style标签
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>
行内样式
<!doctype html> <html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">这是一个p标签！</p> </body> </html>
外联样式表-链接式（最常用）
link标签
index.css
p {
color: green;
}
然后在HTML文件中通过link标签引入：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>
外联样式表-@import url()方式 导入式
了解即可。
index.css
@import url(other.css)
注意：
@import url()必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
3，css的选择器
基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的选择器</title> <style type="text/css"> body{ color:gray; font-size: 12px; } /*标签选择器*/ /*p{ color: red; font-size: 20px; } span{ color: yellow; }*/ #box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; } .title{ color: yellowgreen; font-size: 12px; } .alex{ color: red; } .active{ color: yellow; } </style> </head> <body> <!-- css的选择器：1.基本选择器 2.高级选择器 1.标签选择器 标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等 不管标签藏的多深，都能选中 选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ 2.id选择器 # 选中id 同一个页面中id不能重复。 任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA 3.类选择器 1.所谓类 就是class，表示符号为.，class与id非常相似 任何的标签都可以加类 但是类是可以重复 归类 2.同一个标签中可以携带多个类，多个类中间用空格隔开，且当有相同设置时，层叠后只能看到后面的那个 类的使用 能够决定前端工程师的css水平到底有多牛逼？ 一定要有”公共类“的概念 总结： 1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式 2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用 玩好了类 就等于玩好了css中的1/2 到底使用id还是用class？ 答案：尽可能的用class。除非一些特殊情况可以用id 原因：id一般是用在js的。也就是说 js是通过id来获取到标签 --> <div> <p>我是一个段落</p> <ul> <li> <p>1</p> <span> 哈哈哈 </span> </li> </ul> <p>路飞</p> </div> <div> <div> <div> <div> <div> <p>我是另一个段落</p> </div> </div> </div> </div> </div> <div id="box"> <span id="s1">123</span> <span id="s2">234</span> </div> <div class="box2"> <h3 id="h" class="title xiaoma egon alex">我是一个三级标题</h3> <h3>我是一个三级标题</h3> <h3 class="title">我是一个三级标题</h3> <h3>我是一个三级标题</h3> <h3>我是一个三级标题</h3> </div> </body> </html>
①标签选择器
顾名思义就是通过标签名来选择元素
特点：
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
如下将p标签中的字体变为20px，红色
p{
color: red;
font-size: 20px;
}
②id选择器（少用，一般用在js中较多）
通过元素的id值选择元素
特点：
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA
<head>
#s1{
color: red;
}
</head>
<body>
<span id="s1">123</span>
</body>
③类选择器（重点，常用）
通过样式类选择元素
特点：
1.所谓类 就是class，表示符号为.，class与id非常相似 任何的标签都可以加类但是类是可以重复 归类
2.同一个标签中可以携带多个类，多个类中间用空格隔开，且当有相同设置时，层叠后只能看到后面的那个
将所有含.c1的元素设置字体颜色为红色。
.c1 {
color: red;
}
使用style时，尽可能的用class，除非一些特殊情况可以用id。id一般时用在js中的，也就是说时用过id来获取标签的。
高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级选择器</title> <style type="text/css"> /*后代选择器 在css中使用非常频繁*/ /*div p{ color: red; } div div p{ color: yellow; } .container div p{ color: green; }*/ /*子代选择器*/ .container>p{ color: yellowgreen; } /*交集选择器*/ h3{ width:300px; color: red; } .active{ font-size: 30px; } h3.active{ background-color: yellow; } /*并集选择器 （组合） 设置多个标签中的统一样式*/ a,h4{ color: #666; font-size: 20px; text-decoration: none; } /* * 通配符选择器 选择所有标签 */ /* 性能有点差*/ html,body,div,p,span,a{ color: #6bff09; } </style> </head> <body> <div class="container"> <p>我是另一个段落</p> <div> <p>我是个段落</p> <a href="#">luffy</a> </div> <p>我是另外一个段落2</p> <ul> <li class="item"> <h3 class="active">我是一个H3</h3> <h4>我是一个h4标题</h4> </li> <li> <h4>我是一个h4标题01</h4> <a href="#">BAT</a> </li> </ul> </div> </body> </html>
①后代选择器
<head>
div p{
color: red;
}
div div p{
color: yellow;
}
.container div p{
color: green;
}
</head>
<body>
<div>
<p>我是另一个段落</p>
<div>
<p>我是个段落</p>
</div>
</p>
</div>
<body>
②子代选择器
<head>
.container>p{
color: yellowgreen;
}
</head>
<body>
<div class="container">
<p>我是另一个段落</p>
<div>
<p>我是个段落</p>
</div>
<p>我是另外一个段落2</p>
</div>
</body>
/*第一个div下面的p，两个我是另一个段落以及我是另外一个段落2回改变颜色，我是个段落不会改变颜色*/
③交集选择器
<head>
h3{
300px;
color: red;
}
.active{
font-size: 30px;
}
h3.active{
background-color: yellow;
}
</head>
<body>
<div>
<ul>
<li class="item">
<h3 class="active">我是一个H3</h3>
<h4>我是一个h4标题</h4>
</li>
</ul>
</div>
</body>
④并集选择器
<head>
a,h4{
color: #666;
font-size: 20px;
text-decoration: none;
}
</head>
<body>
<div>
<ul>
<li class="item">
<h4>我是一个h4标题</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
⑤通配符选择器
通配符选择器，选择所有标签，但是性能有点差
如下，将所有的未选择字体颜色的字体设置为 #6bff09 色号。
*{
color: #6bff09;
}
⑥属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> label[for]{ color: red; font-size: 20px; } label[for='pwd']{ color: yellow; } /*以...开头*/ label[for^='vip']{ font-size: 30px; } /*以...结尾*/ label[for$='p2']{ font-size: 20px; } label[for*='ser']{ color: green; } input[type='text']{ background-color: purple; } </style> </head> <body> <!-- 属性选择器 通常在 表单控件中 使用比较频繁--> <div class="box"> <form action=""> <label for="user">用户名：</label> <input type="text" name="" id="user"> <label for="pwd">密码：</label> <label for="vip1">vip1</label> <label for="vip2">vip2</label> <label for="user2">用户名2：</label> <label for="user3">用户名3：</label> </form> </div> </body> </html>
属性选择器 通常在 表单控件中 使用比较频繁
除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素。
1，根据属性查找
label[title] {
color: red;
}
2，根据属性和值查找
找到所有title属性等于hello的元素：
label[title="hello"] {
color: red;
}
找到所有title属性以hello开头的元素：
label[title^="hello"] {
color: red;
}
找到所有title属性以hello结尾的元素：
label[title$="hello"] {
color: red;
}
找到所有title属性中包含（字符串包含）hello的元素：
label[title*="hello"] {
color: red;
}
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：
label[title~="hello"] {
color: red;
}
表单常用
input[type="text"] {
backgroundcolor: red;
}
⑦分组选择器
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,p {
color: red;
}
为div标签和p标签统一设置字体为红色的样式。
通常，我们会分两行来写，更清晰:
div,
p {
color: red;
}
伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*'爱恨原则' love hate*/ /*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: #093dff; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标点住的时候a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; } /*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示选中所有 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色 隔行换色*/ div ul li:nth-child(5n+1){ font-size: 50px; color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="#">张三</a> </li> <li class="item2"> 2 <a href="#">李四</a> </li> <li class="item3"> 3 <a href="#">王八</a> </li> <li class="item4"> 4 <a href="#">赵六</a> </li> <li class="item4"> 5 <a href="#">赵六</a> </li> <li class="item4"> 6 <a href="#">赵六</a> </li> <li class="item4"> 7 <a href="#">赵六</a> </li> <li class="item4"> 8 <a href="#">赵六</a> </li> <li class="item4"> 9 <a href="#">赵六</a> </li> <li class="item4"> 10 <a href="#">赵六</a> </li> </ul> </div> </body> </html>
常见的几种伪类选择器（‘爱恨原则’ love hate）
没有访问的超链接a标签样式：
a:link {
color: blue;
}
访问过的超链接a标签样式：
a:visited {
color: gray;
}
鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
鼠标点击瞬间的样式：
a:active {
color: green;
}
input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
hover选择器
hover选择器在网页中非常好用，如果是我鼠标悬浮的是父盒子，想让父盒子的子盒子显示出来，这种效果其实也可以用hover选择器。但是我们要将hover选择器和后代选择器结合起来一起用,下面是个例子，大家copy看效果，瞬间就明白,鼠标悬浮alex上 会显示一张图片。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{ list-style: none; } ul li{ position: relative; } ul li img{ display: none; position: absolute; top: -16px; left: 36px; } ul li:hover img{ display: block; } </style> </head> <body> <ul> <li> alex <img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" > </li> </ul> </body> </html>
伪类选择器：nth-child用法
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示选中所有 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色 这里为隔4换1，要求插入数字为所想数字比所想数字大于1即可*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
去除下划线
text-decoration: none;
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ span:before{ content:'qiuma'; } /*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ span:after{ content:'&'; color: red; font-size: 40px; } </style> </head> <body> <p> 我是<span>帅哥 </span>一个段落 </p> </body> </html>
first-letter
用于为文本的首字母设置特殊样式。
例如：
p:first-letter {
font-size: 48px;
}
before
用于在元素的内容前面插入新内容。
例如：
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*。
after
用于在元素的内容后面插入新内容。
例如：
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。
4，css的继承性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性</title> <style type="text/css"> .father{ font-size: 30px; background-color: green; } .child{ color: purple; } </style> </head> <body> <!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承 有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素 像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承 --> <div class="father" id="egon"> <div class="child"> <p>qiuma</p> </div> </div> <p>小球</p> </body> </html>
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素
像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
5，css的层叠性（权重比较）
层叠性： 权重大的标签覆盖掉了权重小的标签。
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？
如果是通过继承过来的属性，则权重为0。确定不是继承而是选中（选中内部标签），就可以比较权重的大小了。
权重大小通过style标签内id，class，标签的数量的表示。id > class > 标签
当权重一样的时候 是以后设置的属性为准。 前提权重一样 ，后来者居上
继承来的属性 权重为0
总结：
1.先看标签元素有没有被选中，先看选中了的，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
3，如果都是没有被选中的，那就比较没有被选中的里面的权重大小了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*1 1 1 */ /*#box2 .wrap3 p{ color: yellow; }*/ /*1 1 1*/ /*#box1 .wrap2 p{ color: red; }*/ /* 0*/ /*继承来的*/ #box1 #box2 .wrap3{ color: red; } .wrap1 #box2 .wrap3{ color: green; } /*选中来的*/ /*1 1 1*/ /*#box2 .wrap3 p{ color: green; }*/ </style> </head> <body> <!-- 当权重一样的时候 是以后设置的属性为准。 前提权重一样 ，后来者居上 继承来的属性 权重为0 总结： 1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上 2.如果没有被选中标签元素，权重为0。 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性 --> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
还有一种不讲道理的!important方式来强制让样式生效，但是不推荐使用。因为大量使用!important的代码是无法维护的。
!important:设置权重为无限大 ，!important 不影响继承来的权重，只影响选中的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: red !important; font-size: 30px; } .spe1{ color: yellow ; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color: red; } .list{ color: purple !important; } </style> </head> <body> <!-- ！important:设置权重为无限大 !important 不影响继承来的权重，只影响选中的元素 --> <div> <p class="spe1 spe2">我是什么颜色</p> <p class="spe2 spe1">我是什么颜色</p> </div> <div class="list"> <ul> <li> 我是一个li标签 </li> </ul> </div> </body> </html>
6，盒模型
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
width：内容的宽度，不是整个盒子真实的宽度
height: 内容的高度，不是整个盒子真实的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
盒模型计算：
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
①padding
边框到内容之间的距离。
padding有四个方向，可以分别进行描述。
padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
也就是说background-color这个属性将填充所有的border以内的区域
对于一般情况可以直接写padding: 30px;
1、写小属性,分别设置不同方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
2、写综合属性，用空格隔开
/* 上 右 下 左 */ padding: 20px 30px 40px 50px ; /* 上 左右 下 */ padding: 20px 30px 40px; /* 上下 左右 */ padding: 20px 30px; /* 上下左右 */ padding: 20px;
3，一些标签有默认的padding
比如ul标签，有默认的padding-left值。
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
简单一点，直接可以使用通配符选择器
*{
padding:0;
margin:0;
}
为了提升效率，我们也可以使用并集选择器来选中页面中应有的标签：点击进入链接
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;
}
②border
描述盒子的边框，边框有三个要素：粗细（不写默认不显示，只写solid，默认3px宽度，黑色），线性样式，颜色（默认黑色）
线条种类有四种，solid, dotted, double, dashed.分别是直实线，圆点连成的实线，双实线，矩形方块连成的直线（虚线）。
按照三要素来写border：
border- 3px;
border-style: solid;
border-color: red;
/*
border- 5px 10px; 这里可以像padding一样进行方向上面的线条宽度设置。
border-style: solid dotted double dashed; 线条类型。
border-color: red green yellow; 同时也可以分别设置颜色。
*/
按照方向划分：
border-top- 10px;
border-top-color: red;
border-top-style: solid;
border-right- 10px;
border-right-color: red;
border-right-style: solid;
border-bottom- 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left- 10px;
border-left-color: red;
border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;
另外还可以这样：
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
清除边框的默认样式，比如input输入框：
border:none; border:0; /*当不需要border的哪一个方向时：*/ border-top:0; border-top:none;
利用border来制作小三角：
*小三角 箭头指向下方*/
div{
0;
height: 0;
border-bottom: 20px solid red;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
③margin
margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;
7，标准文档流概念
当用我们使用的设计软件（比如ps）和web页面进行比较，设计软件可以随意摆放设计元素的位置
但是web网页的制作是一个“流”，从上而下，更像是一种织毛衣
标准文档流下 有哪些微观现象？
1.空白折叠现象。一个或者多个空格会折叠成为一个空格显示在浏览器中。
2.高矮不齐，底边对齐。比如插入很多大小不一的图片，高矮可能不一样，但是底边会对齐显示。
3.自动换行，一行写不满，换行写。插入很多的图片，一行摆不了，就会换行显示了。
8，行内元素和块级元素的转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /*将块元素转化成行内元素*/ display: inline; width: 200px; height: 40px; border: 1px solid red; } .box2{ margin-top: 20px; width: 200px; height: 40px; font-size: 40px; border: 1px solid green; } span{ background-color: yellow; width: 100px; height: 40px; /*将行内元素转化成块级元素*/ display: block; /*隐藏当前的标签 不占位置*/ /*display: none;*/ /*隐藏当前的标签，占位置*/ visibility: hidden; } img{ width: 300px; height: 300px; /*隐藏当前的标签*/ /*display: none;*/ } </style> </head> <body> <div class="box1">内容</div> <div class="box1">内容</div> <div class="box2">内容</div> <span>qiuma</span> <span>qiuma</span> <!-- form表单中 input textarea select --> <img src="./images/企业1.png" alt=""> <img src="./images/企业2.png" alt=""> </body> </html>
通过display来进行转换，可以自由变换，得到不同的效果
display: inline; 转换成行内元素
display: inline-block; 转换成行内块元素
display: block; 转换成块元素
两种隐藏效果：
两种隐藏效果，分别是占位置和不占位置： /*隐藏当前的标签 不占位置*/ display: none; /*隐藏当前的标签，占位置*/ visibility: hidden;
9，浮动
浮动是css里面布局最多的一个属性
float：表示浮动的意思。它有三个值。
- none: 表示不浮动，默认
- left: 表示左浮动
- right：表示右浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <span>qiuma</span> </body> </html>
效果： 两个元素并排了，并且两个元素都能够设置宽度和高度
浮动想学好：一定要知道它的四个特性：
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
4.收缩的效果
浮动的四个特性
①浮动的元素脱标：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; } </style> </head> <body> <!-- 脱标： 脱离了标准文档流 小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。所以就渲染到了左上方。 浮动元素 “飘起来了” --> <div class="box1">小红</div> <div class="box2">小黄</div> <!-- span标签不需要转成块级元素，也能够设置宽高。 所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，可以进行设置宽高 --> <span>span标签</span> <span>span标签</span> </body> </html>
元素脱标，也即元素脱离了标准流。
第一特点：当设置两个盒子小盒子A和大盒子B时，盒子A进行了左浮动设置，盒子B没有，然后A盒子将脱离了标准流
而此时盒子B还是标准流中的一个盒子，在浏览器中渲染时，盒子A渲染到了左上方，浮动飘起来了。
第二特点：所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，可以进行设置宽高
②浮动元素相互贴靠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; float: left; } .box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <!-- <span>文字</span> <span>文字</span> --> <!-- 如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。 如果没有足够的空格，那么就会靠着1哥，如果没有足够的空间靠着1哥，自己往边靠 --> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>
效果发现：
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠
③浮动元素字围效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; } </style> </head> <body> <!-- 所谓字围效果： 当div浮动，p不浮动 div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果 关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则 永远不是一个盒子单独浮动，要浮动就要一起浮动。 --> <div> <img src="./images/企业1.png" alt=""> </div> <p> 123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p> </body> </html>
当一个盒子div设置了左浮动，设置另外一个没有浮动的 p 段落时，此时div脱标，遮住了p，且层级比p更大，但是p中的文字不会被遮盖，此时就形成了字围效果。
所遵循的一个原则：永远不是一个盒子单独浮动，要浮动就要一起浮动。
④浮动元素紧凑效果
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
如果想制作一个网页，就是通过浮动来并排。
清除浮动
①浮动带来的负面影响
当有脱标元素以及未脱标元素在一起时，会产生重合现象。
②如何清除浮动
第一种：给父盒子设置高度。一般出现在导航条中。
缺点：当盒子内内容增加时，可能溢出，影响布局
第二种：内墙法。clear: both
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; } </style> </head> <body> <div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响--> <!-- 内墙法 --> <!-- 无缘无故加了div元素 结构冗余 --> </ul> <div class="clear"></div> </div> <div class="box"> </div> </body> </html>
给浮动元素最后面加一个空的div 并且该元素不浮动
然后设置在该div中的style里添加clear: both 清除别人对我的浮动影响
还有clear: right 以及 clear: left ，可以分别清除右边和左边的元素不浮动
缺点：无缘无故加了div元素，造成结构冗余
第三种（常用）：伪元素选择器清除法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素清除法（常用）</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } /*伪元素选择器*/ .clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; height: 0; visibility: hidden; /* 新浪首页清除浮动伪元素方法 content: "."; display: block; height: 0; clear: both; visibility: hidden */ } </style> </head> <body> <div class="clearfix"> <ul> <li>Python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
利用伪元素选择器中的after，在元素的最后面添加新的内容。
<head>
<style type="text/css">
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
</div>
</body>
第四种（常用）：overflow: hidden
使用该属性，内容会被修剪，并且其余内容是不可见的。也就是说，当内容超出盒子界限时，自动隐藏超出的部分。
使用时，直接在这个盒子之中加入这条属性即可。
.box{
400px;
overflow: hidden;
}
10，margin细讲
①margin塌陷问题
当给两个上下垂直的兄弟盒子，设置垂直方向上面对面上面的的margin，那么实际的margin值会以较大的为准，那么我们称这种现象叫塌陷 。而且只有垂直方向上面才会产生这种问题，水平上面不会产生塌陷问题
但是，浮动的盒子垂直方向 不塌陷
②margin: 0 auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin:0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0 auto; /*margin: 0 auto; 相当于下面代码*/ /*margin-left: auto; margin-right: auto;*/ text-align: center; float: left; } </style> </head> <body> <!-- 1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center; --> <div> 文字 </div> </body> </html>
1.使用margin: 0 auto; 水平居中盒子，前提是必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子，才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 也不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
③善于使用父padding，而不是使用margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; /*margin-left: 30px; margin-top: 30px;*/ } </style> </head> <body> <!-- 因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行 所以父亲就掉下来 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
当父盒子包含子盒子时，想要调整子盒子在父盒子中的位置，我们使用父padding，而不是使用子盒子的margin。
因为父盒子没有border，当子盒子利用margin调整与父盒子垂直上面的距离时，那么子盒子margin实际上踹的是“流”，踹的是行
所以使用子盒子的margin时，在这种情况下，会导致父盒子一并移动位置。达不到效果。
11，文本属性和字体属性
font: 14px/30px "宋体"; /* 等价于下面： font-size: 14px; line-height: 30px; font-famliy: '宋体'; 这里字体也可以带多个备选字体，之间逗号隔开 */
①font-family：字体
使用font-family注意几点：
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
/*如果设置成 inherit，则表示继承父元素的字体*/
如上会依次向浏览器申请给出的字体样式。
②font-weight：字体粗细
normal: 默认值，标准粗细 bold: 粗体 bolder: 更粗 lighter: 更细 100~900: 设置具体粗细，400等同于normal，而700等同于bold inherit: 继承父元素字体的粗细值
③font-size: 字体大小
p {
font-size: 14px;
}
如果设置成了 inherit 表示继承父元素的字体大小
④color：颜色
- 十六进制值 如: ＃FF0000
- 一个RGB值 如: RGB(255,0,0)
- 颜色的名称 如: red
⑤text-align：文本对齐
left：左边对齐 默认值 right：右对齐 center：居中对齐 justify：两端对齐
⑥line-height：行高
⑦text-decoration：文字修饰
none：默认。定义标准的文本。可以用来去除a标签下的横线 underline：定义文本下的一条线。 overline：定义文本上的一条线。 line-through：定义穿过文本下的一条线。 inherit：继承父元素的text-decoration属性的值。
⑧一些特殊表示：
1，cursor: pointer; 定义像a标签一样可显示小手形状
2，设置单行文本的垂直中间对齐，同时将 height 与 line-height 设置相同等高的数值。也即 行高=盒子的高度时。
如果要进行多行进行设置，先确定字体大小。调节 line-height 行高以及盒子的 padding 值，可以达到那种效果。
3，文本首字缩进：text-indent: 2em; 一般缩进大小设置em单位，一个em相当于所处环境一个字体大小。
4，设置导航栏圆角：border-radius: 5px; 这里设置切掉了5px的圆角。
⑨案例示例：
超链接导航栏美化案例代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } /*设置背景图片*/ body{ background-image: url(./images/timg2.jpeg); } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color,如果需要改变a标签中的字体颜色，需要另设置一个类表示*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> </ul> </div> </body> </html>
12，backgroud属性
①backgroud-color
如何使用颜色：
颜色表示方法有哪些？
一共有三种：单词、rgb表示法、十六进制表示法
rgb:红色 绿色 蓝色 三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色：
黑色：
background-color: rgb(0,0,0);
光学显示器，每个元件都不发光，黑色的。
白色：
background-color: rgb(255,255,255);
颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0);
再比如：
background-color: rgb(111,222,123);
就是红、绿、蓝三种颜色的不同比例叠加。
16进制表示法
红色：
background-color: #ff0000;
所有用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的？我们介绍一下
我们现在看一下10进制中的基本数字（一共10个）:
0、1、2、3、4、5、6、7、8、9
16进制中的基本数字（一共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
16进制对应表：
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
18 12
19 13
……
43 2b
……
255 ff
十六进制中，13 这个数字表示什么？
表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。
16进制中的2b等于10进制多少？
答：2*16+11 = 43。
16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175
16进制中的ff等于10进制多少？
答：15*16 + 15 = 255
所以，#ff0000就等于rgb(255,0,0)
background-color: #123456;
等价于：
background-color: rgb(18,52,86);
所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。
十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：
background-color:#ff0000;
等价于
background-color:#f00;
比如：
background-color:#112233;
等价于
background-color:#123;
只能上面的方法简化，比如
background-color:#222333;
无法简化！
再比如
background-color:#123123;
无法简化！
要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
②backgroud-img
div{
1500px;
height: 1600px;
background-image: url(./bojie.jpg);
/*平铺*/
background-repeat
/*不平铺*/
background-repeat: no-repeat;
/*显示x，y一个方向上的平铺*/
background-repeat: repeat-x;
}
③backgroud-repeat
表示设置该元素平铺的方式
应用：可以使用左右上下对称的图片进行平铺后设置为网站的背景图片
④backgroud-position
属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置
可以在style中设置背景图片的位置
1500px; height: 1600px; background-image: url(./bojie.jpg); background-repeat: no-repeat; /*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/ background-position: 100px 100px;
雪碧图技术（精灵图技术）具体定位图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0 } /*首先确定好图片的大小，然后利用backgroud-positon进行图片定位，即可显示所需要展示的内容*/ .box1{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -528px; } .box2{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -440px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，减少了网页向服务器发送请求的次数，加快加载速度。
⑤background-attach
将背景图片固定下来，当浏览一个盒子中的文字时，可以直接固定背景图片，而文字可以滚动。
background-attachment: fixed;
水平居中通天banner图
当图片的宽度很大时，我们直接可以直接显示图片的中间位置
background-position: center top;
backgroud综合属性设置
相对于逐个对属性进行设置，也可以综合进行设置，效果是一样的
background: red url('./images/banner.jpg') no-repeat center top fixed;
13，定位
相对定位(relative)
①作用：微调我们元素的位置
如果对当前元素仅仅设置相对定位，那么和标准流下的盒子没有什么区别
设置相对定位，我们就可以使用四个方向的属性，top left right bottom
.box1{
200px;
height: 200px;
background-color: red;
/*下面为相对定位：如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
position: relative;
top: 20px;
left: 30px;
}
②相对定位的三大特性：（不脱标，形影分离，老家留坑）
也即不脱离标准流，本身和影子是分不开的，保留在原来的位置上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 50px; left: 100px; } .box3{ background-color: blue; } </style> </head> <body> <!-- 相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑 :占着茅房不拉屎，恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
绝对定位(absolute)
①绝对定位三个特性
1，脱标 2，做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，相对定位后都能设置宽高。
②绝对定位参考点（top，bottom）（重要）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ width: 100%; height: 2000px; border: 10px solid green; } .box{ width: 200px; height: 200px; background-color: red; /*绝对定位参考点： 1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。可以尝试拖动浏览器下边框改变浏览器大小来查看效果 */ position: absolute; /*top:30px;*/ bottom: 100px; left: 18px; } </style> </head> <body> <div class="box"> </div> </body> </html>
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
③父相子绝定位属性（重要）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*父盒子设置相对定位*/ position: relative; padding: 50px; } .box2{ width: 300px; height: 300px; background-color: green; position: relative; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素设置了绝对定位*/ position: absolute; top: 0; left: 0; } /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点 这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点 */ </style> </head> <body> <div class="box"> <div class="box2"> <p></p> </div> </div> </body> </html>
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。相对来说，子元素以最近一级设置了相对定位元素的位置为参考点
注意：
当不然仅仅只有父相子绝，还有父绝子绝，父固子绝，都是以父辈元素为参考点的。而父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。还要注意的是，绝对定位的盒子，无视父辈的padding。
④绝对定位盒子居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; margin: 0 auto; /*position: relative;*/ position: absolute; left: 50%; margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。 先设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的负一半，实现绝对定位盒子居中*/ } </style> </head> <body> <div class="box"> <div class="c"></div> </div> </body> </html>
正常情况下，我们使用margin: 0 auto; 可以使盒子水平居中，但是这只是存在于标准流当中的盒子当一个盒子浮动了，固定定位，绝对定位了，margin: 0 auto; 不能用了，这时我们需要使用其他方式来对绝对定位的盒子居中。
我们可以将绝对定位子元素left:50%; margin-left等于元素宽度的负一半，达到实现绝对定位盒子居中
固定定位(fixed)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; position: fixed; bottom: 30px; right: 40px; } </style> </head> <body> <div> <p></p> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </div> </body> </html>
固定定位：固定当前的元素不会随着页面滚动而滚动，
特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动
参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ /*给body设置导航栏的高度，来显示下方图片的整个内容*/ padding-top: 49px; } .wrap{ width: 100%; height: 49px; background-color: #000; /*设置固定定位之后，一定一定要加top属性和left属性*/ position: fixed; top: 0; left: 0; } .wrap .nav{ width: 960px; height: 49px; margin: 0 auto; } .wrap .nav ul li{ float: left; width: 160px; height: 49px; text-align: center; } .wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #fff; font: 20px/49px "Hanzipen SC"; background-color: purple; } .wrap .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="wrap"> <div class="nav"> <ul> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> </ul> </div> </div> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </body> </html>
14，z-index
四大特性
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0 } .tianliang{ width: 200px; height: 200px; background-color: red; position: relative; z-index: 3; } .tianliang .sendie{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 240px; left: 300px; z-index: 333; } .lzy{ width: 200px; height: 200px; background-color: yellow; position: relative; z-index: 4; } .lzy .brother{ width: 100px; height: 100px; background-color: green; position: absolute; top: 100px; left: 320px; z-index: 111; } </style> </head> <body> <div class="tianliang"> <p class="sendie"></p> </div> <div class="lzy"> <p class="brother"></p> </div> </body> </html>
最后，可以参考小米商城并用所学将大致部分做出来，说明你掌握就可以到位了