標籤：hid meta div over isp 首頁 inline http absolute
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <link rel="stylesheet" href=""> 8 <style type="text/css"> 9 *{margin: 0;padding: 0;}10 .nav{11 height: 60px;12 width: 100%;13 background: #5ab60d;14 clear: both;15 overflow: hidden;16 }17 .nav_box{18 width: 1200px;19 height: 60px;20 line-height: 60px;21 margin: 0 auto;22 }23 .nav_box a{24 display: block;25 width: 99px;26 height: 100%;27 float: left;28 position: relative;29 z-index: 0;30 }31 .nav_box a span{32 display: inline-block;33 position: absolute;34 left: 0px;35 top: 0px;36 width: 100%;37 height: 100%;38 line-height: 60px;39 text-align: center;40 color: #fff;41 font-size: 18px;42 z-index: 2;43 overflow: hidden;44 }45 46 .nav_box a:hover em{47 top: 0;48 } 49 .nav_box a em{50 display: inline-block;51 height: 100%;52 width: 100%;53 transition: all .3s;54 background: #4fa10b;55 position: absolute;56 top: 100%;57 left: 0;58 z-index: 1;59 }60 </style>61 62 </head>63 <body>64 <div class="nav">65 <div class="nav_box">66 <a href=""><span>首頁</span><em></em></a>67 <a href=""><span>積分商城</span><em></em></a>68 <a href=""><span>第三個</span><em></em></a>69 </div>70 </div>71 </body>72 </html>
css3導航hover懸停效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
