实现页面:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美化会员登录界面</title>
<style>
td{
font-size: 12px;
}
/*a{
text-decoration: none;
}*/
.d1 a:hover{
color: red;
text-decoration: none;
}
.d2{
text-align:right;
}
.d3{
border-style: solid;
}
</style>
<script>
function checkEmail(){
var emailValue=document.getElementById("email").value;
if(emailValue.length==0){
alert("电子邮箱不能为空!");
return false;
}
if(emailValue.indexOf("@")==-1){
alert("电子邮箱中必须包含@");
return false;
}
if(emailValue.indexOf(".")==-1){
alert("电子邮箱中必须包含.");
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<form>
<table>
<tr>
<td class="d2">会员名:</td>
<td>
<input type="text" id="meber" class="d3" />
</td>
</tr>
<tr>
<td class="d2">密码:</td>
<td>
<input type="password" id="pwd" class="d3" />
</td>
</tr>
<tr>
<td class="d2">邮箱:</td>
<td>
<input type="text" id="email" class="d3" />
</td>
</tr>
</table>
</form>
</div>
<div class="d1">
<form>
<input type="image" src="img/login.png" width="70px" height="20px" onfocus="checkEmail()" />
<a href="index.html" class="d1" >免费注册</a>
</form>
</div>
</body>
</html>
实现效果:
实现页面:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
width: 1000px;
height:130px ;
margin: 0px auto;
background-image: url(img/h_bg.jpg);
}
#topmenu{
margin: 0px;
padding-top: 0px;
width: 480px;
height: 39px;
float: right;
}
#firstmenu{
padding: 0px;
margin: 0px;
width: 580px;
height: 33px;
float: right;
}
#logo{
width: 280px;
height: 96px;
}
#secondmenu{
margin-right: 550px;
padding-top: 15px;
width: 1000px;
height: 34px;
line-height: 34px;
clear: both;
}
.one{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 25px;
height: 22px;
}
.two{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -28px 0px;
width: 25px;
height: 22px;
}
.three{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -55px 0px;
width: 25px;
height: 22px;
}
.four{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: -83px 0px;
width: 25px;
height: 22px;
}
.five{
background-image: url(img/icon.gif);
background-repeat: no-repeat;
background-position: 0px -25px;
width: 43px;
height: 22px;
}
li{
list-style: none;
margin: 0px;
float: left;
font-size: 12px;
height: 25px;
line-height: 25px;
width: 50px;
padding: 0px;
text-align: center;
}
.text{
list-style: none;
letter-spacing: 5px;
margin-top: 40px;
width: 450px;
height: 33px;
line-height: 33px;
font-size: 12px;
}
.text2{
width: 80px;
float: left;
}
#main{
width: 100%;
height: 400px;
background-color: #FF7300;
}
/*#footer{
width: 100%;
height: 100px;
background-color: yellow;
}*/
/*#left{
width: 50%;
height: 100%;
background-color: antiquewhite;
float: left;*/
}
/*#right{
width: 50%;
height: 100%;
background-color: red;
float: left;
}*/
</style>
</head>
<body>
<div id="container">
<div id="topmenu">
<ul>
<li class="one"></li>
<li>购物车</li>
<li class="two"></li>
<li>帮助中心</li>
<li class="three"></li>
<li>加入收藏</li>
<li class="four"></li>
<li>设为首页</li>
<li class="five">登录</li>
<li class="five">注册</li>
</ul>
</div>
<div id="firstmenu" class="text">
你好,贵美商城欢迎你!(hello)
</div>
<div id="secondmenu">
<ul>
<li class="text2" style="color: white;" onmouseover="this.style.backgroundImage='url(img/yuan.png)'"
onmouseout="this.style.backgroundImage='url(img/light.png)'">首 页</li>
<li class="text2" style="color: white;">家用电器</li>
<li class="text2" style="color: white;">手机数码</li>
<li class="text2" style="color: white;">日用百货</li>
<li class="text2" style="color: white;">书 籍</li>
<li class="text2" style="color: white;">帮助中心</li>
<li class="text2" style="color: white;">免费开店</li>
<li class="text2" style="color: white;">全球资讯</li>
</ul>
</div>
<div id="main">
<div id="left">
<!--左边-->
</div>
<div id="right">
<!--右边-->
</div>
</div>
<div id="footer">
<!--底部-->
</div>
</div>
</body>
</html>
实现效果:
实现页面:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动的广告</title>
<style>
.d1{
text-align: center;
}
.adv{
position: absolute;
left: 250px;
top: 150px;
z-index: 2;
}
.close{
position: absolute;
left: 250px;
top: 150px;
z-index: 3;
}
</style>
<script>
var adverTop;//广告距离顶部的距离
var adverLeft;//广告距离左边的距离
var closeTop;//关闭按钮距离顶部的距离
var closeLeft;//关闭按钮距离左边的距离
var adverObject;//广告图片对象
var closeObject;//关闭按钮图片对象
//广告语关闭按钮初始位置距离顶部与左边的距离
function init(){
adverObject=document.getElementById("d2");
closeObject=document.getElementById("d3");
if(adverObject.currentStyle){
adverTop=parseInt(adverObject.currentStyle.top);
closeTop=parseInt(closeObject.currentStyle.top);
adverLeft=parseInt(adverObject.currentStyle.left);
closeLeft=parseInt(closeObject.currentStyle.left);
}else{
adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
closeTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
closeLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
}
}
//获取滚动条移动的距离,从新设置广告位置
function move(){
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
closeObject.style.top=closeTop+parseInt(document.documentElement.scrollTop)+"px";
closeObject.style.left=closeLeft+parseInt(document.documentElement.scrollLeft)+"px";
}
function displayClose(){
var adverImg=document.getElementById("d2");
var closeImg=document.getElementById("d3");
adverImg.style.display="none";
closeImg.style.display="none";
}
window.onload=init;
window.onscroll=move;
</script>
</head>
<body>
<div class="d1">
<img src="img/adv.jpg" id="d2" class="adv" />
<img src="img/close.jpg" id="d3" class="close" onclick="displayClose()" />
<img src="img/main1.JPG" /><br />
<img src="img/main2.JPG" /><br />
<img src="img/main3.JPG" />
</div>
</body>
</html>
实现效果:
实现页面:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证电子邮箱</title>
<script>
function checkMail(){
var emailValue=document.getElementById("email").value;
if(emailValue.length==0){
alert("电子邮箱不能为空!");
return false;
}
if(emailValue.indexOf("@")==-1){
alert("电子邮箱中必须包含@");
return false;
}
if(emailValue.indexOf(".")==-1){
alert("电子邮箱中必须包含.");
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<form>
<table>
<tr>
<td>电子邮箱:</td>
<td>
<input type="text" id="email" />(必须包含@和.字符)
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />
<img src="img/Male.gif" />男
<input type="radio" name="sex" value="女" />
<img src="img/Female.gif" />女
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" />运动
<input type="checkbox" />聊天
<input type="checkbox" />玩游戏
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="text" size="4" value="yyyy" />年
<select name="month">
<option value="" selected="selected">[选择月份]</option>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="1">7月</option>
<option value="2">8月</option>
<option value="3">9月</option>
<option value="4">10月</option>
<option value="5">11月</option>
<option value="6">12月</option>
</select>月
<input type="text" size="4" value="dd" />日
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="image" src="img/submit.gif" onfocus="checkMail()" />
<input type="image" src="img/reset.gif" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
实现效果:
实现页面:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证贵美注册页面</title>
<script>
function checkUsername(){
var usernameValue=document.getElementById("d1").value;
if(usernameValue.length==0){
alert("名字不能为空!");
return false;
}
for(var i=0;i<user.length;i++){
var j=user.substring(i,i+1)
if(j>=0){
alert("名字中不能出现数字!");
}
}
return true;
}
function checkFamilyname(){
var FamilynameValue=document.getElementById("d2").value;
if(FamilynameValue.length==0){
alert("姓氏不能为空!");
return false;
}
for(var i=0;i<user.length;i++){
var j=user.substring(i,i+1)
if(j>=0){
alert("姓氏中不能出现数字!");
}
}
return true;
}
function checkpassword(){
var password=document.getElementById("pwd");
var value=password.value;
document.getElementById("passwordDiv").innerHTML="";
if(value.length<6){
alert("密码至少包含6个字符!")
return false;
}
return true;
}
function checkrepassword(){
var repassword=document.getElementById("pwd2");
var password=document.getElementById("pwd");
var value=repassword.value;
var revalue=password.value;
document.getElementById("repasswordDiv").innerHTML="";
if(value!=revalue){
alert("两次输入密码不一致!");
return false;
}
return true;
}
function medth(){
checkUsername();
checkFamilyname();
checkpassword();
checkrepassword();
}
</script>
</head>
<body>
<div>
<form>
<table>
<tr>
<td>名字:</td>
<td>
<input type="text" id="d1" />
</td>
</tr>
<tr>
<td>姓氏:</td>
<td>
<input type="text" id="d2" />
</td>
</tr>
<tr>
<td>登录名:</td>
<td>
<input type="text" id="d3" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>再次输入密码:</td>
<td>
<input type="password" id="pwd2" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="登录" onclick="medth()" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
实现效果:
实现页面:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本输入提示特效</title>
<style>
.red{
color: red;
}
</style>
<script>
//获取元素
function $(elements){
return document.getElementById(elements);
}
//检查名字
function checkusername(){
var username=$("username");
var uvalue=username.value;
$("usernameDiv").innerHTML="";
for(var i=0;i<uvalue.length;i++){
if(uvalue.substring(i,i+1)>0){
$("usernameDiv").innerHTML="名字中不能包含数字";
$("username").focus();
return false;
}
}
return true;
}
//检查姓氏
function checkname(){
var name=$("name");
var value=name.value;
$("nameDiv").innerHTML="";
if(value.length==0){
$("nameDiv").innerHTML="姓氏不能为空!!!";
return false;
}
return true;
}
//检查密码、
function checkpassword(){
var password=$("password");
var value=password.value;
$("passwordDiv").innerHTML="";
if(value.length<6){
$("passwordDiv").innerHTML="密码必须大于或等于6位";
return false;
}
return true;
}
//检查再次输入密码
function checkrepassword(){
var repassword=$("repassword");
var password=$("password");
var value=repassword.value;
var revalue=password.value;
$("repasswordDiv").innerHTML="";
if(value!=revalue){
$("repasswordDiv").innerHTML="两次输入的密码不一致";
return false;
}
return true;
}
//检查Email
function checkEmail(){
var email=$("email");
var emailValue=email.value;
$("emailDiv").innerHTML="";
if(emailValue.length==0){
$("emailDiv").innerHTML="email不能为空...";
return false;
}
if(emailValue.indexOf("@")==-1){
$("emailDiv").innerHTML="email必须包含@...";
return false;
}
if(emailValue.indexOf(".")==-1){
$("emailDiv").innerHTML="email必须包含...";
return false;
}
return true;
}
//验证不通过不能提交
function validate(){
if (checkusername()&&checkname()&&checkpassword()&&checkrepassword()&&checkEmail()) {
return true;
}
return false;
}
</script>
</head>
<body>
<form onsubmit="return validate()">
<table>
<tr>
<td>
名字:<input type="text" id="username" onblur="checkusername()"/>
</td>
<td>
<div id="usernameDiv" class="red"></div>
</td>
</tr>
<tr>
<td>
姓氏:<input type="text" id="name" onblur="checkname()"/>
</td>
<td>
<div id="nameDiv" class="red"></div>
</td>
</tr>
<tr>
<td>
登录名:<input type="text" id="loginName"/>
</td>
<td>
<div id="loginNameDiv" class="red"></div>
</td>
</tr>
<tr>
<td>
密码:<input type="password" id="password" onblur="checkpassword()"/>
</td>
<td>
<div id="passwordDiv" class="red"></div>
</td>
</tr>
<tr>
<td>
再次输入密码:<input type="password" id="repassword" onblur="checkrepassword()"/>
</td>
<td>
<div id="repasswordDiv" class="red"></div>
</td>
</tr>
<tr>
<td>
电子邮箱:<input type="text" id="email" onblur="checkEmail()"/>
</td>
<td>
<div id="emailDiv" class="red"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
实现效果:
以上代码均为个人所写,如有错误,欢迎指正,谢谢!