html css练习

最新推荐文章于 2024-04-13 15:54:34 发布

Neil2013

最新推荐文章于 2024-04-13 15:54:34 发布

阅读量909

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/chenhisen/article/details/50764127

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<body>
   
<div class="section top">
       <div class="n_section">
           <h1 class="logo"><img src="images/logo.jpg" width="290" height="60" alt=""/></h1>
            <div class="menu">
               <ul class="nav">
                   <li><a href="#">T1</a></li>
                    <li><a href="#">T2</a></li>
                    <li><a href="#">T3</a></li>
                    <li><a href="#">T4</a></li>
                    <li><a href="#">T5</a></li>
                </ul>
                <ul class="lang">
                   <li><a href="#">中文 |</a></li>
                    <li class="en"><a href="#">english |</a></li>

                </ul>
            </div>
        </div>
    </div>

    
    <div class="section banner">
       <div class="n_section">
           <div class="banner_box">

                
               <div class="entry form" style="position:absolute;right:10%">
                       <h3>用户登录</h3>
                        <form class="clearfix">
                          <div class="list user">
                             <label><span>用户名</span></label>
                            <input type="text" name="userName" class="require">
                          </div>

                          <div class="list passw">
                             <label><span>密码</span></label>
                            <input type="password" name="password" class="require">
                          </div>

                          <div class="button">
                             <input type="button" class="submit" value="登录">
                            <input type="button" class="but" value="立即注册">
                          </div>
                          <div class="tips">
                               <div class="check">
                                   <input type="checkbox" id="zt">
                                    <label for="zt">保持登录状态</label>
                                </div>
                               <a href="#" class="more ca">忘记密码？</a>
                          </div>
                      </form>
                      <ul class="merit">
                             <li>
                                 <img src="images/icon_power1.png" width="62" height="50" alt=""/>
                              <p>XXX)</p>
                              <p><strong class="red">16793</strong></p>
                          </li>
                          <li>
                                 <img src="images/icon_power2.png" width="62" height="50" alt=""/>
                              <p>XXXX</p>
                              <p><strong class="red">232.32</strong></p>
                          </li>
                          <li>
                                 <img src="images/icon_power3.png" width="62" height="50" alt=""/>
                              <p>XXXX</p>
                              <p><strong class="red">105.70</strong></p>
                          </li>
                      </ul>
                </div>

                
                <ul class="animation clearfix">
                    <li class="on" style="display:block;"><img src="images/baner1.jpg" width="1920" height="600" alt=""/></li>
                    <li><img src="images/baner2.jpg" width="1920" height="600" alt=""/></li>
                    <li><img src="images/baner3.jpg" width="1920" height="600" alt=""/></li>
                </ul>
            </div>
        </div>
    </div>


    
    <div class="section foot">
       <div class="n_section">
           <p align="center">   ©2016 XX有限公司</p>
        </div>
    </div>

*{ padding:0; margin:0;}

body {font-family:"微软雅黑", "黑体","宋体"; font-size:12px; color:#666; margin:0 auto;}
input,select,button,textarea{border:none; outline:none; font-family:"微软雅黑", "黑体","宋体";}
ol,li{ list-style-type:none;}
img{ border:0;}
.more{ float:right;}
.red{ color:#e60012;}
a{text-decoration:none; color:#666; outline:none;}
a.ca{ color:#aaa;}
a { transition: all ease-in .3s; -webkit-transition: all ease-in .3s; -moz-transition: all ease-in .3s; -ms-transition: all ease-in .3s; -o-transition: all ease-in .3s;}
a:hover{color:#333}

.f14{ font-size:14px;}
.f15{ font-size:15px;}
.f16{ font-size:16px;}
.f18{ font-size:18px;}

.clearfix { *zoom:1;/*IE/7/6*/}
.clearfix:before, .clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}

.section{ width:100%;}
.n_section{ width:1020px; margin:0 auto;}

.top{ height:60px; padding:8px 0;}
.logo{ float:left; width:280px;}
.menu{ line-height:60px; float:right; width:700px; font-size:14px;}
.menu .nav,.menu .lang{ float:left;}
.menu li{ float:left; text-align:center;}
.menu .nav li{ width:80px;}
.menu .nav li.special{ width:109px;}

.menu .lang li{ width:50px; text-transform:uppercase;}

.menu .lang li.en{ width:70px;}
.menu li a{ display:block; color:#959595;}
.menu li a:hover{ color:#e60012; font-weight:bold;}
.menu .lang a:hover{ font-weight:normal;}

.banner{ position:relative; overflow:hidden;}
.banner .animation{ width:1920px; margin:0 -460px; overflow:hidden; position:relative; height:600px;}
.banner .animation li{ width:1920px; height:600px; position:absolute; left:0; top:0; display:none;}
.banner .animation li.on{ z-index:4;}
.banner .animation li img{ vertical-align:middle;}

.entry { width:365px; height:469px; background:#fff; border-radius:6px; position:absolute; right:460px; top:60px; overflow:hidden; z-index:5;}
.entry h3{ font-size:18px; text-align:center; padding:30px 0 20px 0; font-weight:normal; color:#333}
.entry form{ padding:10px 24px;}
.entry .list{ border:1px solid #ddd; height:38px; border-radius:4px; margin-bottom:10px; overflow:hidden; position:relative;}
.entry .list label{ display:block; height:38px; line-height:40px; position:absolute; width:80%; left:0px; top:0px; z-index:0; padding-left:20%; font-size:14px; color:#999;}
.entry .user label{ background:url(images/icon_user.png) no-repeat 14px center;}

.entry .passw label{ background:url(images/icon_password.png) no-repeat 14px center;}
.entry .list input{ width:80%; padding-left:20%; height:38px; position:absolute; left:0px; top:0px; z-index:2; background:none; color:#666;line-height:38px;}
.form .button { height:40px; padding:10px 0;}
.form .button input{height:37px; width:150px; border-radius:4px; font-size:16px; cursor:pointer;}

.form .button input.submit {float:left; background:#e60012; color:#fff;}
.form .button input.but { float:right; background:#f9f9f9; border:1px solid #ddd; color:#666;}

.form .tips{ height:44px; line-height:44px;}
.form .tips .check{ width:110px; float:left;}
.form .tips .check input{ width:14px; height:14px; float:left; position:relative; top:15px; margin-right:5px;}

.entry .merit{ background:#f7f7f7; overflow:hidden; width:100%; line-height:20px; color:#333;}
.entry .merit li{ text-align:center; border-right:1px solid #e6e6e6; width:120px; padding:34px 0; float:left;}
.entry .merit li img{ display:block; height:50px; margin:0 auto 16px auto;}

.entry .tabs{ padding:0px 23px;}
.entry .tab_name{ height:38px; border:1px solid #ffcace; border-radius:4px; overflow:hidden;}
.entry .tab_name ul{ width:100%; font-size:14px; line-height:38px; text-align:center; color:#333;}
.entry .tab_name li{ height:38px; width:105px; float:left; cursor:pointer; transition: all ease-in .3s; -webkit-transition: all ease-in .3s; -moz-transition: all ease-in .3s; -ms-transition: all ease-in .3s; -o-transition: all ease-in .3s;
}
.entry .tab_name li.on{ background:#e60012; color:#fff;}
.entry .tabs form{ padding:12px 0 0 0;}
.entry .tab_box{ display:none;}

.foot{ color:#959595; font-size:14px; padding:15px 0; line-height:30px;}

=========JS

$(function(){

   /*banner*/
   var i=0;
   var $an_ul=$('.banner_box .animation');
   var len=$an_ul.find('li').length;
   var an_w=$an_ul.find('li').width();

       setInterval(move,4000);

       function move(){
           i<len-1?i++:i=0;

           $an_ul.find('li').eq(i)
           .addClass('on')
           .fadeIn(600);

           $an_ul.find('li').eq(i)
           .siblings()
           .removeClass('on')
           .fadeOut(600);
       }


   //tabs
   $('.tab_name li').hover(function() {
       var index = $(this).index();

        $(this).addClass('on')
       .siblings()
       .removeClass('on');

       $(this).parents('.tabs')
          .find('.tab_box')
          .hide()
          .eq(index)
          .show();
    });


   //验证
   var emailReg = /^[-._A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;

   $('form .submit').click(function() {

       var istrue = true;
       var obj = $(this);
       var form = obj.parents('form');
       var $require = form.find('.require');
       var $email = form.find('.i_email');
       var $i_passw = form.find('.i_passw');
       var $r_i_passw = form.find('.r_i_passw');
       var $i_num = form.find('.i_num');

           $require.each(function() {
                if($(this).val()==""){
                   istrue = false;
                   $(this).parent('.list').css('border','1px solid #e70618');
               }
            });


           $email.each(function() {
                if(!emailReg.test($(this).val())){
                   istrue = false;
                   $(this).parent('.list').css('border','1px solid #e70618');
               }
            });


           if($i_passw.val()!=$r_i_passw.val()){
               alert('两次密码不一致')
               istrue = false;
               $i_passw.parent('.list').css('border','1px solid #e70618');
               $r_i_passw.parent('.list').css('border','1px solid #e70618');
           }

           return istrue;
    });



   $('.require').focus(function() {
       $(this).parent().removeAttr('style');
        $(this).parent().find('span').hide();
    });


   $('.require').blur(function() {
       if(!$(this).val()==''){
           $(this).parent().find('span').hide();
       }else{
           $(this).parent().find('span').show();
       }
    });



})