一、背景透明，文字不透明
问题：当鼠标悬浮到列表上时，背景颜色为#fff，背景透明度为0.5
<ul>
<li><a href="#">练习一</a></li>
<li><a href="#" class="active">练习二</a></li>
</ul>
一开始写法：
li a:hover{ background-color: #FFFFFF; opacity: 0.5; }
最终结果：背景颜色透明，但字体也变透明了，不符合要求。
正确写法：
li a:hover{ background: rgba(255,255,255,0.5); }
二、计算属性calc()
#div1 { width: calc(100% - 480px); }
需要注意事项：
1、表达式中有“+”和“-”时，其前后必须要有空格，否则表达式错误。
2、表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
三、横向选项卡的样式写法
标签页：
<div class="page"> <ul> <li> <a href="#"><</a> </li> <li> <a href="#" class="active">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">></a> </li> </ul> </div>
样式写法：
.page ul li{ float: left; }
原文：https://www.cnblogs.com/wangyingblock/p/11063810.html