思奇的花海网站设计说明
项目概述
思奇的花海网站是一款网上花店，支持线上预定、线上购买、养花方法普及、花的寓意以及登入注册等功能，主要服务于一些对鲜花有需求，和一些养花萌新，方便了解鲜花文化，是我们的生活填满别样的色彩。
功能设计
思奇的花海网站共有十四个页面，分别为花店主页面、养花常识页面、新手养花页面、养花的基础知识页面、送花花语页面、基础方式页面、其他方式页面、网上预订页面、网上付款、联系我们页面、登录页面、注册页面、注册成功页面和隐私权限页面。各个页面分配流程如图1.1所示。
图1.1
页面设计
1、花店主页面
功能介绍
花店主页面，包含所有功能的向导。
界面操作
点击网页上链接可以跳转到相对应的页面位置
使用到的技术
主页面包括导航栏、轮播图、跑马灯似轮播图、页脚版权和表格等内容，其中跑马灯似轮播图鼠标悬浮上后停止运动，点击直接跳转商品，导航栏鼠标悬浮后出现二级菜单，鼠标悬浮上后出现动画。用超链接<a>标签引用了大多数链接，JavaScript语法控制了两种轮播图的运动方式与时间，用css美化了页面的样式，部分语法使用了html5语法。css文件和js文件均与html文档分离。主页面如图1.2所示。
图1.2
实现的关键代码
① 导航栏，如图1.3.1：
图1.3.1
html语法：
<nav>
<ul>
<li class="sunhaonan_zydh"><a href="index.html">主页</a></li>
<li class="sunhaonan_zydh">
<a href="javascript:void(0)" class="sunhaonan_btn">养花常识</a>
<div class="sunhaonan_content">
<a href="other/yhcs.html">养花常识</a>
<a href="other/xsyh.html">新手养花</a>
<a href="other/yhdjczs.html">养花的基础知识</a>
</div>
</li>
<li class="sunhaonan_zydh"><a href="other/shhy.html">送花话语</a></li>
<li class="sunhaonan_zydh">
<a href="javascript:void(0)" class="sunhaonan_btn">包扎技术</a>
<div class="sunhaonan_content">
<a href="other/jcfs.html">基础方式</a>
<a href="other/qtfs.html">其他方式</a>
</div>
</li>
<li class="sunhaonan_zydh"><a href="other/wsyd.html">网上预定</a></li>
<li class="sunhaonan_zydh"><a href="other/lxwm.html">联系我们</a></li>
</ul>
</nav>css语法
nav{
height: 50px;
width: 1200px;
background-color: #fe6732;
border: #fe6732 2px solid;
}
nav ul{
margin-left: 120px;
}② 轮播图，如图1.3.2：
图1.3.2
html语法：
<aside>
<div id="sunhaonan_dlbt">
<ul id="sunhaonan_dlbtul">
<li class="sunhaonan_dlbtct"><img src="img/dlbt1.jpg" height="400px" width="1204px"></li>
<li><img src="img/dlbt2.jpg" height="400px" width="1204px"></li>
<li><img src="img/dlbt3.jpg" height="400px" width="1204px"></li>
<li><img src="img/dlbt4.jpg" height="400px" width="1204px"></li>
</ul>
</div>
<div id="sunhaonan_dlbthk">
<ul id="sunhaonan_dlbtxyd">
<li></li>
<li></li>
<li></li>
<li class="sunhaonan_dlbtct"></li>
</ul>
</div>
</aside>css语法：
#sunhaonan_dlbt ul{
list-style: none;
}
#sunhaonan_dlbtul li{
display: none;
}
#sunhaonan_dlbtul li.sunhaonan_dlbtct{
display: block;
}
#sunhaonan_dlbthk{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: url(../img/hei.png);
}
#sunhaonan_dlbthk ul{
list-style: none;
float: right;
width: 142px;
padding-top: 14px;
}
#sunhaonan_dlbthk ul li{
float: left;
width: 14px;
height: 14px;
margin-right: 10px;
background: url(../img/png24.png) no-repeat -23px -125px;
}
#sunhaonan_dlbthk ul li.sunhaonan_dlbtct{
background-position: -9px -125px;
}JavaScript语法：
window.onload = function() {
var myimgs = document.getElementById("sunhaonan_dlbtul").getElementsByTagName("img");
var mytulis = document.getElementById("sunhaonan_dlbtul").getElementsByTagName("li");
var nowimg = 0;
var mytimer = 0;
var mydianlis = document.getElementById("sunhaonan_dlbtxyd").getElementsByTagName("li");
mytimer = window.setInterval(dong, 2000);
function dong() {
//先折腾信号量
if (nowimg < mytulis.length - 1) {
nowimg++;
} else {
nowimg = 0;
}
huantu(); //调用换图函数
shezhixiaoyuandian();
}
function huantu() {
//让所有的li都去掉cur
for (var i = 0; i <= mytulis.length - 1; i++) {
mytulis[i].className = "";
}
//信号量是几，就把cur交给第几个li
mytulis[nowimg].className = "sunhaonan_dlbtct";
}
function shezhixiaoyuandian(){
//让所有的li都去掉cur
for(var i = 0 ; i <= mytulis.length - 1 ; i++){
mydianlis[i].className = "";
}
//信号量是几，就把cur交给第几个li
mydianlis[nowimg].className = "sunhaonan_dlbtct";
}
}③ 跑马灯似轮播图，如图1.3.3
图1.3.3
html语法：
<div id="sunhaonan_nr13">
<div class="sunhaonan_nrxbt">今日新品</div>
<div id="sunhaonan_xlbdiv">
<ul id="sunhaonan_xlbt">
<li><a href="other/wsyd.html#xp1"><img src="img/hua10.jpg"></a></li>
<li><a href="other/wsyd.html#xp2"><img src="img/hua13.jpg"></a></li>
<li><a href="other/wsyd.html#xp3"><img src="img/hua15.jpg"></a></li>
<li><a href="other/wsyd.html#xp1"><img src="img/hua10.jpg"></a></li>
<li><a href="other/wsyd.html#xp2"><img src="img/hua13.jpg"></a></li>
</ul>
</div>
</div>css语法：
#sunhaonan_xlbdiv{
width: 398px;/* 根据图片设置宽度 */
height:265px;/* 根据图片设置高度 */
overflow: hidden;/* 溢出隐藏 */
margin: 0 auto;
position: relative;/* 相对定位 */
}
#sunhaonan_xlbt{
list-style: none;/* 去除列表项 */
width: 1990px;
height: 270px;
position: absolute;/* 绝对定位 */
left: 0;
top: 0;
}
#sunhaonan_xlbt li{
float: left;
}
#sunhaonan_xlbdiv img{
width: 398px;
height:265px;
}JavaScript语法：
var box=document.getElementById("sunhaonan_xlbt");
var num=0;//偏移量
var timer=null;
function autoplay(){
timer=window.setInterval(function(){
num-=5;
if(num<-1240){
num=0;
}
box.style.left=num+'px';//js修改css
},55);
}
autoplay();
//鼠标移动到走马灯停
box.onmouseover=function(){
window.clearInterval(timer);
}
//鼠标移开走马灯继续
box.onmouseout=function(){
autoplay();
}2、养花常识、新手养花、养花的基础知识页面
功能介绍
为一些新手养花、爱花人事提供常识帮助，科普一些常规的知识。
界面操作
进入页面后看到的是文字或者文字与图片的混排，简明扼要的体现出要呈现的内容。养花常识如图2.1.1，新手养花如图2.1.2，养花的基础知识如图2.1.3。
图2.1.1
图2.1.2
图2.1.3
使用到的技术
这三个网页的语法大致相同，因使用了和首页同样的样式直接时使用<link>引用。其他则使用<p>标签设置段落，<br>换行，<img>引入图片。其中页眉、页脚和导航栏的语法与首页相同，但链接的相对地址不同，因其他页面和首页的存放位置不同。所应用的样式则直接引用主页的css样式表。
实现的关键代码
因三个页面大致相同则使用《新手养花》页面作为演示。
html语法：
<div id="sunhaonan_xsyhdiv">
<h2 align="center">新手养花，这些入门攻略可收好了</h2>
<p>说起养花的概念，主要还是集中在现代家庭园艺的大框架之下。</p>
<br>
<p>这里要说的新手养花入门知识，是相当全面而且简洁的总结，
要想把家里的花儿养得美美的，还是很有必要系统学习一下养花知识</p>
<img src="../img/yhcs1.jpg" /><br>
<p>这篇入门攻略的核心，是以花卉植物本身特性为立足点，从认识、学习、分析、到实际操作的过程，属于理论加实践的结合。</p>
<br>
<p>很多朋友喜欢养花却养不好花，也正是缺少一套较为全面的养花攻略。</p>
<br>
<img src="../img/yhcs2.jpg" /><br>
<p>养花以后，我们会经常有意无意去看看各种技巧，但单一方面的技巧也未必让花草生长得更好，同样是缺乏系统性导致的。</p>
<br>
<p>养花技巧也是一种经验总结，不同地域、不同花草、不同环境等等，养花的技巧也会相应不同，所以不能生搬硬套。</p>
<br>
<img src="../img/yhcs3.jpg" /><br>css语法：
#sunhaonan_yhcsdiv{
width: 1180px;
margin: 0 auto;
font-size: 24px;
padding: 10px;
border-left: #FF0000 2px solid;
border-right: #FF0000 2px solid;
}
#sunhaonan_yhcsdiv p{
text-indent:2em;
line-height:2em;
}css引入语法：
<link type="text/css" rel="stylesheet" href="../css/yhcs.css" />3、送花花语页面
功能介绍
送花话语页面则展示的是各种花的颜色相关大的含义，方便顾客查看，在送花的时候不知道送什么品种或者什么颜色的时候以免送错，避免尴尬。
界面操作
界面的页眉、页脚和导航栏的语法与首页相同，页面内容以表格的方式体现给用户。如图3.1.1。
图3.1.1
使用到的技术
页面的内用使用<table>表格排版，版式内容使用css3更改样式。让每各一行的背景颜色相同。
实现的关键代码
html语法：
<div id="sunhaonan_shhydiv">
<table>
<tr>
<th colspan="2"><a name="mg">玫瑰</a></th>
</tr>
<tr>
<td>玫瑰（红）</td><td>热情、热爱；希望与你泛起激情的爱；热情的爱，热织的爱</td>
</tr>
<tr>
<td>玫瑰（粉红）</td><td>感动、爱的宣言、铭记于心、初恋；美丽容颜，灿烂笑容；喜欢你那灿烂的笑容</td>
</tr>
<tr>
<td>玫瑰（白）</td><td>天真、纯洁、尊敬；单纯的爱；我们的爱情是纯洁的</td>
</tr>
<tr>
<td>玫瑰（黄）</td><td>不贞、嫉妒；我配不起你；享受与你一起的日子</td>
</tr>
<tr>
<td>玫瑰（橙色）</td><td>神秘的爱；献给你一份神秘的爱</td>
</tr>
<tr>
<td>玫瑰（香槟色）</td><td>温柔可爱；我只钟情你一个</td>
</tr>
<tr>
<td>玫瑰（咖啡色）</td><td>甜密密</td>
</tr>
<tr>
<td>玫瑰（黑色）</td><td>迷恋，我为你狂</td>
</tr>
<tr>
<td>玫瑰（捧花）</td><td>幸福之爱</td>
</tr>
<tr>
<td>玫瑰（花苞）</td><td> 青春</td>
</tr>
<tr>
<td>玫瑰（红+白）</td><td>共有；专一，高尚气派</td>
</tr>
<tr>
<td>玫瑰（红+黄）</td><td>快乐</td>
</tr>
<tr>
<td>玫瑰（蓝）</td><td>清纯的爱和敦厚善良</td>
</tr>
.........
<tr>
<td>金雀花</td><td>幽雅整洁</td>
</tr>
</table>css语法:
#sunhaonan_shhydiv table{
margin: 0 auto;
text-align: center;
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
border: 1px solid #cad9ea;
color: #666;
}
#sunhaonan_shhydiv td{
border: 1px solid #cad9ea;
}
#sunhaonan_shhydiv tr:nth-child(even){
background-color: #f5fafe;
}4、基础方式、其他方式页面
功能介绍
介绍一些花束的包装方式和方法，使用户居家可以包扎出好看的花束。
界面操作
使用文字和文字与图片结合的方式，用户进入后可以直接查看内容。基础方式如图4.1.1，其他方式如图4.1.2
图4.1.1
使用到的技术
这两个网页的语法大致相同，因使用了和首页同样的样式直接时使用<link>引用。其他则使用<p>标签设置段落，<br>换行，<img>引入图片。
实现的关键代码
因两个个页面大致相同则使用《基础方式》页面作为演示。
html语法：
<div id="sunhaonan_jcfsdiv">
<h2>简单包扎鲜花八步走</h2><br><br>
<ol>
<li>首先准备好的包装纸纸面朝下放在桌子上，薄纸放在覆盖整个背部的包装纸上。<br>
<img src="../img/jcfs1.jpg">
</li>
<li>然后将要包装的鲜花放在铺好的包装纸上。<br>
<img src="../img/jcfs2.jpg">
</li>
<li>将外包装纸和薄纸的左角向中央对角折叠。小心不要弄皱下面的包装纸或薄纸。<br>
<img src="../img/jcfs3.jpg">
</li>
<li>再次在花上折叠左角并用清晰的胶带固定。<br>
<img src="../img/jcfs4.jpg">
</li>
<li>如图所示，将包装纸和薄纸的右角对角朝中心折叠。<br>
<img src="../img/jcfs5.jpg">
</li>
<li>再次将右角包裹在花朵上，用清晰的胶带固定在包装的背面。<br>
<img src="../img/jcfs6.jpg">
</li>
<li>花卉包装将在底部有一个点。翻开花包，折叠起来并用胶带固定。<br>
<img src="../img/jcfs7.jpg">
</li>
<li>最后就包装完成了，效果如下图所示。<br>
<img src="../img/jcfs8.jpg">
</li>
</ol>
</div>css语法:
#sunhaonan_jcfsdiv{
width: 1180px;
margin: 0 auto;
font-size: 24px;
padding: 10px;
border-left: #FF0000 2px solid;
border-right: #FF0000 2px solid;
}
#sunhaonan_jcfsdiv ol{
margin-left: 50px;
}5、网上预定、网上付款页面
功能介绍
用户可以直接预定花束，在选好花束后点击付款则直接跳转到付款页面，可以选择三种付款方式。
界面操作
顾客点击导航栏的网上预订后进入网上预定如图5.1.1所示，本页展示店铺商品，左侧的导航栏定住不动如图5.1.2所示，在鼠标放置中间商品栏中某个商品的图像时，右侧出现本商品的放大图片，移除鼠标则消失如图5.1.3所示，将鼠标放置在左侧导航栏上的某一项时，出现动画效果，如图5.1.4所示，点击确认支付后跳转到，网上付款页面，如图5.1.5所示，在本页面可以选择三种支付方式，直接按所对应的图片切换付款二维码。
图5.1.1
图5.1.2
图5.1.3
图5.1.4
图5.1.5
使用到的技术
在网上预定页面固定导航使用了css3样式，使它固定不动并且有样式，在鼠标悬浮小图放大时使用了JavaScript的鼠标事件，当鼠标悬浮时图片的隐藏样式变成显示，离开显示变成隐藏。在付款页面页一样只是吧JavaScript里的鼠标悬浮事件变成了鼠标点击事件。
实现的关键代码
1.左导航固定及变动样式
html语法：
<div id="sunhaonan_wsydcdh">
<ul>
<li><a href="#jphs">精致小花束</a></li>
<li><a href="#xhmg">鲜花玫瑰花</a></li>
<li><a href="#99mg">99朵玫瑰</a></li>
<li><a href="#knx">康乃馨礼盒送长辈</a></li>
<li><a href="#lsyj">蓝色妖姬</a></li>
<li><a href="#kyhl">开业花篮</a></li>
<li><a href="#srxh">生日鲜花</a></li>
<li><a href="#jjxh">家居鲜花</a></li>
<li><a href="#smhs">扫墓花束</a></li>
<li><a href="#xrkh">向日葵花</a></li>
<li><a href="#mtxh">满天星花</a></li>
</ul>
</div>css语法：
#sunhaonan_wsydcdh{
margin-left: 20px;
width: 180px;
position: fixed;/* 滚动时可以固定在屏幕上*/
}
#sunhaonan_wsydcdh ul{
font-size: 18px;
list-style: none;
width: 220px;
}
#sunhaonan_wsydcdh li{
width: 180px;
line-height: 30px;
height: 30px;
margin: 1px;
background-color: #f4bb2c;
text-align: left;
border-radius: 0 15px 15px 0;
border-left: 5px solid #03c;
-webkit-transition: all ls ease-out;
-moz-transition: all ls ease-out;
}
#sunhaonan_wsydcdh li a{
display: block;
text-decoration: none;
font-size: 18px;
padding-left: 20px;
color: #333;
}
#sunhaonan_wsydcdh li:hover{
background-color: #39f;
width: 200px;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
}
#sunhaonan_wsydcdh li:hover a{
color: #fff;
}2.浮动到小图片变成大图片
html语法：
<div id="sunhaonan_wsydywpl">
<form action="ydzf.html">
<a name="jphs">精致小花束</a>
<div class="sunhaonan_wsydnr">
<input type="checkbox" name="flower" value="25" />
<img src="../img/hua1.jpg" id="sunhaonan_xt" width="60px">
<span class="sunhaonan_span1"><a name="tj">鲜花一朵向日葵精致小花束(特价)</a></span>
<span>￥25</span>
</div>
......
</form>
</div>
<div id="sunhaonan_wsydywp2">
<img src="../img/hua1.jpg" id="sunhaonan_dt">
<img src="../img/hua2.jpg" id="sunhaonan_dt1">
<img src="../img/hua3.jpg" id="sunhaonan_dt2">
<img src="../img/hua4.jpg" id="sunhaonan_dt3">
<img src="../img/hua5.jpg" id="sunhaonan_dt4">
........
</div>css语法：
#sunhaonan_wsydywpl{
margin-left:250px ;
float: left;
width: 570px;
}
/* 右边图片 */
#sunhaonan_wsydywp2{
width:300px ;
height: 300px;
float: left;
margin-left: 880px;
position: fixed;/* 滚动时可以固定在屏幕上*/
}
#sunhaonan_wsydywp2 img{
width: 300px;
float: right;
display: none;
}JavaScript语法：
var xt=document.getElementById("sunhaonan_xt");
var dt=document.getElementById("sunhaonan_dt");
xt.onmouseout=function(){
dt.style.display="none";
}
xt.onmouseover=function(){
dt.style.display="block";
}3.付款方式变动
html语法：
<div id="sunhaonan_zzzf">
<h1>请选择支付方式</h1>
<img src="../img/wx.jpg" id="sunhaonan_wx" />
<img src="../img/wxzf.jpg" id="sunhaonan_wxzf">
<img src="../img/zfbzf.jpg" id="sunhaonan_zfbzf">
<img src="../img/ysfzf.jpg" id="sunhaonan_ysfzf"><br>
<img src="../img/zfb.png" id="sunhaonan_zfb"/><br>
<img src="../img/ysf.jpg" id="sunhaonan_ysf"/><br>
</div>css语法：
#sunhaonan_zzzf img{
width: 200px;
}
#sunhaonan_zzzf{
padding-top: 200px;
width: 500px;
margin: 0 auto;
}
#sunhaonan_wxzf,#sunhaonan_ysfzf,#sunhaonan_zfbzf{
float:right;
display: none;
}JavaScript语法：
var wx= document.getElementById("sunhaonan_wx");
var zfb= document.getElementById("sunhaonan_zfb");
var ysf= document.getElementById("sunhaonan_ysf");
var wxzf=document.getElementById("sunhaonan_wxzf");
var zfbzf=document.getElementById("sunhaonan_zfbzf");
var ysfzf=document.getElementById("sunhaonan_ysfzf");
wx.onclick=function(){
if(wxzf.style.display=="none"){
wxzf.style.display="block";
zfbzf.style.display="none";
ysfzf.style.display="none";
}
else{
wxzf.style.display="none";
}
}
zfb.onclick=function(){
if(wxzf.style.display=="none"){
zfbzf.style.display="block";
ysfzf.style.display="none";
wxzf.style.display="none";
}
else{
zfbzf.style.display="none";
}
}
ysf.onclick=function(){
if(wxzf.style.display=="none"){
ysfzf.style.display="block";
zfbzf.style.display="none";
wxzf.style.display="none";
}
else{
ysfzf.style.display="none";
}
}6、联系我们页面
功能介绍
本店有线下门店为全国连锁，有需求的顾客可以通过查找所在区域的花店进行线下交易，也可以电话订购、电话咨询。
界面操作
进入页面后，各个门店的地址，营业时间，联系电话详细的展示在用户面前。如图6.1.1
图6.1.1
使用到的技术
内容也是由每个小<div>标签构成，<div>里由图片和文字构成，图片进行左浮动，文字正常排版。
实现的关键代码
html语法：
<div id="sunhaonan_lxwm">
<div id="sunhaonan_lxwmdiv1">
<h3>本店为全国连锁，如有问题请联系您所在地区的店铺，</h3>
<div class="sunhaonan_lxwmdiv2">
<p>《思奇的花海XXX店》
<img src="../img/dp.jpg" />
营业时间：xx:xx~xx:xx<br>
地址：XXXXXXXXXXXXXXXXXXXXXXXX<br>
电话：XXXXXXXXXXX
</p>
</div>
<div class="sunhaonan_lxwmdiv2">
<p>《思奇的花海XXX店》
<img src="../img/dp.jpg" />
营业时间：xx:xx~xx:xx<br>
地址：XXXXXXXXXXXXXXXXXXXXXXXX<br>
电话：XXXXXXXXXXX
</p>
</div>
......
</div>
</div>css语法：
#sunhaonan_lxwm{
width: 1200px;
margin: 0 auto;
border-left: #FF0000 2px solid;
border-right: #FF0000 2px solid;
}
#sunhaonan_lxwmdiv1{
margin: 0 auto;
width: 900px;
}
.sunhaonan_lxwmdiv2{
border: #000000 1px solid;
width: 900px;
height: 100px;
margin: 5px;
padding: 10px;
}
.sunhaonan_lxwmdiv2 img{
width: 145px;
float: left;
padding-right: 30px;
}7、登录页面、注册、注册成功、隐私权页面
功能介绍
为用户提供本花店的登录以及为用户提供本花店网上用户的账号注册和注册成功的提示。
界面操作
用户点击登录时进入登录页面如图7.1.1所示。在登录时如果忘记输入账号或者密码则出现提示，如图7.1.2所示。在填写账号或者密码格式不符合事先预定的格式则出现提示，如图7.1.3所示。只有账号和密码都符合要求时才能登录如图7.1.4所示。当右侧提示框均为绿色对号才可以跳转到主页，也就是登录成功。
如果没有账号需要注册则可以点击立即注册或者是导航上的注册，进入注册页面如图7.1.5所示，依旧注册中每一个框都需要填写否则如图7.1.6所示。所有输入框严格按照要求填写，在密码框中要求两次输入的密码相同，否则如图7.1.7所示。当所有信息正确右侧出现绿色对号时才可以点击注册会跳转到成功页面，在成功页面选择返回首页或者登录，如图7.1.9所示。
注册页的隐私权内容如图7.1.8所示。
图7.1.1
图7.1.2
图7.1.3
图7.1.4
图7.1.5
图7.1.6
图7.1.7
图7.1.8
图7.1.9使用到的技术
在注册、登录页面输入框的判断使用了JavaScript语法，在函数中添加了正则函数，使用正则函数来判断接收的数据是否复合要求，在由JavaScript语法改变css样式语法，变换文字内容，再用JavaScript做判断，当所有输入框正确变成对号后才可以实现跳转。
在隐私权页面使用了<pre>标签使文字编辑时的空格回车原样输出在浏览器上。
u实现的关键代码
输入框的验证与跳转
因为注册和登入逻辑方法相同这里只展示登录页面代码
html语法：
<div id="sunhaonan_dldiv">
<form action="../index.html" id="sunhaonan_dlfrom" onsubmit="return sunhaonan_dl()">
<fieldset>
<legend>欢迎登录</legend>
手机号码：<input type="tel" placeholder="请输入手机号码" id="sunhaonan_inpp5"/><span id="sunhaonan_span5"></span><br>
登入密码：<input type="password" placeholder="请输入密码" id="sunhaonan_inpp2"/><span id="sunhaonan_span2"></span><br>
<input type="submit" value="立即登入" class="sunhaonan_dlan">
<br>
没有账号？<a href="zc.html">立即注册</a>
</fieldset>
</form>
</div>css语法：
#sunhaonan_dldiv{
width: 1200px;
height: 450px;
margin: 0 auto;
border-left: #FF0000 2px solid;
border-right: #FF0000 2px solid;
}
#sunhaonan_dlfrom fieldset{
width: 500px;
height: 380px;
font-size: 20px;
padding: 20px;
margin: 0 auto;
}
#sunhaonan_dlfrom span{
margin-left: 10px;
font-size: 10px;
}
#sunhaonan_dlfrom input{
margin: 10px;
}
.sunhaonan_dlan{
width: 100px;
height: 30px;
border-radius: 10px ;
}JavaScript语法：
var span2=document.getElementById("sunhaonan_span2");
var span5=document.getElementById("sunhaonan_span5");
var inpp2=document.getElementById("sunhaonan_inpp2");
var inpp5=document.getElementById("sunhaonan_inpp5");
inpp5.onblur=function(){
var nr5=inpp5.value;
if(nr5==""){
span5.innerHTML="不能为空";
span5.style.color="red";
}else{
var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
if(reg.test(nr5)==false){
span5.innerHTML="手机号码格式不正确";
span5.style.color="red";
}else{
span5.innerHTML="√";
span5.style.color="green";
}
}
}
inpp2.onblur=function(){
var nr2=inpp2.value;
if(nr2==""){
span2.innerHTML="密码不能为空";
span2.style.color="red";
}else{
var reg=/^[\w]{6,12}$/;
if(reg.test(nr2)==false){
span2.innerHTML="密码格式不正确";
span2.style.color="red";
}else{
span2.innerHTML="√";
span2.style.color="green";
}
}
}
function sunhaonan_dl(){
var f=true;
if((span5.innerHTML=="√")&&(span2.innerHTML=="√")){
f=true;
}else{
f=false;
}
return f;
}设计总结
本次实验历时三天完成，内容包含html、html5、css、css3、JavaScript，并对各个文件实现了样式与主体分离。使用了Photoshop软件对一些图片进行了处理，使用了本学期所学的全部知识。实验应然有许多的不足，缺少结账页面，地址设定页面，并未做到网上购物的全部功能，除此之外代码的规范程度不足，需要实验后继续学习和改进。时光匆匆，实验虽结束但学习的道路并未停止，在实验中发生的错误和解决的方式让我难忘，感谢老师与同学的教诲和帮助使实验顺利完成！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
