Mr.Captain东：HTML+CSS+CSS3

静态网页（2020.11.13）

模仿小米官方网站首页样式，HTML+CSS的外联式网页。

使用软件：

1、 HBulider
2、 火狐浏览器

使用知识点

1.HTML

1.1 块级标签：p、div、ul、li、dt、h1到h6等
1.2 行内标签：span、a、strong、em等文本标签

2.CSS

2.1 声明
2.2 基本选择器：
类选bai择器：duzhi.header {}
元素选择器：div {}
子选择器：ul > li {}
后代选择器：div p {}
伪类选择器：a:hover {}
属性选择器：input[type=“text”] {}

2.3 CSS3新特性：

(1)通过 @keyframes 规则，您能够创建动画。创建动画的原理是，
将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多
次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过
关键词 “from” 和 “to”，等价于 0% 和 100%.0% 是动画的开始时
间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该
始终定义 0% 和 100% 选择器。

(2) Transform属性应用于元素的2D或3D转换。这个属性允许你将元
素旋转，缩放，移动，倾斜等。

(3)transition从效果上看是一种平滑过渡的动画，本质上是在线性时间内将属性从开始值过渡到结束值。

(4)box-shadow 属性向框添加一个或多个阴影。

下面这个动图就是利用Transition、Transform以及box-shadow三个属性实现的

总结

写网页很像盖房子，由外及内，一个div一个div的去写，去布局，就像是大盒装小盒，一层又一层。轮播图，选项卡，鼠标放在某个a标签上的动态效果等都是利用CSS新特性来实现的，虽然没有使用Javascript，但是效果达到了其实也一样。还记得我老师说过的一句话：前端无对错，只要能实现效果即可。

源代码链接：https://pan.baidu.com/s/1WiGCZdU7r0SNP4XTji61rw
提取码：5908