css样式属性比HTML用标签来添加方便很多，样式也比较多样。不过需要记得东西就更多了。
.d1 { width: 100px; height: 30px; border: 1px solid black; text-align: center; line-height: 30px }
.d1:hover { background-color: greenyellow; color: red; opacity: 0.5 }
a { text-decoration: none; color: black }
.d2 { width: 100px; height: 100px; border: 1px solid black; position: relative }
.d2 div { width: 30px; height: 40px; border: 1px solid black; position: relative }
#xxx { width: 30px; height: 20px; display: none }
.d2:hover #xxx { color: red }
ul { list-style-image: url("../img/QQ%E5%9B%BE%E7%89%8720170711172838.gif") }
ul li { width: 50px }
按 钮
ABCD
1234
- 1
- 2
- 3
- 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1{
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
line-height: 30px;
/*圆角*/
border-radius: 10px;
}
.d1:hover{
background-color: greenyellow;
color: red;
/*渐变效果*/
transition: 1s;
/*阴影*/
box-shadow: 5px 5px 5px black;
text-shadow: 2px 2px 2px black;
/*旋转*/
/*transform: rotate(5deg);*/
/*3D旋转*/
transform: rotateY(360deg);
/*平移*/
/*margin-left:10px;*/
/*半透明*/
opacity: 0.5;
}
a{
text-decoration: none;
color: black;
}
.d2{
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
.d2 div{
width:30px;
height: 40px;
border: 1px solid black;
position: relative;
}
#xxx{
width: 30px;
height: 20px;
/*隐藏占用位置*/
/*visibility:hidden;*/
/*隐藏不占用位置*/
display: none;
}
.d2:hover #xxx{
color: red;
}
/*列表常用样式*/
ul{
/*list-style:none;*/
list-style-image: url(../img/QQ图片20170711172838.gif);
}
ul li{
/*float:left*/
width: 50px;
}
</style>
</head>
<body>
<a href="#"><div class="d1">按 钮</div></a>
<div class="d2">
<div id="xxx">ABCD</div>
<div>1234</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>