小项目练手实战 - 变色小按钮
【背景分析】
为了满足用户体验，提高项目网页的视觉冲击力，各大网站上都有一些有颜色的按钮，当鼠标划上去的时候会变色，让用户的体验非常好。为了满足用户需求，同时让代码效率变高，可以用css样式做一个变色按钮。知识点：运用a标签做超链接以及按钮文字，用background进行颜色的变化。
【源码】
<!doctype html> <html> <head> <!--声明当前页面的编码集：中文编码（GBK/GB2312）,国际编码（utf-8）--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--声明当前页面的三要素--> <title>简易网页变色小按钮</title> <meta name="Keywords" content="关键词,关键词,关键词"> <meta name="description" content=""> <!--css/js--> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;font-family:"微软雅黑";color:#666;} /*--S-- button*/ .button{width:307px;height:40px;display:block;background-color:#f03;text-decoration:none;text-align:center;line-height:35px;margin: 50px auto; font-size:16px;color:#fff; } .button:hover{background-color:#0f3;} /*--E-- button*/ </style> </head> <body> <h1>网页变色小按钮</h1> <a href="#" class="button">小按钮</a> </body> </html>
实现效果：
当鼠标划上按钮时：
【源码分析】
小按钮可以链接到自己想要链接的地址，那么就要用到a标签，同时，要想达到我们想要的效果，那么现在需要用到样式
<body>
<a href="[链接地址]" class="button">小按钮</a>
</body>
此时基本的a标签链接文字已经出现：
显然，这不是我们想要的结果，先思考以下要做的工作：1.下划线去掉 2.按钮应该是几何图形状 3.鼠标触碰变色；这样，我们就需要在样式里做工作了。
1.去掉下划线
为了保证各大浏览器的兼容性，<style>里首先定位起始点 *{margin:0;padding:0;}
有文字就要想到默认格式body{font-size:12px;font-family:"微软雅黑";color:#666;}，这是基于大数据分析用户看着最舒适的格式，然后去掉下划线 .button{text-decoration:none;} ,文本装饰设置为无，则下划线消失。
2.按钮应该是几何形状的
显然，a标签是行内元素，不可以，我们只能将他设置成块级元素才可以 ，先要给个高度和宽度
width:307px;height:40px;display:block;为了更好的看出效果，加个边框border:1px solid red;
给的高度和宽度即为我们要的矩形宽度，他是a标签升级为块级元素占据的大小，接下来，我们应该将文字居中，将按钮弄到中间区域给个背景颜色
margin:50px auto;text-align:center;line-height:35px;
然后在给个背景颜色：
background-color: #f03;为了使效果明显，增大字体并改变字体颜色font-size:16px;color:#fff;
3.鼠标触碰变色
鼠标触碰需要用到选择器中的hover属性
.button:hover{backgroud-color:#0f3}
这样，就做出了真正的效果
