【前端】第五模块：WEB开发基础 第1章·HTML&CSS基础
- 01-前端介绍
- 02-HTML介绍
- 03-HTML文档结构
- 04-head标签相关内容
- 05-经常使用标签一之h1~h6，p，a
- 06-经常使用标签一之ul、ol、div、img、span
- 07-经常使用标签二-table标签
- 08-经常使用标签二之form标签
- 09-经常使用标签二之表单控件
- 10-经常使用标签分类和嵌套规则
- 11-css的介绍和感知
- 12-css的三种引入方式
- 13-标签选择器
- 14-id选择器
- 15-类选择器
- 16-如何正确的使用类选择器及总结
- 17-高级选择器
- 18-属性选择器
- 19-伪类选择器（a标签的爱恨原则）
- 20-伪类选择器（nth-child的用法）
- 21-伪元素选择器
- 22-css的继承性
- 23-css的层叠性
- 24-css权重比较
- 25-层叠性权重相同处理和继承的权重为0
- 26-！important属性介绍
- 27-盒模型介绍
- 28-盒模型五个属性介绍
- 29-盒模型的计算
- 30-认识padding
- 31-清除某些标签默认的padding
- 32-认识border
- 33-使用border制做三角形
- 34-简单认识一下margin
- 35-标准文档流的介绍
- 36-标准文档流下的微观现象
- 37-行内元素和块级元素转换
- 38-布局属性-浮动介绍
- 39-浮动元素脱标
- 40-浮动元素互相贴靠
- 41-浮动元素字围效果
- 42-浮动元素紧凑效果
- 43-小米商城结构布局介绍
- 44-小米商城顶部栏
- 45-小米商城导航栏
- 46-小米商城内容列表
- 47-小米商城选购区域
- 48-使用浮动带来的问题
- 49-清除浮动1：给父盒子设置高度
- 50-清除浮动2=clear：both
- 51-清除浮动3-伪元素清除法（经常使用）
- 52-清除浮动4-overflow“hidden（经常使用）
- 53-margin垂直方向塌陷问题
- 54-margin：0 auto水平居中盒子
- 55-善于使用父亲的padding，而不是margin
- 56-文本属性和字体属性
- 57-单行文本垂直居中
- 58-多行文本垂直居中
- 59-font-family介绍
- 60-超连接美化导航案例
- 61-颜色的使用
- 62-background-img的使用
- 63-background-repeat的使用
- 64-background-position的使用
- 65-css精灵图的介绍和使用
- 66-background-position方向的使用
- 67-background-attach的使用
- 68-相对定位的介绍、特性
- 69-相对定位的用途
- 70-绝对定位的介绍、属性
- 71-绝对定位参考点
- 72-绝对定位以父辈元素做参考点
- 73-父绝子绝、父相子绝、父固子绝
- 74-绝对定位的盒子无视父辈的padding
- 75-绝对定位盒子居中
- 76-固定定位案例_返回顶部
- 77-固定定位案例_固定导航栏
- 78-固定定位案例_固定导航栏
- 79-z-index的四大特性
- 80-z-index的从父现象
- 81-z-index的用途
01-前端介绍
一、Web1.0时代的‘网页制做’之静态页面；
网页制做是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，咱们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展现性文章。javascript
二、Web1.0时代网页三剑客；
Dreamweaver+Fireworks+Flash（Web1.0时代的产物）;
三、Web2.0时代的前端开发（而不是称之为网页制做）；
“前端开发”是从“网页制做”演变而来的。css
在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不只仅能够浏览网页，还能够与服务器进行交互。好比登陆www.jd.com 进行购物用户的注册、登陆；html
四、Web前端能作什么呢？
- 公司官网;
- 移动端网页-Mobile、平板电脑;
- 微信小程序;
总之：比较简单，你们学习起来不要慌！
五、目标定位——Python全栈开发；
不只要掌握后端开发的技术还要掌握必定程度的前端开发技术（学习HTML+CSS是没有什么逻辑可言的）；
六、前端开发包含哪些内容？
- 结构之HTML（Hyper Text Markup Language，即超文本标记语言），
简单来讲，网页就是用HTML语言制做的。HTML是一门描述性语言，是一门很是容易入门的语言，但它不是一门编程语言。 - 表现之CSS——层叠样式表(英文全称：Cascading Style Sheets)，又叫CSS样式；
- 行为之JavaScript——一门脚本语言；
七、结构+表现+行为之HTML+CSS+JavaScript；
小结：
“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为；
02-HTML介绍
一、HTML简介；
HTML是一个网页的主体部分，也是一个网页的基础。由于一个网页能够没有样式，能够没有交互，可是必需要有网页须要呈现的内容。因此HTML部分是整个前端的基础。前端
HTML，全称是‘超文本’标记语言（Hyper Text Markup Language），它是一种用于建立网页的标记语言。举个通俗的例子，就是一段文本内，不但有该文本真正须要传递给读者的有用信息，更有描述该段文本中各部分文字的状况的信息。java
<header>
<h1>Alex老师是否是很帅？</h1>
<p>这是你说的啊，我可没说</p>
</header>
<div>
<div>
二狗子<span>,我就叫二狗子</span>
</div>
<p>
你说什么就是什么啦，与我不要紧了，反正我是个男的！</a>
</p>
<div>
三袍子,<span>我就叫三袍子</span>
</div>
<p>
我反对，我以为武sir更帅。
</p>
</div>
小结：
一、很显然，HTML做为一种标记语言它并无什么逻辑，简单来讲就是一些符号，一些有特殊意义的符号，即一些浏览器认识的有特殊意义的符号；
二、咱们写好的HTML文件最终都会运行在浏览器上，由浏览器来解析。 HTML很容易学习，相信咱们很快就可以掌握它！
二、开发环境（IDE工具）；
- HBuilder 官网：http://www.dcloud.io/ 下载连接：http://download.dcloud.net.cn/HBuilder.9.0.8.windows.zip
- Pycharm 官网：http://www.jetbrains.com/ 下载连接：https://download.jetbrains.8686c.com/python/pycharm-professional-2018.2.exe
- WebStorm 官网：http://www.jetbrains.com/ 下载连接：https://download.jetbrains.8686c.com/webstorm/WebStorm-2018.2.exe
- SublimeText...
三、了解前端的全部标签（www.baidu.com 按F12键）；
四、HTML标签介绍；
1）文件后缀名简述；python
文件后缀通常使用.html或.htm .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀能够互换，对网页彻底没有影响同时也没有区别。能够认为html与htm没有本质区别，惟一区别即多与少一个“l”。jquery
2）什么是标签呢？linux
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签； 2. HTML中标签**一般**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容； 3. 标签之间是能够嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面； 4. HTML标签不区分大小写，`<h1>`和`<H1>`是同样的，可是咱们一般建议使用小写，由于大部分程序员都以小写为准；
注意：不是全部标签都支持互相嵌套。
03-HTML文档结构
一、HTML文档结构（固定结构）；
- <!DOCTYPE HTML> 头声明；
- <html></html>根标签；
- <head></head>头部相关内容；
- <body></body>页面主体相关内容；
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
二、HTML文档结构图；
一、<html></html> 称为根标签，全部的网页标签都在<html></html>中； 二、<head></head> 标签用于定义文档的头部，它是全部头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍； 三、在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部份内容）最终会在浏览器中显示出来；
三、解释说明；
<!DOCTYPE html>
<!--以上声明文档的类型，标记该文档为HTML5的文件，第一行的位置不能添加注释哦！只能是<!DOCTYPE html>-->
<!--页面的根节点-->
<!--html中的标签都是闭合标签，但闭合标签包含'双闭合标签'和'单闭合标签'-->
<!--双闭合：<html></html>-->
<!--单闭合：<meta/>-->
<html>
<!--声明头部的元信息，对咱们文档规定编码格式-->
<head>
<meta charset="utf-8"/>
<!--包含头部的信息 是一个容器，包含style、title、meta、script、link等-->
</head>>
<body>
<!--包含浏览器显示的内容标签div、p、a、img、input等等-->
这就是咱们的文档结构哦！
</body>
</html>
04-head标签相关内容
一、注意哦，注释不能嵌套；
<!--这里是要书写的注释的内容-->
注意：
- 注释中能够直接使用回车进行换行；
- 咱们习惯用注释的标签将HTML代码包裹起来；
- HTML注释不支持嵌套；
- HTML注释不能写在HTML标签中；
<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
二、head标签；
咱们首先来介绍一下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>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。能够把它当作是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎能够经过网页标题，迅速的判断出当前网页的主题。web
四、meta标签；
元素可提供有关页面的原信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
五、其余标签；
一、<!--标题--> <title>路飞学城</title> 二、<!--icon图标（网站的图标）--> <link rel="icon" href="fav.ico"> 三、<!--定义内部样式表--> <style></style> 四、<!--引入外部样式表文件--> <link rel="stylesheet" href="mystyle.css"> 五、<!--定义JavaScript代码或引入JavaScript文件--> <script src="myscript.js"></script>
操做日志：
<!DOCTYPE html>
<html lang="en">
<head>
<!--一、文档的标题、编码方式及URL等信息，这些信息大部分是用于提供索引，
辨认或其余方面的应用（移动端）-->
<!--二、
经常使用的两个属性：
http-equiv：它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之
对应的属性值为content，content中的内容其实就是各个参数的变量值;
name:
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字能够有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
-->
<!--指定文档的内容类型和编码类型-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<!--5秒重以后 页面跳转至 路飞学城的官网-->
<!--<meta http-equiv="refresh" content="5;URL = https://www.luffycity.com"/>-->
<!--三、网页的标题-->
<title>路飞学城</title>
<!--四、告诉浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<!--五、为了咱们的网站SEO优化，常添加keywords，百度搜索引擎搜索关键字，如IT培训，Linux、Python爬虫-->
<!--<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">-->
<!--<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">-->
<meta name="Keywords" content="Python开发,linux教程,网站开发,金融分析,爬虫实战,机器学习,编程教程,在线课程,在线教育,路飞,路飞学城,路飞学院">
<meta name="description" content="路飞学城立志帮助有志向的年轻人经过努力学习得到体面的工做和生活！路飞学员经过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能。">
<!--六、定义咱们的网站ico图标-->
<link rel="icon" href="./fav.ico">
<!--七、引入外部css样式表-->
<link rel="stylesheet" type="text/css" href="index.css">
<!--八、定义内部css样式表-->
<style type="text/css">
</style>
<!--九、定义内部js脚本文件-->
<script type="text/javascript">
</script>
<script src ='./index.js' ></script>
</head>
<body>
<h1>luffycity,帮助年轻人经过努力学习得到体面的工做和生活！</h1>
</body>
</html>
05-经常使用标签一之h1~h6，p，a
一、标题标签h1~h6(heading);
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题，<h6> 定义最小的标题。 因为 h 元素拥有确切的语义，所以请您慎重地选择恰当的标签层级来构建文档的结构。所以，请不要利用标题标签来改变同一行中的字体大小。
二、段落标签<p>,paragraph的简写，用来定义段落；
三、超连接标签<a>；
超级连接<a>标记表明一个连接点，是英文anchor（锚点）的简写。它的做用是把当前位置的文本或图片链接到其余的页面、文本或图像；（即页面跳转）
小结：
一、目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操做(rar、zip等)； 二、电子邮件连接 前提：计算机中必须安装邮件客户端，而且配置好了邮件相关信息。 例如：<a href="mailto:zhaoxu@tedu.cn">联系咱们</a>； 三、返回页面顶部的空连接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a>； 四、javascript:是表示在触发<a>默认动做时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a>； 五、javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a>;
<!DOCTYPE html>
<html lang="en"> <!--注意，在此处加lang='en'-->
<head>
<meta charset="UTF-8">
<title>body标签中的经常使用标签一</title>
</head>
<body>
<p style="height: 200px" id="p1" >顶部</p>
<!--一、body相关标签-->
<!--二、heading：标题h1~h6,没有h7标题-->
路飞学城,不只有独家<h3>Python全栈开发课程</h3>，带你逐步提高技能。更有Linux运维工程师，带来最极致的成长体验。
<!--三、块级元素：一、独占一行！二、能够设置宽度、高度-->
<h1>路飞学城</h1><h2>路飞学城</h2>
<h3>路飞学城</h3>
<h4>路飞学城</h4>
<h5>路飞学城</h5>
<h6>路飞学城</h6>
<!--四、默认没有h7,咱们来验证一下-->
<!--五、<h7>路飞学城</h7>-->
<!--六、p,即Paragraphy的缩写,定义段落-->
<p>路飞学城立志帮助有志向的年轻人经过努力学习得到体面的工做和生活！路飞学员经过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能!</p>
<p>路飞学城立志帮助有志向的年轻人经过努力学习得到体面的工做和生活！路飞学员经过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能!</p>
<!--七、超连接标签a,anchor锚点的缩写，将当前页面连接至另外一个页面-->
<!--
_self,默认值，在当前页面打开新的资源；
_blank,在新的页面打开网站资源；
-->
<a href="http://cuixiaozhao.com" target="_blank" title="崔工的博客">天晴天朗的cnblogs地址</a>
<!--八、下载文件内容-->
<a href="./A.ZIP">下载压缩包</a>
<!--九、发送邮件至该邮箱，调用系统上存在的邮件客户端，如formail、outlook-->
<a href="mailto:tqtl@tqtl.org">联系崔工</a>
<!--十、返回页面顶部的内容-->
<a href="#">跳转到顶部</a>
<!--十一、返回每一个id-->
<a href="#p1">跳转至顶部的段落标签</a>
<!-- 十二、javascript:是表示在触发<a>默认动做时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应，把a的默认动做取消了。-->
<a href="javascript:alert(1)">有内容</a>
<a href="javascript:;">空内容</a>
</body>
</html>
06-经常使用标签一之ul、ol、div、img、span
一、列表标签ul、ol
<ul>:unordered lists的缩写 无序列表； <ol>:ordered listsde的缩写 有序列表;
1)ol标签的属性：
- 1：数字；
- a：小写字母；
- A：大写字母；
- i：小写罗马字符，不是数字；
- I：大写罗马字符，注意哦，是罗马字符，不是罗马数字；
2）ul标签的属性：
- disc：实心圆(default)；
- circle:空心圆；
- square：实心矩形；
- none：不显示标识；
二、盒子标签div；
<div>可定义文档的分区 division的缩写 译：区 <div> 标签能够把文档分割为独立的、不一样的部分（区块）；
三、图片标签<img/>;
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意：
一、src设置的图片地址能够是本地，也能够是网络地址（采用域名的图片服务器）；
二、图片的格式能够是png、jpg或gif；
三、alt属性的值会在图片加载失败的时候进行显示；
四、可自定图片的宽度和高度，不设置的话，默认显示自己的高度和宽度；
五、与行内元素在一行内显示；
六、能够设置宽度和高度；
七、span标签能够单独摘出某块内容，结合css设置相应的样式；
四、换行标签<br>;
<br>标签用来将内容换行，其在HTML网页上的效果至关于咱们平时使用word编辑文档时使用回车换行。
五、分割线<hr>；
<hr>标签用来在HTML页面中建立水平分隔线，一般用来分隔内容
六、特殊符号;
07-经常使用标签二-table标签
一、表格标签table；
表格由<table> 标签来定义。每一个表格均有若干行（由 <tr> 标签订义），每行被分割为若干单元格（由<td>标签订义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等；
二、表格的行和列的合并；
rowspan 合并行(竖着合并)；colspan 合并列(横着合并)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table学习</title>
</head>
<body>
<!--表格是一个具体的对象，能够对它进行添加属性-->
<table border="1px" cellspacing="0">
<!--表格头-->
<thead></thead>
<tr>
<th></th>
<th>星期1</th>
<th>星期2</th>
<th>星期3</th>
<th>星期4</th>
<th>星期5</th>
</tr>
<!--表格的主体-->
<tbody>
<!--表格主体的每一行-->
<tr>
<td rowspan="3">上午</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="3">下午</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>
</tbody>
<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</body>
</html>
08-经常使用标签二之form标签
一、表单概念初识及做用；
表单是一个包含表单元素的区域;
表单元素是容许用户在表单中输入内容，好比：文本域(textarea)、输入框(input)、单选框(radio);
做用：表单用于显示、手机信息，并将信息提交给服务器;
<form>容许出现表单控件</form>
二、form表单属性之action；
定义表单被提交时发生的动做提交给服务器处理程序的地址；
三、method；
- get
- post
四、encrype；
编码类型，即表单数据进行编码的方式容许表单将什么样的数据提交给服务器；
五、表单控件分类；
- input
- button
- label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-经常使用标签二之form标签</title>
</head>
<body>
<div class="form" >
<!--一、form标签是块级元素，被提交-->
<form action="https://www.baidu.com" method="get">
<p>
<!--二、lable标签是行内元素,input是行内块元素-->
<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>
<p>
<!--三、显示普通的按钮，disabled属性，禁用按钮-->
<!--<input type="button" name="btn" value="提交" disabled="disabled">-->
<input type="button" name="btn" value="提交" >
<input type="submit" name="btn" value="submit">
<!--四、button与form表单没有任何关系-->
<button type="button">button按钮</button>
</p>
</form>
</div>
</body>
</html>
09-经常使用标签二之表单控件
一、radio、checkbox-单选框、复选框；
二、textarea-文本域；
三、select-下拉选；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-09-经常使用标签二-表单控件</title>
</head>
<body>
<div class="form" >
<!--一、form标签是块级元素，被提交-->
<form action="https://www.baidu.com" method="get">
<p>
<!--二、lable标签是行内元素,input是行内块元素-->
<label for="user">用户名：</label>
<!--三、readonly属性，表示只读-->
<input type="text" name="username" id="user" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p>
<p>
<!--四、单选框radio,checked会被默认选中，产生互斥效果，name值要相同，好比同为sex-->
用户性别：
<!--<input type="radio" name="男" checked="">男-->
<!--五、此刻由于name值均为sex，顾产生了互斥的效果；-->
<input type="radio" name="sex" checked="">男
<input type="radio" name="sex">女
</p>
<!--六、复选框checkbox-->
<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="citys" size="3" multiple="">
<!--十、selected，将会被预选中-->
<option value="深圳" selected>深圳</option>
<option value="北京">北京</option>
<option value="沙河">沙河</option>
<option value="山东">山东</option>
<option value="河北">河北</option>
</select>
</p>
<p>
<!--十一、显示普通的按钮，disabled属性，禁用按钮-->
<!--<input type="button" name="btn" value="提交" disabled="disabled">-->
<input type="button" name="btn" value="提交" >
<!--十二、提交form表单时候，使用type=submit按钮-->
<input type="submit" name="btn" value="submit">
<!--1三、重置按钮-->
<input type="reset" name="重置按钮啦">
<!--1四、button与form表单没有任何关系-->
<button type="button">button按钮</button>
</p>
</form>
</div>
</body>
</html>
10-经常使用标签分类和嵌套规则
一、HTML标签的属性；
<div id="i1">这是一个div标签</div> <p class='p1 p2 p3'>这是一个段落标签</p> <a href="http://www.luffycity.com">这是一个连接</a> <input type='button' onclick='addclick()'></input>
二、为何能设置属性呢？
其实呢，你能够这样简单理解，由于最终咱们这些标签会经过CSS去美化，经过JavaScript来操做，那么这些标签咱们能够当作是一个对象，对象就应该有它本身的属性和方法。那么你像上面说到input标签，type=‘button’就是它的属性，onclick=‘addclick()’就是它的方法；
三、关于标签属性的注意事项：
1.HTML标签除一些特定属性外能够设置自定义属性，一个标签能够设置多个属性用空格分隔，多个属性不区分前后顺序； 2.属性值要用引号包裹起来，一般使用双引号也能够单引号； 3.属性和属性值不区分大小写，可是推荐使用小写；
四、标签的分类：
1）经常使用的块状元素；
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
块级元素的特色：
2）经常使用的行内元素；
<a> <span> <br> <i> <em> <strong> <label>
行内元素的特色：
3）经常使用的行内块状元素；
<img> <input>
行内块元素的特色；
五、标签的嵌套规则；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-经常使用标签分类和嵌套规则</title>
</head>
<body>
<div class="wrapper">
<!--一、块级元素：div、p、h1~h六、ul、ol、table、form、li
一、独占一行；
二、能够设置高度和宽度，若是设置高度和宽度，则就是当前的宽度
和高度，若是宽度和高度没有设置，宽度就是父盒子的宽度，高度根据内容填充-->
<div class="left">
这是路飞学城的战场
<div>这是个人区域
<div style="width: 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、i、em、strong、label"
行内元素：在一行内显示，不能设置宽度和高度，宽度和高度根据内容填充
-->
<a href="#" style="width: 200px;height: 100px;">百度</a>
<a href="#">路飞</a>
<span style="width:100px;height: 200px">这里是一些文本内容哦！</span>
<span>文本内容</span>
</div>
<!--三、行内块标签
一、在一行内展现；
二、可设置宽度和高度；
-->
<div class="inline-block">
<img src="./pyy01.jpg" alt="奶东彭于晏" style="width: 200px;height: 200px">
<input type="text" name="username" style="width: 200px;height: 50px">
</div>
</div>
</body>
</html>
11-css的介绍和感知
一、咱们为何须要CSS？
使用css的目的就是让网页具备美观一致的页面，另一个最重要的缘由是内容与格式分离 在没有CSS以前，咱们想要修改HTML元素的样式须要为每一个HTML元素单独定义样式属性，当HTML内容很是多时，就会定义不少重复的样式属性，而且修改的时候须要逐个修改，费心费力。是时候作出改变了，因此CSS就出现了。
CSS的出现解决了两个问题：
一、将HTML页面的内容与样式进行分离；
二、提升Web开发的工做效率；
二、什么是CSS？
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式一般又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
三、CSS的优点；
一、内容与表示分离；
二、网页的表现统一，容易修改；
三、丰富的样式，使得页面布局更加灵活；
四、减小网页的代码量，增长网页的浏览器速度，节省带宽；
五、运用独立页面的CSS，有利于网页被搜索引擎收录；
四、如何使用CSS？
咱们一般会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，而后在HTML文件中经过link标签引用该CSS文件便可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。
12-css的三种引入方式
一、CSS基础语法；
二、CSS注释；
/*注意啦，这就是CSS的注释样式哦！*/
三、网页中引入CSS样式的几种方法；
- 内联样式
- 行内样式表
- 外部样式表
- 连接式
- 导入式
四、内嵌样式；
五、行内样式；
六、外联样式表-连接式；
七、外联样式表-@import url()方式-导入式；
小结：
连接式与导入式的区别：
一、<link/>标签属于XHTML,@import是属性css2.1； 二、使用<link/>连接的css文件先加载到网页当中，再进行编译显示； 三、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中； 四、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来讲就是无效的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*写咱们的CSS代码*/
/*标签选择器，共性的，影响全局、全部*/
span{
color: yellow;
}
</style>
<!--外接样式之导入式-->
<style type="text/css">
@import url('./index.css');
</style>
<!--内容与表现分离的应用-内接样式-->
<!--外接样式之连接式,建议选择该种方式-->
<!--<link rel="stylesheet" href="./index.css">-->
</head>
<body>
<!--
一、行内样式；
二、内接样式；
三、外接样式；
3.1连接式
3.2导入式
-->
<div>
<!--行内样式展现-->
<p style="color: green;">我是一个段落</p>
</div>
<div>
<div>
<span>我是另一个段落</span>
<span>我是另一个段落</span>
<span>我是另一个段落</span>
<a href="#">路飞学城</a>
</div>
</div>
</body>
</html>
13-标签选择器
一、什么是选择器？
首先来讲一下，什么是选择器。
在一个HTML页面中会有不少不少的元素，不一样的元素可能会有不一样的样式，某些元素又须要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素以后就能够为它们设置样式了。 选择器为样式规则指定一个做用范围。
基础选择器包括：
- 标签选择器；
- 类选择器；
- ID选择器；
- 通用选择器；
二、标签选择器；
顾名思义即经过标签名来选择元素；
示例：
p {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器之标签选择器初识</title>
<style type="text/css">
body{
color:gray;
/*网页的字体通常为12px或16px*/
font-size: 12px;
}
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
</style>
</head>
<body>
<!--
CSS的选择器：一、基本选择器；二、高级选择器；
一、标签选择器；
标签选择器能够选中全部的标签元素，好比div、ul、li、p等；
无论标签藏得多深，都能被选中；
选中的是全部的，而不是选择一个，因此说选择的是"共性的"，不是特有的;
二、id选择器；
三、类选择器；
-->
<div>
<p>我是一个段落</p>
<ul>
<li>
<p>崔晓昭</p>
<span>我也是一个段落</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我仍是一个段落</p>
</div>
</div>
</div>
</div>
</body>
</html>
14-id选择器
一、ID选择器；
顾名思义，经过元素的id值进行选择元素；
示例：
#i1 {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器之标签选择器初识</title>
<style type="text/css">
body{
color:gray;
/*网页的字体通常为12px或16px*/
font-size: 12px;
}
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
#s1{
color: red;
}
#s2{
color: blueviolet;
}
#box{
background: aqua;
}
</style>
</head>
<body>
<!--
CSS的选择器：一、基本选择器；二、高级选择器；
一、标签选择器；
标签选择器能够选中全部的标签元素，好比div、ul、li、p等；
无论标签藏得多深，都能被选中；
选中的是全部的，而不是选择一个，因此说选择的是"共性的"，不是特有的;
二、id选择器；
#选中的id；
任何的标签均可以设置id属性；
id的命名规范：
一、字母数字下划线；
二、严格区分大小写，好比s1！=S1
三、类选择器；
玩好了类，就等于玩好了CSS中的1/2；
-->
<div>
<p>我是一个段落</p>
<ul>
<li>
<p>崔晓昭</p>
<span>我也是一个段落</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我仍是一个段落</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<!--id是惟一值，惟一的！，严格区分大小写：s1！=S1-->
<!--<span id="s1">123</span>-->
<span id="s2">234</span>
</div>
</body>
</html>
15-类选择器
一、类选择器；
顾名思义，经过样式类进行选择元素；
示例：
.c1 {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器之标签选择器初识</title>
<style type="text/css">
/*标签选择器01*/
body{
color:gray;
/*网页的字体通常为12px或16px*/
font-size: 12px;
}
/*标签选择器02*/
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
/*id选择器*/
#s1{
color: red;
}
#s2{
color: blueviolet;
}
#box{
background: aqua;
}
/*类选择器*/
.title03{
color: yellowgreen;
font-size: 20px;
}
.alex{
color:red;
}
</style>
</head>
<body>
<!--
CSS的选择器：一、基本选择器；二、高级选择器；
一、标签选择器；
标签选择器能够选中全部的标签元素，好比div、ul、li、p等；
无论标签藏得多深，都能被选中；
选中的是全部的，而不是选择一个，因此说选择的是"共性的"，不是特有的;
二、id选择器；
#选中的id；
任何的标签均可以设置id属性；
id的命名规范：
一、字母、数字、下划线（可使用空格，可是不规范，忘记吧!）；
二、严格区分大小写，好比s1！=S1
三、类选择器；
玩好了类，就等于玩好了CSS中的1/2；
所谓类就是class，class与id很是类似，任何的标签均可以添加类；
可是类是能够重复的，归类；
同一个标签中，能够携带多个类，须要使用空格进分割开来，可是会被覆盖（CSS叫作层叠样式表）
类的使用，能够决定Web前端工程师的水平有多牛逼呀！
-->
<div>
<p>我是一个段落</p>
<ul>
<li>
<p>崔晓昭</p>
<span>我也是一个段落</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我仍是一个段落</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<!--id是惟一值，惟一的！，严格区分大小写：s1！=S1-->
<!--<span id="s1">123</span>-->
<span id="s2">234</span>
</div>
<div class="box2">
<!--类名能够重复使用，可是要使用空格分割开来-->
<h3 id="h3" class="title03 alex">我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
</div>
</body>
</html>
16-如何正确的使用类选择器及总结
一、直接看操做日志吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS小练习</title>
<style type="text/css">
/*专业用法*/
.lv{
color:green;
}
.big{
font-size: 40px;
}
.underline{
text-decoration: underline;
}
/*小白用法*/
.lv1{
color:green;
font-size: 40px;
}
.lv2{
color:green;
font-size: 14px;
}
.lv3{
font-size: 40px;
text-decoration: underline;
}
</style>
</head>
<body>
<!--公共类，找标签共有的属性
一、第一个
-->
<!--专业用法-->
<div>
<p class="lv big">段落1</p>
<p class="lv underline">段落2</p>
<p class="underline big">段落3</p>
</div>
<!--小白用法-->
<p>-----------分割线------------</p>
<div>
<p class="lv1">段落1</p>
<p class="lv2">段落2</p>
<p class="lv3">段落3</p>
</div>
<!--小结
一、不要去试图用一个类将咱们的页面写完，这个标签要携带多各种，共同设置样式；
二、每一个类要尽量少携带属性，下降耦合度；解耦合，是程序开发的重要主题；
三、必定要有"公共类的概念"；
难么问题来了，究竟是使用id仍是使用class选择器呢？
答案：尽量使用class选择器，看具体需求，除非特殊状况能够用id选择器；
缘由：id通常是用在js，也就是说js是经过id来获取标签的；
-->
</body>
</html>
17-高级选择器
一、并集选择器；
二、交集选择器；
三、后代选择器；
由于HTML元素能够嵌套，因此咱们能够从某个元素的后代查找特定元素，并设置样式：
四、儿子选择器；
div>p {
color: red;
}
五、毗邻选择器；
div+p {
color: red;
}
六、弟弟选择器；
div~p {
color: red;
}
操做日志：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-高级选择器</title>
<style>
/*后代选择器
在CSS中仍是很是频繁的
*/
/*div p{*/
/*color: red;*/
/*}*/
/*div div p{*/
/*color: yellow;*/
/*}*/
/*.container div p{*/
/*color: green;*/
/*}*/
/*子代选择器的语法*/
.container p{
color: yellowgreen;
}
.container>p{
color: greenyellow;
}
/*交集选择器*/
h3{
width: 300px;
color: red;
}
.active{
font-size:30px;
}
h3.active{
background-color: yellow;
}
/*并集选择器（组合）设置多个标签的统同样式*/
a,h4{
color: #666;
font-size: 20px;
text-decoration: none;
}
/*通用选择器,性能有点差，通常不用，学习阶段须要了解*/
*{
color:red;
}
</style>
</head>
<body>
<div class="container">
<p>我是另一个字段</p>
<div>
<p>我是一个段落</p>
</div>
<p>我是另外又另外的一个段落</p>
<ul>
<li>
<h3 class="active">我是一个H3</h3>
</li>
<li>
<h4>我是一个h4标题</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>
18-属性选择器
一、根据属性查找；
二、根据属性和属性值进行查找；
1）找到全部title属性等于hello的元素：
[title="hello"] {
color: red;
}
2）找到全部title属性以hello开头的元素：
[title^="hello"] {
color: red;
}
3）找到全部title属性以hello结尾的元素：
[title$="hello"] {
color: red;
}
4）找到全部title属性中包含（字符串包含）hello的元素：
[title*="hello"] {
color: red;
}
5）找到全部title属性(有多个值或值以空格分割)中有一个值为hello的元素：
[title~="hello"] {
color: red;
}
三、表单经常使用；
input[type="text"] {
backgroundcolor: red;
}
操做日志：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-属性选择器</title>
<style type="text/css">
/*无具体值的*/
label[for]{
color: red;
font-size: 20px;
}
/*有值的*/
label[for='pwd']{
color: yellow;
}
/*以...开头*/
label[for ^='vip']{
font-size: 40px;
}
/*以...结尾*/
label[for$='2']{
color: purple;
}
/*找到全部*/
label[for*='ser']{
color:orange;
}
input[type='text']{
background-color: antiquewhite;
}
</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>
19-伪类选择器（a标签的爱恨原则）
一、没有访问过的超连接a的标签样式；
二、访问过的超连接a标签样式；
三、鼠标悬浮在元素上应用样式；
四、鼠标点击瞬间的样式（离开后消失）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-伪类选择器(a标签的爱恨原则)</title>
<style type="text/css">
/*爱恨原则 LOVE HATE*/
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: red;
}
/*访问事后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停至上方的样式*/
.box ul li.item3 a:hover{
color: darkgreen;
}
/*鼠标点住不松开的时候的样式*/
.box ul li.item4 a:active{
color: darkorange;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
<a href="#">张三丰</a>
</li>
<li class="item2">
<a href="#">李四龙</a>
</li>
<li class="item3">
<a href="#">王八难</a>
</li>
<li class="item4">
<a href="#">赵六曲</a>
</li>
</ul>
</div>
</body>
</html>
20-伪类选择器（nth-child的用法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-伪类选择器(a标签的爱恨原则)</title>
<style type="text/css">
/*爱恨原则 LOVE HATE*/
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: red;
}
/*访问事后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停至上方的样式*/
.box ul li.item3 a:hover{
color: darkgreen;
}
/*鼠标点住不松开的时候的样式*/
.box ul li.item4 a:active{
color: darkorange;
}
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color:red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 40px;
color: green;
}
/*选中指定元素,元素从1开始计数，不是0*/
div ul li:nth-child(3){
font-size: 100px;
color: blue;
}
/*n表示选中全部，从0开始，0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 50px;
color: mediumvioletred;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 70px;
color: green;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 80px;
color: rebeccapurple;
}
/*隔4个换1个*/
div ul li:nth-child(4n+1){
font-size: 20px;
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="item5">
5
<a href="#">赵六曲</a>
</li>
<li class="item6">
6
<a href="#">赵六曲</a>
<li class="item7">
7
<a href="#">赵六曲</a>
</li>
<li class="item8">
8
<a href="#">赵六曲</a>
</li>
</ul>
</div>
</body>
</html>
21-伪元素选择器
一、first-letter；
用于为文本的首字母设置特殊样式。
二、before；
用于在元素的内容前面插入新内容。
三、after；
用于在元素的内容后面插入新内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-伪元素选择器</title>
<style type="text/css">
/*设置第一个首字符的样式*/
p:first-letter{
font-size: 30px;
color:red
}
/*content*/
/*在..以前*/
p:before{
content: 'alex';
}
/*在..以后,使用很是频繁，一般与后面讲到的布局有gaunt*/
p:after{
content: 'cuixiaozhao';
font-size: 70px;
color: blue;
}
</style>
</head>
<body>
<p>我是一个段落</p>
</body>
</html>
22-css的继承性
一、CSS的继承性体现；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-css的继承性</title>'
<style type="text/css">
.father{
color:red;
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>alex</p>
</div>
</div>
<p>小马哥</p>
</body>
</html>
23-css的层叠性
一、CSS的层叠性初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23-css的层叠性</title>
<style type="text/css">
/*1 0 0*/
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
</style>
</head>
<body>
<!--权重：在CSS中，谁的权重大，浏览器就会显示谁的属性
谁的权重大呢？很是简单，进行数数
一、id的数量、class的数量、标签的数量；
-->
<p id="box" class="container">猜猜我是什么颜色</p>
</body>
</html>
24-css权重比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 24-css权重比较</title>
<style type="text/css">
/*2 0 1*/
#box1 #box2 p{
color: yellow;
}
/*1 1 1*/
#box2.wrapper3 p{
color: red;
}
/*1 0 3*/
div div #box3 p{
color: purple;
}
/*0 3 4*/
div.wrapper1 div.wrap2 div.wrap3 p{
color: blue;
}
</style>
</head>
<body>
<!--
CSS的层叠性体如今，权重大的标签覆盖了权重小的标签；
权重：谁的权重大，浏览器就会显示谁的属性
谁的权重大？很是简单 进行数数
一、id的数量、class的数量、标签的数量
-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜看我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
25-层叠性权重相同处理和继承的权重为0
一、权重及继承的说明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 25-层叠性权重相同处理和继承的权重为0</title>
<style type="text/css">
/*!*1 1 1*!*/
/*#box1 .wrap2 p{*/
/*color: red;*/
/*}*/
/*!*1 1 1*!*/
/*#box2 .wrap3 p{*/
/*color: yellow;*/
/*}*/
/*0 0 0 继承来的*/
#box1 #box2 .wrap3{
color:red;
}
/*1 1 1选中来的*/
#box2 .wrap3 p{
color:green;
}
</style>
</head>
<body>
<!--
一、当权重同样的时候，之后来设置的属性为准，前提是权重同样，后来者居上
二、继承来的属性，权重值为0
总结：
一、先看有没有被选中，若是选中了，就温馨（id,class,标签的数量）
谁的权重大，就显示谁的属性；权重同样大，后来者居上；
二、若是没有被选中，权重为0；
三、若是属性都是被继承下来的，权重都是0，采起"就近原则"：谁描述的近，就显示谁的属性；
-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜看我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
26-！important属性介绍
一、！important提升优先级演示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-!important属性介绍</title>
<style type="text/css">
<!--！important，提升优先级-->
p{
font-size: 30px;
color: red !important;
}
.spe1{
font-size: 40px;
color: yellow;
}
.spe2{
font-size: 40px;
color: green;
}
.list{
color:purple!important;
}
</style>
</head>
<body>
<!--!important不影响继承来的权重，只影响选中的元素-->
<!--！important，设置权重为无限大！实战中，尽可能别用吧！-->
<div>
<p></p>
<p class="spe1 spe2">我是什么颜色</p>
<p class="spe2 spe1">我是什么颜色</p>
</div>
<div class="list">
<ul>
<li>
我是一个li标签
</li>
</ul>
</div>
</body>
</html>
27-盒模型介绍
一、盒模型初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27-盒模型介绍</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
padding: 20px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
28-盒模型五个属性介绍
一、margin(外边距)；
二、border(边框)；
三、padding(内填充)；
四、width*height(宽*高，content内容区域)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27-盒模型介绍</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div>
<!--盒模型：在网页中，通常都会显示一些方方正正的盒子，这种盒子就被咱们称之为“盒模型”
一、重要的一些属性：
width：指的是内部宽度，不是盒子真实的宽度；
height：指的是内部的高度，不是盒子真实的高度；
border：
padding：
margin：
问题：设计师要求作一个402*402px的盒子，咱们应该如何进行设计呢？
-->
注意哦，这里是内容呢！
</div>
</body>
</html>
29-盒模型的计算
一、盒模型计算初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>29-盒模型的计算</title>
<style type="text/css">
/*!*div1*!*/
/*div{*/
/*width: 400px;*/
/*height: 400px;*/
/*border: 1px solid purple ;*/
/*}*/
/*!*div2*!*/
/*div{*/
/*width: 200px;*/
/*height: 200px;*/
/*border: 1px solid purple ;*/
/*padding: 100px;*/
/*}*/
/*div3*/
div{
width: 0;
height: 0;
border: 1px solid purple ;
padding: 200px;
}
</style>
</head>
<body>
<!--问题：设计师要求作一个402*402px的盒子，咱们应该如何进行设计呢？-->
<!--若是想保证盒子的真实宽度，加width就应该减小padding，减小width就应该加padding-->
<div>
内容
</div>
</body>
</html>
30-认识padding
一、pading的四个方向(顺时针方向)；
- 小属性设置；
- 综合属性设置，用空格分隔开来；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>30-认识padding</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*padding: 20px;*/
background-color: red;
/*border: 5px solid yellowgreen;*/
/*!*padding的小属性设置*!*/
/*padding-top: 30px;*/
/*padding-right: 30px;*/
/*padding-left: 30px;*/
/*padding-bottom: 30px;*/
/*!*padding的综合属性设置，用空格分隔开来,方向为顺时针方向，即上、右、下、左*!*/
/*padding:20px 30px 40px 50px;*/
/*!*上 左右 下*!*/
/*padding:20px 30px 40px;*/
/*!*上下、左右*!*/
/*padding 20px 30px;*/
/*上下左右*/
padding:33px;
}
</style>
</head>
<body>
<!--padding：就是内边距.padding区域是有背景颜色的，而且背景颜色和内容区域的颜色是一致的
即，backgroupd-color这个属性将填充全部的border之内的所有区域
就是边框到内容之间的距离；
padding的设置是有四个方向的，在人为世界里"上、下、左、右"可是前段世界里不是这样的
描述padding方向的方法有两种：一、写小属性；二、写综合属性，用空格隔开；
-->
<div class="box">
这里是内容，内容，内容哦，真的是内容哦！
</div>
</body>
</html>
31-清除某些标签默认的padding
一、清除默认padding的方法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-清除某些标签默认的padding</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!--
好比一般咱们作网站的时候，要清除默认的padding、margin
*号效率不高，因此咱们要使用"并集"选择器来选中页面中应该有的标签(不用去背诵，再也不
重复造轮子，由于已经有人帮咱们写好了这些内容呢，谢谢他们哦！)
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
-->
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
博客地址参考：
http://www.javashuo.com/article/p-ktcnalmp-gv.html
https://meyerweb.com/eric/tools/css/reset/
32-认识border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>32-认识border</title>
<style type="text/css">
.box{
width: 200px;
height:200px;
/*red不写，默认颜色是黑色，5px不写，默认是3px;*/
/*border:5px solid red;*/
/*按照三要素*/
border-width:5px 10px;
border-style: solid dotted double dashed ;
border-color: red green yellow;
}
/*按照方向分*/
.box{
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;
/*设置border没有样式*/
/*border:none;*/
/*border-left: none;*/
/*border-left: 0;*/
}
</style>
</head>
<body>
<!--border即边框的意思
边框三要素：
一、粗细；
二、线性；
三、颜色；
若是颜色不谢，默认是黑色的；
若是粗细不写，不显示。只写线性样式，默认的有上下左右，3px的宽度，solid默认的颜色；
-->
<div class="box"></div>
</body>
</html>
33-使用border制做三角形
一、制做小三角;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>33-使用border制做三角形</title>
<style type="text/css">
/*小三角 箭头指向下方*/
div{
width:0;
height:0;
/*border-top: 20px solid red;*/
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
/*border-left: 20px solid yellow;*/
/*border-right: 20px solid green;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
34-简单认识一下margin
一、有坑的margin初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>34-简单认识一下margin</title>
<style type="text/css">
*{
padding:0;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
background-color:green ;
/*margin: 20px;*/
margin-top: 30px;
margin-left: 50px;
margin-bottom: 100px;
}
p{
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<p>我是一个p标签</p>
</body>
</html>
35-标准文档流的介绍
一、标准文档流初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>35-标准文档流的介绍</title>
</head>
<body>
<!--什么是标准文档流
宏观的讲：咱们的Web页面和PhotoShop的设计的软件有本质的区别；
Web网页的制做是个"流"的概念；自上而下进行，祥"织毛衣".
而设计软件，想往哪里画，就往哪里画。
标准文档流有哪些微观现象？
学习前端的意义是为了成为一名全栈工程师，与UI设计师、产品经理、Python后端开发工程师协做好工做！
-->
<p>1</p>
<p>2</p>
</body>
</html>
36-标准文档流下的微观现象
一、空白折叠现象；
二、高矮不齐，底边对齐；
三、自动换行，一行写不满，自动换行写；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>36-标准文档流下的微观现象</title>
<style type="text/css">
span{
font-size: 50px;
}
</style>
</head>
<body>
<!--标准文档流下有哪些微观现象？
一、空白折叠现象（不适用空格符号的状况下，全部空格默认为1个）；
二、高矮不齐、底边对齐；
三、自动换行，一行写不满，自动换行写；
-->
<div>
文字文字，我这里全是文字呢！<span>李静瓶</span>注意啦。
<img src="./佟丽娅a.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
<img src="./佟丽娅a.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
<img src="./佟丽娅b.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
<img src="./佟丽娅b.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
<img src="./佟丽娅b.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
<img src="./佟丽娅b.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
<img src="./佟丽娅b.jpg" alt="此处是佟丽娅哦！" width="200px" height="200px">
</div>
</body>
</html>
37-行内元素和块级元素转换
一、行内元素及块级元素的相互转换；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>37-行内元素和块级元素转换</title>
<style type="text/css">
/*块级元素转行内元素*/
.box1{
/*将块状元素转化为行内元素*/
/*display:inline;*/
display: inline-block;
width: 200px;
height: 40px;
border:1px solid red ;
}
.box2{
margin-top: 20px;
width:200px;
height: 40px;
border: 1px solid green;
}
span{
background-color: yellow;
width: 100px;
height: 40px;
/*将行内元素转换为块级元素*/
/*display: block;*/
/*隐藏当前的标签，可是占用位置*/
display: none;
/*隐藏当前的标签，可是占用位置*/
visibility: hidden;
}
img{
width:300px;
height:300px;
/*none是没有的意思，即隐藏当前的图片*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="box1">内容</div>
<div class="box1">内容</div>
<div class="box2">内容</div>
<span>alex</span>
<span>alex</span>
<img src="./佟丽娅a.jpg" alt="" >
<img src="./佟丽娅b.jpg" alt="" >
<!--form表单中input、-->
</body>
</html>
38-布局属性-浮动介绍
一、浮动初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>38-布局属性-浮动介绍</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height:300px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height:400px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<!--理解一下，什么是浮动呢？
浮动是CSS里面布局最多的一个属性;
效果：两个元素并排，而且两个元素都可以设置宽度和高度；
浮动要想学好，必定要知道他的三个特性：
一、浮动的元素脱标；
二、浮动的元素有"字围效果"
三、紧凑的效果；
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
39-浮动元素脱标
一、浮动之脱标；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>38-布局属性-浮动介绍</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>
<!--理解一下，什么是浮动呢？
浮动是CSS里面布局最多的一个属性;
效果：两个元素并排，而且两个元素都可以设置宽度和高度；
浮动要想学好，必定要知道他的三个特性：
一、浮动的元素脱标；
二、浮动的元素有"字围效果"
三、紧凑的效果；
-->
<!--
脱标：脱离了标准文档流；
小红盒子浮动了，脱离标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。
因此就渲染到了左上方；
-->
<div class="box1">小红</div>
<div class="box2">小黄</div>
<!--
span标签不须要转成块级元素，也可以设置宽高；
全部的标签一旦设置了浮动，可以并排，都不区分行内、块级元素；
-->
<span>标签学习呢！</span>
<span>标签学习呢！</span>
</body>
</html>
40-浮动元素互相贴靠
一、浮动元素之相互贴靠初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>40-浮动元素互相贴靠</title>
<style type="text/css">
span{
background-color: red;
float: left;
}
.box1{
width: 100px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 150px;
background-color: yellow;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<!--
若是父元素body，有足够的空间，第三个紧靠第二个，第二个紧靠着第一个，第一个紧靠左边’
若是没有足够的空间，那么就会靠着第1个，若是没有足够
空间，自身主动往边儿上靠；
-->
<!--<span>崔晓昭</span>-->
<!--<span>李静瓶</span>-->
<div class="box1">崔晓昭</div>
<div class="box2">李静瓶</div>
<div class="box3">高志粉</div>
</body>
</html>
41-浮动元素字围效果
一、浮动之字围效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>41-浮动元素字围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
img{
width:300px;
height: 300px;
}
</style>
</head>
<body>
<!--浮动元素的"字围效果"
当div浮动，p不浮动；
div挡住了p；div的层级高，可是p中的文字不会被遮盖，此时
就造成了字围效果；
关于浮动，咱们强调一点：浮动这个元素，咱们初期必定要遵循一个原则
永远不是一个盒子单独浮动，要浮动就一块儿浮动；
-->
<div>
<img src="./pyy01.jpg" alt="">
</div>
<p>
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
你是个人眼，让我看见四级的变换，由于你是个人眼，
让我看将拥挤的人潮；你是个人眼......
</p>
</body>
</html>
42-浮动元素紧凑效果
一、浮动之紧凑效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>42-浮动元素紧凑效果</title>
<style type="text/css">
div{
float: left;
background-color: red;
}
</style>
</head>
<body>
<!--收缩：一个浮动元素，若是没有设置width，那么就自动收缩为文字中的宽度(这点跟行内元素很像)
到目前为止，咱们知道浮动的四个特性：
一、浮动的元素脱标；
二、浮动的元素相互贴靠；
三、浮动的元素有"字围效果"；
四、浮动元素的收缩效果；
此刻，若是想制做网页，就是经过浮动来实现并排的；
-->
<div>
alex
</div>
</body>
</html>
43-小米商城结构布局介绍
一、真实页面展现；
二、原型图展现；
44-小米商城顶部栏
一、结构图；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城结构图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.bar-banner{
width: 1226px;
height:40px;
/**/
/*居中显示*/
margin: 0 auto;
}
.nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
</style>
</head>
<body>
<div class="topBar">
<div class="bar-banner">
<div class="nav">导航条</div>
<div class="cart">购物车</div>
<div class="user-info">用户登陆</div>
</div>
</div>
</body>
</html>
45-小米商城导航栏
一、导航栏代码实现；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城结构图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.container1{
width: 1226px;
/**/
/*居中显示*/
margin: 0 auto;
}
.topBar-nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.topBar-cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
.logo{
float: left;
width: 62px;
height: 55px;
background-color: #E766EA;
margin-top: 22px;
}
.header{
width: 100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto ;
}
.nav{
float: left;
width: 780px;
height: 110px;
background-color: yellow;
}
.search{
float: right;
width: 296px;
height: 50px;
background-color: purple;
margin-top: 25px;
}
</style>
</head>
<body>
<!--topBar部分的盒子模型-->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">导航条</div>
<div class="topBar-cart">购物车</div>
<div class="user-info">用户登陆</div>
</div>
</div>
<!--header-->
<div class="header">
<div class="container2">
<div class="logo">logo</div>
<div class="nav">导航</div>
<div class="search">搜索框</div>
</div>
</div>
</body>
</html>
46-小米商城内容列表
一、织毛衣似的进行写代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城结构图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.container1{
width: 1226px;
/**/
/*居中显示*/
margin: 0 auto;
}
.topBar-nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.topBar-cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
.logo{
float: left;
width: 62px;
height: 55px;
background-color: #E766EA;
margin-top: 22px;
}
.header{
width: 100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto ;
}
.nav{
float: left;
width: 780px;
height: 110px;
background-color: yellow;
}
.search{
float: right;
width: 296px;
height: 50px;
background-color: purple;
margin-top: 25px;
}
.content{
width: 1226px;
height: 460px;
margin: 0 auto;
}
.content-list{
float: left;
width: 234px;
height: 460px;
background-color: #1971FE;
}
.lunbo{
float: left;
width: 992px;
height: 460px;
background-color: #FD8008;
}
</style>
</head>
<body>
<!--topBar部分的盒子模型-->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">导航条</div>
<div class="topBar-cart">购物车</div>
<div class="user-info">用户登陆</div>
</div>
</div>
<!--header-->
<div class="header">
<div class="container2">
<div class="logo">logo</div>
<div class="nav">导航</div>
<div class="search">搜索框</div>
</div>
</div>
<!--轮播图div-->
<div class="content">
<!--内容选择列表-->
<div class="content-list"></div>
<div class="lunbo"></div>
</div>
</body>
</html>
47-小米商城选购区域
一、小米商城选购区域代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城结构图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
/*清除ul的默认样式*/
list-style: none;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.container1{
width: 1226px;
/**/
/*居中显示*/
margin: 0 auto;
}
.topBar-nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.topBar-cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
.logo{
float: left;
width: 62px;
height: 55px;
background-color: #E766EA;
margin-top: 22px;
}
.header{
width: 100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto ;
}
.nav{
float: left;
width: 780px;
height: 110px;
background-color: yellow;
}
.search{
float: right;
width: 296px;
height: 50px;
background-color: purple;
margin-top: 25px;
}
.content{
width: 1226px;
height: 460px;
margin: 0 auto 14px;
}
.content-list{
float: left;
width: 234px;
height: 460px;
background-color: #1971FE;
}
.lunbo{
float: left;
width: 992px;
height: 460px;
background-color: #FD8008;
}
.shop{
width: 1226px;
height: 170px;
margin: 0 auto 40px;
/**/
}
.shop .channel{
width: 234px;
height: 170px;
float: left;
background-color: purple;
}
.shop .advertising{
width: 992px;
height: 170px;
/**/
float: left;
}
.shop .advertising ul li{
width: 316px;
height: 170px;
background-color: red;
float: right;
margin-left: 14px;
}
</style>
</head>
<body>
<!--topBar部分的盒子模型-->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">导航条</div>
<div class="topBar-cart">购物车</div>
<div class="user-info">用户登陆</div>
</div>
</div>
<!--header-->
<div class="header">
<div class="container2">
<div class="logo">logo</div>
<div class="nav">导航</div>
<div class="search">搜索框</div>
</div>
</div>
<!--轮播图-->
<div class="content">
<!--内容选择列表-->
<div class="content-list"></div>
<div class="lunbo"></div>
</div>
<!--选购区域-->
<div class="shop">
<!--商品的选购引导-->
<div class="channel">
</div>
<div class="advertising">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
48-使用浮动带来的问题
一、引出问题，浮动带来必定的影响；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-使用浮动带来的问题</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮动父，盒子通常不设置高度*/
/*出现这种状况，咱们要清除浮动带来的影响*/
/*height: 300px;*/
}
.box1{
width:200px;
height: 300px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: green;
float: left;
}
.box3{
width: 400px;
height: 100px;
background-color: blue;
float: left;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father ">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
49-清除浮动1：给父盒子设置高度
一、给父盒子设置高度来清除浮动带来的影响；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>49-清除浮动1：给父盒子设置高度</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
/*给父盒子设置高度，不灵活。
一、若是哪天公司产品经理忽然要改，要求父盒子高度变大，并且不只仅是一个地方，
那么咱们不可能去找源代码去修改
*/
/*固定导航栏*/
/*height: 40px;*/
}
ul{
list-style: none;
height: 40px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<ul>
<li>Python全栈开发</li>
<li>Linux云计算工程师</li>
<li>Web前端开发</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
50-清除浮动2=clear：both
一、使用clear：both来清除浮动；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>50-清除浮动2-clear：both</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>Linux云计算工程师</li>
<li>Web前端开发</li>
<!--给浮动元素最后面加一个空的div而且该元素不浮动，而后设置clear:both
来清除别人对个人浮动影响-->
<!--清除浮动的专业名词：内墙法-->
<!--平白无故加了div元素，结构冗余-->
</ul>
<div class="clear"></div>
</div> <div class="box"> </div> </body> </html>
51-清除浮动3-伪元素清除法（经常使用）
一、伪元素清除法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>51-清除浮动3-伪元素清除法(经常使用)</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
必需要写这三句话
*/
.clearfix:after {
content: '';
clear: both;
display: block;
}
/*新浪网站上的清除浮动的5句话，与以上效果等价*/
/*.clearfix:after {*/
/*content: ".";*/
/*display: block;*/
/*height: 0;*/
/*visibility: hidden;*/
/*clear: both*/
/*}*/
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>Python全栈开发</li>
<li>Linux云计算工程师</li>
<li>Web前端开发</li>
<!--给浮动元素最后面加一个空的div而且该元素不浮动，而后设置clear:both
来清除别人对个人浮动影响-->
<!--清除浮动的专业名词：内墙法-->
<!--平白无故加了div元素，结构冗余-->
</ul>
</div>
<div class="box">
</div>
</body>
</html>
52-清除浮动4-overflow“hidden（经常使用）
一、overflow之hidden属性隐藏；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>52-清除浮动4-overflow：hidden(经常使用)</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
.box{
width:400px;
overflow: hidden;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box2{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>Python全栈开发</li>
<li>Linux云计算工程师</li>
<li>Web前端开发</li>
<!--给浮动元素最后面加一个空的div而且该元素不浮动，而后设置clear:both
来清除别人对个人浮动影响-->
<!--清除浮动的专业名词：内墙法-->
<!--平白无故加了div元素，结构冗余-->
</ul>
</div>
<div class="box2">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
body{
overflow: auto;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
/*overflow: auto;*/
overflow: inherit;
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
53-margin垂直方向塌陷问题
一、margin在垂直方向上的塌陷问题初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-margin垂直方向塌陷问题</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
float: left;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<!--当给两个兄弟盒子设置垂直方向上的margin时候，
那么浏览器会以较大的px为准，那么咱们将这种现象称之为塌陷
一、浮动的盒子，垂直方向上不塌陷；
-->
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
54-margin：0 auto水平居中盒子
一、margin: 0 auto初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>54-margin：0 auto水平居中盒子</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
/*盒子设置水平居中的宽度时候，必定要设置width属性*/
width: 780px;
height: 50px;
background-color: red;
/*margin: 0 auto;*/
/*如下效果与以上等价，单独使用一种，left或者fight没有意义*/
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<!--
一、使用margin：0 auto；水平居中盒子；
二、盒子设置水平居中，必需要有width，要明确width的值，文字水平居中使用text-align:center;
三、只有标准流下的盒子，才能使用margin:0 auto;
四、当一个盒子浮动了，固定定位或者绝对定位了，marin:0 auto;不能使用；
五、margin:0 auto是居中盒子，不是居中文本，居中文本请使用text-aligh:center;
-->
<div>
cuixiaozhao
</div>
</body>
</html>
55-善于使用父亲的padding，而不是margin
一、优先使用padding属性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>55-善于使用父亲的padding,而不是margin</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
/*width: 300px;*/
/*height: 300px;*/
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>
56-文本属性和字体属性
一、字体属性初识；
1) font-weight；
2）font-size；
3）color；
- 十六进制值 如: ＃FF0000；
- 一个RGB值 如: RGB(255,0,0)；
- 颜色的名称 如: red；
4）text-align
5）line-height；
6）text-decoration；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 300px;
height: 100px;
/**/
border: 1px solid red;
/*浏览器默认字体大小为:16px:像素单位
像素-PC端：
em-移动端：
rem-移动端：
%-百分比:
*/
font-size: 20px;
font-weight: bolder;
text-align: right;
/*text-decoration用于清除a标签的默认样式*/
text-decoration: none blue ;
color: blueviolet;
cursor: pointer;
/*经常使用的一种写法，使得line-height等于盒子的height，内容变水平居中显示*/
line-height: 100px;
}
</style>
</head>
<body>
<div>
我是崔晓昭.
</div>
</body>
</html>
57-单行文本垂直居中
一、单行文本的垂直居中；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>57-单行文本垂直居中</title>
<style type="text/css">
div{
width: 300px;
height: 50px;
border:1px solid red;
/*行高的意思：公式：行高=盒子的高度，让文本垂直居中，可是仅适用于单行文本*/
line-height: 50px;
font-size: 18px;
}
</style>
</head>
<body>
<div>崔晓昭 河北</div>
</body>
</html>
58-多行文本垂直居中
一、多行文本的垂直居中；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>58-多行文本垂直居中</title>
<style type="text/css">
div{
width: 300px;
height: 160px;
border:1px solid red;
padding-top: 40px;
/*行高的意思：公式：行高=盒子的高度，让文本垂直居中，可是仅适用于单行文本*/
line-height: 50px;
font-size: 16px;
}
</style>
</head>
<body>
<div>
崔晓昭·河北石家庄市崔晓昭·河北石家庄市崔晓昭·河北石家庄市崔晓昭·河北石家庄市
</div>
</body>
</html>
59-font-family介绍
一、font-family初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体</title>
<style type="text/css">
p{
width: 300px;
height: 60px;
/* 等价于
font-size: 14px;
line-height: 30px;
font-family: '宋体';
*/
font:14px/30px "Arial","Hanzipen SC","微软雅黑";
}
</style>
</head>
<body>
<!--
使用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% “宋体”
-->
<p> 我是文本</p>
</body>
</html>
60-超连接美化导航案例
一、导航初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>60-超连接美化导航案例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.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: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a标签除外，不继承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">网站导航1</a>
</li>
<li>
<a href="">网站导航2</a>
</li>
<li>
<a href="">网站导航3</a>
</li>
<li>
<a href="">网站导航4</a>
</li>
<li>
<a href="">网站导航5</a>
</li>
<li>
<a href="">网站导航6</a>
</li>
</ul>
</div>
</body>
</html>
61-颜色的使用
一、CSS中，颜色的三种表示方法初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>61-颜色的使用.html</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/**/
background-color: #f00;
/* 颜色表示方法有哪些？
一共有三种：单词、rgb表示法、十六进制表示法
一、rgb:红色 绿色 蓝色 三原色（red,green,blue）
光学显示器，每一个像素都是由三原色的发光原件组成的，靠明亮度不一样调成不一样的颜色的。
用逗号隔开，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、一、二、三、四、五、六、七、八、9
16进制中的基本数字（一共16个）:
0、一、二、三、四、五、六、七、八、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 浅灰
*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
62-background-img的使用
一、平铺、不平铺以及水平&垂直方向上的图片显示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-background-img的使用</title>
<style type="text/css">
div{
width: 1500px;
height: 1600px;
background-image: url(波姐a.jpg);
/*全面平铺*/
/*backgroud-repeat*/
/*不平铺*/
/*background-repeat: no-repeat;*/
/*水平方向*/
/*background-repeat: repeat-x;*/
/*垂直方向*/
/*background-repeat: repeat-y;*/
padding:100px
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
63-background-repeat的使用
一、backgroup-repeat的使用讲解；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>63-background-repeat的使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
background-image: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg)
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.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: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a标签除外，不继承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">网站导航1</a>
</li>
<li>
<a href="">网站导航2</a>
</li>
<li>
<a href="">网站导航3</a>
</li>
<li>
<a href="">网站导航4</a>
</li>
<li>
<a href="">网站导航5</a>
</li>
<li>
<a href="">网站导航6</a>
</li>
</ul>
</div>
</body>
</html>
64-background-position的使用
一、background-postion之+ -号的使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-background-img的使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 1500px;
height: 1600px;
background-image: url(波姐a.jpg);
/*全面平铺*/
/*backgroud-repeat*/
/*不平铺*/
background-repeat: no-repeat;
background-position: +100px +100px;
/*background-position: -100px -100px;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
65-css精灵图的介绍和使用
一、CSS中精灵图(俗称雪碧图)的介绍及常规用法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>65-css精灵图的介绍和使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 48px;
height: 48px;
/*height: 1194px;*/
background-image: url(1.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.box2{
width: 48px;
height: 48px;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: 0 -440px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
66-background-position方向的使用
一、backgroup-postion的综合属性初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>60-超连接美化导航案例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
/*background-image: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg);*/
/*background-repeat: no-repeat;*/
/*水平居中，通天banner图*/
/*background-position: center top;*/
/*backgroup的综合属性进行设置*/
background: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg) no-repeat center top red;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.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: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a标签除外，不继承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">网站导航1</a>
</li>
<li>
<a href="">网站导航2</a>
</li>
<li>
<a href="">网站导航3</a>
</li>
<li>
<a href="">网站导航4</a>
</li>
<li>
<a href="">网站导航5</a>
</li>
<li>
<a href="">网站导航6</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-background-img的使用</title>
<style type="text/css">
div{
width: 1500px;
height: 1600px;
background-image: url(波姐a.jpg);
/*全面平铺*/
/*backgroud-repeat*/
/*不平铺*/
/*background-repeat: no-repeat;*/
/*水平方向*/
/*background-repeat: repeat-x;*/
/*垂直方向*/
/*background-repeat: repeat-y;*/
/*padding: 100px;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
67-background-attachment的使用
一、综合属性之background-attachment的运用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>67-background-attach的使用</title>
<style type="text/css">
div{
width: 1200px;
height: 2000px;
border: 1px solid red ;
background: url(佟丽娅a.jpg) no-repeat 0 0;
/*固定背景图片，使得不随鼠标滚动而滚动*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
68-相对定位的介绍、特性
一、相对定位概念初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>68-相对定位的介绍</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
/*若是对当前元素仅仅设置相对定位，那么与标准流下的盒子没有任何区别*/
position: relative;
/*设置相对定位后，咱们就可使用四个方向的属性，top left right bottom
相对定位：相对于本身原来的自己定位，top:20px;
那么盒子相对于原来的位置向下移动，即相对定位仅仅是微调咱们元素的位置；
*/
top:20px;
left:30px;
}
</style>
</head>
<body>
<!--定位有三种
一、相对定位；
二、绝对定位；
三、固定定位；
抛出异常：这三种定位，都暗藏玄机，咱们一一掌握！
position:relative;
position:absolute;
position:fixed;
-->
<div class="box1"></div>
</body>
</html>
69-相对定位的用途
一、相对定位的三大特性详解；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>69-相对定位的特性、位置属性</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>
<!--相对定位的三大特性：
一、不脱标（标准流）；
二、形影分离；
三、老家留坑；
在页面中，没有什么太大的做用，影响咱们的布局。可是咱们不要使用相对定位
来作压盖效果；
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
70-相对定位的用途
一、相对定位的弊端演示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-相对定位的用途</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
/*background-image: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg);*/
/*background-repeat: no-repeat;*/
/*水平居中，通天banner图*/
/*background-position: center top;*/
/*backgroup的综合属性进行设置*/
background: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg) no-repeat center top red;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
/*相对定位的弊端效果演示*/
.nav ul li.xiaoming{
position: relative;
top:40px;
left: 30px;
/*padding: 50px;*/
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a标签除外，不继承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">网站导航1</a>
</li>
<li class="xiaoming">
<a href="">网站导航2</a>
</li>
<li>
<a href="">网站导航3</a>
</li>
<li>
<a href="">网站导航4</a>
</li>
<li>
<a href="">网站导航5</a>
</li>
<li>
<a href="">网站导航6</a>
</li>
</ul>
</div>
<!--由于相对定位有坑，站着位置不做为，恶心人，就想部分guoqi单位，因此咱们通常不要使用相对定位来作压盖效果。
他在页面中，效果做用极小，就以下两个做用：
一、微调元素位置；
二、作绝对定位的参考(父元素相对定位，子元素绝对定位)讲到绝对定位时候会讲到；
-->
</body>
</html>
二、相对定位的做用说明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-相对定位的用途2</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
/*微调咱们的元素信息*/
.btn {
position: relative;
top: 3px;
left: -5px;
}
</style>
</head>
<body>
<div>
<input type="text" name="username" class="user" />
<!--相对定位的做用演示-->
<input type="button" value="点我吧" class="btn"/>
</div>
</body>
</html>
71-绝对定位的介绍、属性
一、决定定位初识及其属性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>71-绝对定位的介绍、特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
/*绝对定位的盒子：一、脱标；二、作遮盖效果，提高了层级；三、设置绝对定位以后，不区分行内元素和块级元素，都能设置宽高*/
position: absolute;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
span{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*position:relative;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>崔晓昭</span>
</body>
</html>
72-绝对定位参考点
一、绝对定位参考点说明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/**{
padding: 0;
margin: 0;
}*/
body{
width: 100%;
height: 2000px;
border: 10px solid green;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位的参考点：当咱们使用top属性描述的时候
是以页面的左上角(跟浏览器的左上角有区分)做为参考点来调整位置
当我使用bottom属性描述的时候，是以首屏左下角做为参考点。
*/
position: absolute;
/*top: 100px;*/
bottom: 100px;
left: 38px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
73-绝对定位以父辈元素做参考点
一、父辈元素做为参考点的场景演示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>73-绝对定位以父辈元素做参考点</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;*/
top: 100px;
left: 20px;
}
/*给父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角做为参考点,
这父辈元素不必定是爸爸，有多是爷爷；
*/
</style>
</head>
<body>
<div class="box">
<div class="box2">
<p></p>
</div>
</div>
</body>
</html>
74-父绝子绝、父相子绝、父固子绝
一、以上标题的说明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>74-父绝子绝、父相子绝、父固子绝</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父辈元素设置绝对定位*/
position: absolute;
padding: 50px;
}
.box p{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
/*top: 100px;
left: 20px;*/
}
/*给父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角做为参考点,
这父辈元素不必定是爸爸，有多是爷爷；
一、若是父亲设置了定位，那么以父亲为参考点。
二、若是父亲未设置定位，那么以父辈元素设置了定位的为参考点；
*/
</style>
</head>
<body>
<!--不只仅是"父相子绝"、"父绝子绝"、"父固子绝",都是以父辈元素为参考点！
注意啦"父绝子绝"没有实战意义，作站的时候不会出现该状况，由于绝对定位脱离标准流，影响页面的布局。
相反"父相子绝"在咱们页面布局中，是经常使用的布局方案。由于父亲设置相对定位，不脱离标准流，子元素设置绝对定位，
仅仅是在当前父辈元素内调整位置信息。
-->
<div class="box">
<p></p>
</div>
</body>
</html>
75-绝对定位的盒子无视父辈的padding
一、无视父辈的padding；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>75-绝对定位的盒子无视父辈的padding</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid red;
position: relative;
padding: 50px;
}
.father p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="father">
<p></p>
</div>
<!--绝对定位的盒子是无视父辈的padding的-->
</body>
</html>
76-绝对定位盒子居中
一、绝对定位盒子中：margin:0 auto的代替方案；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>76-绝对定位盒子居中</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
/**/
background-color: #000000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: absolute;
/*公式讲解：设置绝对定位以后，margin:0不起做用；
若是想让绝对定位的盒子居中显示，使用以下方案：
一、先设置left:50%；
二、再使用margin-left等于元素宽度的1/2,即可实现绝对定位盒子居中*/
left: 50%;
margin-left: -480px;
}
</style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div>
</body>
</html>
77-固定定位案例_返回顶部
一、固定定位fixed初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>77-固定定位介绍和特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
/*固定定位*/
/*固定定位：固定当前的元素不会随着页面滚动而滚动
参考点：设置固定定位，用top描述，那么是以浏览器的左上角为参考点
若是用bottom描述，那么是以浏览器的左下角为参考点；
做用：
一、返回顶部栏；
二、固定导航栏；
三、作页面的广告；
*/
position: fixed;
/*top: 100px;
left: 100px;*/
bottom: 100px;
right: 40px;
}
</style>
</head>
<body>
<div>
<p>你们注意啦！此处是固定定位！</p>
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
</div>
</body>
</html>
78-固定定位案例_固定导航栏
一、固定导航栏以及JavaScript初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>78-固定定位案例_返回顶部</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
/*top: 100px;
left: 100px;*/
bottom: 30px;
right: 40px;
line-height: 100px;
font-size: 20px;
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body>
<div>
<p>返回顶部</p>
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
</div>
//后面的JavaScript章节会用到；
<script src="./js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('p').click(function(){
$('html').animate({
"scrollTop":0
},2000)
})
})
</script>
</body>
</html>
79-固定定位案例_固定导航栏
一、固定导航栏；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>79-固定定位案例_固定导航栏</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{
width: 160px;
height: 49px;
float: left;
/*line-height: 49px;*/
text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "微软雅黑" "agency fb";
}
.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="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
</body>
</html>
80-z-index的四大特性
一、z-index的四大特性初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>80-z-index的四大特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 30px;
left: 40px;
/*引入z-index值*/
z-index: 1;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
top: 0;
left: 0;
/*引入z-index值*/
z-index: -1;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: left;
margin-left: 20px;
margin-top: -30px;
/*带有float属性的，没法使用z-index属性*/
/*z-index: 5;*/
}
</style>
</head>
<body>
<!--z-index
一、表示谁压着谁，即遮盖，数值大亚盖住数值小的；
二、只有定位了的元素，才能有z-index，也就是说，无论相对定位，绝对定位，固定定位；
都可以可使用z-index，而浮动元素不能使用；
三、z-index值没有单位，就是一个正整数，默认的z-index的值为0；
四、若是你们都没有z-index值，或者z-index值同样，那么谁写在HTML后面，谁在上面压着别人
定位了元素，永远压住没有定位的元素。
五、从父现象：父亲怂了，儿子再牛逼也没用；
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
81-z-index的从父现象
一、z-index从父现象初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>81-z-index的从父现象</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.cql{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 3;
}
.cql .cxs{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 240px;
left: 300px;
z-index: 333;
}
.gzf{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 2;
}
.gzf .cxz{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 320px;
/*从父现象*/
z-index: 666;
}
</style>
</head>
<body>
<div class="cql">
<p class="cxs"></p>
</div>
<div class="gzf">
<p class="cxz"></p>
</div>
</body>
</html>
82-z-index的用途
一、z-index的用途初识；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>82-z-index的用途</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;
z-index: 9999;
}
.wrap .nav{
width: 960px;
height: 49px;
margin: 0 auto;
z-index: 8888;
}
.wrap .nav ul li{
float: left;
width: 160px;
height: 49px;
/*line-height: 49px;*/
text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "微软雅黑" "agency fb";
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
.app{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</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="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<div class="app"></div>
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
<img src="佟丽娅a.jpg" alt="" />
</body>
</html>
相关文章
- 1. 第五模块：WEB开发基础 第1章·HTML&CSS基础
- 2. 【前端】第五模块·WEB开发基础-第3章jQuery&Bootstrap
- 3. 【前端】第五模块·WEB开发基础-第2章JavaScript基础
- 4. 第五模块：WEB开发基础 第2章·JavaScript基础
- 5. 第五模块·WEB开发基础-第2章JavaScript基础
- 6. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
- 7. 第五模块·WEB开发基础-第3章jQuery&Bootstrap
- 8. 第五章 模块之基础知识
- 9. 第五章 基础构建模块
- 10. Web前端基础(18):jQuery基础(五)
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • PHP开发工具
- • Kotlin学习（二）基本类型
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 第五模块：WEB开发基础 第1章·HTML&CSS基础
- 2. 【前端】第五模块·WEB开发基础-第3章jQuery&Bootstrap
- 3. 【前端】第五模块·WEB开发基础-第2章JavaScript基础
- 4. 第五模块：WEB开发基础 第2章·JavaScript基础
- 5. 第五模块·WEB开发基础-第2章JavaScript基础
- 6. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
- 7. 第五模块·WEB开发基础-第3章jQuery&Bootstrap
- 8. 第五章 模块之基础知识
- 9. 第五章 基础构建模块
- 10. Web前端基础(18):jQuery基础(五)