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、效果图：
这个再编程中，很常见，也有很多种写法，介绍两种。1.图标用img标签显示，再img标签点击后，更改img的src属性，改变图标，将原来的空心换成红心的图片。
2.图标用css控制，设置background-image显示空心的背景图片，这里图片最好是png的，点击后换成红心的图片。
无论哪种，注意记录用户的点击行为，下次进去后直接显示红心的图标。比如百度app的点赞，要记录用户再哪个帖子点赞了，下次该用户再查看这个帖子的时候，默认显示点赞后的图标。
这个，就我知道的说一下，网页主要需要使用HTML,CSS,JavaScript,PHP以及其它。所以如果想写网页还是需要学这些吧。C语言应该是不能做网页。当然有了编程基础学这些也快吧。HTML和CSS可以控制网页上显示什么和显示的格式。JavaScript是客户端的脚本语言，PHP是用于写服务器端的。
比如举个例子
<html xmins="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script language="javascript">
function InputCheck(form1)
{
if(form1.username.value=="")
{
alert('请输入您的账号')
form1.username.focus()
return(false)
}
if(form1.password.value=="")
{
alert('请输入您的密码')
form1.password.focus()
return(false)
}
}
</script>
</head>
<title>用户登录</title>是HTML，作用是在浏览器的标签显示“用户登录”。<link rel="stylesheet" type="text/css" href="styles.css" />也是HTML，作用是链接了一个CSS，就是styles.css，用于控制网页的格式。<script language="javascript">开始的那一段代码是JavaScript，作用是在客户端检查用户输入的账号和密码是否为空，如果为空，就提示“请输入”。
PHP用于在服务器端和数据库交互，数据库可以是MySQL，SQLServer等。因为如果做网页，储存一些用户的信息等最好还是用数据库吧。
希望你能大体明白吧，当然如果制作一个网页的界面可以使用一些软件，如Dreamweaver等，应该能做出比较漂亮的界面。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）