1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当当网我的订单页</title>
</head>
<style>
*{
margin:0px;
padding:0px;
font-size:12px;
}
a{
color:#999;
text-decoration:none;
}
body{
background:#fff url(../images/bg.jpg) no-repeat;
}
ul{
list-style:none;
}
.pos{
position:absolute;
}
#menu{
left:590px;
top:5px;
}
#menu li{
display:block;
height:20px;
line-height:20px;
background-color:#fff;
padding:4px;
}
</style>
<body>
<div id="menu" class="pos">
<a href="#">我的当当</a>
<ul id="menu-ul" style="display:none;">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的礼品卡</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/myDang.js"></script>
</body>
</html>
2：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>男生地带 </title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#boxlist{
height:526px;
width:996px;
background:#fff url(images/bg.jpg) no-repeat 0px 0px;
}
.main{
margin-left:278px;
border:1px solid #CCC;
}
.box{
width:168px;
padding:23px 5px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
float:left;
cursor:pointer;
}
.transparent_class{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:alpha(opacity=60);
opacity:0.6;
}
</style>
</head>
<body>
<div id='boxlist'>
<div style='height:43px;' ></div>
<div class='main'>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p2.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p3.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p4.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p4.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p2.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价：￥269</s>
<font color="#FF0000">售价：69</font>
</dd>
</dl>
</div>
<div style='clear:both;'></div>
</div>
</div>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
$('img').hover(function(){
$(this).addClass('transparent_class');
},function(){
$(this).removeClass('transparent_class');
});
});
</script>
</body>
</html>
3：
<!doctype html>
<html lang="en">
<head>
<style>
*{
margin:0;
padding:0;
font-size:12px;
line-height:20px;
}
#register{
width:525px;
margin: 0 auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom: 2px solid #3275c3;
vertical-align:bottom;
padding-left:12px;
margin-bottom: 15px;
}
#register dl{clear: both; height: 30px;}
#register dl dt{
text-align:right;
width:80px;
height:25px;
padding-right:5px;
float: left;
}
#register dl dd{
float: left;}
#register dl dd div{ display: inline; padding-left: 5px;}
#register dl dd input:not(.btn){
width:220px;
height:18px;
border:solid 1px #0066FF;
}
</style>
<meta charset="UTF-8">
<title>使用HTML5方式验证注册页面</title>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<section id="register">
<h1 class="hr_1">新用户注册</h1>
<form action="" method="post" name="myform">
<dl>
<dt>用户名：</dt>
<dd><input id="user" type="text" placeholder="以英文字母开头4～16个英文字母或数字" required pattern="[a-zA-Z][a-zA-Z0-9]{3,15}"/></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="pwd" type="password" placeholder="4～10个英文字母或数字" required pattern="[a-zA-Z0-9]{4,10}"/></dd>
</dl>
<dl>
<dt>确认密码：</dt>
<dd><input id="repwd" type="password"/></dd>
</dl>
<dl>
<dt>电子邮箱：</dt>
<dd><input id="email" type="email"/></dd>
</dl>
<dl>
<dt>手机号码：</dt>
<dd><input id="mobile" type="text" pattern="1\d{10}" /></dd>
</dl>
<dl>
<dt>生日：</dt>
<dd><input id="birth" type="text" pattern="((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])"/></dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
</dl>
</form>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$(".btn").click(function(){
var u=document.getElementById("user");
if(u.validity.valueMissing==true){
u.setCustomValidity("用户名不能为空");
}
else if(u.validity.patternMismatch==true){
u.setCustomValidity("用户名必须是字母开头的4~16位的英文字母和数字");
}
else{
u.setCustomValidity("");
}
var pwd=document.getElementById("pwd");
if(pwd.validity.valueMissing==true){
pwd.setCustomValidity("密码不能为空");
}
else if(pwd.validity.patternMismatch==true){
pwd.setCustomValidity("密码必须是4~10位的英文字母和数字");
}
else{
pwd.setCustomValidity("");
}
var email=document.getElementById("email");
if(email.validity.valueMissing==true){
email.setCustomValidity("邮箱不能为空");
}
else if(email.validity.typeMismatch==true){
email.setCustomValidity("邮箱格式不正确");
}
else{
email.setCustomValidity("");
}
var mobile=document.getElementById("mobile");
if(mobile.validity.patternMismatch==true){
mobile.setCustomValidity("手机必须是1开头的11位数字");
}
else{
mobile.setCustomValidity("");
}
var birth=document.getElementById("birth");
if(birth.validity.patternMismatch==true){
birth.setCustomValidity("生日的年份必须为1900～2016之间，格式为1980-5-12或1988-05-04");
}
else{
birth.setCustomValidity("");
}
})
})
</script>
</body>
</html>
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
