这里写目录标题

一.基础内容
- 1.网页
- - 1.1什么是网页
  - 1.2什么是HTML
  - 1.3网页的形成
- 2.常用浏览器
- - 2.1常用的浏览器
  - 2.2浏览器内核
- 3.web标准
- - 3.1为什么需要web标准
  - 3.2web标准组成
二.HTML
- 1.HTML语法规范
- - 1.1基本语法
  - 1.2标签关系
- 2.HTML基本结构标签（骨架标签）
- 3.常用开发工具
- - 3.1文档类型声明标签
  - 3.2lang语言种类
  - 3.3字符集
- 4.HTML常用标签
- - 4.1标签语义
  - 4.2标题标签`<h1>-<h6>`
  - 4.3段落标签与换行标签
  - 4.4文本格式化标签![在这里插入图片描述](https://img-blog.csdnimg.cn/79a325ffceb04f7baecc51faeb0c0af0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiA5Y-25LmL5bee,size_20,color_FFFFFF,t_70,g_se,x_16)
  - 4.5`<div>`和`<span>`标签
  - 4.6图像标签和路径
  - 4.7超链接标签
- 5.HTML中的注释和特殊字符
- - 5.1注释
  - 5.2特殊字符
- 6.表格类标签
- - 6.1表格标签
  - 6.2列表标签
  - 6.3表单标签
  - 6.4综合案例
  - 6.5查阅文档
三.CSS
- 1.css简介
- - 1.1html的局限性
  - 1.2css-网页美容师
  - 1.3css语法规范
  - 1.4css代码风格
- 2.css基础选择器
- - 2.1css选择器作用
  - 2.2选择器分类
  - 2.3标签选择器
  - 2.4类选择器
  - 2.5id选择器
  - 2.6通配符选择器
  - 2.7基础选择器总结
- 3.css字体属性
- - 3.1字体系列
  - 3.2字体大小
  - 3.3字体粗细
  - 3.4字体样式
  - 3.5字体复合属性
  - 3.6字体属性总结
- 4.css文本属性
- - 4.1文本颜色color
  - 4.2文本对齐text-align
  - 4.3装饰文本text-decoration
  - 4.4文本缩进text-indent
  - 4.5行间距line-height
  - 4.6文本属性总结
- 5.css引入方式
- - 5.1css三种样式表
  - 5.2css内部样式表
  - 5.3行内样式表
  - 5.4外部样式表
  - 5.5css引入方式总结
- 6.css综合案例
- 7.css调试工具
- 8.Emmet语法
- - 8.1快速生成html结构语法
  - 8.2快速生成css样式
  - 8.3快速格式化代码
- 9.css复合选择器
- - 9.1后代选择器
  - 9.2子选择器
  - 9.3并集选择器
  - 9.4伪类选择器
  - 9.5复合选择器总结
- 10.css元素显示模式
- - 10.1什么是元素显示模式
  - 10.2块级元素（标签）
  - 10.3行内元素（标签）
  - 10.4行内块元素
  - 10.5总结
  - 10.6元素显示模式转换
- 11.css的背景
- - 11.1背景颜色
  - 11.2背景图片
  - 11.3背景平铺
  - 11.4背景图片位置
  - 11.5背景图像固定
  - 11.6背景属性复合写法
  - 11.7背景色半透明
  - 11.8背景总结
  - 11.9导航栏案例
- 12.css的三大特性
- - 12.1层叠性
  - 12.2继承性
  - 12.3优先级
四.CSS盒子
- 1.css盒子模型
- - 1.1盒子模型（box model）组成
  - 1.2边框border
  - 1.3内边距padding
  - 1.4外边距margin
  - 1.5清除内外边距
- 2.ps基本操作
- 3.综合案例
- 4.圆角边框
- 5.盒子阴影（重点）
- 6.文字阴影
五.css浮动float
- 1.浮动
- - 1.1为什么需要浮动
  - 1.2什么是浮动
  - 1.3浮动特性（重难点）
  - 1.4标准流与浮动的搭配使用
- 2.常见网页布局
- 3.清除浮动
- - 3.1为什么要清除浮动
  - 3.2清除浮动的本质
  - 3.3清除浮动的方法
  - 3.4清除浮动的总结
- 4.ps切图
- - 4.1常见图片格式
  - 4.2图层切图
  - 4.3切片切图
  - 4.4ps插件切图
- 5.案例
六.css定位
- 1.定位
- - 1.1为什么需要定位
  - 1.2定位组成
- 2.综合案例
- 3.网页布局总结
- 4.元素的显示与隐藏
- - 4.1display
  - 4.2visibility 可见性
  - 4.3overflow 溢出
  - 4.4土豆案例
七.css高级技巧
- 1.精灵图
- - 1.1为什么需要精灵图
  - 1.2精灵图（sprites）的使用
- 2.字体图标
- - 2.1字体图标的产生
  - 2.2字体图标的优点
  - 2.3字体图标下载
  - 2.4字体图标的引用
- 3.css三角
- 4.css用户界面样式
- - 4.1鼠标样式cursor
  - 4.2轮廓线outline
  - 4.3防止拖拽文本域resize
- 5.vertical-align属性应用
- 6.溢出文字省略号显示
- - 6.1单行文本溢出显示省略号
  - 6.2多行文本溢出显示省略号（后台人员做更简单）
- 7.常见布局技巧
- - 7.1布局技巧1-margin负值运用
  - 7.2布局技巧2-文字围绕浮动元素
  - 7.3布局技巧3-行内块元素运用
  - 7.4布局技巧4-三角强化
  - 7.css初始化
八.html5css3提高
- 1.html5新特性
- - 1.1新增语义化标签
  - 1.2新增多媒体标签
  - 1.3新增input类型
  - 1.4html5新增表单属性
- 2.css3新特性
- - 2.1属性选择器 [ ]
  - 2.2结构伪类选择器：
  - 2.3伪元素选择器 ::
  - 2.4css盒子模型
  - 2.5css滤镜filter
  - 2.6css calc函数
  - 2.7css过渡
  - 2.8 2D转换 transform
  - 2.9 css3动画 animation
  - 2.10 3D转换 transform
  - 2.11 浏览器私有前缀
九，品优购项目
- 1.项目规划
- - 1.1网站制作流程
  - 1.2品优购项目整体介绍
  - 1.3开发工具与技术栈
  - 1.4品优购项目搭建工作
  - 1.5网站favicon图标
  - 1.5SEO优化
- 2.首页制作
- - 2.1常见类名
  - 2.2快捷导航制作
  - 2.3header制作
  - 2.4nav导航栏制作
- 3.列表页制作
- 4.注册页制作
- 5.域名注册与网站上传
十.移动web开发
- 1.流式布局
- - 1.1移动端基础
  - 1.2视口viewport
  - 1.3二倍图
  - 1.4移动端开发选择
  - 1.5移动端技术解决方案
  - 1.6移动端常见布局
  - 1.7流式布局(百分比布局)
  - 1.8京东移动端首页制作
- 2.flex布局
- - 2.1.布局简述
  - 2.2.布局原理
  - 2.3flex布局父项常见属性
  - 2.4flex布局子项常见属性
  - 2.5携程网首页案例
- 3.rem适配布局
- - 3.1rem基础
  - 3.2媒体查询
  - 3.3less基础
  - 3.4rem适配方案
  - 3.5苏宁首页案例
  - 3.6rem适配方案2（推荐）
- 4.响应式布局
- - 4.1响应式开发
  - 4.2Bootstrap前端开发框架
  - 4.3Bootstrap栅格系统
  - 4.4阿里百秀首页案例
- 5.移动端布局总结
十一.JavaScript
- 0.计算机基础
- - 0.1编程语言
  - 0.2计算机基础
- 1.js初识
- - 1.1初识JavaScript
  - 1.2js注释
  - 1.3js输入输出语句
- 2.js变量
- - 2.1变量概述
  - 2.2变量的使用
  - 2.3变量语法扩展
  - 2.4变量命名规范
  - 2.5变换变量案例
  - 2.6变量小结
- 3.js数据类型
- - 3.1数据类型简介
  - 3.2简单数据类型
  - 3.3获取变量数据类型
  - 3.4数据类型转换

一.基础内容

1.网页

1.1什么是网页

1.网站：是指在因特网上根据一定规则，使用html等制作的的用于展示特定内容相关的网页集合
2.网页：通常是htm格式文件，通常由图片，链接，文字，声音，视频等元素组成。

1.2什么是HTML

1.HTML：指的是超文本标记语言（Hyper Text Markup Language），它不是编程语言，是标记语言，用来表述网页的一种语言。由标签组成，如图片标签，视频标签等
2.标记语言：是一套标记标签（Markup tag）
注：超文本指的是超越文本限制，可以加入视频，音频。超链接等内容

1.3网页的形成

1.网页是由网页元素组成，这些网页元素是利用html标签描述出来的，然后通过浏览器显示给用户。
2.流程：前端人员开发代码→浏览器显示代码（解析，渲染）→生成web界面

2.常用浏览器

2.1常用的浏览器

1.浏览器，是网页显示、运行的平台
2.常用的有IE，火狐，谷歌，Safari，Opera等

2.2浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

3.web标准

web标准是由w3c组织和其他组织指定的一系列标准的集合。w3c（万维网联盟）是国际著名的标准化组织

3.1为什么需要web标准

浏览器不同，显示页面的排版就有些许差异

3.2web标准组成

三大组成部分
①结构（structure）：对网页元素进行整理和分类，主要为HTML
②表现（presentation）：用于设置网页的版式、颜色、大小等外观样式，主要指css
③行为（Behavior）：指网页模型的定义以及交互的编写，现阶段主要学的是JavaScript
web标准最佳体验方案：结构样式行为相分离（即结构卸载html文件中，表现写在css文件中，行为写在Javascript文件中）

二.HTML

1.HTML语法规范

1.1基本语法

1.html标签是由尖括号包围的关键词，例如：<html>
2.双标签：成对出现，如<html></html>，分别为开始标签和结束标签。
3.单标签：极少出现，如<br/>

1.2标签关系

2.HTML基本结构标签（骨架标签）

3.常用开发工具

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>驭灵师</title>
</head>
<body>欢迎来到驭灵师世界
</body>
</html>

3.1文档类型声明标签

<!DOCTYPE >文档类型声明，告诉浏览器使用的哪种html版本来显示网页（它不是html标签，就是一个文档类型声明标签，位置处于html标签之前）
<!DOCTYPE html>表示当前使用的是html5版本显示网页

3.2lang语言种类

<html lang="en">
用于定义文档显示语言
lang即language
en为英语，zh-CN为中文，fr为法文
但是en能显示中文，zh-CN也能显示英文，一般用zh-CN

3.3字符集

<meta charset="UTF-8">
charset（Character set）字符集，是多个字符的集合，便于计算机识别和存储各种文字。
在head标签中可以通过meta标签的charset属性来规定html使用哪种字符编码

常见的字符编码有：GB2312，BIG5，GBK和UTF-8,UTF-8被称为万国码，基本包含了全球所有国家要用到的字符

4.HTML常用标签

4.1标签语义

标签语义指标签的含义，也就是这个标签是用来干什么的，在合适的地方用合适的标签，可以让页面结构更加清晰（记住语义是重中之重）

4.2标题标签`<h1>-<h6>`

<h1>诸天盟会</h1>
<h2>东部议会</h2>
<h3>东极岛</h3>
<h4>驭灵师大考考场</h4>
<h5>海皇秘境</h5>
<h6>神宵荡魔炮</h6>

h即head的缩写，意思是头部，标题
标签语义：作为标签使用，重要性依次递减
特点：①字体会加粗，字号会渐变，②一个标题独占一行

4.3段落标签与换行标签

1.段落标签<p></p>
p即paragraph的缩写，意为段落
标签语义：可以吧html文档分割为若干段落
特点：①文本在一个段落中会根据浏览器窗口大小自动换行。②段落与段落之间有较大空隙

2.换行标签<br/>
break的缩写
标签语义：强制换行
特点：①是单标签。②简单的开始新的一行，并不会像段落一样插入垂直间距
（不加“/”也可以）

4.4文本格式化标签

重点记住加粗和倾斜
标签语义：突出重要性

4.5`<div>`和`<span>`标签

div是division的缩写，表示分割，分区
span表示跨度，跨距
无语义，就是一个盒子
特点：①div用于布局，独占一行。②span用于布局，一行可以有多个span。

4.6图像标签和路径

1.图像标签

<img src="">

img是image的缩写，意为图像
src是img标签的必须属性，用于指定图像文件的路径和文件名
属性：属于这个图像标签的特性
其他属性：
src：存放图片的地址，img必须要写这个属性
alt：当图片不能显示时，将会出现这一行文字
title：鼠标放在图片上显示的文字
注意点：
①图像标签可以有多个属性，必须写在标签名后面
②属性之间不分先后，标签名与属性之间，属性与属性之间以空格隔开
③属性采取键值对格式，也就是key=“value” 属性=“属性值”

2.路径
①目录文件夹与根目录
目录文件夹：一个存放了我们的页面所需要的所有素材的文件夹

根目录：打开文件夹的第一层就是根目录

②路径
通常我们会把图片放在一个文件夹里，这是查找图像，要通过指定路径的方式指定图像的位置
可分为相对路径和绝对路径
相对路径：以引用文件所在位置为参考基础建立目录路径，即图片相对于HTML页面的位置

绝对路径：只目录下的绝对位置，通常从盘符开始

4.7超链接标签

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

a是anchor的缩写，意思是锚

2.链接分类
①外部链接，例如http://www.baidu.com
②内部链接，内部网页之间的相互连接
③空链接，当没有明确链接目标时，可以<a href="#">空链接</a>
④下载链接，放一个zip文件或者exe文件，点击后会下载（添加时注意是同级还是上下级）
⑤网页元素的链接，各种元素都可以添加超链接，图片，视频等都可以
⑥锚点链接，点击链接，快速定位到页面中的某个位置

5.HTML中的注释和特殊字符

5.1注释

<!-- 注释 -->

快捷方式：ctrl+/

5.2特殊字符

一些字符不方便使用，可以用下面的字符表示（仅记住大于小于空格即可，其他用到再查）

6.表格类标签

6.1表格标签

1.作用：不是用来布局页面的，而是用来显实和展示数据，可以让数据显示非常规整，可读性非常好。

2.表格的基本语法

<table><tr><td>姓名</td> <td>所属</td> <td>封号</td></tr><tr><td>王小明</td> <td>南部议会</td> <td>天王</td></tr>
</table>

姓名	所属	封号
王小明	南部议会	天王

①table是用来定义表格的标签
②tr定义表格中的行，要嵌套在table中才行
③td定义表格中的单元格，嵌套在tr标签中
④td为table data缩写，即数据单元格的内容
3.表头单元格
一般位于表格中的第一行或者第一列，表头单元格内容加粗居中显示

标签表示html表头部分，为table head的缩写

<table><tr><th>姓名</th> <th>所属</th> <th>封号</th></tr><tr><td>王小明</td> <td>南部议会</td> <td>天王</td></tr>
</table>

姓名	所属	封号
王小明	南部议会	天王

4.表格属性
不常用，主要用css设置，此处仅了解
这些属性要写在table标签中才生效

<table align="center">

5.表格结构标签
使用场景：当表格很长时，为了更好地表达表格语义，可以分割为表格头部和表格主体两大部分
用thead表示头部区域，tbody表示主体区域，以更好地分清表格结构

<table><thead><tr><th>标题</th></tr></thead><tbody><tr><td>内容</td></tr></tbody>
</table>

6.合并单元格
合并单元格方式：

跨行合并：rowspan=“合并单元格个数”，二行和三行，以最上侧单元格为目标单元格
跨列合并：colspan=“合并单元格个数”，二列和三列，以最左侧单元格为目标单元格

步骤：

        <tr><th>姓名</th> <th>所属</th> <th>封号</th></tr><tr><td>王小明</td> <td>南部议会</td> <td><a href="#">天王</a></td></tr><tr><td colspan="2">李狗蛋</td>  <td>金徽大骑士</td></tr><tr><td>凌耀天</td> <td>东部议会</td> <td rowspan="2">御史</td></tr><tr><td>北极光</td> <td>北部议会</td> </tr>

7.表格总结
①相关标签
table tr td th thead tbody
②相关属性
align border cellpadding cellspacing width height
③合并单元格
rowspan colspan

6.2列表标签

表格是用来显示数据的，列表是用来布局的
特点：整齐，整洁，有序
分类：

1.无序列表（重点）
标签为<ul>,内部的列表项用<li>标签定义

<ul><li>笨蛋老虎</li><li>平胸蜻蜓</li><li>血狱</li>
</ul>

特点：
①无序列表的各个列表项之间没有顺序级别之分，属于并列关系
②ul中只能嵌套li，无法输入其他标签，文字
③li相当于一个容器，可以容纳所有元素
④无序列表会带有自己的样式属性，实际使用时会使用css来设置

2.有序列表
标签为<ol>,内部的列表项用<li>标签定义

<ol><li>笨蛋老虎</li><li>平胸蜻蜓</li><li>血狱</li>
</ol>

特点：
①有序列表的各个列表项之间有顺序之分
②ol中只能嵌套li，无法输入其他标签，文字
③li相当于一个容器，可以容纳所有元素
④无序列表会带有自己的样式属性，实际使用时会使用css来设置

3.自定义列表
自定义列表常用于对术语或名词进行解释和描述，列表前没有任何项目目标
标签为<dl>,内部的列表项用<dt>（项目名字） <dd>（项目描述）标签定义

<dl><dt>笨蛋老虎</dt><dd>平胸蜻蜓</dd><dd>血狱</dd>
</dl>

特点：
①ul中只能嵌套dt和dd，无法输入其他标签，文字
②dt和dd个数没有限制，经常是一个dt对应多个dd

6.3表单标签

目的：收集用户信息
在html中，一个完整的表单通常由表单域，表单控件（也叫表单元素）和提示信息3部分组成

1.表单域：
表单域就是一个包含表单元素的区域
在html标签中，用form标签定义表单域（form会把它范围内的表单元素信息提交给服务器）

<form action="url地址" method="提交方式" name="表单域名称">各种表单元素和提示信息
</form>

2.表单元素：
①input表单元素，用于收集用户信息
<input type="属性值">
input标签中包含一个type属性，根据不同属性值，输入字段可以有很多类型
特点：input为单标签，通过设置type属性值指定不同空间类型

主要掌握部分：

<!-- text可以输入文本内容 -->
text：<input type="text"><br>
<!-- password用来隐蔽输入密码 -->
password：<input type="password"><br>
<!-- radio单选按钮 -->
radio：男<input type="radio">女<input type="radio"><br>
<!-- checkbox 复选框-->
checkbox：天时<input type="checkbox">地利<input type="checkbox">人和<input type="checkbox"><br>
<!-- submit提交 ，把表单元素提交给后台服务器-->
sunmit：<input type="submit" value="免费注册">
<!--reset重置所有表单数据  -->
reset：<input type="reset" value="重置"><br>
<!-- button普通按钮，结合js使用 -->
button：<input type="button" value="获取短信验证码"><br>
<!-- file文件域 ，上传文件使用 -->
file：<input type="file">

其他属性值：

name属性和value属性
radio：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"><br>
注意：
name和value是每个表单元素都有的属性值，主要是给后台人员看
单选那妞和复选框都要求有相同的name值，用于区分不同的表单元素
如果不加name值，会出现单选框可以多选的情况
使用value后，输入框中就会出现默认显示值，如：请输入姓名
checked和maxlength属性
radio：男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex" value="女">
checked设置选项的默认值
text：<input type="text" maxlength="6"><br>
设置输入字符数量的限制
注意：
checked主要针对单选按钮和复选框

②label标签
label标签为input元素定义标注
label标签绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将光标转到对应的表单元素上，以增加用户体验。
语法：

<label for="sex">男（点击此处即可选中）</label>
<input type="radio" id="sex">

注意：label的for属性应当与对应元素的id属性相同

③select表单元素
页面中存在多个选项且需要节约空间时，使用select定义下拉列表

<form action="">归属地：<select><option>中立之地</option><option>东部议会</option><option>西部议会</option><option selected="selected">南部议会</option><option>北部议会</option></select></form>

注意：一个select下拉列表标签中至少包含一对option选项标签。option中定义selected="selected"时，即为默认选中项

④textarea表单元素
语法：

<form action="">作战报告：<textarea cols="30" rows="50">作战失败</textarea>
</form>

注意：通过text标签可以创建多行文本输入框，rows是显示的行数，cols是每行多少字符数，实际开发中使用css，不用这个。

⑤表单总结

三大表单元素：input输入表单元素，select下拉表单元素，textarea文本域表单元素
三组表单元素均应该包含在form表单域中，且具有name属性
三个名称相近的标签
表单域form，文件域file，文本域textarea

6.4综合案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>驭灵师登记表</title>
</head>
<body><h4>诸天盟会驭灵师登记表</h4><table width="500" ><!-- 第一行 --><tr><td>性别</td><td><input type="radio" name="sex" id="nan"><label for="nan">男</label><input type="radio" name="sex" id="nv"><label for="nv">女</label></td></tr><!-- 第二行 --><tr><td>生日</td><td><select name="" id=""><option value="" selected="selected">--请选择年--</option><option value="">2000</option><option value="">2001</option><option value="">2002</option><option value="">2003</option><option value="">2004</option><option value="">2005</option><option value="">2006</option><option value="">2007</option><option value="">2008</option><option value="">2009</option><option value="">2010</option></select><select name="" id=""><option value="" selected="selected">--请选择月--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select name="" id=""><option value="" selected="selected">--请选择日--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select></td></tr><!-- 第三行 --><tr><td>登记区</td><td><input type="text" value="请填写登记议会"></td></tr><!-- 第四行 --><tr><td>使灵战斗形态觉醒状况</td><td><input type="radio" name="juexing" id="nan"><label for="nan">未觉醒</label><input type="radio" name="juexing" id="nv"><label for="nv">已觉醒</label><input type="radio" name="juexing" id="nv"><label for="nv">觉醒变异战斗形态</label></td></tr><!-- 第五行 --><tr><td>使灵属性</td><td><input type="checkbox" name="shuxing" id="feng"><label for="feng">风</label><input type="checkbox" name="shuxing" id="yan"><label for="yan">岩</label><input type="checkbox" name="shuxing" id="lei"><label for="lei">雷</label><input type="checkbox" name="shuxing" id="cao"><label for="cao">草</label><input type="checkbox" name="shuxing" id="shui"><label for="shui">水</label><input type="checkbox" name="shuxing" id="huo"><label for="huo">火</label><input type="checkbox" name="shuxing" id="bing"><label for="bing">冰</label></td></tr><!-- 第六行 --><tr><td>使灵鉴定</td><td><textarea name="" id="" cols="30" rows="3">使灵鉴定结果</textarea></td></tr><!-- 第七行 --><tr><td></td><td><input type="submit" value="信息提交"></td></tr><!-- 第八行 --><tr><td></td><td><input type="checkbox" checked="checked" name="tongyi" id="xieyi"><label for="xieyi">我同意登记条款及驭灵师守则</label> </td></tr><!-- 第九行 --><tr><td></td><td><a href="#">我已登记，进入系统内部</a></td></tr><!-- 第十行 --><tr><td></td><td><h4>我承诺</h4><ul><li>不背叛注册议会</li><li>不背叛诸天盟会</li><li>不抛弃缔约使灵</li></ul></td></tr></table>
</body>
</html>

6.5查阅文档

三.CSS

1.css简介

1.1html的局限性

html只注重内容的语义，仅仅告诉你，这有什么，那有什么，原始的网页都有一个共同的特点：丑
尽管可以做一些样式，但只会带来繁琐和臃肿

1.2css-网页美容师

css：层叠样式表（Cascading Style Sheets），也称作css样式表或者级联样式表，也是一种标记语言。
作用：主要用于设置html页面中的文本内容（如字体，大小，对齐方式等），图片外形（宽高，边框样式，边距等）以及版面布局和外观显示样式
总结：
1.html主要做结构，显示元素内容
2.css美化HTML，布局页面

1.3css语法规范

css规则主要由两个主要部分组成：选择器以及一条或者多条声明

    <title>css语法规范</title><style>/* 选择器{样式} */p{color: red;}</style>
</head>
<body><p>红色字体</p>
</body>

选择器是用于指定css样式的html标签，花括号内是对该对象设置的样式
属性和属性值以键值对形式出现，中间以：分隔开
属性是对指定对象设置的样式属性，如字体大小，文本颜色等
属性值后面加分号“；”

1.4css代码风格

1.展开格式

2.字母小写
3.属性值前面，冒号后面，保留一个空格，选择器后面，大括号之前，保留一个空格

2.css基础选择器

2.1css选择器作用

作用：根据不同需求把不同的标签处选出来，

2.2选择器分类

分为基础选择器和复合选择器两大类
基础选择器是单个选择器构成的，又分为标签选择器，类选择器，id选择器，通配符选择器

2.3标签选择器

标签选择器（元素选择器）是以html标签作为选择器，按照标签名分类，为页面中某一类标签指定统一css样式，可以将同一类标签全部选择出来
语法：

 <style>p {color: red;}div {color: green;}</style>
</head>
<body><p>红色字体</p><p>红色字体</p><p>红色字体</p><div>绿色字体</div><div>绿色字体</div><div>绿色字体</div>

优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部当前标签

2.4类选择器

当要单独选择一个或者多个标签时，使用类选择器，在HTML中用class属性表示，在css中，用“.”显示
样式.定义，结构class调用
语法：

    <style>p {color: red;}div {color: green;}.pink {color: pink;}</style>
</head>
<body><p class="pink">红色字体</p><p>红色字体</p><div>绿色字体</div>

注意事项：

类选择器-多类名：
可以给一个标签指定多个类名，即一个标签有多个名字

    <style>.red {color: red;}.font35 {font-size: 35px;}.font24 {font-size: 24px;}</style>
</head>
<body><div class="red font35">阿巴阿巴</div><div class="red font24">玛卡巴卡</div>
</body>

使用方式：
①在class属性中写多个类名，
②多个类名中间要用空格隔开，
③这个标签就可以分别具有这些类名的样式，
④可以把一些元素样式相同的的样式放在一个类里面，这些标签就可以调用公共类，再调用独有类，统一修改也方便，还节省代码

2.5id选择器

为特有id的html标签指定样式，
样式#定义，结构id调用，只能调用一次，别人切勿使用
语法：

    <style>#gold {color: gold;}</style>
</head>
<body>
<div id="gold">萨日朗</div>
</body>

id选择器和类选择器区别：
①类选择器好比人的名字，一个人可以有多个名字，一个名字可以多个人使用
②id选择器好比身份证号，全国唯一，不得重复
③不同就在于使用次数上
④类选择器在修改样式中用的最多，id选择器一般用于页面唯一的元素上，经常和js一起用

2.6通配符选择器

** *号定义，选取页面所有元素 **

    <style>* {color: red;}</style>
</head>
<body><div>一</div><span>二</span><ul><li>叁</li></ul>
</body>

2.7基础选择器总结

3.css字体属性

定义字体，大小，粗细，文本样式（斜体等）

3.1字体系列

语法：

div {font-family: '楷体';
}
p {font-family: '楷体',Arial;
}

注意:
①可以同时设置多个字体，用英文逗号隔开，会依次检索，若第一个字体无法使用，会用第二个，以此类推
②如果字体名是多个单词组合的，带上引号
③尽量使用默认字体，以保证任何用户在浏览器可以正常显示
④常见字体

3.2字体大小

语法：

body {font-size: 20px;
}
p {font-size: 16px;
}

注意：
①px（像素）是网页常用字体单位
②谷歌浏览器默认字号大小16px
③不同浏览器字体默认大小不同，所以要自己设定一个值
④可以直接用body标签给整个页面指定字体大小

3.3字体粗细

语法：

span {font-weight: 700;
}

注意：实际开发中，更倾向于使用数字表示粗细

3.4字体样式

语法：

div {font-style: italic;
}

注意：平时很少加斜体，反而是把倾斜字体改为非倾斜字体（比如，把斜体标签em的内容改为不斜体，使用normal改，字体粗细也可以用normal改正常）

3.5字体复合属性

规则：
字体样式字体宽度字体大小/行高字体

    <style>div {font: italic 700 24px/60px '楷体';}</style>
</head>
<body><div>一二三四五</div><div>一二三四五</div>
</body>

注意：
①使用font属性时，必须按顺序书写，不能更换顺序，以空格隔开
②不需要的可以省略，但必须保留font-size和font-family，否则无效

3.6字体属性总结

4.css文本属性

定义文本外观，比如，文本颜色，对齐文本，装饰文本，文本缩进，行间距等

4.1文本颜色color

div {color: red;
}

注意：实际开发中常用16进制

4.2文本对齐text-align

    div {text-align: center;}

注意：设置的是水平对齐方式，而且是在对应盒子内的对齐方式

4.3装饰文本text-decoration

可以给文本添加下划线，上划线，删除线，也可以去掉下划线等

    a {text-decoration: none;}

注意：主要记住如何添加下划线和删除下划线

4.4文本缩进text-indent

指定文本第一行的缩进，通常是段落首行缩进，

    div {text-indent: 20px;}p {text-indent: 2em;}

注意：
①单位可以使px，固定值；也可以是em，相对值，就是当前元素一个文字的大小
②可以是负值

4.5行间距line-height

行间距用于设置行高，控制文本行与行之间的距离，单位px

    div {line-height: 26px;}

行间距由上间距，文本高度，下间距组成，在文本大小固定的情况下，改变行间距实际改变的是上下间距

4.6文本属性总结

5.css引入方式

5.1css三种样式表

根据css书写位置或者说引入方式，css样式表可以分为三大类
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）

5.2css内部样式表

是写在html内部的，是把所有css代码抽取出来，放在一个style标签中

<style>div {line-height: 26px;color: red;}
</style>

注意：
①style标签理论上可以放在HTML文档中任何地方，但一般会放在head标签中
②这种方式，可以方便控制整个页面中元素样式设置
③代码结构清晰，但并没有实现结构与样式完全分离
④是练习时常用的方式

5.3行内样式表

直接在元素标签内部的style属性中设定css样式

  <div style="color: red;line-height: 26px;">璃月人</div>

注意：
①style也是一种标签的属性
②在上引号中间。写法要符合css规范
③可以控制当前的标签设置样式
④书写繁琐，仅在对当前元素添加简单样式时考虑使用

5.4外部样式表

实际开发中使用的都是外部样式表，适用于样式较多的场景，之后再将css文件引入到HTML文件中

 <link rel="stylesheet" href="style.css">

步骤：
①新建一个.css文件，把所有css代码写在文件中
②在HTML文档中，用link标签引入这个文件

5.5css引入方式总结

6.css综合案例

注：
①hr标签可以生成一条横线，是单标签<hr>
②空格可以用 表示

1.html文档

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><h1>“我们的文本分类任务,类别标签都是有语义的,且</h1><hr><div class="biaoqian">2021年09月10日 17:45 &nbsp;&nbsp; <span>央发网</span></div><hr><div class="zong"><p>原标题：“我们的文本分类任务,类别标签都是有语义的,且</p><pCMU 法用于显示可提示用户进行输入的对话框理技术发展的第四范式可能是预训练语言模型加持下的 Prompt Learning。近几年，NLP 技术发展迅猛，特别是 BERT 的出现，开启了 NLP 领域新一</p><p>我们的文本分类任务,类别标签都是有语义的,且。</p><p>我们的文本分类任务,类别标签都是有语义的,且。</p><p>英语单词，动词、名词、形容词、副词，作动词时译为“提示，鼓励；促进；激起；导致；（给演员）提白”，作名词时译为“提示，提词；（电脑屏幕上的）提示符；鼓励；催促；付款期限”，作形容词时译为“敏捷的，迅速的；立刻的，及时的；准时的；。</p><p>英语单词，动词、名词、形容词、副词，作动词时译为“提示，鼓励；促进；激起；导致；（给演员）提白”，作名词时译为“提示，提词；（电脑屏幕上的）提示符；鼓励；催促；付款期限”，作形容词时译为“敏捷的，迅速的；立刻的，及时的；准时的；。</p><div class="zeren">责任编辑：过滤桶</div><div class="key"><span class="guanguan"> 关键字 : </span><a href="#">而异</a><a href="#">一二</a><a href="#">一二三四</a><a href="#">一二三四五</a></div></div>
</body>
</html>

2.css文档

body {font-size: 18px;/* line-height: 32px; */
}
h1 {font-size: 38px;text-align: center;line-height: 54px;
}
hr {margin: 0px;color:#E5E5E5;border-width: 0.6px;
}
span {color: #141b23;
}
p {text-indent: 2em;margin: 0px 0px 18px;
}
a {padding: 0px 10px 0px 0px;color: black;text-decoration: none;
}
.zong {width: 640px;
}
.biaoqian {font-size: 16px;line-height: 16px;color: #88888888;padding: 24px 0px;
}
.zeren {text-align: right;
}
.key {font-size: 16px;margin:24px 0px 0px;
}
.guanguan {font-weight: 700;
}

7.css调试工具

可以再调试页面修改数据预览，但是刷新后会恢复如初

8.Emmet语法

emmet语法前身是Zen coding，使用缩写提高编写速度，vscode内部已集成该语法

8.1快速生成html结构语法

<body><!-- 1.输入标签名，点击回车/tab即可生成 --><div></div><!-- 2.生成多个标签,用*，如div*3， --><div></div><div></div><div></div><!-- 3.生成父子级标签，用>号，如ul>li和ul>li*3 --><ul><li></li></ul><ul><li></li><li></li><li></li></ul><!-- 4.兄弟级标签的生成，用+号，如div+p和div+p*3 --><div></div><p></p><div></div><p></p><p></p><p></p><!-- 5.生成带有类名或者id的，直接写.demo，#two --><div class="demo"></div><div id="two"></div><!-- 5.补充：生成其他标签，直接写span.demo和span.demo*3 --><span class="demo"></span><span class="demo"></span><span class="demo"></span><span class="demo"></span><!-- 6.生成类名是有顺序的，可以用自增符号$,如.demo$*3 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div>
</body>

8.2快速生成css样式

仅输入几个字母就可以补全所有代码，一般只要输入每个单词首字母即可

<style>/* 如tac,ti2e,tdn等*/.one {text-align: center;text-indent: 2em;text-decoration: none;}
</style>

8.3快速格式化代码

9.css复合选择器

复合选择器是由基本选择器通过不同方式组合而成的
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器

9.1后代选择器

又称包含选择器，可以选择父元素里的子元素，写法就是外层标签写在前面，内层标签写在后面，中间空格隔开
语法：
ol li { color: pink; }

    <style>ol li {color: pink;}ol li a {color: red;}.nav span {color: yellow;}</style>
</head><body><ol><li>qq</li><li>qq</li><li><a href="">qq</a></li></ol><ul><li class="nav"><span>qq</span></li><li>qq</li><li>qq</li></ul>
</body>

注意：
①元素1与元素2中间用空格隔开
②元素1是父级，元素2是子级，最终选择的是元素2
③元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
④元素1与元素2可以是任意的基础选择器

9.2子选择器

和后代选择器类似，但只能选择子代
语法：
div>a { color: red;}

    <style>div>a {color: red;}</style>
</head><body><div><a href="">ww</a><span><a href="">ww</a></span><a href="">ww</a></div>
</body>

注意：
①元素1与元素2中间用大于号隔开
②元素1是父级，元素2是子级，最终选择的是元素2（所有儿子）
③元素2只可以是儿子，如果是孙子之类的都不管

9.3并集选择器

可以选中多组标签，同时为他们定义相同的样式，通常用于集体声明
各个选择器之间用英文逗号隔开，任意类型的选择器都可以作为并集选择器的一部分

语法：

    <style>div,p,.nav li {color: red;}</style>
</head><body><div>eeeee</div><p>rrrrr</p><span>ttttt</span><ul class="nav"><li>yyyyy</li><li>uuuuu</li></ul><ul><li>aaaaa</li></ul></body>

注意：
①元素1与元素2中间用英文逗号隔开
②逗号可以理解为和的意思
③一般都是竖着写的

9.4伪类选择器

用于向某些选择器添加特殊效果
最大特点就是用冒号表示，如:hover
伪类选择器种类很多，链接伪类选择器，结构伪类选择器等
1.链接伪类选择器

语法：

    <style>/* a:link 未访问的的链接的样式设置 */a:link {color: black;text-decoration: none;}/* a:visited 点击过（访问过）的链接样式设置  */a:visited {color: gold;}/* a:hover 鼠标经过的链接样式设置 */a:hover {color: blue;}/* a:active 鼠标按下还没松开的样式设置  */a:active {color: green;}</style>
</head><body><a href="#">失落古国坎瑞亚</a>
</body>

注意：
①为了确保生效，要按照lvha顺序声明，也就是link，visited，hover，active
②因为a链接在浏览器都有默认样式，所以先要给a设置样式，再设置伪类
③实际开发中只需要为a设置样式，再为hover设置样式即可

2.:focus伪类选择器
用于获取获得焦点的表单元素（焦点指光标，获得焦点指鼠标点击）
一般情况下input标签才能获取
语法：

    <style>input:focus {background-color: greenyellow;}</style>
</head><body><input type="text"><input type="text"><input type="text">
</body>

9.5复合选择器总结

10.css元素显示模式

10.1什么是元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如div自己独占一行，一行有多个span
作用：了解元素显示模式，可以更好地布局页面
分类：一般分为块级元素和行内元素（也称块级标签和行内标签）

10.2块级元素（标签）

常见的有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
div是典型的块级标签
特点：
①独占一行
②宽高，内外边距都可以控制
③宽度默认是容器（父级）宽度的100%
④是一个容器盒子，里面可以放行内和块级标签

注意：
①文字类的元素内不能使用块级标签
②p标签主要存放文字，因此p里面不能放块级标签，如果放了，就会出现如下情况

③

~

也是文字类块级标签，也不能放块级标签在内

10.3行内元素（标签）

常见的有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
span是最典型的行内标签，有地方也成内联标签
特点：
①相邻元素在同一行，一行可以显示多个
②宽高设置无效
③宽度默认是内容本身的宽度
④行内标签只能容纳文本和其他行内标签

注意：
①链接内不能再放链接
②有一个特殊情况，a标签内可以放块级标签，但转换为块级标签最保险

10.4行内块元素

几个特殊标签，img，input，td，他们同时具有块级标签和行内标签的特点
特点：
①相邻元素在同一行，但中间会有空隙，一行可以显示多个（行内特）
②宽度默认是内容本身的宽度（行内特）
③宽高，内外边距都可以控制（块级特）

10.5总结

10.6元素显示模式转换

转换为行内元素：display: inline;
转换为块级元素：display: block;
转换为行内块级元素：display: inline-block;
补充小工具：

补充小项目：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: block;width: 230px;height: 40px;font-size: 14px;line-height: 40px;color: white;background-color: grey;text-decoration: none;text-indent: 2em;}a:hover {background-color: tomato;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

注意：
行高

11.css的背景

通过css背景属性，可以给页面添加背景样式，包括背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等

11.1背景颜色

语法：

background-color: grey;

一般情况下背景颜色默认值是transparent（透明），可以手动指定其他颜色

11.2背景图片

实际开发中常见于logo活儿和一些装饰性小图片或超大背景图片，优点是便于控制位置
语法：

background-image: url();

默认值是none（无图片），可以用url指定背景图片

11.3背景平铺

可以实现在html叶念对背景图实现平铺
四大属性：

语法：

background-repeat: repeat;

注意：
①默认是平铺的
②可以同时设置背景图片和背景颜色，背景图片在上层

11.4背景图片位置

可以改变图片在背景中的位置
语法：

background-position: x y;

其中x，y表示的是坐标，可以使用方位名词或者精确单位

1.参数是方位名词
①如果指定的两个值都是方位名词，那么两个值前后顺序无关，比如left top和top left是一样的
②两个参数要分别是水平方位和垂直方位，如果都是水平或者垂直，如：right right，则不会生效

③如果只指定了一个方位名词，另一个省略，那第二个值默认居中center
小案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3 {width: 400px;height: 140px;font-size: 14px;font-weight: 400;line-height: 140px;color: white;background-image: url(logo.905d2e0b.png);background-repeat: no-repeat;background-position: left center;text-indent: 23em;}body {background-image: url(bg.jpg);background-repeat: no-repeat;}</style>
</head><body><h3>原神一周年</h3>
</body></html>

小技巧：
①鼠标放在图片网址，右键open in new tap可以新窗口打开图片然后保存
②现在设置盒子背景颜色，等配置完后，删除背景色，方便操作

2.参数是精确单位
①第一个坐标是x轴，第二个是y轴，有严格顺序
②只写一个数值，该数值默认x轴，另一个默认垂直居中

3.参数是混合单位
可以方位名词和精确单位混合使用，但有严格顺序，第一个x，第二个y

11.5背景图像固定

设定背景图像是否固定还是跟随页面其余部分滚动，可以制作滚动视差效果
语法：

background-attachment: fixed;

默认是是scroll，滚动的

11.6背景属性复合写法

没有特定的书写顺序，但是一般约定顺序为
背景颜色，背景图片，背景平铺，背景图片滚动，背景图片位置

 background: pink url() no-repeat fixed center top;

11.7背景色半透明

设置背景颜色的透明效果
语法：

 background-color: rgba(0, 0, 0, 0.6);

注意：
①使用rgba定义背景颜色，最后一个参数是alpha，透明度，取值0-1之间
②习惯吧0.3写成.3，实际效果不影响
③设置盒子背景半透明，盒子内元素不受影响
④是css3新增属性，ie9+版本以上才支持，但是现在不太注意兼容性，放心使用

11.8背景总结

11.9导航栏案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: inline-block;width: 178px;height: 168px;color: white;line-height: 298px;text-align: center;text-decoration: none;background-size: 178px 168px;}.nav .bg1 {background-image: url(bg1.png);}.nav .bg1:hover {background-image: url(bg11.png);}.nav .bg2 {background-image: url(bg2.png);}.nav .bg2:hover {background-image: url(bg22.png);}.nav .bg3 {background-image: url(bg3.png);}.nav .bg3:hover {background-image: url(bg33.png);}</style>
</head><body><div class="nav"><a href="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz#/" target="_balnk" class="bg1"></a><a href="#" class="bg2"></a><a href="#" class="bg3"></a></div>
</body></html>

鼠标移动到图片上效果

12.css的三大特性

三大特性：层叠性，继承性，优先级

12.1层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决冲突的问题
原则：
①样式冲突，遵循就近原则，哪个样式离结构近，就执行那个样式
②样式不冲突，不层叠

12.2继承性

子标签会继承父标签的部分样式，如文本颜色，字号等，子承父业
注意：
①恰当使用集成可以简化代码
②子元素可以继承父元素的样式（text-，font-，line-开头元素以及color）

特殊情况：行高的继承

    <style>body {color: red;/* 1.5意思是行高是字号大小1.5倍 */font: 12px/1.5 '微软雅黑';}div {/* 行高会继承父元素的行高1.5，因为自身字号14px，所以行高为1.5*14 */font-size: 14px;}p {/* 行高会继承父元素的行高1.5，因为自身字号14px，所以行高为1.5*16 */font-size: 16px;}/* li也继承了1.5，由于没有设置li的字号，所以字号也继承父标签的12px，行高为1.5*12 */</style>
</head><body><div>子级标签</div><p>子级标签</p><ul><li>子级标签</li></ul>
</body>

注意：
①行高可以带单位，可以不带单位
②子元素没有设置行高，则会继承父元素的行高
③倍数行高的优势是可以根据字体大小自动调整行高

12.3优先级

当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，执行层叠性
选择器不同，根据选择器权重执行
（权重数字是十进制，可以叠加，但不会有进位）

important使用方法

div {color: red !important;
}

权重的叠加
复合选择器的优先级要叠加运算
ul li就是0,0,0,2
.nav ul li就是0,0,1,2
a:hover就是0,0,1,1(伪类是0010.再加一个元素选择器a是0001，就变成0,0,1,1)

四.CSS盒子

前言：
1.网页布局三大核心：盒子模型，浮动，定位
2.网页布局过程：
①先准备好相关的网页元素，网页元素基本上都是盒子box
②利用css设置好盒子样式，然后摆放在相应位置
③往盒子里放内容

1.css盒子模型

1.1盒子模型（box model）组成

盒子模型：就是把html页面中的布局元素看作是一个矩形盒子，是一个装内容的容器，css盒子模型本质就是一个盒子，封装HTML元素，包括边框border，内边距padding，外边距margin，实际内容content

1.2边框border

可以设置元素的边框，由三部分组成，边框宽度，边框样式，边框颜色
语法：

<style>div {width: 300px;height: 200px;border-width: 10px;/* border-style: solid; *//* border-style: dashed; */border-style: dotted;border-color: greenyellow;}
</style>

注意：
①边框宽度默认0，边框样式默认none（无），边框颜色默认黑色
②常用边框样式有solid实线，dashed虚线，dotted点线

复合写法：
没有顺序而言，一般写法为宽度，样式，颜色

        border: 10px dashed blue;

分开写法：

        border-top: 10px dashed red;

表格细线边框：
控制表格相邻单元格边框，表示相邻边框合并在一起
语法

border-collapse: collapse;

注意：边框会影响盒子实际大小，比如2020，边框为1，实际大小就会变成2222

1.3内边距padding

padding属性设置内边距，即边框与内容之间的距离

复合写法：

注意：
①padding也会影响盒子的的的实际大小，和边框类似
②如果没设定宽高，则不会撑大盒子

padding案例：新浪导航

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.nav a {display: inline-block;color: #4c4c4c;text-decoration: none;line-height: 41px;font-size: 12px;padding: 0 20px;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>
</head><body><div class="nav"><a href="#">温迪</a><a href="#">钟离</a><a href="#">雷电将军</a><a href="#">阿贝多</a><a href="#">达达利亚</a></div>
</body></html>

1.4外边距margin

margin控制盒子鱼盒子之间的距离，写法之类的和padding类似，复写也一样

外边距应用：

注意：以上方法让块级元素水平居中，行内和行内块居中可以再父元素添加text-align：center即可

外边距合并：
使用margin定义块级元素垂直外边距时，可能会出现外边距的合并
①相邻块元素垂直外边距的合并

②嵌套块元素垂直外边距的塌陷

解决方法方法就是通过某些方式将父子元素隔开

1.5清除内外边距

网页元素很多有默认的内外边距，不同浏览器也不一样，因此在布局前，在最前面清除内外边距

    * {margin: 0;padding: 0;}

注意：
行内元素为了照顾兼容性，尽量只设置左右边距，不要设置上下边距，转换为行内或者行内块就可以了

2.ps基本操作

3.综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #F4F5F3;}.box {width: 298px;height: 415px;background-color: #fff;/* auto可以使水平居中对齐 */margin: 100px auto;}.box img {width: 100%;background-image: url(bg.jpg);background-size: cover;}.review {font-size: 14px;height: 70px;padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #C1C2C6;padding: 0 28px;margin-top: 30px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info em {font-style: normal;margin: 0 3px 0 10px;color: #E2E6ED;}.info span {color: coral;}a {color: black;text-decoration: none;}</style>
</head><body><div class="box"><a href="#"><img src="img.png" alt=""></a><p class="review">天领奉行的将领。行如风，言如誓，是位魄力过人的女性。</p><div class="appraise">将军所追求的「永恒」，也是她愿意为之而战的信念。</div><div class="info"><h4><a href="#">天领奉行养子九条裟罗...</a> </h4><em>|</em><span>36D</span></div></div>
</body></html>

答疑解惑：

新闻模块案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 248px;height: 163px;margin: 100px auto;border: 1px solid #ccc;}.box h3 {height: 32px;font-weight: 400;font-size: 14px;line-height: 32px;border-bottom: 1px dotted #ccc;padding-left: 15px;}.box ul {margin-top: 7px;}.box ul li {height: 23px;line-height: 23px;font-size: 12px;color: #666;list-style: none;padding-left: 20px;}.box ul li a {text-decoration: none;}.box ul li a:hover {text-decoration: underline;}</style>
</head><body><div class="box"><h3>品优购快报</h3><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></ul></div>
</body></html>

注意：
①去掉无序列表的方法是list-style: none;
②块级标签一般都要设定宽高

4.圆角边框

圆角边框，盒子阴影，文字阴影都是css3新增的，ie9+
才支持的
语法：
border-radius: 15px;

注意：
①可以做一个圆形，即在正方形盒子里设置圆角为边长一半
②做圆角矩形，在矩形盒子里设置圆角为高度一半
③设置不同的圆角 border-radius: 10px 20px 30px 40px;
④也可以分开写border-top-left-radius: ;
⑤参数可以是数值，也可以是百分比（如果是矩形，设置百分比生成的圆角是椭圆角）
`

5.盒子阴影（重点）

语法：

box-shadow: 10px 10px 30px 10px skyblue inset;

注意：
①默认是outset外阴影，但是不能写出来，写出来阴影就会失效
②盒子阴影不占空间

6.文字阴影

五.css浮动float

1.浮动

网页布局的本质，用css摆放盒子，把盒子放到相应位置
css提供了三种传统布局方式
①标准流
②浮动
③定位
实际开发中一个页面三种布局都包含

标准流（普通流）
就是标签按照默认方式排列，是最基本的布局方式，
①块级蒜素独占一行，从上到下排列
常用元素：div，hr，p,h,ul,ol,form,table
②行内元素会按照顺序从左到右，碰到父元素边缘自动换行
常用元素：span，a，i，em等

1.1为什么需要浮动

原因：很多布局效果，标准流没办法完成，可以使用浮动解决
典型应用：使多个块级标签在以行内排列显示且没有间隙
网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动

1.2什么是浮动

float属性用于创建浮动框，将其移动到一边，直到初级边缘及包含块或者另一个浮动框边缘
语法：
float: left;

1.3浮动特性（重难点）

三大浮动特性：
①浮动元素会脱离标准流（脱标）
②浮动的元素会一行内显示并且元素顶部对齐
③浮动元素会具有行内块特性

1.脱标
盒子脱离标准流的控制移动到指定位置，浮动的盒子不再保留原来的位置，即原来的位置空缺出来了

2.一行内显示且顶端对齐
如果多个盒子都设置了浮动，他们会按照属性值一行内显示且顶端对齐

注意：浮动盒子之间不会有间隙，如果父级盒子装不下，name多出的盒子会另起一行再进行对齐

3.行内块特性
浮动元素会具有行内块特性
任何元素都可以浮动，不论原来是什么模式，添加浮动之后都以具有行内块相似的特性
①如果块级盒子没设置宽度，默认宽度和父级一样，添加浮动之后，它的大小根据内容来决定
②行内元素也会具有行内块特性，无需转换元素显示模式
③与行内块不同的是，浮动盒子之间没有间隙

1.4标准流与浮动的搭配使用

为了约束浮动元素位置，采取策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动，符合网页布局第一准则

网页布局第二准则：先设置盒子大小，再设置盒子位置

2.常见网页布局

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;margin: 10px auto;background-color: pink;}.box {width: 980px;height: 300px;margin: 10px auto;}.box li {list-style: none;width: 230px;height: 300px;float: left;background-color: skyblue;margin-right: 20px;}.box .last {margin-right: 0;}.footer {height: 100px;background-color: greenyellow;}</style>
</head><body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="footer">footer</div>
</body></html>

注意：通栏盒子（和浏览器一样宽），不需要指定宽度
浮动布局注意点：

3.清除浮动

3.1为什么要清除浮动

由于很多情况下，父盒子不方便给高度，但是盒子浮动不占位置，导致父盒子高度为0，就会影响下面的标准流盒子

3.2清除浮动的本质

①清除浮动的本质就是清除浮动造成的影响
②如果父盒子本身有高度，则不需要清除浮动
③清除浮动后，父级会根据浮动的盒子ID噢NG检测高度，父级有了高度，就不会影响下面的标准流了

3.3清除浮动的方法

语法：clear: both;

注：实际工作中，几乎只用clear：both
1.额外标签法
也称隔墙法，是w3c推荐的方法，个人不推荐
额外标签法在浮动元素的末尾添加一个空的标签，然后添加浮动样式（设置clear）
优点：通俗易懂，书写方便
缺点：添加了许多无意义标签，结构化较差
注意：新的空标签必须是块级标签
总结：

2.父级添加overflow
可以给父级添加overflow属性，设置为hidden，auto或者scroll
优点：代码简洁
缺点：无法显示溢出的部分
注意：overflow本身就是溢出隐藏属性，不仅用于清除浮动和边框合并，还有很多其他用处，后面会讲到

3.:after伪元素法
给父标签添加
是额外标签法的升级版，不同在于，额外标签法是在html创建一个新的盒子，而after则是通过css在盒子末尾生成一个隔墙

优点：没有增加新的标签，结构简单
缺点：照顾低版本浏览器，如百度，淘宝，网易等

3.双伪元素法
和伪元素法类似

3.4清除浮动的总结

用的最多的是后面三种

4.ps切图

4.1常见图片格式

切图方式有多种：图层切图，切片切图，ps插件切图等

4.2图层切图

最简单的切图方式：右击图层→快速导出为png
如果多个图层组成的一种效果，我们想要这种效果：
①选中需要的多个图层，然后图层菜单→合并图层（或者直接ctrl+e）
②右击图层→快速导出为png

4.3切片切图

注意：
①切片工具就是左侧钢笔头的标志
②存储的时候修改为选中的切片（默认写的是全部切片）
③想要修改切片位置或者框的大小，可在切片工具的小选项里进行选择，如果不需要切片了，delete删除

4.4ps插件切图

一键导出，可以说是图层切图和切片切图的一键版

5.案例

1.css书写顺序（推荐）

2.网页布局整体思路

也就是先写第一行，然后第一行里的每一列，再写第二行。
3.导航栏注意点

4.banner制作

注意：
1.要给a标签设定颜色是，直接为a设置颜色，不要再a外边盒子设置
2.浮动的盒子不会有外边距合并的问题
3.量多的小盒子，一般用li作为盒子
4.遇到屏幕不够情况下，可以先给body一个高度，后边删除就是
5.快速定位行数，ctrl+g

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><!-- 头部开始 --><div class="header w"><!-- 头部模块 --><div class="logo"><!-- logo模块 --><img src="imgge/学成在线.png" alt=""></div><div class="nav"><!-- 导航栏模块 --><ul><li><a href="">首页</a></li><li><a href="">课程</a></li><li><a href="">职业规划</a></li></ul></div><div class="search"><!-- 搜索框模块 --><input type="text" value="请输入关键字"><button></button></div><div class="user"><!-- 用户模块 --><img src="imgge/20130502185029_EkKYh拷贝.png" alt="">qq-lilei</div></div><!-- 头部结束 --><!--banner板块开始  --><div class="banner"><div class="w"><div class="subnav"><ul><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li><li><a href="#">前端开发 <span>&gt;</span></a></li></ul></div><div class="course"><h2>我的课程表</h2><ul><li><h4>继续学习，程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习，程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习，程序语言设计</h4><p>正在学习-使用对象</p></li></ul><a href="#">全部课程</a></div></div></div><!-- banner板块结束 --><!-- 精品推荐模块开始 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JQery</a></li><li><a href="#">JQery</a></li><li><a href="#">JQery</a></li><li><a href="#">JQery</a></li><li><a href="#">JQery</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!-- 精品推荐模块结束 --><!-- box核心模块开始 --><div class="box w  clearfix"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="imgge/图层133.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li></ul></div></div><!-- box核心模块结束 --><!-- footer模块开始 --><div class="footer"><div class="w"><div class="copyright"><img src="imgge/学成在线.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载app</a></div><div class="links"><dl><dt>关于学成网</dt><dd>关于</dd><dd>管理团队</dd><dd>工作机会</dd><dd>客户服务</dd><dd>帮助</dd></dl><dl><dt>关于学成网</dt><dd>关于</dd><dd>管理团队</dd><dd>工作机会</dd><dd>客户服务</dd><dd>帮助</dd></dl><dl><dt>关于学成网</dt><dd>关于</dd><dd>管理团队</dd><dd>工作机会</dd><dd>客户服务</dd><dd>帮助</dd></dl></div></div></div><!-- footer模块结束 --></body></html>

css样式：

*{margin: 0;padding: 0;
}
.w {width: 1200px;margin: auto;
}
body {background-color: #f3f5f7;
}
li {list-style: none;
}
a {text-decoration: none;
}
.header {height: 42px;/* 因为w类标签已经设置了外边距auto，此时设置上下外边距之后，为了保证不覆盖上边设置的效果，左右边距也设置为auto */margin: 30px auto;
}
.logo {float: left;width: 198px;height: 42px;
}
.nav {float: left;margin-left: 32px;
}
.nav ul li {float: left;margin: 0 15px;
}
.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover{border-bottom: 2px solid #00a4ff;color: #00a4ff;
}
.search {float: left;width: 412px;height: 42px;margin-left: 70px;
}
.search input {/* 因为是行内块盒子，两个中间是有空袭的，设置浮动 */float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;font-style: 14px;color: #bfbfbf;padding-left: 15px;
}
.search button {float: left;width: 50px;height: 42px;border: none;background-image: url(imgge/fa-search.png);
}
.user {float: right;line-height: 42px;margin-right: 30px;color: #666;
}.banner {height: 421px;background-color: #1C036B;
}
.banner .w {height: 421px;background: url(imgge/banner2.png) no-repeat top center;
}
.subnav {float: left;width: 190px;height: 421px;background-color: rgba(0, 0, 0, 0.3);
}
.subnav ul li {line-height: 47px;margin: 0 20px;
}
.subnav ul li a {color: #fff;font-size: 14px;
}
.subnav span {float: right;
}
.subnav ul li a:hover {color: #00a4ff;
}
.course {float: right;width: 230px;height: 320px;background-color: #fff;margin: 50px 0;
}
.course h2 {height: 48px;text-align: center;line-height: 48px;font-size: 18px;background-color: #95CAEA;
}
.course ul {padding: 0 20px;
}
.course ul li h4 {font-size: 16px;color: #4e4e4e;
}
.course ul li p {font-size: 12px;color: #a5a5a5;
}
.course li {padding: 15px 0;border-bottom: 1px solid #4e4e4e;
}
.course a {margin: 10px 20px 0 20px;display: block;height: 38px;font-size: 16px;font-weight: 700;color: #00a4ff;text-align: center;line-height: 38px;border: 1px solid #00a4ff;
}
.goods {height: 60px;background-color: #fff;box-shadow:0 2px 3px 3px rgba(0, 0, 0, 0.1);margin-top: 10px;line-height: 60px;
}
.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}
.goods ul {float: left;margin-left: 30px;
}
.goods ul li {float: left;
}
.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;}.mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}
.box {margin-top: 30px;
}
.box-hd {height: 45px;
}
.box-hd h3 {float: left;font-size: 20px;color: #494949;
}
.box-hd a{float: right;font-size: 12px;color: #a5a5a5;
}
.box-bd ul {width: 1225px;
}
.box-bd ul li {float: left;width: 228px;height: 270px;background-color: pink;margin: 0 15px 15px 0;
}
.box-bd ul li img{width: 100%;
}
.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}
.info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}
.info span {color: #ff7c2d;
}.clearfix:before,
.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom:1;
}.footer{height: 400px;background-color: #fff;margin-top: 40px;
}.footer .w {padding-top: 30px;
}.copyright {float: left;width: 440px;
}
.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}
.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;font-size: 16px;color: #00a4ff;text-align: center;line-height: 33px;
}.links {float: left;
}
.links dl {float: left;margin-left: 170px;color:#333 ;
}
.links dl dt {font-size: 16px;margin-bottom: 10px;}
.links dl dd {font-size: 12px;margin-bottom: 5px;}

六.css定位

1.定位

1.1为什么需要定位

有些效果标准流和浮动都无法快速实现，此时就需要定位来实现
定位与浮动的区别
①浮动可以使多个块级盒子在一行内没有缝隙排列显示，常用于横向排列盒子
②定位可以让盒子自由地在某个盒子内移动或者固定在屏幕的某个位置，且可以压住其他盒子

1.2定位组成

定位：将盒子定在某一个位置，即按照定位的方式移动盒子，摆放盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式
边偏移决定了元素的的最终位置

1.定位模式
决定元素定位方式，通过css的position属性设置，有四种

2.边偏移
即盒子移动的最终位置

3.静态定位static
元素的默认定位方式，即无定位
语法：position: static;
特点：
①静态定位按照标准流特性摆放位置，它没有边偏移
②静态定位在布局时很少用到

4.相对定位relative（重要）
指元素在移动的时候是相对于他原来的位置来说的
语法：

    .xiang {position: relative;top: 100px;left: 100px;}

特点：
①它是参照自己原来的位置进行移动的
②不脱标，依旧保留原来的位置，后面的盒子依旧当他是标准流，可以理解为你在新的地方看见他，但它的本体还在原地。
③典型应用为给绝对定位当父级

5.绝对定位absolute
元素在移动时是相对他的祖先元素来说的
语法：

    .box {position: absolute;top: 0;left: 0;}

特点：
①如果祖先元素或者祖先元素没有定位，以浏览器（document文档）为准定位
②如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置
③脱标，绝对定位不再占有原先的位置

6.子绝父相
即子级是绝对定位，那么父级要用相对定位，
①子级是绝对定位，不会占有位置，可以放到父盒子里任意一个地方，不会影响其他兄弟盒子。
②父盒子要加定位限制子盒子在父盒子内显示
③父盒子布局时，要占有位置，因此父亲只能是相对定位
④因为父级要占有位置，因此是相对定位，子盒子不需要位置，因此是绝对定位，所以相对定位常常用来作为绝对定位的父级

7.固定定位fixed
元素固定在浏览器可视区的位置
语法：

    .gu {position: fixed;top: 100px;right: 0;}

特点：
①以浏览器可视窗口为参照位置移动，跟父元素没有任何关系，不随滚动条滚动
②脱标，元素不占有原来的位置，可以看做特殊的绝对定位

小技巧：
固定在版心右侧位置

8.粘性定位sticky（仅了解，很少用）

9.总结

注意：一定要记住是否占有位置，以谁为基准移动，一定要学会子绝父相

10.定位的堆叠顺序z-index
在使用定位布局时，可能会出现盒子重叠的现象，可以使用z-index来控制盒子前后次序
语法：z-index: 1;
注意：
①数值可以是正整数，0负整数，默认是auto（可以当做0），数值越大，盒子越靠上
②属性值相同，则按照书写顺序（在html中的书写顺序），后来居上
③数字后边不能加单位
④只有定位的盒子才有z-index属性

11.定位拓展
①绝对定位盒子水平居中
加了定位的盒子不能通过margin：0 auto 完成水平居中
可以通过left50%，然后margin-left，负的子盒子一半距离
垂直居中同理

②定位的特殊性
绝对定位和固定定位和浮动类似
①都是脱标
②行内元素添加绝对或者固定定位，可以直接设置高度和宽度。块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小（行内块特性）

③脱标的盒子不会触发外边距塌陷

④绝对和固定定位会完全压住盒子
浮动会压住标准流盒子，但是不会压制标准流盒子里面的图片文字（因为浮动的起源便是为了做文字环绕效果）
绝对定位和固定定位会完全压住下面标准流的内容

2.综合案例

淘宝焦点图案例
注意：
①定位盒子，如果同时写了上下属性或者同时左右，会按照先左后右，先上后下的优先级使用
②有大量相同属性，可以使用并集选择器

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="tb-promo"><img src="ww.webp" alt=""><a href="#" class="prev">&lt;</a><a href="#" class="next">&gt;</a><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

css部分：

* {margin: 0;padding: 0;
}a {text-decoration: none;
}li {list-style: none;
}.tb-promo {position: relative;width: 520px;height: 280px;margin: 100px auto;
}.tb-promo img {width: 520px;height: 280px;
}.prev,
.next {position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;
}.prev {left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;
}.next {right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;
}.promo-nav {position: absolute;bottom: 5px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background-color: rgba(255, 255, 255, .3);border-radius: 7px;
}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;margin: 3px;border-radius: 50%;}.promo-nav .selected {background-color: #ff5000;
}

3.网页布局总结

4.元素的显示与隐藏

类似于网站广告，点击关闭就会消失，刷新之后就会再次显示
本质：让一个元素在页面显示或者隐藏起来

4.1display

display用于设置一个元素该如何显示，可以用于元素模式转化，还可以用于显示和隐藏盒子
语法：

        display: none;    隐藏对象display: block;   显示对象

注意：
display隐藏元素后，不再占有原来的位置
用途极为广泛，可以配合js做很多网页特效

4.2visibility 可见性

用于指定一个元素可见还是隐藏
语法：

        visibility: visible;   元素可视visibility: hidden;   元素隐藏

注意：
隐藏元素后，继续占有原来的位置
这一点与display不同，但还是display用的更多

4.3overflow 溢出

指定了如果内容溢出一个元素的框（超出其指定宽高）时，会发生什么
语法：

        overflow: visible;    溢出显示overflow: hidden;   溢出隐藏overflow: scroll;   显示滚动条overflow: auto;   按需显示滚动条

注意：
有定位的盒子慎用溢出隐藏，因为他会隐藏多余的部分

4.4土豆案例

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="tudou.css">
</head>
<body><div class="tudou"><img src="img.jpg" alt=""><div class="mask"></div></div>
</body>
</html>

css部分

{

    margin: 0;padding: 0;
}.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 100px auto;
}.tudou img {width: 100%;height: 100%;
}.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .4);
}/* 在鼠标经过父盒子时，子盒子发生的变化 */
.tudou:hover .mask {display: block;
}

七.css高级技巧

1.精灵图

1.1为什么需要精灵图

一个网页中会应用许多小图片作为修饰，当网页中图片过多时，服务器就会频繁接收和发送图片，造成服务器请求压力过大，降低加载速度。
为了有效地减少服务器发送和接收请求的次数，提高页面加载速度，出现了css精灵技术

把许多小图片刚在一张大图片上，请求一个小图片，直接返回大图片

1.2精灵图（sprites）的使用

1.如何使用精灵图
①精灵图主要针对小的背景图片使用
②借助背景位置实现–background-position
③一般情况下都是x，y设置都是负值，（网页中坐标x向右为正，y轴向下为正，默认图片对齐盒子左上角）

2.语法

    .box1 {width: 60px;height: 60px;margin: 100px auto;background: url(index-spr.png) no-repeat -200px -300px;}

2.字体图标

2.1字体图标的产生

使用场景：用于网页中通用的一些小图标
产生原因：精灵图有诸多缺点，如图片文件较大，图片本身放大缩小会失真，一旦图片制作完成很难进行更改，由此诞生了字体图标iconfont
字体图标：展示的是图标，本质是文字

2.2字体图标的优点

①轻量级：一个图标要比一系列的图像要小，一旦字体加载，图标会马上渲染出来，减少了服务器请求
②灵活性：本质是文字，可以随意更改颜色，大小，产生各种特殊效果
③兼容性：几乎支持所有的浏览器

注意：
①无法完全替代精灵图
②遇到样式结构简单的图标，就用字体图标
③遇到样式结构复杂的小图片，就用精灵图

2.3字体图标下载

2.4字体图标的引用

3.把网页中对应图标后面的小方框复制过来
4.声明字体，即在css中设置上面图片红色部分font-family：‘icomoon’
5.需要添加新的，需要用到selection.json文件，添加后重新下载压缩包替换掉旧的

3.css三角

注意：设置line-height和font-size是为了照顾兼容性，可有可无，以防万一，带上为好

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.xm {position: relative;width: 300px;height: 100px;background-color: blue;}span {position: absolute;left: 300px;top: 45px;width: 0;height: 0;line-height: 0;font-size: 0;border: 10px solid transparent;border-left-color: blue;}</style>
</head>
<body><div class="xm"><span></span></div>
</body>
</html>

4.css用户界面样式

4.1鼠标样式cursor

语法：

    li {cursor: default;cursor: pointer;cursor: move;cursor: text;cursor: not-allowed;}

4.2轮廓线outline

4.3防止拖拽文本域resize

注意：文本域起始标签和结束标签放在一行，否则文字输入会出现内边距

5.vertical-align属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字对齐
即设置一个元素的垂直对齐方式，只针对行内元素和行内块元素有效

语法：vertical-align: baseline;

注意：
①如果是图片，只需要设置vertical-align属性即可
②如果是背景图片，那么要先设置盒子为行内块标签
③vertical-align也可以实现文本域textarea和描述文字对齐

小技巧

第一种163使用，第二种新浪使用

6.溢出文字省略号显示

6.1单行文本溢出显示省略号

三部曲：①强制一行white-space: nowrap;，②溢出隐藏overflow: hidden;，③隐藏省略号显示text-overflow: ellipsis;

.text {width: 100px;height: 200px;background-color: pink;/* 1.这个标签意思是强制文字在一行内显示 *//* 默认是white-space:normal，文字显示不开自动换行 */white-space: nowrap;/* 2.溢出隐藏 */overflow: hidden;/* 3.文字溢出时省略号显示 */text-overflow: ellipsis;
}

6.2多行文本溢出显示省略号（后台人员做更简单）

有兼容性问题，谨慎使用

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

7.常见布局技巧

7.1布局技巧1-margin负值运用

①多个盒子设置1px边框后，由于挨着的两个盒子都有1px，显示的就是2px的边框线，，通过设置margin-left：-1px，可以使两条边框线重合
②设置鼠标经过边框变色，由于边框合并，部分变色边框会被压住
解决办法:
如果没有定位，添加相对定位
如果有定位。修改z-index即可

7.2布局技巧2-文字围绕浮动元素

①先设置一个标准流盒子，其中放文字
②盒子里插入一个浮动盒子
③如果需要文字盒浮动元素有点距离，给浮动元素添加外边距

7.3布局技巧3-行内块元素运用

把盒子修改为行内块元素后，可以通过给父盒子设置text-align：center；实现子元素水平居中

7.4布局技巧4-三角强化

通过调整边框宽度，设置三角形的大小

7.css初始化

①清除所有内外边距
②斜体变正em，i：font-style：normal
③去掉li的小圆点：list-style：none
④图片边框为0（加了连接图片会有），与文本居中对齐：border：0；vertical-align：middle；
⑤鼠标经过button变成小手：cursor：pointer
⑥a标签颜色改为#666。去掉下划线
⑦鼠标经过链接，文字变色
⑧统一给某些内容指定字体，颜色，大小等
⑨设置默认隐藏
⑩清除浮动

八.html5css3提高

1.html5新特性

相比于以前，新增了新的标签，新的表单，新的表单属性

1.1新增语义化标签

section可以理解为大号的div，内部可以放任何标签
注意：
①这种语义化标准主要是针对搜索引擎的
②页面中这些标签可以使用多次
③在ie9中，需要把这些元素转换为块级标签，（新标签有兼容问题，需要ie9+以上才支持，为了照顾兼容性，修改元素模式）
④移动端无兼容性问题，可以放心使用

1.2新增多媒体标签

视频：video
音频：audio
1.视频video

语法：<video src="文件地址" controls="controls" loop="loop"></video>
controls：添加用户控件，比如播放按钮
loop：文件播放结束后，开始再次播放

小技巧：以防不支持视频格式，可以添加多个种类，一般不采用，因为几乎所有浏览器都支持mp4

video属性

星愿浏览器和谷歌一样，都要添加muted解决自动播放问题

2.音频audio

语法：<audio src="文件位置"></audio>
属性：

补充属性：

注意：

1.3新增input类型

<form action=""><ul><li>邮箱：<input type="email"></li><li>网址：<input type="url"></li><li>日期：<input type="date"></li><li>时间：<input type="time"></li><li>数量：<input type="number"></li><li>手机号码：<input type="tel"></li><li>搜索框：<input type="search"></li><li>颜色：<input type="color"></li><li><input type="submit" value="提交"></li></ul>
</form>

注意：如果验证效果，要添加表单域，就可以在输入错误，提交时报错
input:search，快速生成类型为search的input

1.4html5新增表单属性

        input::placeholder {color: pink;}</style>
</head><body><form action=""><input type="search" name="sousuo" id="" required="required" placeholder="雷大炮" autofocus="autofocus"autocomplete="off"><br><input type="file" name="" id="" multiple="multiple"><br><input type="submit" value="提交"></form>

在设定表单属性提示文本的效果时，要写input::placeholder，中间带双引号，双冒号代表伪元素，单冒号是伪类

2.css3新特性

2.1属性选择器 [ ]

属性选择器可以根据元素特定的特性来选择元素，就可以不借助类选择器或者id选择器
（第二种是用的最多的）

语法**：**

  input[value] {color: pink;}input[type=password] {color: red;}

注意：
1.属性选择器权重和类选择器和伪类选择器都是0,0,1,0
2.属性选择器里，在css填写属性值时，属性值或者属性值开头或末尾为纯数字，数字要带上引号才能正常识别，如果为纯字母或者混合，可以不写引号

    div[class$='3'] {color: red;}

2.2结构伪类选择器：

结构伪类选择器主要根据文档结构来选择元素，常用于选择父级中的子元素

注意：
①first-child方式，选中任何存在li的父级里的第一个元素，不会跳过其他类型，须同时满足第一个而且是li才会有效果
②如果数字超出了已有数量，则不会生效，从1开始，一一对应
③括号内只能写一个数字，不能写（2,3）之类的
④first-of-type方式，直接从第一个li开始看，会跳过其他不同类型

注意：
①如果写n，也算一个公式，代表选择所有
②括号内写2n，代表第偶数个元素，写2n+1，代表第奇数个元素，但一般使用even，odd
③记得n从零开始

firstchiled与firstoftype的区别

2.3伪元素选择器 ::

可以利用css创建新标签元素，而不需要html标签，从而简化html标签

content指内容，可以写内容，可以空着
可以·按需调整元素模式

应用场景
①在盒子里添加小图标
②添加遮罩层
.tudou:hover::before
中间不需要添加空格
③伪元素清除浮动

2.4css盒子模型

css通过box-sizing来指定盒子模型，可以通过content-box和border-box两种方式
1.box-sizing: content-box;
默认的方式，盒子大小为width+padding+border
2.box-sizing: border-box;
盒子大小为width的大小
现在一般采用第二种方法，就不会撑大盒子了（前提是padding和border不会超过width，超过就会撑大盒子）

2.5css滤镜filter

将模糊和图片偏移等效果应用于元素
语法：filter: 函数();
图片模糊函数是blurfilter: blur(50px);值越大，越模糊

2.6css calc函数

可以在声明css属性时执行一些运算
如，声明子盒子宽度永远比父盒子小30pxwidth: calc(100%-30px);
括号内可以进行运算，从而达到想要的效果

2.7css过渡

语法：transition: 要过渡的属性花费时间运动曲线延迟时间;

注意：
①谁做过渡给谁加transition属性
②多个属性过渡，写在一个transition里，逗号隔开transition: width 1s,height 1s;
③给全部变化属性加过渡，属性用all表示transition: all 1s;

2.8 2D转换 transform

1.2d移动translate
与定位类似
语法：

        /* 在x轴和y轴上移动一定距离,可以写0，但不能没有，没有视作0 */transform: translate(100px, 100px);transform: translate(100px, 0);/* 也可以分开写,xy可以大写也可以小写，同时只能存在一个translate，后者会导致前者失效 */transform: translatex(200px);transform: translatey(200px);

注意：
①定义2d转换中的移动，沿着x，y轴移动
②优点：不会影响其他元素位置，本体还在原处
③若单位是百分比，则是相对于自身宽高的百分比
④对行内标签无效果
⑤让元素移动有三种方法：定位，外边距，2d移动

2.2d旋转rotate
语法：transform: rotate(45deg);

注意：
①单位是deg，即度
②正数为顺时针，负数为逆时针
③默认旋转中心店是元素的中心点
④可以配合hover和transtion达成鼠标经过的旋转效果

小技巧：
制作尾部三角图标可以通过正方形设置两个边框并进行旋转达成

    div {position: relative;width: 200px;height: 40px;border: 1px solid #000;}div::after {content: '';position: absolute;top: 10px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: transform 0.2s;}

3.2d旋转中心点transform-origin
语法：transform-origin: x y;
注意：
①参数x和y用空格隔开
②默认中心点是50%，50%
③参数可以是像素，百分比，方位名词

     transform-origin: 50px 50px;transform-origin: 0% 100%;transform-origin: right bottom;

案例：

    <style>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid #000;margin: 100px auto;}div::before {content: '';display: block;background: url(../img.jpg) no-repeat;background-size: 200px 200px;width: 100%;height: 100%;background-color: pink;transform-origin: left bottom;transform: rotate(180deg);transition: all 0.3s;}div:hover::before {transform: rotate(0deg);}</style>
</head><body><div></div>
</body>

4.2d缩放scale
语法：transform: scale(x，y);
注意：
①x和y中间逗号隔开，数字不加单位，为倍数
② transform: scale(1, 1);宽高放大一倍，相当于没放大，
③ transform: scale(2, 2);宽高放大两倍
④ transform: scale(2);只写一个参数，第二个就和第一个相同
⑤ transform: scale(0.5);缩小，比1小就是缩小
⑥优势，可以通过设置转换中心点控制缩放，默认中心点缩放，并且不影响其他盒子的位置

案例：
①缩放

    <style>div {overflow: hidden;width: 240px;height: 300px;transform-origin: left bottom;margin: 100px auto;}div img {width: 100%;height: 100%;transition: all .4s;}div img:hover {transform: scale(1.1);}</style>
</head><body><div><a href=""><img src="../img.jpg" alt=""></a></div>
</body>

②分页按钮

     <style>li {float: left;list-style: none;width: 30px;height: 30px;border: 1px solid pink;border-radius: 50%;margin: 10px;line-height: 30px;text-align: center;cursor: pointer;transition: all .4s;}li:hover {transform: scale(1.2);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body>

5.2d转换综合写法
语法：transform: translate(100px, 100px) rotate(180deg) scale(0.5);
注意：
①顺序会影响转换的效果，，比如：先旋转再位移，旋转后坐标轴就会变化，导致位移方向发生变化
②当同时书写多个属性时，优先把位移放在最前

6.小结

2.9 css3动画 animation

动画是css3中最颠覆性的特征之一可以通过设置多个节点控制一个或一组动画，还可以实现自动播放
1.动画的基本使用
①先定义动画
在css中定义动画

@keyframes move {0% {transform: translate(0, 0px);}100% {transform: translate(500px, 500px);}
}

②再调用动画
在css中调用动画

div {width: 200px;height: 200px;background-color: pink;/* 调用命令 */animation-name: move;animation-duration: 1.5s;
}

2.动画序列

可以设置多个状态

        @keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(500px, 0);}50% {transform: translate(250px, 250px);}75% {transform: translate(0, 500px);}100% {transform: translate(500px, 500px);}}

注意：
0%可以为空，也可以不写

3.动画常见属性

简写

大数据热点图案例

<style>* {margin: 0;padding: 0;}@keyframes move {75% {width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}}.big {position: relative;width: 750px;height: 1624px;background: url(12313.jpeg);}.small {position: absolute;top: 660px;left: 521px;}.dotted {width: 10px;height: 10px;border-radius: 50%;background-color: red;}.small div[class^=pulse] {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;border-radius: 50%;box-shadow: 0 0 12px red;animation: move 1.2s linear infinite;}.small div.pulse2 {animation-delay: 0.4s;}.small div.pulse3 {animation-delay: 0.8s;}</style>
</head><body><div class="big"><div class="small"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div>
</body>

4.速度曲线细节

注意：
①steps指需要多少步才完成这个动作
②可以多个动画一起调用，在同一个animation里用逗号隔开

动图案例：

    <style>div {position: absolute;width: 300px;height: 168px;background: orange url(223.gif);animation: move 3.6s forwards, chang 3.6s steps(3) infinite;}@keyframes chang {100% {background-position: 0 -508px;}}@keyframes move {100% {transform: translate(0, 200px);}}</style>
</head><body><div></div>
</body>

2.10 3D转换 transform

1.三维坐标系

2.3d移动
语法：

      /* 单独写法,下边的会覆盖上边的 */transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);/* 复合写法1，可以自由挑选轴进行设定 */transform: translateX(100px) translateY(100px);/* 复合写法2,可以写0，但不能为空 */transform: translate3d(100px, 100px, 100px);

注意：
①xy的值一般用px或者百分比，但z一般用px，很少用百分比

3.透视 perspective

注意：
①透视是加在被观察对象的父盒子（其实祖先盒子就可以，不一定非要父级）上的，即元素定义perspective属性时，其子元素会获得透视效果，而非元素本身
②语法：perspective: 500px;透视的值单位px，透视值越小，元素越大，值就是视距
③添加透视之后，就可以看到translateZ的效果了

4.3d旋转rotated3d
语法：

注意：
①左手准则

②给父级添加透视，效果更佳

5.3d呈现transform-style

注意：
仅能控制子元素开启立体环境，而不能控制孙子代，这一点和透视不同，透视是给所有后代元素加透视效果

两面反转盒子案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 500px;}.box {position: relative;width: 300px;height: 300px;margin: 300px auto;transform-style: preserve-3d;transition: all 3s;}.front,.back {position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 1px solid greenyellow;}.front {background: url(14069033c83b26c6bdfb43a1a513925962c4fc14.png@942w_942h_progressive.webp) no-repeat;background-size: 300px 300px;transform: rotateY(180deg);}.back {background: url(d3355942e0f03277f417ddb5221c68b3770ebb12.png@942w_942h_progressive.webp) no-repeat;background-size: 300px 300px;}.box:hover {transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front"></div><div class="back"></div></div>
</body></html>

3d导航栏案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {list-style: none;width: 120px;height: 35px;perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all 0.2s;cursor: pointer;}.front,.bottom {position: absolute;width: 100%;height: 100%;color: #fff;line-height: 35px;text-align: center;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;transform: translateY(17.5px) rotateX(-90deg);}.box:hover {transform: rotateX(90deg);}</style>
</head><body><ul><li><div class="box"><div class="front">韶光抚月</div><div class="bottom">天下人间</div></div></li></ul>
</body></html>

旋转木马案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {perspective: 950px;}section {position: relative;margin: 80px auto 0;width: 188px;height: 480px;background-color: pink;transform-style: preserve-3d;animation: xuanzhuan 10s linear infinite;}section div {position: absolute;width: 100%;height: 100%;}@keyframes xuanzhuan {100% {transform: rotateY(360deg);}}section div:nth-child(1) {background: url(xiaogong.webp) no-repeat;background-size: 100%;transform: translateZ(162.8px);}section div:nth-child(2) {background: url(xiao.webp) no-repeat;background-size: 100%;transform: translate3d(141px, 0, 81.4px) rotateY(60deg);}section div:nth-child(3) {background: url(xiangling.webp) no-repeat;background-size: 100%;transform: translate3d(141px, 0, -81.4px) rotateY(120deg);}section div:nth-child(4) {background: url(xingqiu.webp) no-repeat;background-size: 100%;transform: translate3d(0, 0, -162.8px) rotateY(180deg);}section div:nth-child(5) {background: url(qiqi.webp) no-repeat;background-size: 100%;transform: translate3d(-141px, 0, -81.4px) rotateY(-120deg);}section div:nth-child(6) {background: url(ningguang.webp) no-repeat;background-size: 100%;transform: translate3d(-141px, 0, 81.4px) rotateY(-60deg);}</style>
</head><body></body>
<section><div></div><div></div><div></div><div></div><div></div><div></div>
</section></html>

2.11 浏览器私有前缀

九，品优购项目

1.项目规划

1.1网站制作流程

1.2品优购项目整体介绍

1.项目名称：品优购
2.项目描述：是一个电商网站，要完成pc端首页，列表页，注册页面的制作

1.3开发工具与技术栈

1.4品优购项目搭建工作

1.创建文件夹（其他文件夹放在项目文件夹内）

2.创建文件

第二种初始化方式更好，第一种写起来简单
3.模块化开发

1.5网站favicon图标

1.制作favicon图标

2.图标放在根目录

3.图标引入

1.5SEO优化

1.title

2.description

3.keywords关键字

2.首页制作

注意：先写公共样式，写在common.css里，厚棉鞋其他页面就可以直接引用

2.1常见类名

2.2快捷导航制作

1.盒子与盒子之间的空隙可以设置外边距，也可以添加空格
2.文字之间的数字间隔可以通过li设置宽高背景颜色实现

2.3header制作

1.logo提权

2.4nav导航栏制作

小技巧
1.做轮播图，使用ul li 包裹图片进行制作
2.做多个小个子网状排列用li，一行放不下可以扩大ul的宽度，然后给父盒子设置overflow：hidden

3.列表页制作

4.注册页制作

5.域名注册与网站上传

十.移动web开发

1.流式布局

1.1移动端基础

1.浏览器现状

2.手机屏幕现状

3.移动端调试
谷歌浏览器调试功能

1.2视口viewport

就是浏览器显示页面内容的屏幕区域，分为布局视口，视觉视口和理想视口

mate视口标签

1.3二倍图

1.物理像素和物理像素比

注意：
①物理像素就是常说的分辨率
②iPhone8是1px等于2像素

2.二倍图
多倍图的存在就是为了解决Retina带来的显示问题

代码

3.背景缩放
语法：

        background: url(suofang.jpg) no-repeat;/* 将宽高改变为书写的值，如果只写一个，就视为宽度，另一边等比缩放 */background-size: 500px 500px;/* 百分比为父盒子的宽高的百分比 */background-size: 50% 100%;/* cover把整个盒子填充满，等比缩放，可能会出现图片显示不全的情况 */background-size: cover;/* contain 等比缩放，当宽度和高度其中一个铺满盒子就停止，可能会出现空白区域未填充*/background-size: contain;

注意：可以使用cuttman切多倍图

1.4移动端开发选择

1.移动端主流方案

2.单独制作移动端页面
通常在网站域名前加m（mobile）可以打开移动端，通过判断设备类型，如果是移动设备，则跳转到移动端页面
3.响应式兼容pc移动端，
通过检测屏幕宽度改变样式来适应不同终端
缺点：制作麻烦，要花费很大工夫调兼容性问题

1.5移动端技术解决方案

1.6移动端常见布局

1.7流式布局(百分比布局)

1.8京东移动端首页制作

2倍精灵图，先把图片缩小之后再测量位置，然后background-size里也缩小为原来的一半

2.flex布局

2.1.布局简述

2.2.布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
采用flex布局的元素，称为flex容器（flex container），简称容器，它的所有子元素自动成为容器成员，成为flex项目（flex item），简称项目
布局原理就是通过给父盒子添加flex属性，控制子盒子的位置和排列方式

注意：
①父盒子设置flex布局以后，子元素的float，clear和vertical-align属性将会失效
②伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
③子容器里可以横向排列也可以纵向排列

2.3flex布局父项常见属性

1.常见父项属性

2.flex-direction 设置主轴方向
①flex布局中分为主轴和侧轴，默认主轴为x方向，侧轴为y方向
②属性值（设置谁为主轴，剩下的就是侧轴，子元素跟着主轴排列）

3.justify-content设置子元素在主轴上的排列方式

4.flex-wrap 子元素是否换行
默认情况下项目都排在一条轴线上
默认子元素不换行，如果装不开，会缩小子元素宽度

5.align-items 设置侧轴上子元素排列方式（多行）

注意：
①子盒子没有设置高度时stretch才会生效，拉伸填满父盒子
②适合子元素为单行时候使用

6.align-content 设置侧轴上子元素排列方式（多行）

注意：子元素单行的时候是没有效果的

7.flex-flow

2.4flex布局子项常见属性

1.flex属性
用来定义子项目分配剩余空间，用flex表示占多少份数
语法：flex: 1;
注意：要给父盒子设置display：flex才会生效

2.align-self
控制子项自己在侧轴上的排列方式
align-self允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性，
默认为auto，即继承align-items属性，如果没有父元素，等同于stretch
3.order
数值越小，排列越靠前，默认为0

2.5携程网首页案例

1.常见初始化

body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma, "Lucida Grande ", Verdana, "Microsoft Yahei", STXihei, hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}

2.flex思路

3.display
父亲设置display：flex属性以改变子代排列，同时父亲也可以作为子代设置子代属性

4.背景颜色渐变

记得带上webkit

5.flex
后面的值可以写百分比

6.flex布局
以flex为主，其他为辅，还是会用到定位之类的内容，不多而已

3.rem适配布局

3.1rem基础

1.em是父元素的字体大小，比如父元素字体大小12px，子元素宽2em，也就相当于24px
2.rem（root em）是一个相对单位，是相对于html元素的字体大小

3.2媒体查询

1.什么是媒体查询

2.语法规范

属性值：
①mediatype查询类型

②关键字

③媒体特性

使用：

<style>/* 意思是 在我们的屏幕上并且宽度小于等于100px时我们要设置的样式*/@media screen and (max-width:700px) {body {background-color: pink;}}
</style>

注意：
①设置在一个范围内时 @media screen and (min-width:540px) and (max-width:969px)
②后面的会覆盖前面的冲突样式，比如，500px以上背景红色，700px以上背景绿色，那么600时是红色，800px就是绿色，后者覆盖了前者的冲突样式
③screen和and不可省略
④数字后面必须带单位

3.媒体查询+rem实现元素动态大小变化
通过媒体查询控制html的字体大小，从而实现对界面尺寸的整体控制

4.引入资源
样式比较多的时候，通过媒体查询yi引入不同的css样式
语法：<link rel="stylesheet" href="" media="screen and (min-width:320px)">
后面的会覆盖前面的整个css文件

3.3less基础

1.维护css的弊端

calc()可以用于简单计算

2.less介绍

3.less使用

4.less变量

语法：@color: pink;

5.less编译

6.less嵌套

在less中使用嵌套写法，编译之后就变成正常写法

特殊情况：

7.less运算
less文件中可以进行简单运算，生成的s文件中显示的是计算结果

注意

补充：颜色也是可以进行运算的background-color: #666-#222;

3.4rem适配方案

1.rem实际开发适配方案

2.rem适配方案市场主流技术

3.rem技术方案1
①设计稿常见尺寸宽度

②动态设置HTML标签font-size大小

③元素大小取值方法

3.5苏宁首页案例

步骤：
①创建
②视口
③引入
④common.less

html {font-size: 50px;
}@no: 15;@media screen and (min-width: 320px) {html {font-size: (320px / @no);}
}@media screen and (min-width: 360px) {html {font-size: (360px / @no);}
}@media screen and (min-width: 375px) {html {font-size: (375px / @no);}
}@media screen and (min-width: 384px) {html {font-size: (384px / @no);}
}@media screen and (min-width: 400px) {html {font-size: (400px / @no);}
}@media screen and (min-width: 414px) {html {font-size: (414px / @no);}
}@media screen and (min-width: 424px) {html {font-size: (424px / @no);}
}@media screen and (min-width: 480px) {html {font-size: (480px / @no);}
}@media screen and (min-width: 540px) {html {font-size: (540px / @no);}
}@media screen and (min-width: 720px) {html {font-size: (720px / @no);}
}@media screen and (min-width: 750px) {html {font-size: (750px / @no);}
}

⑤建立index.less，把common.less导入其中@import "common";
⑥设置body样式

body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;
}

注意：
①除法运算有时无法生效，解决方案有两种，一种是换成 ./ 但是会报错，另一种就是给表达式加上小括号
②遇到input超出父盒子的情况，原因是类型为text，改成search就可以了
③遇到img标签与其他标签有距时，把父盒子font-size改成0就可以解决(img默认和父盒子的基线对齐，而基线下方的高度和font-size大小有关）

3.6rem适配方案2（推荐）

1.flexible.js

2.苏宁首页案例
①创建

②视口与引入

③body
⑥设置body样式

body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;
}

4.响应式布局

4.1响应式开发

1.响应式开发原理
通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备

2.响应式布局容器
响应式布局下，无法直接控制每一个子元素的大小变化，因此需要一个父级作为布局容器，配合子级元素实现变化效果

原理：就是在不同屏幕下，通过媒体查询改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现响应式开发布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.containter {height: 66px;background-color: pink;margin: 0 auto;}@media screen and (max-width:768px) {.containter {width: 100%;}}@media screen and (min-width:768px) {.containter {width: 750px;}}@media screen and (min-width:992px) {.containter {width: 970px;}}@media screen and (min-width:1200px) {.containter {width: 1170px;}}</style>
</head><body><div class="containter"></div>
</body></html>

3.案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.containter {width: 750px;margin: 0 auto;}li {float: left;width: 93.75px;height: 30px;background-color: green;text-align: center;line-height: 30px;list-style: none;color: #fff;}@media screen and (max-width:768px) {.containter {width: 100%;}li {width: 33.33%;}}</style>
</head><body><div class="containter"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>
</body></html>

4.2Bootstrap前端开发框架

1.bootstrap简介

需要什么直接复制过来就可以
优点：

版本：

2.Bootstrap使用
①创建文件夹结构

bootstrap中内容从官网下载

②创建html骨架结构

把官网的基础模板（主页往下翻）内容复制过来，和正常生成的多出了以上部分

③引入相关样式

④书写内容
需要的内容直接复制过来，再微微修改

3.布局容器

4.3Bootstrap栅格系统

1.栅格系统简介

2.栅格选项参数

类前缀后面的数字就是所占份数，类似于flex：1；
语法：<div class="col-xs-3">1</div>

3.列嵌套

注意：小列再分为若干小列的时候，可以在内部再嵌套一个.row，然后进行划分

4.列偏移
使用col-xs-offset-*类可以将列向右偏移，相当于使用*选择器为当前元素增加了左侧外边距margin
语法：

    <div class="row"><div class="col-xs-3">zuo</div><div class="col-xs-3">zuozhong</div><div class="col-xs-3 col-xs-offset-3">you</div></div>

5.列排序

如果只拉不推，或者只推不拉，推拉的盒子就会覆盖其他盒子

6.响应式工具

要在多种屏幕上都隐藏或显示，就可以把对应的类都写上去 <div class="col-xs-3 hidden-xs hidden-sm">zuo</div>

4.4阿里百秀首页案例

思路：

①四部曲，建立引入
②根据设计稿修改container宽度

注意：
①这种效果可以通过浮动完成

5.移动端布局总结

主要掌握flex和rem

十一.JavaScript

0.计算机基础

0.1编程语言

1.编程

2.计算机语言

3.编程语言

4.翻译器

5.编程语言和标记语言的区别

6.总结

0.2计算机基础

1.计算机组成

2.数据存储

3.数据存储单位

4.程序运行

1.js初识

1.1初识JavaScript

1.历史

2.JavaScript是什么

和java之类的服务器语言不同。js不要配置编程环境

3.js的作用

4.html/css/js的关系

5.浏览器执行js

6.js的组成

①ecmascript

②DOM-文档对象类型

③BOM-浏览器对象模型

7.js初体验
有行内式，内嵌式，外部式三种（和css基本一致）
①行内式

②内嵌式

③外部引入

1.2js注释

        // 单行注释  ctrl + //* 多行注释ctrl + shift + / */

多hanz

1.3js输入输出语句

语法：

    <script>// 浏览器弹出输入框prompt('请输入')// 浏览器弹出警示框alert('计算结果')// 浏览器控制台打印信息，在console控制台里console.log('点开控制台你就看见了这个')</script>

2.js变量

2.1变量概述

1.什么是变量
白话：变量就是一个装东西的盒子
通俗：变量是存放数据的容器，我们通过变量名获取数据，甚至修改数据

2.变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间
类似于酒店的房间

2.2变量的使用

**步骤：**①声明变量②赋值

语法：

    // 声明变量var age;// 赋值age = 18;// 输出console.log(age)// 变量的初始化var name = xiaoming;console.log(name)

案例：
①弹出用户名

<script>var name = prompt('请输入姓名')alert(name)
</script>

2.3变量语法扩展

1.更新变量
一个变量被重新赋值后，他本来的值就会被覆盖，以最后一次赋值为准

2.同时声明多个变量（用英文逗号隔开）

<script>var name = '阿拉蕾',age = 200.address = '村子';
</script>

3.声明变量特殊情况

不声明也可以用，但是还是推荐声明

2.4变量命名规范

注意：
name，如果不声明也不赋值，不会报错，输出为空，是一个具有特殊意义的单词，尽量不用name作为变量名

2.5变换变量案例

需要先声明一个临时变量

<script>var name = '阿拉蕾',age = 200.temp;temp = name;name = age;age = temp;
</script>

2.6变量小结

3.js数据类型

3.1数据类型简介

1.为什么需要数据类型

2.变量的数据类型

3.数据类型的分类

3.2简单数据类型

1.基本数据类型（简单数据类型）

2.数字型Number
①进制类型
常见有二进制，八进制，十进制，十六进制

②数字型范围
js中的最大值与最小值

③三个特殊值

超出最大值即视为无穷大，无穷小也是如此

④isNaN

<script>// 判断是否为数字类型，是返回false，不是返回trueconsole.log(isNaN(3)); console.log(isNaN('啊'));
</script>

注意N要大写

3.字符串型String
①字符串
凡是加了引号，都是字符串类型var name = '海皇蜃';
js内推荐用单引号
如果内部内容需要带引号，一定要和外围引号不同，外双内单和外单内双都行console.log('海"皇"蜃');

②字符串转义符

③字符串长度
语法：console.log(str.length);

④字符串拼接

⑤字符串拼接加强

<script>var age = 18;// 错误写法console.log('我的年龄是age岁');// 正确写法console.log('我的年龄是' + age + "岁");
</script>

3.3获取变量数据类型

3.4数据类型转换

web前端笔记1-hml，css部分相关推荐

Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
web前端-01：关于css居中的几种方法
web前端-01:关于css居中的几种方法在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...

web前端笔记1-hml，css部分

这里写目录标题

一.基础内容

1.网页

1.1什么是网页

1.2什么是HTML

1.3网页的形成

2.常用浏览器

2.1常用的浏览器

2.2浏览器内核

3.web标准

3.1为什么需要web标准

3.2web标准组成

二.HTML

1.HTML语法规范

1.1基本语法

1.2标签关系

2.HTML基本结构标签（骨架标签）

3.常用开发工具

3.1文档类型声明标签

3.2lang语言种类

3.3字符集

4.HTML常用标签

4.1标签语义

4.2标题标签<h1>-<h6>

4.3段落标签与换行标签

4.4文本格式化标签

4.5<div>和<span>标签

4.6图像标签和路径

4.7超链接标签

5.HTML中的注释和特殊字符

5.1注释

5.2特殊字符

6.表格类标签

6.1表格标签

6.2列表标签

6.3表单标签

6.4综合案例

6.5查阅文档

三.CSS

1.css简介

1.1html的局限性

1.2css-网页美容师

1.3css语法规范

1.4css代码风格

2.css基础选择器

2.1css选择器作用

2.2选择器分类

2.3标签选择器

2.4类选择器

2.5id选择器

2.6通配符选择器

2.7基础选择器总结

3.css字体属性

3.1字体系列

3.2字体大小

3.3字体粗细

3.4字体样式

3.5字体复合属性

3.6字体属性总结

4.css文本属性

4.1文本颜色color

4.2文本对齐text-align

4.3装饰文本text-decoration

4.4文本缩进text-indent

4.5行间距line-height

4.6文本属性总结

5.css引入方式

5.1css三种样式表

5.2css内部样式表

5.3行内样式表

5.4外部样式表

5.5css引入方式总结

6.css综合案例

7.css调试工具

8.Emmet语法

8.1快速生成html结构语法

8.2快速生成css样式

8.3快速格式化代码

9.css复合选择器

4.2标题标签`<h1>-<h6>`

4.5`<div>`和`<span>`标签