水果网页设计总结.docx
电子与信息工程学院课程设计报告课程：人机交互与界面设计题目：前端页面设计总结水果网页设计总结.网页结构包含主界面，注册界面，商品详情页，打地鼠游戏和翻牌子游戏共五个界面。其中用到HTM1.,标题，表格，表单，导航栏；CSS,div布局对象，图片、文字等的定位，浮动；运用JaVaSCriPt展示登录及其图片轮播效果。二.页面效果及其代码1.班级主页的导航栏在右上角，每一个导航用a链接，对应各个页面；CSS圆角设置边框。设置背景图，班级log。等图片应用CSS浮动，定位。其中有许多CSS效果，还使用矢量图使界面看起来更美观。主代码：<!-导航栏start-><divclass=,'head"><!Ioge><divclass=,headw"><divclass="head'><imgsrc=11imglogo.png"alt=11,><div><divclass="head2,><ulstyle=,float:leftf,><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="1eft"><ulclass="left-ul"><p>全部水果分类<p><li>核果类<em>><em><li><li>浆果类<em>><em><li><li>瓜果类<em>><em><li><li>仁果类<em>xem><li><li>橘果类<em>><em><li><li>.坚果类<em>><em><li><1i>凉性水果<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=11imgchildl.jpg"alt=",><li><liclass="item11><imgsrc="imgZchild2.jpg"alt=""><li><liclass=',item,><imgsrc=',imgchild3.jpg"alt=""><li><liclass="item,><imgsrc=',imgchild4.jpg"alt=""><li><liclass="item',><imgsrc=11imgZchild5.jpg"alt=""><li><ul><ulclass="point1.ist',><liclass=,pointactive"data-index=O><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=,scriptlun.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="#"XStrOngclass="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="p>><p><spanclass="iconfont',><fexfD179;</spanx/p><lixa><ahref="#"><li><p><spanclass="iconfbntH></spanx/p><li><a><ul><div><div><div><!-精品推荐Start-><divclass=,recomw"><divclass="recom-hd,><imgsrc="imgrecom.png"alt=,"><div><divclass="recom_bd"><ul><li><imgsrc="imglz.jpg"alt=,',><li><li><imgsrc="img/lz.jpgHalt=,><li><li><imgsrc="imglz.jpg,'alt='u,><li><li><imgsrc="imglz.jpg"alt=,u,><li><ul><div><div><!精品推荐end><!-身体上半部分end-><!-身体下半部分Start-><divclass=,bodydownw',><divclass=',up">vp>应季水果<ahref="#">查看更多<a>vp><div><ahref="shop.html"><divclass="downclearfix,><divclass=',down1"><imgsrc="imgyt.jpg"alt=,'><divclass=,'text',><h4>天水樱桃<h4><div><pClaSS="before"现价¥100500g<p><pCIaSS="after",原价¥150500g<p><div><div><div><a><divclass="down1"><imgsrc=',imgyt.jpg"alt=""><divclass="text"><h4>天水樱桃<h4><div><pClaSS="before">现价¥100500g<p><pCIaSS="after"原价¥150500g<p><div><div><div><divclass=,down1"><imgsrc="imgyt.jpg"alt=,",><divclass=,text',><h4>天水樱桃<h4><div><pCIaSS="before">现价¥1OO5OOg<p><pClaSS="after",原价¥150500g<p><div><div><div><divclass="down1"><imgsrc=',imgyt.jpg"alt=',"><divclass="text"><h4>天水樱桃<h4><div><pCIaSS="before">现价¥100500g<p><pClaSS="after"原价¥150500g<p><div><div><div><divclass=,'down5"><imgsrc=11imgyt.jpg"alt=','><divclass="text,><h4>天水樱桃<h4><div><pClaSS="before",现价¥100500g<p><pCIaSS="after"原价¥150500g<p><div><div><div><div><div><!-身体下半部分end><divclass=,bodydownw"><divclass="up">vp>应季水果<ahref="#">查看更多<a><><div><divclass="downclearfix',><divclass="down|><imgsrc="imgyt.jpg"alt=',',><divclass="text"><h4>天水樱桃<h4><div><pClaSS="before">现价¥1OO5OOg<p><pCIaSS="afler”>原价¥15O5OOg<p><div><div><div><divclass="down1"><imgsrc="imgyt.jpg"alt=,','><divclass=,'text',><h4>天水樱桃<h4><div><pCIaSS="before">现价¥1OO5OOg<p><pCIaSS="after",原价¥15O5OOg<p><div><div><div><divclass="down1"><imgsrc=,'imgyt.jpg11alt=""><divclass=,text,><h4>天水樱桃<h4><div><pCIaSS="before",现价¥100500g<p><pClaSS="after"原价¥150500g<p><div><div><div><divclass="down'><imgsrc=',imgyt.jpg"alt=,','><divclass=,text',><h4>天水樱桃<h4><div><pCIaSS="before"现价¥1OO5OOg<p><pCIa
