a标签button的写法
-
带有鼠标及hover样式
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a.btn{
display: inline-block;
width: 200px;
height: 40px;
border: 1px solid;
text-decoration: none;
text-align: center;
line-height: 40px;
color: white;
}
/*[ˈpraɪmeri] */
a.btn.primary{
background: #337ab7;
border-color: #2e6da4;
}
a.btn.primary:hover{
background: #286090;
border-color: #204d74;
}
</style>
</head>
<body>
<a class="btn primary" href="http://www.baidu.com" target="_blank">百度一下就知道</a>
</body>
</html>
导航的写法
-
带有hover和默认的样式
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
.nav ul{
width: 100%;
min-width: 1400px;
height: 50px;
background: #006;
}
.nav li{
float: left;
width: 80px;
height: 100%;
}
.nav li a{
display: inline-block;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height: 50px;
}
.nav li a.active{
background: #004;
color: #fee;
}
.nav li a:hover{
background: #004;
color: #fee;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a class="active" href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">案例</a></li>
<li><a href="">生态</a></li>
<li><a href="">我们</a></li>
</ul>
</div>
</body>
</html>
复选框
- 复选框 单选框的默认样式是无法更改的，通过以下方式可以模拟出复选框样式。
-
关键逻辑：
1.使用label for的热点特性。
2.将label放在checkbox之后，并隐藏checkbox。(方便选择器筛选)
3.利用:checked选中被点击的label。(label样式可自定义)
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="checkbox"]{
display: none;
}
label{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #001;
}
input[type="checkbox"]:checked + label{
background: #001;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"></label>
</body>
</html>
复选框扩展
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.checkbox{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #666;
}
.checkbox input{
display: none;
/* visibility: hidden; 与display: none的区别：隐藏但依旧占据位置*/
}
.checkbox label{
display: block;
width: 20px;
height: 20px;
margin: 5px;
background-color: #666;
opacity: 0;
filter: alpha(0);
/* filter 兼容ie8及以下 取值范围0到100
* opacity 取值范围 0-1
* 取值越小越透明
*/
}
.checkbox input:checked + label{
opacity: 1;
filter: alpha(100);
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</body>
</html>
