第十三天：圆角边框、盒子阴影、文字阴影
如果说你的过程有十个参数的话，你可能漏掉一些了。
学习目标
圆角边框
盒子阴影
文字阴影
注意：在ie9版本以上才支持
圆角边框
在CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了
语法：
1border-radius:length;
radius半径(/'reɪdɪəs/ 圆的半径)原理：（椭）圆与边框的交集形成的圆角效果
参数值可以为数值或者百分比
当我们想要一个圆，我们可以设置一个长和宽相等的div，然后令boder-radius为div高的一半，即可
设置为50%就是宽度和高度的一半
注意盒子如果是长方形的话设置百分比会变成椭圆
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta htt ...
第十二天：综合案例
软件可重用之前应该可用在先
学习目标
案例一：产品模块
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<!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"> ...
第十一天：Photoshop
低水平的编程有益于程序员的灵魂
学习目的
因为网页美工大部分效果图都是利用PS来做的，所以我们以后大部分切图工作都是在PS中进行
基础操作
文件->打开：可以打开我们想要测量的图片
CTRL+R：可以打开标尺，或者视图->标尺
右击标尺，选择像素
CTRL+滑轮：放大缩小图片
空格+滑轮：自由移动图片
可以利用选区然后拖动，来测量图片大小
CTRL+D可以取消选区，或者在一边未选区的区域点击也可以取消选区
第十天：CSS盒子模型
程序是写来给人读的，只会偶尔让机器执行一下
学习目标
盒子模型
PS基本操作
综合案例
圆角边框
盒子阴影
文字阴影
盒子模型
看透网页布局的本质：所有网页布局都是由一个个盒子模型组成的
网页布局过程：
准备好相关的网页元素，网页元素基本都是盒子Box
利用好CSS设置好相关样式。然后摆放到相应位置
往盒子里面装填内容
网页布局的核心本质：利用CSS摆盒子
盒子模型（BoxModel）组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容等
边框：盒子的边框
内容：可以是文字、图片甚至是其他的盒子
内边距：内容与边框 的距离
外边距：盒子与盒子之间的距离
边框Border:
border可以设置元素的边框、边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：
1border: border-width || border-style || border-col ...
第九天：CSS盒子模型
程序是写来给人读的，只会偶尔让机器执行一下
学习目标
盒子模型
PS基本操作
综合案例
圆角边框
盒子阴影
文字阴影
盒子模型
看透网页布局的本质：所有网页布局都是由一个个盒子模型组成的
网页布局过程：
准备好相关的网页元素，网页元素基本都是盒子Box
利用好CSS设置好相关样式。然后摆放到相应位置
往盒子里面装填内容
网页布局的核心本质：利用CSS摆盒子
盒子模型（BoxModel）组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容等
边框：盒子的边框
内容：可以是文字、图片甚至是其他的盒子
内边距：内容与边框 的距离
外边距：盒子与盒子之间的距离
边框border:
border可以设置元素的边框、边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：
1border: border-width || border-style || border-col ...
第八天：CSS的元素显示模式
在没有错误日志的情况下诊断任何问题无异于闭眼开车。——Apache官方文档
学习目标
CSS的三大特性
CSS的注释
CSS的三大特性
层叠性、继承性、优先级
层叠性
相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题
层叠性原则：
样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式
样式不冲突：不会重叠
1234567div{ color : red; font-size :12px;}div{ color : pink;}
其中只会覆盖color，并将color赋值为pink，font-size不会被覆盖，依然生效
继承性
会继承父标签的样式
1234567891011121314151617<!DOCTYPE html><html lang="en"><head> <title>CSS层叠</title> < ...
第七天：CSS的元素显示模式
I am the best.
学习目标
了解什么是元素的显示模式
元素显示模式的分类
元素显示模式的转换
什么是元素显示模式
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们呢的特点可以更好的布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己独占一行，比如<span>一行可以多个
HTML一般分为块元素和行内元素两种类型
块元素
常见的块元素有:
<h1>-<h6>、<p>、<div>、<ul>、<li>等，其中<div>是最经典的块元素
块元素的特点：
独占一行
高度、宽度、外边框以及行内距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素
注意：
文字类的元素不能使用块级元素
<p>标签主要用于存放文字，因此<p>中不能放块级元素，特别是不能放<div>
同理，&l ...
第六天：CSS简介
Intelligence is the ability to avoid doing work， yet getting the work done.
学习目标
Emmet语法
CSS的复合选择器
CSS的元素显示方式
CSS的背景
CSS的三大特性
CSS的注释
Emmet语法
Emmet语法的前身是Zen Coding，它使用缩写，来提高HTML/CSS的缩写速度，VSCode内已经集成该语法
快速生成HTML结构语法
快速生成CSS样式语法
快速生成HTML结构语法
生成标签 直接输入标签名，按下tab即可，比如div然后按下tab键就可以直接生成<div></div>
如果想要生成多个相同的标签，加上*就可以了，比如div*3就可以直接生成3个div
如果有父子级关系的标签，可以用>比如 ul>li就可以了
如果有兄弟关系的标签，用+就可以，比如div+p
如果生成带有类名或者id名字的，直接写.demo或者#two 然后tab键就可以了
12345678 ...
第五天：CSS简介
本来无一物，何处惹尘埃
学习目标
CSS简介
CSS基础选择器
CSS字体属性
CSS文本属性
CSS引入方式
综合案例
Chrome调试工具
CSS简介
CSS主要使用场景就是美化网页、布局页面的
HTML的局限性
只关注内容的语义，丑，繁琐臃肿
CSS-网页的美容师 Cascading Style Sheets 层叠样式表
CSS也是一门标记语言，主要设置HTML中的文本内容、图片的外形、版面的布局和外观显示样式
可以美化HTML，使网页布局更加美观
CSS语法规范
12345678910111213141516171819<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= ...
第四天：HTML标签
低头快步，抬头看路
学习目标
能够书写表格
能够写出无序列表
能够写出3~4个常用input表单类型
能够写出下拉列表表单
能够使用表单元素实现注册页面
能够独立查阅W3C文档
表格标签
表格是实际开发中非常常用的标签
表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练的运用表格就显得很重要，一个清爽简约的表格能够件繁杂的数据表现得很有条理
表格的基本语法
标签
<table> </table>是用于定义表格的标签
<tr> </tr>标签定义表格中的行，必须嵌套在<table> </table>标签中
<td> </td>是表格中的单元格，必须嵌套在<tr></tr>标签中
字母td表示表格数据(table data)，即数据单元格的内容
12345678<table> <tr> & ...