其实网站所用按钮大多不是用按钮相关的标签做的。
下面的代码将会介绍伪类和模仿出按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
background-color: cornflowerblue;
outline: red solid 1px;
height: 90px;
line-height:90px ;
width: 120px;
text-align: center;
letter-spacing: 10px;
cursor: pointer;/*模仿按钮的手型*/
}
a:link{
color: darkblue;
}
a:visited{
color: aquamarine;
}
a:hover{
color: darkgoldenrod;
}
a:active{
color: brown;
}
div:hover{
outline: green solid 1px;
}/*鼠标浮上去的时候*/
div:active{
outline: yellow dashed 2px;
}/*点击的时候*//*顺序 l v h a*/
input:focus{
background-color: #008000;
}/*这个是拿鼠标点一下才会起作用*/
/*显而易见冒号前是选择器，不是标签，可以把div定义一个类，用类选择器代替标签选择器*/
</style>
</head>
<body>
<div>这是一个按钮</div>
<a href="http://www.baidu.com">搜索</a>
</body>
</html>这个再加上超链接结合onclick等事件就可以完善按钮功能了。运用伪类还可以做出一些动态化的效果。比如当鼠标悬停到某区域时加载不同的背景等等。
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
