li {
list-style:none;
}
* {
margin:0;
padding:0;
}
.remen {
height:250px;
}
.remen h1 {
height:60px;
}
.remen ul {
height:180px;
}
.remen ul li {
float:left;
height:80px;
width:160px;
line-height:80px;
text-align:center;
border:1px solid #CCCCCC;
margin:0 5px;
margin-top:10px;
position:relative;
}
.remen ul li .jia {
display:none;
position:absolute;
width:0px;
height:2px;
top:-2px;
left:0;
background:#000000;
}
.remen ul li .wb {
display:none;
position:absolute;
width:0px;
height:2px;
bottom:-2px;
left:0;
background:#000000;
}
.remen ul li .hl {
display:none;
position:absolute;
width:2px;
height:5px;
bottom:0;
left:0px;
background:#000000;
}
.remen ul li .hr {
display:none;
position:absolute;
width:2px;
height:5px;
bottom:0;
right:0px;
background:#000000;
}
.remen ul li a {
line-height:80px;
text-align:center;
font-size:18px;
font-weight:600;
display:none;
color:#B28247;
}
.remen ul li .bd {
position:absolute;
height:30px;
top:15px;
left:0;
}
.remen ul li .bd img {
width:70%;
}
/*# sourceMappingURL=2.css.map */
更新时间:2019-08-29 00:08:29
实现思路
将四个边框分别看做四个盒子,宽度等于该盒子的边框的宽度,在进行定位。
通过调用animate动画让边框动态显示。