博客项目是在游记项目的简陋网页上进行样式的美化和改变。
思路：
- 重置CSS样式，新建的style-reset.css文件，将浏览器的默认样式重置；
- 根据要求设置不同类、不同元素的样式；
- 打开设置过CSS样式的html文件，对比一下要求，看是否有不对的地方，进行增删查改。
<1> 下划线样式
效果如图：
描述：
在h1标题的文字下方显示一条下划线，文字下方颜色是#188eee，其他颜色为#ccc，宽度当前所在标签模块的宽度。
实现代码：
background-image: linear-gradient(to right,#188eee 96px ,#ccc 96px);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 3%;
<2>有序列表的序号样式更改
效果如图：
描述：
行程需要用到有序列表来记录，通过修改序号样式使页面更美观
实现代码：
.article ol{
counter-reset: section;/*重置计数器*/
}
.article li:before{
counter-increment: section;/*增加计数器的值*/
content: "0" counter(section) "/";/*把计数器设为 0 + 序号 + / 的显示风格*/
font-family: monospace;
color: #999;
margin-right: 10px;
}
<3> 图片背景框
效果如图：
描述：
在照片的周围加上边框。
实现代码：
border: 1px solid #ccc;
padding: 5px;
<4> 分割下划线
效果如图：
描述：
蓝色的分割线，直接修改当前标签块的上边框样式即可。
实现代码：
border-top: 3px solid #188eee;
<5>评论输入框样式
效果如图：
描述：
鼠标移到input框时，输入框的边框出现阴影，移到“评论一下”的按钮时，按钮颜色变成#147de2，字体变成白色。
实现代码：
/*评论框 默认边框色为#dbdbdb，滑过为#ccc，滑过出现阴影，阴影范围5px，padding为5px，圆角为5px*/
.f-textarea{
width: 100%;
height: 100px;
color: #dbdbdb;
padding: 5px;
border-radius: 5px;
}
.f-textarea:hover{
color:#ccc;
box-shadow: 0 0 5px;
}
/*评论一下按钮 滑过的颜色为#147de2,评论按钮与评论列表20px;*/
.f-btn{
margin: 0;
padding: 0;
border: 1px solid transparent;
width: 80px;
height: 32px;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 20px;
}
.f-btn:hover{
background-color: #147de2;
color: white;
}
<6>评论列表样式
效果如图：
描述：
鼠标移到每条评论列表，评论列表的边框会出现阴影，移到名字，“点赞”，“回复”上的时候字体颜色会变成 #147de2。
实现代码：
/*评论列表 浅灰色背景，滑过出现阴影，阴影范围5px，间距10px*/
.comment-item{
background-color: #f5f5f5;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.comment-item:hover{
box-shadow: 0 0 5px;
}
/*点赞和回复文字*/
.comment-ft{
text-align: right; /*向右对齐*/
padding: 5px;
}
.ft-oper{
font-size: 12px;
padding: 5px;
cursor: pointer;/*手型鼠标*/
}
.ft-oper:hover{
color: #147de2;
}
<7>固定背景图片
效果如图：
描述：
在整个网页的右下方固定一个背景图片，上下滚动网页时，图片不会跟着内容一起动。
实现代码：
.body{
background: url(http://****) fixed no-repeat right bottom;
}
总结：
- 学会简化代码，但是不能把不同的类弄混淆；
- sublime的快捷键很需要，可以节省很多时间，提升工作效率；
- 不会的地方要去钻研，看不懂要去查，再不懂就要问，比如linear-gradient设置下划线，在google上找到实例，自己将每一句代码都反复删减修改再运行html文件，最后彻底搞懂了；
- 元素选择器的层级关系要做好，不然很容易影响错乱；
- 重置样式表可以为多个页面引用，做为多个页面的公共样式表。虽然当前只做一个页面，把公共部分分离出来，这对多页面是有开发优势的。