水果网页设计总结

电子与信息工程学院课程设计报告课程：人机交互与界面设计题目：前端页面设计总结水果网页设计总结一.网页结构包含主界面，注册界面，商品详情页，打地鼠游戏和翻牌子游戏共五个界面。其中用到HTML，标题，表格，表单，导航栏；CSS，div布局对象，图片、文字等的定位，浮动；运用JavaScript展示登录及其图片轮播效果。二．页面效果及其代码1.班级主页的导航栏在右上角，每一个导航用a链接，对应各个页面；CSS圆角设置边框。设置背景图，班级logo等图片应用CSS浮动，定位。其中有许多CSS效果，还使用矢量图使界面看起来更美观。主代码：

<!--导航栏start-->

<divclass="head">

<!--loge-->

<divclass="headw">

<divclass="head1"><imgsrc="img/logo.png"alt=""></div>

<divclass="head2">

<ulstyle="float:left;">

<li><ahref="host.html">首页</a></li>

<li><ahref="#">购物车</a></li>

<li><ahref="#">论坛</a></li>

</ul>

</div>

<!--搜索-->

<divclass="head3">

<inputtype="text">

<button>搜索</button>

</div>

<!--登录-->

<divclass="head4">

<divclass="tou"></div>

<ahref="post.html">还未登录~~请登录</a>

</div>

</div>

</div>

<!--导航栏end-->

<!--身体上半部分start-->

<divclass="upbodyw">

<divclass="left">

<ulclass="left-ul">

<p>全部水果分类</p>

<li>核果类<em>></em></li>

<li>浆果类<em>></em></li>

<li>瓜果类<em>></em></li>

<li>仁果类<em>></em></li>

<li>橘果类<em>></em></li>

<li>坚果类<em>></em></li>

<li>凉性水果<em>></em></li>

<li>温性水果<em>></em></li>

<li>热性水果<em>></em></li>

<li>冷性水果<em>></em></li>

</ul>

</div>

<!--轮播图start-->

<divclass="wrap">

<ulclass="list">

<liclass="itemactive"><imgsrc="img/child1.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child2.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child3.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child4.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child5.jpg"alt=""></li>

</ul>

<ulclass="pointList">

<liclass="pointactive"data-index=0></li>

<liclass="point"data-index=1></li>

<liclass="point"data-index=2></li>

<liclass="point"data-index=3></li>

<liclass="point"data-index=4></li>

</ul>

<buttonclass="btn"id="leftBtn"><spanclass="iconfont"></span></button>

<buttonclass="btn"id="rightBtn"><spanclass="iconfont"></span></button>

<scriptsrc="script/lun.js"></script>

</div>

<!--轮播图end-->

<divclass="right">

<divclass="rightup">

<p>水果快报</p>

<ul>

<li><ahref="#"><strongclass="hot">【热门】</strong>黑布林大李子原价100元/500g，现50元/500g！！！</a></li>

<li><ahref="#"><strongclass="new">【新款】</strong>新上线云南大荔枝，只需30元/500g，欢迎抢购！！！</a></li>

<li><ahref="#"><strongclass="new">【新款】</strong>新上线云南大荔枝，只需30元/500g，欢迎抢购！！！</a></li>

<li><ahref="#"><strongclass="new">【新款】</strong>新上线云南大荔枝，只需30元/500g，欢迎抢购！！！</a></li>

<li><ahref="#"><strongclass="hot">【热门】</strong>黑布林大李子原价100元/500g，现50元/500g！！！</a></li>

<li><ahref="#"><strongclass="hot">【热门】</strong>黑布林大李子原价100元/500g，现50元/500g！！！</a></li>

</ul>

</div>

<divclass="rightdown">

<ul><ahref="#">

<liclass="p1">

<p><spanclass="iconfont">󰅹</span></p>

</li></a>

<ahref="#">

<li>

<p><spanclass="iconfont"></span></p>

</li></a>

</ul>

</div>

</div>

</div>

<!--精品推荐start-->

<divclass="recomw">

<divclass="recom_hd">

<imgsrc="img/recom.png"alt="">

</div>

<divclass="recom_bd">

<ul>

<li><imgsrc="img/lz.jpg"alt=""></li>

<li><imgsrc="img/lz.jpg"alt=""></li>

<li><imgsrc="img/lz.jpg"alt=""></li>

<li><imgsrc="img/lz.jpg"alt=""></li>

</ul>

</div>

</div>

<!--精品推荐end-->

<!--身体上半部分end-->

<!--身体下半部分start-->

<divclass="bodydownw">

<divclass="up">

<p>应季水果<ahref="#">查看更多</a></p>

</div>

<ahref="shop.html">

<divclass="downclearfix">

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div></a>

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down5">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

</div>

</div>

<!--身体下半部分end-->

<divclass="bodydownw">

<divclass="up">

<p>应季水果<ahref="#">查看更多</a></p>

</div>

<divclass="downclearfix">

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

<divclass="down5">

<imgsrc="img/yt.jpg"alt="">

<divclass="text">

<h4>天水樱桃</h4>

<div>

<pclass="before">现价￥100/500g</p>

<pclass="after">原价￥150/500g</p>

</div>

</div>

</div>

</div>

</div>

<!--底部模块的制作start-->

<footerclass="footer">

<divclass="w">

<divclass="mod_service">

<ul>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供发票</p>

</div>

</li>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供发票</p>

</div>

</li>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供发票</p>

</div>

</li>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供发票</p>

</div>

</li>

</ul>

</div>

<divclass="mod_help">

<dl>

<dt>服务指南</dt>

<dd><ahref="#">购物流程</a></dd>

<dd><ahref="#">会员介绍</a></dd>

<dd><ahref="#">生活旅行/团购</a></dd>

<dd><ahref="#">常见问题</a></dd>

<dd><ahref="#">大家电</a></dd>

<dd><ahref="#">联系客服</a></dd>

</dl>

<dl>

<dt>服务指南</dt>

<dd><ahref="#">购物流程</a></dd>

<dd><ahref="#">会员介绍</a></dd>

<dd><ahref="#">生活旅行/团购</a></dd>

<dd><ahref="#">常见问题</a></dd>

<dd><ahref="#">大家电</a></dd>

<dd><ahref="#">联系客服</a></dd>

</dl>

<dl>

<dt>服务指南</dt>

<dd><ahref="#">购物流程</a></dd>

<dd><ahref="#">会员介绍</a></dd>

<dd><ahref="#">生活旅行/团购</a></dd>

<dd><ahref="#">常见问题</a></dd>

<dd><ahref="#">大家电</a></dd>

<dd><ahref="#">联系客服</a></dd>

</dl>

<dl>

<dt>服务指南</dt>

<dd><ahref="#">购物流程</a></dd>

<dd><ahref="#">会员介绍</a></dd>

<dd><ahref="#">生活旅行/团购</a></dd>

<dd><ahref="#">常见问题</a></dd>

<dd><ahref="#">大家电</a></dd>

<dd><ahref="#">联系客服</a></dd>

</dl>

<dl>

<dt>服务指南</dt>

<dd><ahref="#">购物流程</a></dd>

<dd><ahref="#">会员介绍</a></dd>

<dd><ahref="#">生活旅行/团购</a></dd>

<dd><ahref="#">常见问题</a></dd>

<dd><ahref="#">大家电</a></dd>

<dd><ahref="#">联系客服</a></dd>

</dl>

<dl>

<dt>帮助中心</dt>

<dd>

<imgsrc="img/wx.jpg"alt="">

打赏支持我们

</dd>

</dl>

</div>

<divclass="mod_copyright">

<divclass="links">

<ahref="#">关于我们</a>|<ahref="#">联系我们</a>|联系客服|商家入驻|营销中心|橘子洲头|友情链接|销售联盟|橘子洲头社区|

EnglishSite|ContactU

</div>

<divclass="copyright">

地址：甘肃省兰州市兰州城市学院佩里小区邮编：123123123电话：400-618-4000传真箱:123456789@<br>

京ICP备08001421号京公网安备110108007702

</div>

</div>

</div>

</footer><!--底部模块的制作end-->2．注册页面用input来显示手机号及密码的输入，HTML和CSS结合使页面效果更富有色彩，页面内容更加丰富。效果图和代码如下：、HTML部分：

<!--注册新用户-->

<divclass="registerarea">

<divclass="reg_form">

<formaction="">

<ul>

<li><labelfor="">手机号：</label><inputtype="text"class="inp">

<spanclass="error"><iclass="error_icon"></i>手机号码格式不正确，请从新输入</span>

</li>

<li><labelfor="">短信验证码：</label><inputtype="text"class="inp">

<spanclass="success"><iclass="success_icon"></i>短信验证码输入正确</span>

</li>

<li><labelfor="">登录密码：</label><inputtype="password"class="inp">

<spanclass="error"><iclass="error_icon"></i>手机号码格式不正确，请从新输入</span>

</li>

<liclass="safe">安全程度<emclass="ruo">弱</em><emclass="zhong">中</em><emclass="qiang">强</em></li>

<li><labelfor="">确认密码：</label><inputtype="password"class="inp">

<spanclass="error"><iclass="error_icon"></i>手机号码格式不正确，请从新输入</span>

</li>

<liclass="agree"><inputtype="checkbox"name=""id="">

同意协议并注册<ahref="#">《知晓用户协议》</a>

</li>

<li>

<inputtype="submit"value="完成注册"class="btn">

</li>

</ul>

</form>

</div>

</div>CSS部分：<style>.registerarea{

height:522px;

border:1pxsolid#ccc;

margin-top:20px;}.registerareah3{

height:42px;

border-bottom:1pxsolid#ccc;

background-color:#ececec;

line-height:42px;

padding:010px;

font-size:18px;

font-weight:400;}.login{

float:right;

font-size:14px;}.logina{

color:#c81523;}.reg_form{

width:600px;

margin:50pxauto0;}.reg_formulli{

margin-bottom:20px;}.reg_formullilabel{

display:inline-block;

width:88px;

text-align:right;}.reg_formulli.inp{

width:242px;

height:37px;

border:1pxsolid#ccc;}.error{

color:#c81523;}.error_icon,.success_icon{

display:inline-block;

vertical-align:middle;

width:20px;

height:20px;

background:url(img/error.png)no-repeat;

margin-top:-2px;}.success{

color:green;}.success_icon{

background:url(img/success.png)no-repeat;}.safe{

padding-left:170px;}.safeem{

padding:012px;

color:#fff;}.ruo{

background-color:#de1111;}.zhong{

background-color:#40b83f;}.qiang{

background-color:#f79100;}.agree{

padding-left:95px;}.agreeinput{

vertical-align:middle;}.agreea{

color:#1ba1e6;}.btn{

width:200px;

height:34px;

background-color:#c81623;

font-size:14px;

color:#fff;

margin:30px0070px;}.mod_copyright{

text-align:center;

padding-top:20px;}.links{

margin-bottom:15px;}.linksa{

margin:03px;}.copyright{

line-height:20px;}</style>3.主页面的图片轮播主要运用JavaScript实现。轮播图，其中包括：1、一个包含轮播图图片的ul列表，每个图片用一个li元素包含2、一个包含轮播图小圆点的ul列表，每个小圆点用一个li元素包含两个按钮用于切换轮播图3、一个JavaScript文件用于实现轮播功能具体来说，JavaScript文件中的代码实现了以下功能：4、通过获取轮播图图片列表和小圆点列表以及左右按钮元素，添加点击事件，实现点击按钮切换图片的功能5、通过设置定时器实现自动轮播功能6、实现了鼠标悬浮在轮播图上时停止轮播、鼠标移出继续轮播的功能JS代码如下：<script>

varitems=document.querySelectorAll(".item");//图片节点

varpoints=document.querySelectorAll(".point")//点

varleft=document.getElementById("leftBtn");

varright=document.getElementById("rightBtn");

varall=document.querySelector(".wrap")

varindex=0;

vartime=0;//定时器跳转参数初始化

//封装一个清除active方法

varclearActive=function(){

for(i=0;i<items.length;i++){

items[i].className='item';

}

for(j=0;j<points.length;j++){

points[j].className='point';

}

}

//改变active方法

vargoIndex=function(){

clearActive();

items[index].className='itemactive';

points[index].className='pointactive'

}

//左按钮事件

vargoLeft=function(){

if(index==0){

index=4;

}else{

index--;

}

goIndex();

}

//右按钮事件

vargoRight=function(){

if(index<4){

index++;

}else{

index=0;

}

goIndex();

}

//绑定点击事件监听

left.addEventListener('click',function(){

goLeft();

time=0;//计时器跳转清零

})

right.addEventListener('click',function(){

goRight();

time=0;//计时器跳转清零

})

for(i=0;i<points.length;i++){

points[i].addEventListener('click',function(){

varpointIndex=this.getAttribute('data-index')

index=pointIndex;

goIndex();

time=0;//计时器跳转清零

})

}

//计时器轮播效果

vartimer;

functionplay(){

timer=setInterval(()=>{

time++;

if(time==20){

goRight();

time=0;

}

},100)

}

play();

//移入清除计时器

all.onmousemove=function(){

clearInterval(timer)

}

//移出启动计时器

all.onmouseleave=function(){

play();

}</script>4.商品详情页也同样用了轮播HTML代码如下:<!--详情页模块start-->

<divclass="shopw">

<divclass="shopleft">

<divclass="wrap">

<ulclass="list">

<liclass="itemactive"><imgsrc="img/child1.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child2.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child3.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child4.jpg"alt=""></li>

<liclass="item"><imgsrc="img/child5.jpg"alt=""></li>

</ul>

<ulclass="pointList">

<liclass