CH01_初识计算机
CH01_初识计算机本章目标
掌握计算机的概念
了解计算机的发展史
计算机组成
计算机分类
计算机应用领域
发展趋势
未来
计算机的概念计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。 由硬件系统和软件系统所组成，没有安装任何软件的计算机称为裸机。可分为超级计算机、工业控制计算机、网络计算机、个人计算机、嵌入式计算机五类，较先进的计算机有生物计算机、光子计算机、量子计算机等。 计算机发明者约翰·冯·诺依曼。计算机是20世纪最先进的科学技术发明之一，对人类的生产活动和社会活动产生了极其重要的影响，并以强大的生命力飞速发展。它的应用领域从最初的军事科研应用扩展到社会的各个领域，已形成了规模巨大的计算机产业，带动了全球范围的技术进步，由此引发了深刻的社会变革，计算机已遍及一般学校、企事业单位，进入寻常百姓家，成为信息社会中必不可少的工具。 计算机的应用在中国越来越普遍，改革开放以后，中国计算机用户的数量不断攀升，应用水平不断提高，特 ...
第一篇文章
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
第二篇文章
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
第三篇文章
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
第三章-CSS盒子模型
CH03-CSS盒子模型本章目标
掌握盒子边框（重点）
掌握盒子外边距（重点、难点）
掌握盒子内边距（重点、难点）
掌握盒子圆角（重点）
掌握盒子显示方式（重点、难点）
一、盒子边框1.1盒子边框
border：盒子边框
border-left：左边框
border-right：右边框
border-bottom：下边框
border-top：上边框
border-color：边框颜色
border-width：边框粗细
border-style：边框风格
none：默认，无边框
hidden：隐藏边框
solid：实线
dashed：虚线
dotted：点虚线
double：双实线
语法：border:边框粗细 边框风格 边框颜色;
举例：border:1px solid red；
123456789101112131415161718192021222324252627282930<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
第四章-CSS盒子浮动
CH04-CSS盒子浮动本章目标
CSS盒子浮动（重点）
清除CSS盒子浮动（重点、难点）
掌握常用DIV+CSS网页布局（重点、难点）
使用H5结构标签网站布局
盒子溢出显示方式（重点）
一、CSS盒子浮动1.1CSS盒子浮动属性float：设置盒子浮动方式 none：不浮动（默认） left：左浮动 right：右浮动只要盒子添加浮动属性，盒子可以设置宽高并且不独占一行（inline-block），盒子元素脱离文档流，当父级元素中所有子元素使用浮动，会导致父元素塌方，父级元素识别不了子元素的存在。
1.2什么是浮动？float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
1.3浮动的特点
浮动元素会脱离标准流（脱标：浮动的盒子不再保留原先的位置）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性（不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性）
一个元素浮动，理论其他兄弟元素也得浮动
1.4代码演示12345678910111213141516171819202122232425 ...
第五章-盒子定位
第五章-盒子定位本章目标
盒子定位（重点、难点）
盒子堆叠顺序（重点）
一、盒子定位1.1定位属性
position：设置盒子定位
static：默认，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
定位关键字：left、right、top、bottom
正值往关键字相反方向偏移
1.2静态定位（static）设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right、z-index属性都不起作用。
1.3相对定位（relative）它是标准的文档流，当设置好定位，它的位置的内容即使飞走了，原位置空白依然保留；起始点以自己为基准点，进行定位偏移；
代码演示：12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html lang="en">< ...
第六章-动画
第六章-动画本章目标
transform动画（重点）
animation动画（重点、难点）
一、transform动画1.1什么是动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
transform：设置动画函数
translate：平移动画，基于X、Y坐标重新定位元素的位置
scale：缩放动画，可以使任意元素对象尺寸发生变化
rotate：旋转动画，将元素旋转一定度数（单位deg）,1个deg等于1度°
skew：倾斜动画，将元素进行斜切倾斜（单位deg）,1个deg等于1度°
transition：设置动画过渡属性
transition-property：设置过渡属性
all：全部属性过渡
transition-duration：设置过渡时间
0.5s：默认值，单位秒
500ms：单位毫秒，1秒等于1000毫秒
transition-timing-function：动画运动曲线
linear：线性运动，平缓运 ...
第一章-初识CSS样式
第一章-初识CSS样式本章目标
掌握CSS基本选择器（重点）
掌握引入CSS样式的三种方式（重点）
掌握层次选择器（重点、难点）
掌握结构伪类选择器（重点、难点）
一、掌握CSS基本选择器1.1 标签选择器标签选择器：标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容，标签选择器可以定义多个标签的样式，标签选择器的名字和html标签名字一致
代码演示：1234567891011121314151617181920212223242526 <!-- 语法： 标签名{ 属性名1:属性值; 属性名2:属性值; ...... } --> <!-- css代码片段 --><style type="text/css"> p{ color: green; //字体颜色 font-size: 16px; //字体大小 }</style> <!-- html代码片段 --><body ...
第二章-CSS美化页面
第二章-CSS美化页面本章目标
字体样式（重点）
文本样式（重点）
伪类样式（重点、难点）
背景样式（重点、难点）
列表样式（重点）
一、字体样式2.1字体样式
font-family：字体类型;
font-size: 字体大小；
font-style: 字体风格；
normal：默认
italic：斜体 oblique：斜体
font-weight：字体的粗细；
数字：100-900，从细到粗
normal：400
bold：700
lighter：200（不常用）
bolder：800（不常用）
font：字体风格 字体粗细 字体大小 字体类型；
1234567891011121314151617181920212223<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I ...
