水果網(wǎng)頁(yè)設(shè)計(jì)總結(jié)

電子與信息工程學(xué)院課程設(shè)計(jì)報(bào)告課程：人機(jī)交互與界面設(shè)計(jì)題目：前端頁(yè)面設(shè)計(jì)總結(jié)水果網(wǎng)頁(yè)設(shè)計(jì)總結(jié)一.網(wǎng)頁(yè)結(jié)構(gòu)包含主界面，注冊(cè)界面，商品詳情頁(yè)，打地鼠游戲和翻牌子游戲共五個(gè)界面。其中用到HTML，標(biāo)題，表格，表單，導(dǎo)航欄；CSS，div布局對(duì)象，圖片、文字等的定位，浮動(dòng)；運(yùn)用JavaScript展示登錄及其圖片輪播效果。二．頁(yè)面效果及其代碼1.班級(jí)主頁(yè)的導(dǎo)航欄在右上角，每一個(gè)導(dǎo)航用a鏈接，對(duì)應(yīng)各個(gè)頁(yè)面；CSS圓角設(shè)置邊框。設(shè)置背景圖，班級(jí)logo等圖片應(yīng)用CSS浮動(dòng)，定位。其中有許多CSS效果，還使用矢量圖使界面看起來更美觀。主代碼：

<!--導(dǎo)航欄start-->

<divclass="head">

<!--loge-->

<divclass="headw">

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

<divclass="head2">

<ulstyle="float:left;">

<li><ahref="host.html">首頁(yè)</a></li>

<li><ahref="#">購(gòu)物車</a></li>

<li><ahref="#">論壇</a></li>

</ul>

</div>

<!--搜索-->

<divclass="head3">

<inputtype="text">

<button>搜索</button>

</div>

<!--登錄-->

<divclass="head4">

<divclass="tou"></div>

<ahref="post.html">還未登錄~~請(qǐng)登錄</a>

</div>

</div>

</div>

<!--導(dǎo)航欄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>堅(jiān)果類<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>水果快報(bào)</p>

<ul>

<li><ahref="#"><strongclass="hot">【熱門】</strong>黑布林大李子原價(jià)100元/500g，現(xiàn)50元/500g?。。?lt;/a></li>

<li><ahref="#"><strongclass="new">【新款】</strong>新上線云南大荔枝，只需30元/500g，歡迎搶購(gòu)！??！</a></li>

<li><ahref="#"><strongclass="new">【新款】</strong>新上線云南大荔枝，只需30元/500g，歡迎搶購(gòu)?。?！</a></li>

<li><ahref="#"><strongclass="new">【新款】</strong>新上線云南大荔枝，只需30元/500g，歡迎搶購(gòu)?。。?lt;/a></li>

<li><ahref="#"><strongclass="hot">【熱門】</strong>黑布林大李子原價(jià)100元/500g，現(xiàn)50元/500g?。?！</a></li>

<li><ahref="#"><strongclass="hot">【熱門】</strong>黑布林大李子原價(jià)100元/500g，現(xiàn)50元/500g！?。?lt;/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>應(yīng)季水果<ahref="#">查看更多</a></p>

</div>

<ahref="shop.html">

<divclass="downclearfix">

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div></a>

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down5">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

</div>

</div>

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

<divclass="bodydownw">

<divclass="up">

<p>應(yīng)季水果<ahref="#">查看更多</a></p>

</div>

<divclass="downclearfix">

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down1">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥150/500g</p>

</div>

</div>

</div>

<divclass="down5">

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

<divclass="text">

<h4>天水櫻桃</h4>

<div>

<pclass="before">現(xiàn)價(jià)￥100/500g</p>

<pclass="after">原價(jià)￥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>正品保障,提供發(fā)票</p>

</div>

</li>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供發(fā)票</p>

</div>

</li>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供發(fā)票</p>

</div>

</li>

<li>

<h5></h5>

<divclass="service_txt">

<h4>正品保障</h4>

<p>正品保障,提供發(fā)票</p>

</div>

</li>

</ul>

</div>

<divclass="mod_help">

<dl>

<dt>服務(wù)指南</dt>

<dd><ahref="#">購(gòu)物流程</a></dd>

<dd><ahref="#">會(huì)員介紹</a></dd>

<dd><ahref="#">生活旅行/團(tuán)購(gòu)</a></dd>

<dd><ahref="#">常見問題</a></dd>

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

<dd><ahref="#">聯(lián)系客服</a></dd>

</dl>

<dl>

<dt>服務(wù)指南</dt>

<dd><ahref="#">購(gòu)物流程</a></dd>

<dd><ahref="#">會(huì)員介紹</a></dd>

<dd><ahref="#">生活旅行/團(tuán)購(gòu)</a></dd>

<dd><ahref="#">常見問題</a></dd>

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

<dd><ahref="#">聯(lián)系客服</a></dd>

</dl>

<dl>

<dt>服務(wù)指南</dt>

<dd><ahref="#">購(gòu)物流程</a></dd>

<dd><ahref="#">會(huì)員介紹</a></dd>

<dd><ahref="#">生活旅行/團(tuán)購(gòu)</a></dd>

<dd><ahref="#">常見問題</a></dd>

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

<dd><ahref="#">聯(lián)系客服</a></dd>

</dl>

<dl>

<dt>服務(wù)指南</dt>

<dd><ahref="#">購(gòu)物流程</a></dd>

<dd><ahref="#">會(huì)員介紹</a></dd>

<dd><ahref="#">生活旅行/團(tuán)購(gòu)</a></dd>

<dd><ahref="#">常見問題</a></dd>

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

<dd><ahref="#">聯(lián)系客服</a></dd>

</dl>

<dl>

<dt>服務(wù)指南</dt>

<dd><ahref="#">購(gòu)物流程</a></dd>

<dd><ahref="#">會(huì)員介紹</a></dd>

<dd><ahref="#">生活旅行/團(tuán)購(gòu)</a></dd>

<dd><ahref="#">常見問題</a></dd>

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

<dd><ahref="#">聯(lián)系客服</a></dd>

</dl>

<dl>

<dt>幫助中心</dt>

<dd>

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

打賞支持我們

</dd>

</dl>

</div>

<divclass="mod_copyright">

<divclass="links">

<ahref="#">關(guān)于我們</a>|<ahref="#">聯(lián)系我們</a>|聯(lián)系客服|商家入駐|營(yíng)銷中心|橘子洲頭|友情鏈接|銷售聯(lián)盟|橘子洲頭社區(qū)|

EnglishSite|ContactU

</div>

<divclass="copyright">

地址：甘肅省蘭州市蘭州城市學(xué)院佩里小區(qū)郵編：123123123電話：400-618-4000傳真箱:123456789@<br>

京ICP備08001421號(hào)京公網(wǎng)安備110108007702

</div>

</div>

</div>

</footer><!--底部模塊的制作end-->2．注冊(cè)頁(yè)面用input來顯示手機(jī)號(hào)及密碼的輸入，HTML和CSS結(jié)合使頁(yè)面效果更富有色彩，頁(yè)面內(nèi)容更加豐富。效果圖和代碼如下：、HTML部分：

<!--注冊(cè)新用戶-->

<divclass="registerarea">

<divclass="reg_form">

<formaction="">

<ul>

<li><labelfor="">手機(jī)號(hào)：</label><inputtype="text"class="inp">

<spanclass="error"><iclass="error_icon"></i>手機(jī)號(hào)碼格式不正確，請(qǐng)從新輸入</span>

</li>

<li><labelfor="">短信驗(yàn)證碼：</label><inputtype="text"class="inp">

<spanclass="success"><iclass="success_icon"></i>短信驗(yàn)證碼輸入正確</span>

</li>

<li><labelfor="">登錄密碼：</label><inputtype="password"class="inp">

<spanclass="error"><iclass="error_icon"></i>手機(jī)號(hào)碼格式不正確，請(qǐng)從新輸入</span>

</li>

<liclass="safe">安全程度<emclass="ruo">弱</em><emclass="zhong">中</em><emclass="qiang">強(qiáng)</em></li>

<li><labelfor="">確認(rèn)密碼：</label><inputtype="password"class="inp">

<spanclass="error"><iclass="error_icon"></i>手機(jī)號(hào)碼格式不正確，請(qǐng)從新輸入</span>

</li>

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

同意協(xié)議并注冊(cè)<ahref="#">《知曉用戶協(xié)議》</a>

</li>

<li>

<inputtype="submit"value="完成注冊(cè)"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.主頁(yè)面的圖片輪播主要運(yùn)用JavaScript實(shí)現(xiàn)。輪播圖，其中包括：1、一個(gè)包含輪播圖圖片的ul列表，每個(gè)圖片用一個(gè)li元素包含2、一個(gè)包含輪播圖小圓點(diǎn)的ul列表，每個(gè)小圓點(diǎn)用一個(gè)li元素包含兩個(gè)按鈕用于切換輪播圖3、一個(gè)JavaScript文件用于實(shí)現(xiàn)輪播功能具體來說，JavaScript文件中的代碼實(shí)現(xiàn)了以下功能：4、通過獲取輪播圖圖片列表和小圓點(diǎn)列表以及左右按鈕元素，添加點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片的功能5、通過設(shè)置定時(shí)器實(shí)現(xiàn)自動(dòng)輪播功能6、實(shí)現(xiàn)了鼠標(biāo)懸浮在輪播圖上時(shí)停止輪播、鼠標(biāo)移出繼續(xù)輪播的功能JS代碼如下：<script>

varitems=document.querySelectorAll(".item");//圖片節(jié)點(diǎn)

varpoints=document.querySelectorAll(".point")//點(diǎn)

varleft=document.getElementById("leftBtn");

varright=document.getElementById("rightBtn");

varall=document.querySelector(".wrap")

varindex=0;

vartime=0;//定時(shí)器跳轉(zhuǎn)參數(shù)初始化

//封裝一個(gè)清除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();

}

//綁定點(diǎn)擊事件監(jiān)聽

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

goLeft();

time=0;//計(jì)時(shí)器跳轉(zhuǎn)清零

})

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

goRight();

time=0;//計(jì)時(shí)器跳轉(zhuǎn)清零

})

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

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

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

index=pointIndex;

goIndex();

time=0;//計(jì)時(shí)器跳轉(zhuǎn)清零

})

}

//計(jì)時(shí)器輪播效果

vartimer;

functionplay(){

timer=setInterval(()=>{

time++;

if(time==20){

goRight();

time=0;

}

},100)

}

play();

//移入清除計(jì)時(shí)器

all.onmousemove=function(){

clearInterval(timer)

}

//移出啟動(dòng)計(jì)時(shí)器

all.onmouseleave=function(){

play();

}</script>4.商品詳情頁(yè)也同樣用了輪播HTML代碼如下:<!--詳情頁(yè)模塊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