前端实例练习——提示按钮

提示按钮代码存入Github效果预览初衷：很多人刚接触前端都会问，“前端如何入门？”我对网上能看到的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。效果预览HTML部分成功信息警告DangerDefault创建多个标签并向它们添加相应的classCSS部分。btnstyle.btn{border:none;/*消除边框*/color:white;/*设置字体颜色*/padding:14px28px;/*设置填充*/cursor:pointer;/*设置光标样式*/}现在按钮看起来像浏览器中的按钮style.success{background-color:#4CAF50;}/*Green*/.success:hover{background-color:#46a049;}.info{background-color:#2196F3;}/*Blue*/.info:hover{background:#0b7dda;}.warning{background-color:#ff9800;}/*Orange*/.warning:hover{background:#e68a00;}.danger{background-color:#f44336;}/*红色*/.danger:hover{background:#da190b;}.default{background-color:#e7e7e7;color:black;}/*Gray*/.default:hover{background:#ddd;}好的，现在我们完成了。怎么样，不是很简单。赶紧打开浏览器看看吧！在这里，只是给大家提供一个思路，参考。具体实现，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的参考