zoukankan      html  css  js  c++  java
  • 学员操作——京东常见问题分类页面

    *{padding:0;margin:0;}
    html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}
    a{text-decoration:none;color:#1a66b3;}
    ul{list-style:none;}
    .left{float:left;}
    .right{float:right;}
    .hide{display:none;}
    .clearfix{clear:both;overflow:hidden;height:0;}
    .wrap{800px;margin:0 auto;}

    /**头部**/
    .top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}
    .top,.top a{color:#646464;}
    .top a:hover{color:#ff2832;}
    .top-l .top-login{color:#ff2832;margin-right:5px;}
    .top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}
    .top-m > li.line{1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}
    .top-m > li a{display:block;padding:0 8px;}
    .top-m > li a.menu-btn{padding-right:27px;background:url(../img/home_sprite.png) no-repeat right -307px;}
    .top-m > li a i{margin-right:6px;margin-top:3px;}
    .top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}
    .top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;100%;top:27px;left:-1px;background:#fff;display:none;}
    .top-m ul.topDown li{line-height:24px;}
    .top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}
    .top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}
    .top-m .top-car{15px;height:14px;background:url(../img/home_sprite.png) no-repeat -40px -86px;}
    .top-m .top-tel{11px;height:16px;background:url(../img/home_sprite.png) no-repeat -40px -70px;}

    .wrap img[alt='logo']{margin: 10px 0;}
    .nav {
    float: left;
    200px;
    margin-right: 10px;}
    .nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
    .nav ul{border: 1px #cccccc solid; border-top: none;}
    .nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
    .nav dd{display: none;padding-left: 15px;}
    .nav dd a{color: #666666; line-height: 30px; font-size: 14px;}
    .content{
    float: left;
    548px ;
    border: 1px #cccccc solid;
    padding: 10px;}
    .content p{font-size: 14px;color: #666666; padding-bottom: 15px; }
    .content li{padding-left: 20px;}
    .content li a{color: #666666; line-height: 30px; padding-left: 3px; }
    .content li a:hover{text-decoration: underline;}

    $(document).ready(function(){
    $(".top-m .on").hover(function(){
    $(".topDown").show("slow");
    },
    function(){
    $(".topDown").hide("fast");
    }
    );

    $(".nav dt").toggle(
    function(){ $(this).siblings().slideDown("slow");},
    function(){$(this).siblings().slideUp("slow");}
    )
    });

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>京东常见问题分类页面</title>
    <link href="css/style2.css" rel="stylesheet"/>
    </head>
    <body>
    <div class="top">
    <div class="wrap">
    <div class="top-l left">欢迎光临京东,请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
    <ul class="top-m right">
    <li><a href=""><i class="top-car left"></i>购物车</a></li>
    <li class="line"></li>
    <li><a href="">我的交易单</a></li>
    <li class="line"></li>
    <li><a href="">会员中心</a></li>
    <li class="line"></li>
    <li><a href=""><i class="top-tel left"></i>我的关注</a></li>
    <li class="line"></li>
    <li class="on">
    <a href="" class="menu-btn">联系客服</a>
    <ul class="topDown">
    <li><a href="">帮助中心</a></li>
    <li><a href="">我要吐槽</a></li>
    <li><a href="">在线客服</a></li>
    <li><a href="">咨询JIMI</a></li>
    <li><a href="">客服邮箱</a></li>
    </ul>
    </li>
    <li class="line"></li>
    <li><a href="" class="menu-btn">手机金融</a></li>
    <li class="line"></li>
    <li><a href="" class="menu-btn">网站导航</a></li>
    <li class="line"></li>
    </ul>
    <div class="clearfix"></div>
    </div>
    </div>
    <div class="wrap">
    <a href=""><img src="img/logo.png" alt="logo"/></a>
    </div>
    <div class="wrap">
    <nav class="nav">
    <header>常见问题分类</header>
    <ul>
    <li><dl>
    <dt>京东金融</dt>
    <dd><a href="#">京东金融简介</a></dd>
    <dd><a href="#">京东金融会员</a></dd>
    <dd><a href="#">京东金融安全中心</a></dd>
    </dl></li>
    <li><dl>
    <dt>理财</dt>
    <dd><a href="#">京东小金库</a></dd>
    <dd><a href="#">京东基金理财</a></dd>
    <dd><a href="#">京东保险理财</a></dd>
    <dd><a href="#">小白理财</a></dd>
    <dd><a href="#">智投理财</a></dd>
    <dd><a href="#">乐猜</a></dd>
    </dl></li>
    <li><dl>
    <dt>白条</dt>
    <dd><a href="#">京东白条</a></dd>
    <dd><a href="#">京东金条</a></dd>
    <dd><a href="#">校园白条</a></dd>
    <dd><a href="#">教育白条</a></dd>
    <dd><a href="#">乡村白条</a></dd>
    <dd><a href="#">京东金采</a></dd>
    <dd><a href="#">京农贷</a></dd>
    </dl></li>
    <li><dl>
    <dt>众筹</dt>
    <dd><a href="#">产品众筹</a></dd>
    <dd><a href="#">轻众筹</a></dd>
    <dd><a href="#">产品众筹发起者常见问题</a></dd>
    <dd><a href="#">产品众筹支持者常见问题</a></dd>
    <dd><a href="#">产品众筹永久众筹常见问题</a></dd>
    <dd><a href="#">京东众创常见问题</a></dd>
    </dl></li>
    <li><dl>
    <dt>京东钱包</dt>
    <dd><a href="#">京东钱包简介</a></dd>
    <dd><a href="#">自动服务及常见问题</a></dd>
    <dd><a href="#">购房盈</a></dd>
    </dl></li>
    </ul>
    </nav>
    <section class="content">
    <p>京东金融 > 京东金融会员</p>
    <ul>
    <li>&#8226;<a href="#">什么是京东金融会员</a> </li>
    <li>&#8226;<a href="#">会员签到规则</a> </li>
    <li>&#8226;<a href="#">会员金币</a> </li>
    <li>&#8226;<a href="#">小白信用</a> </li>
    <li>&#8226;<a href="#">外部虚拟券</a> </li>
    </ul>
    </section>
    </div>

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/index2.js"></script>
    </body>
    </html>

  • 相关阅读:
    228. Summary Ranges
    227. Basic Calculator II
    224. Basic Calculator
    222. Count Complete Tree Nodes
    223. Rectangle Area
    221. Maximal Square
    220. Contains Duplicate III
    219. Contains Duplicate II
    217. Contains Duplicate
    Java编程思想 4th 第4章 控制执行流程
  • 原文地址:https://www.cnblogs.com/pan520/p/13215078.html
Copyright © 2011-2022 走看看