知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    純HTML+CSS結構鏈接帶說明的黃色導航(仿支付寶)

    作者:佳明媽 來源:未知 2010-08-04 人氣:
    仿支付寶的黃色導航,純HTML+CSS結構,劃過超鏈接下拉菜單中帶說明,利用了a:hover這個屬性,代碼很簡單,很容易讀懂。

    仿支付寶黃色導航,純HTML+CSS結構,劃過超鏈接下拉菜單中帶說明,利用了a:hover這個屬性,代碼很簡單,很容易讀懂。
    html結構:
    <div class="frame-menu">
      <ul>
        <li> <a href="http://www.ezdqdj.live" target="_blank">懶人建站
          <div class="info">解放出你的部分寫代碼時間來思考更高層次的設計</div>
          </a> </li>
        <li> <a href="http://www.ezdqdj.live" target="_blank">懶人建站
          <div class="info">JS代碼,js特效代碼大全,jquery特效,導航菜單代碼,焦點幻燈片,企業網頁設計欣賞</div>
          </a> </li>
        <li> <a href="http://www.ezdqdj.live/JS" target="_blank">JS代碼
          <div class="info">懶人建站為您提供-js特效代碼大全,JS廣告代碼,導航菜單代碼,企業網頁設計欣賞,基于jquery的特效插件,焦點幻燈片代碼和各種建站技巧。</div>
          </a> </li>
        <li> <a href="http://www.ezdqdj.live/JS/texiao" target="_blank">網頁特效
          <div class="info">解放出你的部分寫代碼時間來思考更高層次的設計</div>
          </a> </li>
        <li> <a href="http://www.ezdqdj.live/JS/nav" target="_blank">導航菜單
          <div class="info">解放出你的部分寫代碼時間來思考更高層次的設計</div>
          </a> </li>
        <li> <a href="http://www.ezdqdj.live/JS" target="_blank">JS代碼
          <div class="info">解放出你的部分寫代碼時間來思考更高層次的設計</div>
          </a> </li>
        <li> <a href="http://www.ezdqdj.live/JS" target="_blank">JS代碼
          <div class="info">JS代碼,js特效代碼大全,jquery特效,導航菜單代碼,焦點幻燈片,企業網頁設計欣賞</div>
          </a> </li>
      </ul>
    </div>
    CSS代碼:
    .frame-menu{
    position:relative;overflow:visible;zoom:1;width:970px;height:50px;margin:0 auto;padding:0;background:url(bg-frame.png) no-repeat left top;line-height:1.5;font-size:12px;}
    .frame-menu ul{
    position:absolute;z-index:98;top:7px;left:10px;margin:0;padding:0;}
    .frame-menu ul li{
    float:left;list-style:none outside;width:110px;}
    .frame-menu ul li a:link,.frame-menu ul li a:visited{
    display:block;margin:0;padding:8px 0 0 0;*padding:10px 0 0 0;text-align:center;font-size:13px;font-weight:700;color:#fff;text-decoration:none;}
    .frame-menu ul li a:hover{
    height:109px;*height:107px;color:#AB6A00;background:url(bg-frame.png) no-repeat left -50px;}
    .frame-menu ul li a div{
    display:none;padding:10px 5px 0 5px;margin:0;text-align:left;font-size:12px;font-weight:400;}
    .frame-menu ul li a:hover div.info{
    display:block;color:#fff;}

     

    ↓ 查看全文

    純HTML+CSS結構鏈接帶說明的黃色導航(仿支付寶)由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    純HTML+CSS結構鏈接帶說明的黃色導航(仿支付寶)-最新評論

    • 最強美少女 2015-10-10 09:18:13
      樓上的稍等啦
    • 11 2015-10-10 09:10:13
      樓上的稍等啦
    老子是皇帝在线客服