zoukankan      html  css  js  c++  java
  • 滑动

    <head>

    <style type="text/css">

    *{margin:0;padding:0;}

    #flash{

    1178px;

    height:305px;

    margin:50px auto 0;

    box-shadow:0 0 10px #000;/*盒子阴影属性box-shadow:水平偏移 垂直偏移 阴影半径 阴影颜色*/

    padding:10px;                         /*设内边距盒子变大*/

    }

    #flash .Con{

    1178px;

    height:305px;

    background:#ff33cc;

    }

    #flash .Con ul li{border:2px solid #0033;

                            46px;

                            height:305px;

                             list-style-type:none;

                            float:left;

                            position:relative;

                            overflow:hide;}

    #flash .Con ul li .Course{height:895px;280px;background:red;position:absolute;top:0;left:0;top:40px;left:70px;}

    #flash .Con ul li .Course dl{200px;

                                           height:180px;

                                           float:left;

                                           margin:50px 10px 

    }

    #flash .Con ul li .Course dl dt{300px;height:150px;background:red;}

    #flash .Con ul li .Course dl dd{font-size:14px;font-family:"微软雅黑";text-align:center;/*文字居中*/;line-height:30px;}

    #flash .Con ul li h3{18px;height:305px;font-size:18px;color:#fff;font-size:"微软雅黑;padding:21px;}/*使从上往下排列*/

    #flash .Con ul li tit1{background:#00cc33;}

     #flash .Con ul li tit2{background:#ff6633;}

    #flash .Con ul li tit3{background:#cc6666;}

    #flash .Con ul li tit4{background:#999900;}

    </style>

    </head>

    <body>

    <div id="flash">

            <div class="Con"></div>

               <ul>

                         <li style="990px;" class="tit1">

                         <h4>IT培训</h4>

                         <div class="Course">

                         <dl>

                                             <dt><img src="imges/x1.png"></dt>

                                             <dd></dd>

                         </dl> 

                         <dl>

                                             <dt><img src="imges/x2.png"></dt>

                                             <dd></dd>

                         </dl>

                         <dl>

                                             <dt><img src="imges/x3.png"></dt>

                                             <dd></dd>

                         </dl>

                         

     <dl>

                                             <dt><img src="imges/x4.png"></dt>

                                             <dd></dd>

                         </dl>

                         </div>

                         </li>

                         <li class="tit2"><h4>职业技能</h4></li>

                        <li class="tit3"><h4>兴趣爱好</h4></li>

                        <li class="tit4"><h4>语言学习</h4></li>

              </ul>

    内边距的兼容性padding:0;float:left;

    是字体从上往下排

    <script type="text/javascript" src="js/jquery.js"></script>

    <script>

    $(".Con ul li").mouseover(dunction(){/*鼠标划过*/

            $(this).animate(("990px"),200).siblings("li")animate("200px",200);

    });

    </script>

    </body>/

  • 相关阅读:
    poj 3243 Clever Y(BabyStep GiantStep)
    poj 2417 Discrete Logging
    poj 3481 Double Queue
    hdu 4046 Panda
    hdu 2896 病毒侵袭
    poj 1442 Black Box
    hdu 2815 Mod Tree
    hdu 3065 病毒侵袭持续中
    hdu 1576 A/B
    所有控件
  • 原文地址:https://www.cnblogs.com/think90/p/5763015.html
Copyright © 2011-2022 走看看