这段代码怎么简化？
这段代码怎么简化？
程序代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝广告栏</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.dahe {
width: 540px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
}
.ad {
width: 520px;
height: 280px;
background-color: #fff;
margin: 10px;
position: relative; /*给第二个盒子相对定位 子绝父相*/
}
.tu-l,
.tu-r {
background-color: rgba(0,0,0,.4);
width: 20px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute; /*给子盒子绝对定位*/
top: 50%; /*垂直居中两个按钮*/
margin-top: -15px;
}
.tu-l a,
.tu-r a {
color: #fff;
font-weight: 700;
}
.tu-l {
left: 0;
border-radius: 0 50% 50% 0; /*左边圆角设置*/
}
.tu-r {
right: 0;
border-radius: 50% 0 0 50%; /*右边圆角设置*/
}
.tu-h {
width: 60px;
height: 12px;
background-color: rgba(255,255,255,0.4);
border-radius: 10px;
position: absolute;
left: 50%; /*垂直居中下方按钮*/
margin-left: -30px;
bottom: 30px;
}
.tu-h li {
width: 8px;
height: 8px;
background-color: #fff;
float: left;
margin: 2px;
border-radius: 50%; /*给li盒子改变圆形*/
}
.tu-h li:hover {
background-color: #f40;
}
</style>
</head>
<body>
<div class="dahe">
<div class="ad">
<img src="imges/tu.jpg" alt="图像被外星人带走了" />
<div class="tu-l"><a href="#">></a></div>
<div class="tu-r"><a href="#"><</a></div>
<div class="tu-h">
<ul>
<li><a 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>
</div>
</div>
</body>
</html>
