以下写的方法不是最优质的的方法,就是为了练练手,希望大家不要介意,如有问题,还请多指教
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li {
list-style-type: none;
}
a {
text-decoration-line: none;
}
.parent {
position: relative;
width: 359px;
float: left;
background-color: #cfa;
position: absolute;
left: 50%;
transform: translate(-50%);
}
.lunre li {
float: left;
width: 52px;
font-size: 14px;
text-align: center;
line-height: 45px;
height: 45px;
}
.lunre a {
font-size: 16px;
}
.lunre .re {
border-bottom: 3px solid #DDB75F;
}
.lunre li.re a {
color: #DDB75F;
}
.biao a {
display: block;
text-align: center;
color: #DDB75F;
font-size: 20px;
height: 20px;
margin-bottom: 10px;
}
.did {
position: absolute;
top: 23px;
right: 46px;
}
.bottom {
position: relative;
height: 275px;
width: 320px;
overflow: hidden;
}
.bottom .tab {
height: 275px;
width: 320px;
position: absolute;
top: 10px;
}
.nongqing {
text-align: center;
overflow: hidden;
}
.nongqing li {
padding: 5px 0px 5px 0px;
width: 210px;
white-space: nowrap;
color: #fff;
}
.nongqing li a {
padding-rig