HTML+CSS网站点赞和打赏的功能，实现方法如下：
1、HTML代码：
<body><div class="thumbs_content">
<a href="javascript:void(0)" class="thumbs_button fa fa-thumbs-up" title="点赞，支持一下"> 点赞</a>
<a href="javascript:void(0)" class="reward_button fa fa-money" title="打赏，支持一下"> 打赏</a>
<span class="clear"></span>
</div>
</body>
2、CSS代码如下：
<style type="text/css">.thumbs_content{
width: 291px
margin: 0 auto
}
.thumbs_button{
float: left
width:145px
text-align: center
margin:5px auto
height: 45px
line-height: 45px
background-color:#444
color:#fbfbfb
text-align:center
text-decoration:none
font-weight:bold
font-size:16px
transition: all 0.3s
border-radius: 0 0 0 25px
-webkit-border-radius: 0 0 0 25px
-moz-border-radius: 0 0 0 25px
-o-border-radius: 0 0 0 25px
}
.reward_button{
float: left
width:145px
text-align: center
margin:5px auto
height: 45px
line-height: 45px
background-color:#cd4450
color:#fbfbfb
text-align:center
text-decoration:none
font-weight:bold
font-size:16px
border-left:1px solid #fbfbfb
transition: all 0.3s
border-radius: 0 25px 0 0
-webkit-border-radius: 0 25px 0 0
-moz-border-radius: 0 25px 0 0
-o-border-radius: 0 25px 0 0
}
.thumbs_button:hover, .reward_button:hover{
opacity:0.8
font-size:18px
}
.clear{
clear:both
}
</style>
3、效果图：
wordpress有类似的打赏插件，但是插件会导致整个网站臃肿，对整体的网站性能会有所影响，所以并不推荐。
有一个纯css方法，不需要任何js和插件。
以下是效果，仿的知更鸟:
鼠标滑过"赏"字的效果:
这里是有个缺陷的：
这个配置好后，效果是“鼠标滑过”，二维码显示。
因为是纯css写的，所以没有click事件，用的是css的hover，所以手机端不支持，只支持PC端。介意的请勿用。
详细代码到这下载一下:网页链接
CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS选择器分类：
标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器
1、html标签选择器：
定义：以html标签作为选择器
2、class类选择器：
定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。
类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：
同一个元素可以设置多个类，之间用空格隔开：
3、ID选择器
定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则
4、群组选择器
定义：集体统一设置样式
5、全局选择器
定义：所有标签设置样式
HTML文档结构图
6、后代选择器
定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。
7、伪类选择器
链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。
伪类
说明
:link
未访问的链接
:visited
已访问的链接
:hover
鼠标悬停状态
:active
激活的链接
:hover 用于访问的鼠标经过某个元素时；
:active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）
伪类选择器的属性：link >visited >hover >active
说明：
1) a:hover 必须置于 a:link和a:visited之后，才有效
2) a:active 必须置于 a:hover之后才有效
3) 伪类名称对大小写不敏感
8、CSS其它选择器
css继承特性，从父元素那继承部分css属性
选择器的优先级
ID选择优先级最高（id选择器定义具有唯一性）
class选择器次之（class选择器可以多个）
元素选择器再次之
其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高
!important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。
CSS选择器命名规则
1：采用英文字母，数字以及"-" 和 "_" 命名
2：以小写字母开头，不能以数字和"-" 和 "_" 开头
3：使用有意义的命名规范
常用CSS命名
header
页头
main
主体
footer
页尾
nav
导航
sidebar
侧栏
container
容器
column
栏目
title
标签
menu
菜单
submenu
子菜单
*列举常用命名，大家根据自身项目及团队的规则命名
耐心学习基础知识，基础是盖房的根基，必须打结实。
如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
