第十七天：CSS初始化。H5C3新增内容
'任意’键在哪里？
学习目标
CCS初始化
H5C3新增
CSS初始化
不同浏览器对有些标签的默认值是不同的，为了能够解决不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化
简单理解：CSS初始化是指重设浏览器的样式（CSS reset）
每个网页都必须首先进行CSS初始化
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121* { /* 边距清零 */ margin: 0; padding: 0}em,i ...
第十六天：CSS高级技巧
常识只有一个问题: 就是它不常见
学习目标
精灵图
字体图标
CSS三角
CSS用户界面样式
vertical-align属性应用
溢出的文字省略号显示
常见布局技巧
精灵图
为什么需要精灵图？
一般来说，网页是放在服务器上的，一个网页中往往会应用很多小的背景图像来做修饰，当网页中的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度
所以，**为了有效的减少服务器接收和发送请求的次数，提高网页的加载速度，**出现了CSS精灵技术（也称作CSS Sprites，CSS雪碧）
核心技术：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要一次请求就可以了
精灵图的使用
使用精灵图核心：
精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
这张大图片也被叫做sprites精灵图或者雪碧图
移动背景图片位置，此时可以用background-position
移动的距离就是这个目标的x和y坐标。注意网页中的坐标有所不同（右x下y）
一般情 ...
第十五天：定位、元素隐藏
给代码注释就像是给浴室做清洁一样 — 你永远都不想干，但它的确给你和客人带来了更愉快的体验。
学习目标
能够说出为什么需要定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别
定位
为什么需要定位？
如果需要：
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
滚动窗口的时候，盒子是固定屏幕某个位置的
所以：
浮动可以让多个块级盒子一含内没有缝隙排列显示，经常用于横向排列盒子
定位则是可以让盒子在某个盒子内移动位置或者固定在屏幕种某个位置，并且可以压住其他盒子
定位组成
定位：将盒子定在某一个位置，所以定位也就是在摆盒子，按照定位的方式移动盒子
定位=定位模式＋边位移
定位模式用于指定一个元素在文档中的定位方式
边位移则决定了该元素的最终位置
定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置的，其值可分为4个：
值
语义
static
静态定 ...
第十四天：浮动
等一个有生产力的程序员出现要比等第一个程序员变得有生产力好。
学习目标
能够说出为什么需要浮动
能够说出浮动的排列特性
能够说出3种最常见的布局方式
能够说出为什么需要清除浮动
能够写出至少两种清除浮动的方式
传统网页的布局的三种方式
传统网页的本质：用CSS来摆放盒子，把盒子摆放到相应的位置
CSS提供了三种传统布局的方式（简单来说就是盒子如何进行排列顺序）
普通流（标准流）
浮动
定位
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了
注意： 实际开发中，一个页面基本都包括了这三种布局方式，后面移动端的学习就会学习新的布局方式
标准流（普通流/文档流）
所谓标准流，就是标签按照规定好默认方式进行排列
块级元素会独占一行，从上向下顺序排列
常用元素：div,hr,p,h1-h6,ul,ol,dl,form,table等
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘会自动换行
常用元素：span,a,i,em等
以上都是标准流布局，而我们之前学习的就是标准流，标准流是最基本 ...
第十三天：圆角边框、盒子阴影、文字阴影
如果说你的过程有十个参数的话，你可能漏掉一些了。
学习目标
圆角边框
盒子阴影
文字阴影
注意：在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> < ...