source code:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
input {
outline :none;
padding-left:10px;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
}
li {
list-style:none;
}
.box {
width: 980px;
height: 700px;
background-color: cornflowerblue;
margin: 10px auto;
border-radius: 5px;
}
.box .top {
width: 100%;
height: 105px;
background-color: #41a325;
}
.box .top .logo img {
margin-left: 43px;
margin-top: 18px;
}
.bottom {
position: relative;
width: 100%;
height: 595px;
background-color: #f5ffef;
}
.bottom .shuru {
position: absolute;
top: 80px;
left: 52px;
width: 877px;
height: 70px;
background-color: #fff;
border: 1px solid #d5d5d5;
}
.shuru ul {
margin-top: 10px;
margin-left: 10px;
}
.shuru ul li {
font-size: 18px;
list-style:none;
float: left;
padding-right: 20px;
}
.bottom .jianp {
position: absolute;
left: 52px;
top: 193px;
width: 877px;
height: 292px;
background-color:#9c9ba6;
padding-top: 5px;
border-radius: 5px;
}
.jianp li {
float: left;
width: 51px;
height: 51px;
background-color: #d0d6ea;
border: 1px solid #000;
text-align: center;
margin-left: 5px;
border-radius: 5px;
}
.jianp .z_2 li {
margin-top: 5px;
}
.jianp .z_2 .tab {
line-height: 51px;
width: 77px;
height: 51px;
}
.qys {
line-height: 51px;
}
.z_3 li {
margin-top: 5px;
}
.z_3 .dax {
width: 104px;
height: 52px;
line-height: 51px;
}
.jianp .z_2 .huic {
width: 83px;
height: 51px;
background-color:darkseagreen;
}
.bottom .z_3 .huic_1 {
width: 114px;
height: 52px;
background-color: darkseagreen;
}
.huiche {
position: absol