博客围绕商品及注册样例展开，介绍了其实现方法。包含了HTML代码，涉及商品和注册部分，还有对应的CSS样式，最后给出了完整文件。主要运用了HTML、CSS等信息技术。
样例
实现
html代码
商品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/goods.css">
</head>
<body>
<header id="header">
<div class="logo">
<img id="logo" src="./img/return.png" alt="" width="35px">
</div>
<div class="tittleText">
<p id="tittleText">商品资料</p>
</div>
<div class="cart">
<img id="cart" src="./img/car.png" alt="">
</div>
<div class="peo">
<img id="peo" src="./img/peo.png" alt="">
</div>
</header>
<div id="article">
<div id="banner">
<div id="container">
<div id="pic">
<img src="img/mimg1.jpg" alt="" >
<img src="img/mimg2.jpg" alt="">
<img src="img/mimg3.jpg" alt="">
<img src="img/mimg4.jpg" alt="">
<img src="img/mimg1.jpg" alt="">
</div>
<div id="pageCaption">
<ul>
<li style="background:white"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="discribe">
<div>
<p>100%全棉四件套ins风1.8m床单被套</p> <br>
<p><span>￥108-158</span>价格<span style="TEXT-DECORATION: line-through">￥276</span>起</p><br>
<p>尺寸:  适用床：1.2m<br>床被套：150*200  床单:160*230 </p><br>
<p>数量：1</p><br>
</div>
<div>
<img src="img/5.png" alt="">
<p>查看商品详情</p>
<img src="img/you.png" alt="">
</div>
</div>
</div>
<footer id="footer">
<p>放进购物袋</p>
</footer>
<script type="text/javascript">
var pic = document.getElementById("pic");
var container = document.getElementById("container");
var width = 400;
var imgs = document.getElementsByTagName("img");
var lis = document.getElementsByTagName("li");
var picLeft =0;
var index = 0;
var time1 = null;
var time2 = setTimeout(function(){
time1 = setInterval("move()",25);
},3000);
function move(){
picLeft-=5;
if(picLeft*(-1)>= 1600)
{
picLeft = 0;
}
pic.style.left = picLeft + "px";
index = Math.floor(Math.abs(picLeft)/400);
console.log(index)
for(var i = 0;i<=3;i++){
if(index == i){
lis[i].style.background="white";
}else{
lis[i].style.background="";
}
}
if(Math.abs(picLeft) % 400 == 0){
clearInterval(time1);
time2 = setTimeout(function(){
time1 = setInterval("move()",25)
},3000);
}
}
//鼠标
pic.onmouseover = function(){
if(Math.abs(picLeft) % 400 == 0){
clearTimeout(time2);
}
clearInterval(time1);
}
pic.onmouseout = function(){
time1 = setInterval("move()",25)
}
for(var i = 0;i<lis.length;i++){
lis[i].onclick = function(){
clearInterval(time1);
clearTimeout(time2);
for(var j = 0;j<lis.length;j++){
if(this == lis[j]){
picLeft = -(j*400);
pic.style.left = picLeft +"px";
lis[j].style.background="white";
}else{
lis[j].style.background="";
}
}
time2 = setTimeout(function(){
time1 = setInterval("move()",25)
},3000);
}
}
</script>
</body>
</html>
register
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<header id="header">
<div class="logo">
<img id="logo" src="./img/return.png" alt="" width="35px">
</div>
<div class="tittleText">
<p id="tittleText">注册</p>
</div>
</header>
<form id="article" onsubmit="return check()">
<div>
<p>账户名称：</p><input type="text" name="userName" placeholder="请输入账户">
</div>
<div>
<span id="userName"></span>
</div>
<div>
<p>登录密码：</p><input type="password" name="password1" placeholder="请输入密码">
</div>
<div>
<span id="password1"></span>
</div>
<div>
<p>确认密码：</p><input type="password" name="password2" placeholder="请输入密码">
</div>
<div>
<span id="password2"></span>
</div>
<div>
<input type="checkbox" style="width: 25px;" name="agree"> <p>我已阅读并接受走秀网服务条款</p>
</div>
<footer id="footer">
<input type="submit" value="注册">
</footer>
</form>
<script type="text/javascript">
//获取到所有的input
var inputs = document.getElementsByTagName("input");
// console.log(inputs)
//验证账户名，只能为字母，不能含有数字长度4-8位
var flag_name=false;//账户名标志，为true时填写正确
inputs[0].onblur=function(){
var valuue_name=this.value;//获取到输入的登录名
var reg_name_true=/[A-z]{4,8}/g;//正则表达式能够匹配到4-8位的字母
var reg_name_false=/[0-9]+/g;//正则表达式：匹配1个以上的数字，若成功则登录名含有数字，提示错误
var span=document.getElementById("userName");//获取到相对应的span，填写正确时在后面打√
if(reg_name_true.test(valuue_name))//是否能匹配长度4-8的字母
{
if(reg_name_false.test(valuue_name))//测试登录名面是否有数字，提示错误，避免5个字母+1个数字
{
flag_name=false;
alert("账户名不能含有数字");
span.style.display="none"; //若已经填写正确，在经过修改需要重新设置span.style.display
}
else if(valuue_name.length<4||valuue_name.length>8){//长度在4-8之间
flag_name=false;
alert(span.innerHTML="账户名4-8位");
span.style.display="none";
}
else{//正确
flag_name=true;
span.innerHTML="√";
span.style.display="inline";
}
}
else if(reg_name_false.test(valuue_name))//含有数字
{
flag_name=false;
alert("账户名不能含有数字");
span.style.display="none";
}
else if(valuue_name=="")//为空
{
flag_name=false;
alert("账户名不能为空");
span.style.display="none";
}
else{
//格式错误
flag_name=false;
alert("账户名格式错误");
span.style.display="none";
}
}
//密码不能为空，并且密码包含的字符大等于6个且少等于16,两次输入的密码必须一致
// console.log(inputs[1]);
var flag_password1=false;//只有当填写正确时为true
inputs[1].onblur=function(){
// console.log(value_password1);
var span=document.getElementById("password1");
var value_password1=this.value;
var reg_password=/^[A-z]+[0-9]+.*/g;//密码开头为字母，字母可出现1（开头）到多次，且必须含有数字{1，}一到多次后面的任意匹配
if(value_password1=="")//为空
{
flag_password1=false;
alert("密码不能为空");
span.style.display="none";
}
else if(reg_password.test(value_password1))
{
if(value_password1.length>16||value_password1.length<6){
//长度
flag_password1=false;
alert("密码需6-16位");
span.style.display="none";
}
else{
flag_password1=true;
span.innerHTML="√";
span.style.display="inline";
}
}
else{
//格式错误
flag_password1=false;
alert("密码格式错误");
span.style.display="none";
}
}
//验证密码的一致性
var flag_password2=false;//第二遍输入的和上一次一样为true
inputs[2].onblur=function()
{
var value_password1=inputs[1].value;
var value_password2=this.value;
var span=document.getElementById("password2");
if(value_password2=="")//为空
{
flag_password2=false;
alert("密码不能为空");
span.style.display="none";
}
else if(value_password2!=value_password1)
{
//不一致
flag_password2=false;
alert("密码不一致");
span.style.display="none";
}
else{
flag_password2=true;
span.innerHTML="√";
span.style.display="inline";
}
}
function check()
{
var flag=false;//只有当所有的都填写正确时为true
if(flag_name&&flag_password1&&flag_password2)
{
var value_check=inputs[3].checked;
if(value_check)//验证是否勾选，复选框本身没有选中或者不选中
{
flag=true;
}
else{
flag=false;
alert("请勾选服务！");
}
}
else{
//有选项未填写或填写错误
flag=false;
alert("请输入正确的注册信息");
}
return flag;//返回，为true时才能提交
}
</script>
</body>
</html>
css
商品
*{
margin: 0;
padding: 0;
list-style: none;
}
#header{
width:620px;
height:76px;
background-color: #D01279;
margin: 0 auto;
}
.logo{
width: 80px;
height: 76px;
float: left;
padding-left: 20px;
}
#logo{
padding-top: 23px;
}
.tittleText{
width: 260px;
height: 76px;
float: left;
}
#tittleText{
margin-top: 20px;
margin-left: 135px;
font-size: 30px;
color: #fefafe;
}
.cart{
width: 40px;
height: 76px;
float: right;
padding-right: 40px;
}
#cart{
margin-top: 15px;
}
.peo{
width: 40px;
height: 76px;
float: right;
}
#peo{
margin-top: 15px;
}
/* 中间文章部分 */
#article{
width: 620px;
height: 934px;
/* background-color: cornflowerblue; */
margin: 0 auto;
}
/* 中间文章部分：轮播*/
#article #banner{
width:620px;
height:445px;
background-color: rgba(235, 154, 167, 0.158);
margin: 0 auto;
}
#article #banner #container{
width:400px;
height:445px;
/* background:#f00; */
margin:0 auto;
/* border:1px solid #111; */
position: relative;
overflow:hidden;
}
#article #banner #container #pic{
width:2000px;
height:400px;
margin:0 auto;
position:absolute;
}
#article #banner #container #pic img{
float: left;
}
#article #banner #pageCaption{
width:80px;
height:30px;
background-color: #BCBCBC;
position: relative;;
bottom:10;
margin-top: 410px;
margin-left: 150px;
border-radius: 20%;
}
#article #banner #pageCaption ul{
width:80px;
margin:0 auto;
padding-left:7px;
/* overflow:hidden; */
/* background-color: cornflowerblue; */
}
#article #banner #pageCaption ul li{
list-style: none;
float: left;
width:10px;
height:10px;
/* background-color: cornflowerblue; */
border:1px solid white;
border-radius: 50%;
margin:6px 2px;
cursor:pointer;
/* //鼠标放上去变为小手 */
}
/* 中间文章部分：商品描述 */
#article #discribe{
width: 100%;
height: 489px;
/* background-color:teal; */
}
/* 中间文章部分：商品描述：上面文字部分 */
#article #discribe div:first-child{
width: 100%;
height: 409px;
background-color:#F2EFEF;
color:#4B4B4B;
}
/* 中间文章部分：商品描述：上面文字部分：对字体进行调整 */
#article #discribe div:first-child p{
font-size: 30px;
float: left;
margin: 20px 20px;
}
#article #discribe div:first-child p:nth-child(3){
font-size: 20px;
}
#article #discribe div:first-child span:first-child{
color: #BA0C54;
font-size: 30px;
}
/* 中间文章部分：商品描述：下部分查看商品详情 */
#article #discribe div:last-child{
width: 100%;
height: 80px;
/* background-color:wheat; */
}
#article #discribe div:last-child img:first-child{
width: 10%;
margin:10px 10px;
float: left;
}
#article #discribe div:last-child p{
font-size: 30px;
margin:20px 10px;
float: left;
color: #BBBBBB;
}
#article #discribe div:last-child img:last-child{
width: 8%;
margin:14px 10px;
float: right;
}
/* 脚*/
#footer{
height: 80px;
width: 620px;
background-color: #A3A3A3;
margin: 0 auto;
padding-top: 15px;
}
/* 脚：对文字进行调整*/
#footer P{
font-size: 30px;
color: white;
width: 200px;
height: 60px;
text-align: center;
background-color: #F3008A;
border-radius: 5%;
margin-left: 200px;
padding-top: 12px;
}
注册
*{
margin: 0;
padding: 0;
list-style: none;
}
#header{
width:620px;
height:76px;
background-color: #D01279;
margin: 0 auto;
}
.logo{
width: 80px;
height: 76px;
float: left;
padding-left: 20px;
}
#logo{
padding-top: 23px;
}
.tittleText{
width: 260px;
height: 76px;
float: left;
}
#tittleText{
margin-top: 20px;
margin-left: 160px;
font-size: 30px;
color: #fefafe;
}
#article{
width: 620px;
height: 1014px;
background-color:#F2EFEF;
margin: 0 auto;
padding-top: 50px;
}
#article div:nth-child(2n+1){
width: 560px;
height: 80px;
margin: 0 auto;
background-color: white;
margin-bottom: 50px;
float: left;
margin-left: 30px;
}
#article div:nth-child(2n){
width: 30px;
height: 80px;
margin: 0 auto;
/* background-color: red; */
float: right;
padding-top: 30px;
}
#article div:nth-child(2n+1) p{
float: left;
font-size: 25px;
margin-top: 20px;
margin-left: 20px;
}
#article div:nth-child(2n+1) input{
float: left;
font-size: 25px;
height: 50px;
margin-top: 15px;
border: none;
}
#article div:nth-child(7){
background-color:#F2EFEF;
}
#article div:nth-child(7) input{
float: left;
margin-left: 50px;
margin-top: 10px;
}
#article div:nth-child(7) p:last-child{
float: right;
color: #C02060;
margin-right: 100px;
}
#footer{
height: 80px;
width: 620px;
background-color:#F2EFEF;
margin: 0 auto;
padding-top: 15px;
}
#footer input{
font-size: 30px;
color: white;
width: 550px;
height: 60px;
text-align: center;
background-color: #F3008A;
border-radius: 5%;
margin-left: 35px;
padding-top: 6px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
