html css练习
2016-02-29 11:19
531 查看
<body>
<!--top-->
<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>
<!--banner-->
<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>
<!--footer-->
<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();
}
});
})
<!--top-->
<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>
<!--banner-->
<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>
<!--footer-->
<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();
}
});
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 神奇的css属性clip-path
- iOS加载本地js、css等框架
- CSS3立体球体旋转
- <link rel="stylesheet" href="3.css"/> 链接方式
- 11款CSS3动画工具的开发
- css font的简写规则
- css animation 兼容360浏览器
- 我的recyclerview设置布局样式
- JS通过时间控制页面样式
- css设置各种中文字体如雅黑、黑体、宋体、楷体等等
- CSS布局 — 圣杯布局与双飞翼布局
- CSS3 值得称赞新特性
- CSS学习（二）-结构伪类选择器、属性选择器
- word-wrap和word-break css3
- CSS技巧和经验
- ionic css布局之bar页眉页脚定义
- CSS——div居中，window.open(0
- css3动画
- css05 字体以及行间距
- 实用的css3属性