目录
准备工作
结构!结构!结构!
侧栏样式的添加
内容区样式的添加
实现文章详情页
前置工作
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提高开发效率
谢谢!
领取专属 10元无门槛券
私享最新 技术干货