一个关于css+div娱乐效果

来源：互联网发布：移动网络电视打不开编辑：程序博客网时间：2024/06/04 21:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="css/css.css" rel="stylesheet" type="text/css" /><style>*{ margin:0; padding:0;}ul li{ float:left; width:80px; height:40px; background:#96C; margin-left:9px; list-style:none; border:#90C solid 1px; box-sizing:content-box; margin-top:3px; transition-duration: 0.3s; background:url(../images/1.jpg);}ul li:hover{ background:url(../images/1.jpg) center center; border-radius: 20px; cursor:pointer;}.pic-list{ margin:0 auto ;margin-top:200px;}.pic-list1, .pic-list2, .pic-list3{ width:150px;height:230px; background:#FCF; float:left; border: 1px; margin-left:1px; overflow:hidden; }   .pic-list12{ width:150px; height:95px; position:relative; background: #999; margin-top:230px; /*display:none;*/ overflow:hidden; transition: ease-out 0.3s;-moz- transition: ease-out 0.5s;-ms- transition: ease-out 0.5s;-o- transition: ease-out 0.5s;-webkit- transition: ease-out 0.3s;  color: #FFF;  font-family:Verdana, Geneva, sans-serif;  font-size:13px;  padding:10px;  word-wrap:break-word; box-sizing:border-box;  letter-spacing:2px;   overflow:hidden; opacity:0.8;}.pic-list1:hover{ background: url(../images/%E5%9B%BE%E7%89%87%20%E5%8A%A8%E6%BC%AB%E5%8D%A1%E9%80%9A%E7%9A%84%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C_%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87%E6%90%9C%E7%B4%A2.png);cursor: pointer;}.pic-list1:hover .pic-list12{ margin-top:145px; }</style></head><body><div class="nav" >    <ul class="nav-list">        <li class="1"><a herf="#"></a></li>        <li class=""><a herf="#"></a></li>        <li class=""><a herf="#"></a></li>        <li class=""><a herf="#"></a></li>        <li class=""><a herf="#"></a></li>        <li class=""><a herf="#"></a></li>    </ul><br/></div><div class="pic-list">    <div class="pic-list1">        <div class="pic-list11"></div>        <div class="pic-list12">回复就撒谎进口数据库讲课费几节课安居客尽快看见</div>        <div class="pic-list13"></div>    </div>    <div class="pic-list1 123" >        <div class="pic-list11"></div>        <div class="pic-list12">回复就撒谎进口数据库讲课费几节课安居客尽快看见</div>        <div class="pic-list13"></div>    </div>    <div class="pic-list1" >        <div class="pic-list11"></div>        <div class="pic-list12">回复就撒谎进口数据库讲课费几节课安居客尽快看见</div>        <div class="pic-list13"></div>    </div><!--    <div class="pic-list2">        <div class="pic-list21"></div>        <div class="pic-list22"></div>        <div class="pic-list23"></div>    </div>    <div class="pic-list3">        <div class="pic-list31"></div>        <div class="pic-list32"></div>        <div class="pic-list33"></div>    </div>-->    </div></body></html>
0 0