作业 要求：
建立一个购物网站
1、至少8个网页（页面之间相互链接）
2、要求有表格布局的页面
3、要求有DIV+CSS的页面（左中右浮动布局、上中下布局）
4、要求有图片轮播图效果（改变属性行为）和其它javascript行为
5、要求有导航菜单的设置
6、要求有图片热点的设置
7、要求公告有文字滚动效果
8、要求有用户注册界面，同时检查表单的有效性
下载地址：2022.06htmldiv+css期末作业——网页8页-Javascript文档类资源-CSDN下载
好了，话不多说，上效果图
部分代码展示：
首页代码index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>服装购物网站</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/swiper.min.css">
<style>
.swiper-container {
width: 100%;position:relative;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
</style>
<script src="js/swiper.min.js"></script>
</head>
<body>
<header>
<div class="headerstrip">
<div class="container">
<div class="row">
<div class="span12">
<a href="index.html" class="logo pull-left"><img src="img/logo.png" alt="SimpleOne" title="SimpleOne"></a>
<div class="pull-left">
<div class="navbar" id="topnav">
<div class="navbar-inner">
<ul class="nav" >
<li><a class="myaccount" href="login.html">登录</a>
</li>
<li><a class="shoppingcart" href="shopping-cart.html">购物车</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu">
<li><a class="active" href="index.html">首页</a>
</li>
<li><a href="category.html">女装</a>
</li>
<li><a href="blog.html">关于</a>
</li>
<li><a href="contact.html">联系</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 头部结束 -->
<div id="maincontainer">
<!-- Slider Start-->
<section class="slider">
<div class="container">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/banner1.jpg" style="width:100%;"/></div>
<div class="swiper-slide"><img src="img/banner2.jpg" style="width:100%;"/></div>
<div class="swiper-slide"><img src="img/banner3.jpg" style="width:100%;"/></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>
</div>
</section>
<!-- Slider End-->
<div class="gonggao"> <div class="container"><span style="float:left;color:red;line-height:45px;width:100px;display:inline-block;">网站公告：</span><marquee style="display:inline-block;width:500px;float:left;height:45px;line-height:45px;">1.精彩不断,折扣连连。2.精美商品不断上架,折扣活动天天上演。3.新货不断上架,商品天天降价。4.新货拿在手,折扣天天有。</marquee></div></div>
<!-- Featured Product-->
<section id="featured" class="row mt40">
<div class="container">
<h1 class="heading1"><span class="maintext">推荐产品</span></h1>
<ul class="thumbnails">
<li class="span3">
<a class="prdocutname" href="product.html">绿色女装</a>
<div class="thumbnail">
<span class="sale tooltip-test">Sale</span>
<a href="product.html"><img alt="" src="img/product1.jpg"></a>
<div class="pricetag">
<span class="spiral"></span><a href="product.html" class="productcart">购买</a>
<div class="price">
<div class="pricenew">459.00元</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="prdocutname" href="product.html">绿色女装</a>
<div class="thumbnail">
<span class="sale tooltip-test">Sale</span>
<a href="product.html"><img alt="" src="img/product1.jpg"></a>
<div class="pricetag">
<span class="spiral"></span><a href="product.html" class="productcart">购买</a>
<div class="price">
<div class="pricenew">459.00元</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="prdocutname" href="product.html">绿色女装</a>
<div class="thumbnail">
<span class="sale tooltip-test">Sale</span>
<a href="product.html"><img alt="" src="img/product1.jpg"></a>
<div class="pricetag">
<span class="spiral"></span><a href="product.html" class="productcart">购买</a>
<div class="price">
<div class="pricenew">459.00元</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="prdocutname" href="product.html">绿色女装</a>
<div class="thumbnail">
<span class="sale tooltip-test">Sale</span>
<a href="product.html"><img alt="" src="img/product1.jpg"></a>
<div class="pricetag">
<span class="spiral"></span><a href="product.html" class="productcart">购买</a>
<div class="price">
<div class="pricenew">459.00元</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
<!-- /maincontainer -->
<!-- 底部 -->
<footer id="footer">
<section class="copyrightbottom">
<div class="container">
<div class="row">
<div class="span6">版权所有 © 2022</div>
<div class="span6 textright"> 姓名： 学号： </div>
</div>
</div>
</section>
</footer>
</body>
</html>注册页面代码展示，包括表单的验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/yanzheng.js"></script>
</head>
<body>
<header>
<div class="headerstrip">
<div class="container">
<div class="row">
<div class="span12">
<a href="index.html" class="logo pull-left"><img src="img/logo.png" alt="SimpleOne" title="SimpleOne"></a>
<div class="pull-left">
<div class="navbar" id="topnav">
<div class="navbar-inner">
<ul class="nav" >
<li><a class="myaccount" href="login.html">登录</a>
</li>
<li><a class="shoppingcart" href="shopping-cart.html">购物车</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu">
<li><a class="active" href="index.html">首页</a>
</li>
<li><a href="category.html">女装</a>
</li>
<li><a href="blog.html">新闻</a>
</li>
<li><a href="contact.html">联系</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 头部结束 -->
<div id="maincontainer">
<section id="product">
<div class="container">
<!-- breadcrumb -->
<ul class="breadcrumb">
<li>
<a href="index.html">首页</a>
<span class="divider">/</span>
</li>
<li class="active">登录</li>
</ul>
<!-- Account Login-->
<div class="row">
<div class="span12">
<section class="returncustomer">
<div class="loginbox">
<form action="#" method="post" name="myForm">
<table border="0" align="center">
<h2>会员注册</h2>
<tr>
<th>用户名</th>
<td><input type="text" name="username"/><span> (可包含a-z、0-9和下划线)</span></td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" name="password"/><span> (至少包含6个字符)</span></td>
</tr>
<tr>
<th>邮箱</th>
<td><input type="text" name="email"/><span> (必须包含@字符)</span></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" class="submit btn"/><a href="login.html" style="margin-left:20px;" class="btn">登录</a>
</td>
</tr>
</table>
</form>
</div>
</section>
</div>
</div>
</div>
</section>
</div>
<!-- 底部 -->
<footer id="footer">
<section class="copyrightbottom">
<div class="container">
<div class="row">
<div class="span6">版权所有 © 2022</div>
<div class="span6 textright"> 姓名： 学号： </div>
</div>
</div>
</section>
</footer>
</body>
</html>表单验证js
function validateForm(){
var formElement = document.myForm;
// 依次取出用户名和密码
var username = formElement.username.value;
var password = formElement.password.value;
var email = formElement.email.value;
// alert("去空格前："+"#"+username+"#"+":"+password+":"+email+"长度："+username.length);
username = trim(username);
password = trim(password);
email = trim(email);
// alert("去空格后："+username+":"+password+":"+email+"长度："+username.length);
checkUsername(username);
checkPassword(password);
checkEmail(email);
}
// 验证邮箱
function checkEmail(email){
var flag = true;
if(email.length==0){
flag = false;
alert("邮箱不能为空！");
}else if(!/^\w+@\w+(\.\w+)+$/.test(email)){
flag = false;
alert("邮箱格式不对");
}
return flag;
}
// 验证密码
function checkPassword(password){
var flag = true;
var formElement = document.myForm;
if(password.length == 0){
flag = false;
alert("密码不能为空！");
formElement.password.focus();
}else if(!/^[0-9]{6}$/.test(password)){
flag = false;
alert("密码必须为6位数字！");
}
return flag;
}
// 验证用户名
function checkUsername(username) {
var flag = true;
var formElement = document.forms[0];
if(username.length == 0){
flag = false;
alert("用户名不能为空！");
formElement.username.focus();
}else if(!/^[a-zA-Z0-9]+_/.test(username)){
flag = false;
alert("用户名必须为英文数字和下划线和下划线");
}
return flag;
}
// 自定义去空格函数
function trim(s){
s = s.replace(/(^\s*)|(\s*_)/g, "");//去前后空格
// s = s.replace(/^\s*$/,"");
return s;
}
window.onload = function(){
var formElement = document.myForm;
formElement.onsubmit=validateForm;
}; 
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
