学做小程序之极简博客开发

目录

准备工作

结构！结构！结构！

侧栏样式的添加

内容区样式的添加

实现文章详情页

前置工作

atom -- preferences -- installm -- emmet 提高开发效率

例如 div*3 加上Tab键， 直接生成三个div

结构！结构！结构！

Document

分析和构思网页的结构，先用div构造整个网页的结构！

分析和构思网页的结构，先用div构造整个网页的结构！

分析和构思网页的结构，先用div构造整个网页的结构！

侧栏样式的添加

常规样式文件

normalize.css：https://cdn.bootcss.com/normalize/8.0.0/normalize.css

类似body 在normalize.css中都有定义。

内容区样式的添加

鼠标滑动：hover

颜色过渡：

-webkit-transition: color 200ms;

-o-transition: color 200ms;

transition: color 200ms;

每次去拷贝代码的时候，要想一下，合并代码。

实现文章详情页

固定侧边栏：

position: fixed;

代码地址：

https://github.com/zhenghaizhang/simpleblog

小结：

网站开发：分析和构思网页的结构，先用div构造整个网页的结构和骨架！

每次去拷贝代码的时候，要想一下，能否进行代码的合并。

atom编辑器install emmet提高开发效率

谢谢！