zoukankan      html  css  js  c++  java
  • 可能是自己的判断不够好

    <!DOCTYPE html PUBLIC >
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>L shen - 史诗塔防:风之魔咒</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <style type="text/css">

    div#page-wrap{
    position:relative;
    800px;
    margin:0 auto 0 auto;
    background-image:url('../images/bg-shade.png');
    background-repeat:repeat;
    }
    h2{
    font-weight: normal;
    font-size: 24px;
    margin-top: 0px;
    }
    h3{
    font-weight: normal;
    font-size: 27px;
    margin-bottom: 10px;
    }
    a{
    color: #c4d92e;
    text-decoration: none;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    a:hover{
    color: #fff;
    text-decoration : underline;
    }
    p{
    margin : 0;
    padding-bottom : 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-indent : 2em;
    }
    ul, li {
    list-style : none;
    }
    h1#head{
    color:#C4D92E;
    height:76px;
    margin:130px auto 0;
    position:relative;
    800px;
    }
    #head a{
    display:block;
    font-size:70px;
    font-weight:normal;
    }
    #head a span{
    color: #fff;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    #head a:hover span{
    color: #c4d92e;
    }
    ul#nav{
    background-image: url('../images/list_bg.png');
    background-repeat: repeat-x;
    height: 70px;
    960px;
    list-style: none;

    }
    ul#nav li a{
    display: block;
    color: #c4d92e;
    146px;
    float: left;
    text-decoration: none;
    font-size: 24px;
    margin-top: 6px;
    margin-left: -30px;
    margin-right:30px;
    }
    ul#nav li a.home {
    left: 0px;
    top: 0px;
    114px;
    }
    ul#nav li a.about {
    left: 0px;
    top: 0px;
    145px;
    }
    ul#nav li a:hover , ul#nav li.current_list_item a{
    color:white;
    }


    body {
    background : url(../images/body_bg.jpg) no-repeat center top black;
    width : 960px;
    margin : 0 auto;
    font : normal 24px/30px "宋体";
    }

    /* 主要内容 */
    .content {
    display :block;
    margin : 0 auto;
    width : 960px;
    color : #666;
    }
    .content a {
    color : #999;
    font-size : 14px;
    }

    /* -主要内容- */
    .m_con {
    background : #333;
    display : block;
    float : left;
    opacity : 0.8;
    margin-right : 20px;
    border : 1px solid #ccc;
    border-radius : 5px;
    width : 658px;
    color : #aaa;
    }

    /* --介绍-- */
    .intro {
    padding : 10px 0 20px 0;
    }
    .intro img {
    display : block;
    float : left;
    width : 72px;
    margin-right : 20px;
    padding: 0 20px 300px 20px;
    border-right : 1px dotted #ccc;
    }
    .intro h2 {
    margin : 0;
    font-size : 24px;
    color : #fff;
    }
    .intro span {
    display : block;
    float : left;
    border-bottom : 1px solid #666;
    width : 250px;
    font-size : 14px;
    }
    .intro h3 {
    display : block;
    float : left;
    width : 500px;
    height : 24px;
    font-size : 16px;
    }
    .intro p {
    display : block;
    float : left;
    width : 500px;
    line-height : 24px;
    font-size : 14px;
    text-align : justify;
    }
    a.link {
    display : block;
    float : left;
    background : #949926;
    margin-right : 20px;
    border : 1px solid #aaa;
    border-radius : 5px;
    padding : 0px 10px;
    line-height : 30px;
    color : #fff;
    }

    .intro .help {
    display : block;
    float : left;
    width : 300px;
    color : #649926;
    }

    /* --切换显示-- */
    div.oth_info {
    clear : both;
    display : block;
    margin-bottom : 0px;
    border-radius : 5px;
    width : 100%;
    font-size : 14px;
    text-align : justify;
    line-height : 24px;
    }
    .slide_sub {
    display : block;
    border-bottom : 1px solid #ccc;
    width : 100%;
    height : 31px;
    }
    .slide_sub span {
    background : #999;
    display : block;
    float : left;
    cursor : pointer;
    margin : 0;
    padding : 0 20px;
    border : 1px solid #ccc;
    border-radius : 5px;
    width : 80px;
    height : 30px;
    line-height : 30px;
    text-align : center;
    font-size : 18px;
    color : #fff;
    }
    .skill {
    background : #666;
    opacity : 0.8;
    padding : 10px 20px;
    color : #fff;
    }
    .img_area {
    float : left;
    }

    /* ----浮动于选项卡的上面时添加的累---- */
    span.slide_tit {
    background : #a4a92e;
    color : #fff;
    }

    /* --列表部分 */
    .list {
    background : #333;
    display : block;
    float : left;
    opacity : 0.8;
    padding : 10px 10px 0 10px;
    border : 1px solid #ccc;
    border-radius : 5px;
    width : 218px;
    }
    .list_sub {
    display : block;
    float : right;
    padding : 10px 0;
    border-bottom : 1px dotted #ccc;
    width : 218px;
    color : #aaa;
    font-size : 14px;
    line-height : 24px;
    }
    .list_sub a {
    display : block;
    float : left;
    margin : 0 10px 10px 0;
    }
    .list_sub h2 a {
    display : block;
    float : left;
    width : 120px;
    height : 16px;
    line-height : 24px;
    font-size : 16px;
    color : #ddd;
    }
    .list_sub span {
    display : block;
    float : left;
    width : 120px;
    }

    .list_link {
    display : block;
    width : 72px;
    height : 72px;
    text-indent : -9999em;
    }
    .list_one {
    background : url(../images/hot/car.png);

    }
    .list_two {
    background : url(../images/hot/fruit.png);

    }
    .list_thr {
    background : url(../images/hot/cut.png);

    }
    .list_fou {
    background : url(../images/hot/qqgame.png);

    }
    /* 页脚部分 */
    div#footer {
    display : block;
    clear : both;
    margin : 0 auto;
    width : 960px;
    height : 70px;
    line-height : 70px;
    text-align : center;
    font-size : 16px;
    color : #797979;
    }

    </style>
    </head>

    <body>
    <h1 id="head"><img src="images/templatemo_logo.png" width="194" height="78" alt="1"></h1>
    <div id="page-wrap">
    <ul id="nav" >
    <li class="current_list_item"><a href="index.html">卓游网</a></li>
    <li><a class="about" href="#" >最近更新</a></li>
    <li><a class="hot.html" href="#" >时下最热</a></li>
    <li><a href="#">卓软</a></li>
    <li><a href="game.html">卓游</a></li>
    <li><a href="play.html">玩机</a></li>
    </ul>
    </div>
    <div class="content">
    <div class="m_con">
    <div class="intro">
    <img src="images/hot/car.png" alt="都市赛车">
    <h2>都市赛车</h2>
    <span>版本 : 2.5.5</span>
    <span>评分 : 8.7</span>
    <span>大小 : 17.66MB</span>
    <span>更新 : 2013-3-14</span>
    <span>语言 : 简体中文</span>
    <span>收费 : 否</span>
    <h3>简介 : </h3>

    <p>游戏的画面和系统比较精致,音乐极富激情,久负盛名的赛车,类似像法拉利,兰博基尼,奥迪....高抛光HD图形让玩家看到每一个细节和赛道的动画,雪地、泥滩,灰尘多达12个场景左右,包括圣特罗佩,阿斯彭和拉斯维加斯的美丽地方。</p>
    <p>游戏中有8种不同的赛车事件,包括漂流大赛,警匪大战,时间攻击,决斗模式,最后一人和逃逸,游戏还支持六名玩家的的蓝牙和线上竞赛。</p>
    <a href="http://coop.android.d.cn/rm/10005/1/605/613/?http://duote.androidgame-store.com/android/new/game/5/605/pkg_2.apk?f=duote_1" class="link">立即下载</a>
    <a href="#" class="help">如果您不会安装和使用请点击这里!</a>
    </div>
    <div class="oth_info">
    <div class="slide_sub">
    <span class="slide_tit" id="game_s">游戏技巧</span>
    <span id="game_img">图片区域</span>
    </div>
    <div class="skill">
    <p>在每个地方的比赛中,比赛种类都不尽相同,有纯粹比速度的竞速赛、有跑最后就算输的淘汰赛、有避免撞毁次数过多的压力赛、有纯粹比撞毁其它车辆次数的破坏赛、有以达到一定漂移分数的漂移赛、收集指定图标的收集赛等等等等,各种赛事大大提高了都市赛车的可玩性,但是要提醒大家的是,在你开始一场比赛之前一定要先认清楚这场比赛的胜利标准是什么,不要一味的追求跑得快,否则即使是第一名也是失败。</p>
    <p>都市赛车的漂移玩法很简单,遇到弯道后拐弯的同时按下刹车,在车身基本转过弯道后往反方向猛打方向盘同时使用氮气加速。漂移的速度越快、距离越长,奖励的氮气也就越多。</p>
    <p>在赛车行驶的过程中,一定要小心迎面驶来的车辆,相撞极易造成损毁,不仅浪费时间还会损失金钱。快速撞上护栏也极易撞毁,要尽量避免。</p>
    <p>如果你喜欢也可以不用重力感应来玩,在游戏选项中设置为方向盘操控模式,这也是我最喜欢玩的模式。</p>
    </div>
    <div class="img_area" style="display : none;">
    <ul>
    <li><img src="images/game/qq_game.jpg" alt=""></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="list">
    <div class="list_sub">
    <a href="#" class="list_link list_one">都市赛车</a>
    <h2><a href="#">都市赛车</a></h2>
    <span>热度排名:第一名</span>
    <span>网络评分:8.7</span>
    </div>
    <div class="list_sub">
    <a href="#" class="list_link list_two">水果忍者</a>
    <h2><a href="#">水果忍者</a></h2>
    <span>热度排名:第二名</span>
    <span>网络评分:8.2</span>
    </div>
    <div class="list_sub">
    <a href="#" class="list_link list_thr">割绳子</a>
    <h2><a href="#">割绳子</a></h2>
    <span>热度排名:第三名</span>
    <span>网络评分:8.1</span>
    </div>
    <div class="list_sub">
    <a href="#" class="list_link list_fou">斗地主</a>
    <h2><a href="#">斗地主</a></h2>
    <span>热度排名:第四名</span>
    <span>网络评分:7.8</span>
    </div>
    </div>
    </div>
    <div id="footer">Copyright 2004-2012 L.shen Corporation, All Rights Reserved</div>


    <script type="text/javascript">
    $('.slide_sub').delegate('span', 'hover', function(){
    // 这里面有个顺序的问题,如果顺序乱掉的话,可能会出现没有经过第一个span的话第二个动画就不会实现...
    if(!$(this).is('.slide_tit') || !$('#game_img').siblings().is(':animated') || !$('#game_s').is(':animated') ){
    $(this).addClass('slide_tit').siblings().removeClass('slide_tit');

    $('#game_s').delegate(this, 'hover', function(){
    $('.skill').show().next().hide();
    });
    $('#game_img').delegate(this, 'hover', function(){
    $('.img_area').show().prev().hide();
    });
    }
    });
    </script>
    </body>

    </html>

    如果以后遇到这样的问题的时候,先检查判断的先后顺序

  • 相关阅读:
    jQuery EasyUI API 中文文档 数字框(NumberBox)
    jQuery EasyUI API 中文文档 数值微调器(NumberSpinner)
    jQuery EasyUI API 中文文档 日期时间框(DateTimeBox)
    jQuery EasyUI API 中文文档 微调器(Spinner)
    jQuery EasyUI API 中文文档 树表格(TreeGrid)
    jQuery EasyUI API 中文文档 树(Tree)
    jQuery EasyUI API 中文文档 属性表格(PropertyGrid)
    EntityFramework 数据操作
    jQuery EasyUI API 中文文档 对话框(Dialog)
    jQuery EasyUI API 中文文档 组合表格(ComboGrid)
  • 原文地址:https://www.cnblogs.com/xxjudfc/p/2958662.html
Copyright © 2011-2022 走看看