zoukankan      html  css  js  c++  java
  • 来自支付宝的CSS下拉圆角导航菜单

    代码简介:

    样式美观,适合对导航栏目内容进行说明的网站。

    代码内容:

    <!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>
    <title>来自支付宝的CSS下拉圆角导航菜单_网页代码站(www.webdm.cn)</title>
    <style>
    .frame-menu{
    position:relative;overflow:visible;zoom:1;970px;height:50px;margin:0 auto;padding:0;background:url(http://www.webdm.cn/images/20101120/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;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(http://www.webdm.cn/images/20101120/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;}
    </style>
    </head>
    <body style="text-align:center">
    
    <!--Head Menu Start-->
    <div class="frame-menu">
      <ul>
        <li> <a href="#" target="_blank"> 账户充值
          <div class="info">充值后用余额支付,支付方便、无限额</div>
          </a> </li>
        <li> <a href="#" target="_blank"> 账户安全升级
          <div class="info">开通支付密码、手机服务更多保护</div>
          </a> </li>
        <li> <a href="#/" target="_blank"> 生活助手
          <div class="info">缴通信费、水电费…方便、快捷!</div>
          </a> </li>
        <li> <a href="#" target="_blank"> 收款/付款
          <div class="info">同时向多人在线收款 / 网上付钱,方便!快捷! </div>
          </a> </li>
        <li> <a href="#" target="_blank"> 淘宝购物
          <div class="info">中国最大网上购物商城,淘,我喜欢!</div>
          </a> </li>
        <li> <a href="#" target="_blank"> 论坛
          <div class="info">来论坛分享购物经验、省钱技巧;还能晒宝贝,赢大奖</div>
          </a> </li>
        <li> <a href="#" target="_blank"> 问吧
          <div class="info">支付问题,请来这里吧</div>
          </a> </li>
      </ul>
    </div>
    <!--Head Menu End-->
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    
    代码来自:http://www.webdm.cn/webcode/c587ae09-47a9-46d1-83c5-6ec2733eaf90.html
    
  • 相关阅读:
    Docker容器查看ip地址
    抽象工厂模式
    idea插件
    作业统计
    tarjan强连通图分量
    Android动画浅析
    位运算
    mongodb笔记
    依赖倒置原则
    单一职责原则
  • 原文地址:https://www.cnblogs.com/webdm/p/2097079.html
Copyright © 2011-2022 走看看