用户工具

站点工具


others:css

可用于企业站的CSS效果

有趣的 CSS 彈跳動畫 http://www.oxxostudio.tw/articles/201502/css-bounce.html https://www.chovinestate.com.au/contact-us/

详情页下拉菜单:https://www.chovinestate.com.au/wines/2016-chovin-estate-the-thyrsus-merlot/

/*WINES 下拉菜单 css*/
.tasting {width: 260px;}
.tasting h3 {font-size:16px;padding: 0 10px;margin: 0;border: 1px solid #c8a062;line-height:36px;font-weight:bold;cursor: pointer;}
.tasting ul, .tasting li {list-style: none;margin: 0;padding: 0;}
.tfi {float:right;line-height:36px; border-left:1px solid #c8a062;padding-left: 10px;}
.tfi2 {float:right;line-height:30px;padding-top: 5px;}
.cnav {border: 1px solid #c8a062;border-top: 0;}
.tasting .cnav {display: none;}
.tasting:hover .cnav {display: block;}
.cnav li a {display: block;padding: 0 10px;line-height: 40px;font-size: 16px;font-weight: bold;color: #000;}
.cnav li a:hover {background-color:#c8a062;color:#fff;}

/*WINES 下拉菜单 html*/
<div class="tasting">
  <h3>TASTING NOTES<i class="tfi fa fa-chevron-down"></i></h3>
  <ul class="cnav">

    <li class="clearfix"><a href="#">2015<i class="tfi2 fa fa-download"></i></a></li>
    <li class="clearfix"><a href="#">2016<i class="tfi2 fa fa-download"></i></a></li>
    <li class="clearfix"><a href="#">2017<i class="tfi2 fa fa-download"></i></a></li>

  </ul>
</div>

评论

请输入您的评论. 可以使用维基语法:
W Y K N D
 
others/css.txt · 最后更改: 2017/07/06 15:01 由 Tony