web前端期末大作业——仿天猫在线商城(9页面) HTML+CSS+JavaScript 网页设计实例 企业网站制作
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介方面：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：登录、注册、主页、列表页、详情页等总共 5 个页面html下载。
2.网页作品编辑方面：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm所有编辑器均可使用)
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
web前端期末大作业——仿天猫在线商城(9页面) HTML+CSS+JavaScript 网页设计实例 企业网站制作作品介绍一、作品演示 1.首页2.商品设计3.会员4.详情5. 分类二、代码目录三、代码实现四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)五、源码获取六、更多HTML期末大作业(成品下载) >>>戳我>>>点击进入200例期末大作业作品1.首页
2.商品设计
3.会员
4.详情
5. 分类
二、代码目录 三、代码实现<!DOCTYPE html><html><head><title>国内品牌珠宝商荟萃--金银猫CSmall</title><meta name="keywords" content="{$metaKeywords}" /><meta name="description" content="{$metaDesc}" /> <meta content="IE=edge" http-equiv="X-UA-Compatible"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="Bookmark" href="favicon.ico"><link rel="Shortcut Icon" href="favicon.ico"><script src="/jQuery-1.7.1.min.js" type="text/javascript"></script><script charset="utf-8" src="/jquery.qrcode.min.js" type="text/javascript"></script><script charset="utf-8" src="../api/smallslider/rs/js/jquery.smallslider.js" type="text/javascript"></script><link type="text/css" rel="stylesheet" href="../css/common.css"><link type="text/css" rel="stylesheet" href="../css/brand.css"><link type="text/css" rel="stylesheet" href="../api/smallslider/rs/css/smallslider.css"></head><body><div class="topbar"><div class="wrap iconlist"><div class="memberbox width-6">嗨！欢迎来到金猫银猫 <a href="#">请登录</a> <a href="#">免费注册</a> </div><div class="width-6"><a href="#"><i class="icon_heart icon_topbar"></i>我关注的品牌</a><a href="#">金猫银猫会员</a><a href="#"><i class="icon_shopcart icon_topbar"></i>购物车<span id="shopcart_count">0</span>件</a><span class="fav">收藏夹<i class="icon icon_dropdown"></i></span> | <span><i class="icon_phone icon_topbar"></i>手机版</span><span class="fav">商家支持<i class="icon icon_dropdown"></i></span><span class="fav"><i class="icon_shopcart icon_topbar"></i>网站导航<i class="icon icon_dropdown"></i></span></div></div> </div><div id="header"><div class="logobar wrap"><a href="../" title="返回首页" class="logo_brand"></a></div></div><div class="brand_nav"><div class="wrap"> <a href="/"><i class="icon icon_back"></i>返回首页</a><a href="#" class="right">我关注的品牌</a></div></div><div style="clear:both"></div><div id="mainer"><div id="flashbox" class="smallslider"><ul><li style="background: url(../pic/banner_06.jpg) center"><a href="#" target="_blank"></a></li></ul></div><div class="brand_hang hang1"> <div class="wrap"><div class="bigbrand left"><div class="t t1_1"></div><div class="c"><a href="{$value.href}" target="_blank" class="pic"><img src="../pic/brand-01.png" alt="{$value.title}"/></a> <div class="desc"></div></div><div class="shaow"></div></div><div class="weedbrand left"><div class="t t1_2"></div><div class="c"><a href="{$value.href}" target="_blank" class="w w1"><img src="../pic/brand-11.jpg" alt="{$value.title}"/></a> <a href="{$value.href}" target="_blank" class="w w2"><img src="../pic/brand-09.jpg" alt="{$value.title}"/></a> <a href="{$value.href}" target="_blank" class="w w3"><img src="../pic/brand-10.jpg" alt="{$value.title}"/></a> <div class="clear"></div></div><div class="shaow"></div></div></div><div class="clear"></div></div> <div class="brand_hang hang2"> <div class="wrap"><div class="t t2"></div><div class="c"><ul><li><a class="brand_logo"><img src="../pic/brand (1).jpg"></a> <a class="brand_logo"><img src="../pic/brand (2).jpg"></a> <a class="brand_logo"><img src="../pic/brand (3).jpg"></a> <a class="brand_logo"><img src="../pic/brand (4).jpg"></a> <a class="brand_logo"><img src="../pic/brand (5).jpg"></a> <a class="brand_logo"><img src="../pic/brand (6).jpg"></a> <a class="brand_logo"><img src="../pic/brand (7).jpg"></a> <a class="brand_logo"><img src="../pic/brand (8).jpg"></a> <a class="brand_logo"><img src="../pic/brand (9).jpg"></a> <a class="brand_logo"><img src="../pic/brand (10).jpg"></a> <a class="brand_logo"><img src="../pic/brand (11).jpg"></a> <a class="brand_logo"><img src="../pic/brand (1).jpg"></a> <a class="brand_logo"><img src="../pic/brand (2).jpg"></a> <a class="brand_logo"><img src="../pic/brand (3).jpg"></a> <a class="brand_logo"><img src="../pic/brand (4).jpg"></a> <a class="brand_logo"><img src="../pic/brand (5).jpg"></a> <a class="brand_logo"><img src="../pic/brand (6).jpg"></a> <a class="brand_logo"><img src="../pic/brand (7).jpg"></a> <a class="brand_logo"><img src="../pic/brand (8).jpg"></a> <a class="brand_logo"><img src="../pic/brand (9).jpg"></a> <a class="brand_logo"><img src="../pic/brand (10).jpg"></a> <a class="brand_logo"><img src="../pic/brand (11).jpg"></a> </li></ul></div><div class="shaow"></div><div class="clear"></div> </div></div><div class="brand_hang hang3"> <div class="wrap"><div class="t t3"></div><div class="c"><div class="left tvbox"><div><img src="../pic/brand_17.jpg" width="800"></div></div><div class="left tigger"> <div class="cur"><p class="small"> <a class="pic"><img src="../pic/brand_17.jpg" height="100" width="100"></a><a class="title">尊贵，不惜一切代价</a></p><p class="big"><i class="jiao"></i><a class="title">尊贵，不惜一切代价</a><br>1956年雅诗兰黛夫人以115美金的价格推出“天价面霜”奢宠白金系列撼世而生，单独研发，单独生产，单独罐装，开启奢华护肤潮流。</p></div><div><p class="small"> <a class="pic"><img src="../pic/brand_17.jpg" height="100" width="100"></a><a class="title">尊贵，不惜一切代价</a></p><p class="big"><i class="jiao"></i><a class="title">尊贵，不惜一切代价</a>1956年雅诗兰黛夫人以115美金的价格推出“天价面霜”奢宠白金系列撼世而生，单独研发，单独生产，单独罐装，开启奢华护肤潮流。</p></div> <div><p class="small"> <a class="pic"><img src="../pic/brand_17.jpg" height="100" width="100"></a><a class="title">尊贵，不惜一切代价</a></p><p class="big"><i class="jiao"></i><a class="title">尊贵，不惜一切代价</a>1956年雅诗兰黛夫人以115美金的价格推出“天价面霜”奢宠白金系列撼世而生，单独研发，单独生产，单独罐装，开启奢华护肤潮流。</p></div> </div><div class="clear"></div> </div></div><div class="clear"></div> </div><div class="brand_hang hang4"> <div class="wrap"><div class="t t4"></div><div class="c"><ul> <li><a class="big">天然珍珠荟聚汇</a> </li><li class="big"> <a>买金砖才购任性</a> </li><li class="black"> <a>时尚简约风</a> </li><li class="black"> <a>尊贵奢华的体验</a> </li><li class="black"> <a >鸽红血</a> </li> <li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.146.yQNxFK&cat=50031563&q=%BE%ED%C7%CC%BD%DE%C3%AB%B8%E0&prop=413:900001431&sort=s&style=g&from=sn_1_xuangou-qp&suggest=0_5#J_crumbs" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.146"><span>大号睫毛才会赢</span></a></li><li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.147.yQNxFK&start_price=700&promo=49218&search_condition=50&sort=s&style=g&from=.list.pc_1_suggest&suggest=0_3&q=%B9%FD%CF%A5%B3%A4%D1%A5%D5%E6%C6%A4%C5%AE%D1%A5&shopType=any" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.147"><span>过膝长靴站得稳</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.148.yQNxFK&cat=5397&q=%BC%F2%D4%BC++%C1%AC%D2%C2%C8%B9+ol++%C5%B7%C3%C0&sort=s&style=g&search_condition=48&from=sn_1_cat-qp&promo=49218&shopType=any&industryCatId=50025135&type=pc" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.148"><span>极简工装裙</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.149.yQNxFK&q=%C6%A4%B2%DD+%C0%D7%B7%E6%C3%B1&type=p&from=.list.pc_1_searchbutton" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.149"><span>雷锋帽又回来啦</span></a></li><li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.150.yQNxFK&promo=49218&new=1&search_condition=48&sort=s&style=g&from=rs_1_key-top-s&q=%C3%AB%C4%D8%CE%F7%D7%B0%CD%E2%CC%D7%C4%D0&shopType=any >" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.150"><span>毛呢西服</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.151.yQNxFK&q=%B4%D6%B0%F4%D5%EB%D5%EB%D6%AF%C9%C0+%C5%AE&type=p&vmarket=&from=mallfp..pc_1_searchbutton" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.151"><span>静谧针织</span></a></li><li class=" "><a href="/search_product.htm?spm=a3200.2192433.1998232410.152.yQNxFK&cat=50026329&q=%BE%FC%C2%CC++%BC%D0%BF%CB++%C4%D0&prop=122216608:3267959&start_price=300&sort=s&style=g&search_condition=52&from=sn_1_prop&active=1&promo=49218&shopType=any&industryCatId=50026329&type=pc" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.152"><span>军工拜物教</span></a></li><li class=" big1 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.153.yQNxFK&start_price=200&promo=49218&search_condition=52&cat=50025135&prop=18073285%3A28105&sort=s&style=g&from=sn_1_xuangou-qp&suggest=0_1&q=%C7%A7%C4%F1%B8%F1&shopType=any#J_crumbs >" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.153"><span>千鸟格</span></a></li><li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.154.yQNxFK&sort=s&style=g&from=sn_1_prop-qp&suggest=0_1&q=%C6%A4%B2%DD%C5%AE%BF%EE%D0%C2%BF%EE&cat=50064676&brand=93024392%2C3920398%2C302212446%2C78273583%2C103765154%2C152602803%2C669946261%2C307428404%2C28043353%2C115857111%2C157950559%2C649586776%2C26559%2C326242392%2C346388519%2C669776838%2C125937842%2C657900989%2C17976498%2C277552191%2C643236502%2C311020839%2C29756541%2C146248988%2C287320566%2C661824202%2C3255803%2C180216353%2C99892402%2C195934476%2C31397106%2C587284600%2C685104615%2C98163481%2C299472044%2C189364880%2C118000511%2C121874917%2C3236988%2C307706460%2C592120556%2C9240449%2C126063797%2C11130165%2C288404679&prop=2917380%3A3226292#J_crumbs" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.154"><span>毛茸茸多fancy!</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.155.yQNxFK&style=g&from=rs_1_key-top-s&q=%BE%C6%BA%EC%C9%AB%CD%E2%CC%D7+%C5%AE" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.155"><span>据说明年流行“猪肝红”</span></a></li><li class=" "><a href="/search_product.htm?spm=a3200.2192433.1998232410.156.yQNxFK&from=.list.buffett&start_price=10000&promo=49218&search_condition=48&sort=s&style=g&q=%CD%F3%B1%ED++%C4%D0&shopType=any" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.156"><span>手腕存在感</span></a></li><li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.157.yQNxFK&start_price=800&search_condition=48&sort=new&style=g&from=.list.pc_1_searchbutton&q=%B4%BF%C9%AB+%D5%EB%D6%AF%C9%C0+%C5%AE&shopType=any#J_Filter" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.157"><span>基本款再升级</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.158.yQNxFK&cat=50025174&q=%D5%EB%D6%AF+%C3%D7%C9%AB&prop=122216608:3267959;122216515:29535&start_price=200&sort=s&style=g&search_condition=48&from=sn_1_prop&promo=49218&shopType=any&industryCatId=50025174&type=pc" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.158"><span>暖心针织衫</span></a></li><li class=" "><a href="/search_product.htm?spm=a3200.2192433.1998232410.159.yQNxFK&cat=50026259&q=%CE%FB%B9%FE%BF%E3&sort=s&style=g&from=sn_1_cat-qp&suggest=0_1&promo=49218#J_crumbs >" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.159"><span>复古黑泡泡</span></a></li><li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.160.yQNxFK&from=.list.buffett&promo=49218&search_condition=48&sort=s&style=g&q=%B5%A4%C4%FE+%C5%A3%D7%D0&shopType=any" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.160"><span>牛仔还是很忙的</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.161.yQNxFK&cat=52260007&prop=122216349:29967&sort=s&style=g&search_condition=23&from=sn_1_prop&industryCatId=52810004#J_crumbs" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.161"><span>再冷都要穿连衣裙</span></a></li><li class=" black "><a href="/search_product.htm?spm=a3200.2192433.1998232410.162.yQNxFK&q=%B2%A8%C6%D5&prop=413:900000125&sort=s&style=g&from=sn_1_xuangou-qp#J_crumbs" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.162"><span>俏皮波普</span></a></li><li class=" "><a href="/search_product.htm?spm=a3200.2192433.1998232410.163.yQNxFK&promo=49218&search_condition=48&sort=s&style=g&from=.list.pc_1_suggest&suggest=0_1&q=%BF%ED%CB%C9%BC%EB%D0%CD%C3%AB%C4%D8%B4%F3%D2%C2&shopType=any >" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.163"><span>廓型大衣</span></a></li><li class=" "><a href="/search_product.htm?spm=a3200.2192433.1998232410.164.yQNxFK&promo=49218&search_condition=48&sort=s&sty le=g&from=.list.pc_1_searchbutton&q=%BC%E2%CD%B7%D0%AC%20%C5%AE%20%B8%DF%B8%FA%CF%B8%20%D2%F8%C9%AB&shopType=any>" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.164"><span>街拍高跟鞋</span></a></li><li class=" big2 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.165.yQNxFK&q=%B0%F4%D5%EB%C3%AB%D2%C2&sort=s&style=g&from=.list.pc_1_suggest&suggest=0_1&promo=49218&type=pc" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.165"><span>粗棒针</span></a></li><li class=" big1 "><a href="/search_product.htm?spm=a3200.2192433.1998232410.166.yQNxFK&start_price=100&search_condition=48&cat=50026391&sort=new&style=g&from=.list.pc_1_searchbutton&q=%B4%BD%B2%CA+%B1%A3%CA%AA+%D7%CC%C8%F3&shopType=any#J_Filter" target="_blank" data-spm-anchor-id="a3200.2192433.1998232410.166"><span>美唇行动</span></a></li></ul><div class="clear"></div> </div><div class="shaow"></div><div class="clear"></div> </div></div><div class="brand_hang hang5"> <div class="wrap"><div class="t t5"></div> <a class="left" href="{$value.href}" target="_blank"><img src="../pic/banner (18).jpg" alt="{$value.title}"/></a> <a class="right" href="{$value.href}" target="_blank" ><img src="../pic/banner (19).jpg" alt="{$value.title}"/></a> <div class="c"><div class="news_box"><div class="title1"></div><div class="title2"></div> <div class="desc"></div></div><div class="news_pic"><a class="width-3"><img src="../pic/banner (20).jpg" alt="{$value.title}"/></a> <a class="width-3"><img src="../pic/banner (21).jpg" alt="{$value.title}"/></a> <a class="width-3"><img src="../pic/banner (22).jpg" alt="{$value.title}"/></a> <a class="width-3"><img src="../pic/banner (23).jpg" alt="{$value.title}"/></a> </div><div class="clear"></div></div></div></div> <div class="brand_hang hang6"> <div class="wrap"><div class="t t6"><i></i><div class="line"></div><a class="more"></a></div> <div class="c"><div class="big"><a class="pic"><img src="../pic/brand-07.jpg"><p class="shaow"><span class="title1">柔情似水</span><br>新春潮流风尚<br><i></i><span class="view">495</span></p></a><div class="desc"> <a class="brand_logo"><img src="../pic/brand (1).jpg"></a><br><a class="addfav"><i></i>关注</a></div></div><div class="small"><a class="pic"><img src="../pic/brand-02.jpg"></a><div class="desc"><a class="brand_logo"><img src="../pic/brand (2).jpg"></a><a class="addfav right"><i></i>关注</a></div> </div> <div class="small"><a class="pic"><img src="../pic/brand-03.jpg"></a><div class="desc"><a class="brand_logo"><img src="../pic/brand (3).jpg"></a><a class="addfav right"><i></i>关注</a></div> </div> <div class="small"><a class="pic"><img src="../pic/brand-04.jpg"></a><div class="desc"><a class="brand_logo"><img src="../pic/brand (4).jpg"></a><a class="addfav right"><i></i>关注</a></div> </div> <div class="small"><a class="pic"><img src="../pic/brand-05.jpg"></a><div class="desc"><a class="brand_logo"><img src="../pic/brand (5).jpg"></a><a class="addfav right"><i></i>关注</a></div> </div> <div class="small"><a class="pic"><img src="../pic/brand-06.jpg"></a><div class="desc"><a class="brand_logo"><img src="../pic/brand (6).jpg"></a><a class="addfav right"><i></i>关注</a></div> </div> <div class="small"><a class="pic"><img src="../pic/brand-08.jpg"></a><div class="desc"><a class="brand_logo"><img src="../pic/brand (7).jpg"></a><a class="addfav right"><i></i>关注</a></div> </div> </div></div><div class="clear"></div></div> <div class="clear"></div></div><div id="footer" ><div class="wrap"> <div class="line"></div><div class="help"><dl class="width-2"> <dt>购物指南</dt> <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd> <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd> </dl> <dl class="width-2"> <dt>购物保障</dt> <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd> <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd> </dl> <dl class="width-2"> <dt>售后服务</dt> <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd> <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd> </dl> <dl class="width-2"> <dt>关于我们</dt> <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd> <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd> </dl> <dl class="width-4"> <dt>手机上金猫银猫</dt> <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd> <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd> </dl> <div style="clear:both"></div></div><!-- help --></div><!-- copyright --><div class="copyright"><p class="copy wrap"><a href="#">关于金猫银猫</a><a href="#">帮助中心</a><a href="#">诚聘英才</a><a href="#">联系我们</a><a href="#">网站合作</a><a href="#">法律声明</a><a href="#">廉政举报</a><br><a href="#">京东商城</a> |<a href="#">中国白银网</a> |<a href="#">央视网</a> |<a href="#">1号店</a> |<a href="#">京东商城</a> |<a href="#">中国白银网</a> |<a href="#">央视网</a> |<a href="#">1号店</a> <br><a href="/help.do?page=help_help_icp" target="_blank" >中国增值电信业务经营许可证 B2-0169号</a><span style="line-height:1.5;"> | ©深圳银瑞吉文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span> <span class="powerby">技术支持：<a href="/" target="_blank" title="广东井田云科技有限公司">井田云</a><br><a href="/info?sn=131141223010513021410" target="_blank"><img src="/images/cert/bottom_small_img.png" alt="实名认证" title="实名认证"></a></span></p></div><div class="clear"></div></div><script></body></html>
web前端期末大作业——仿天猫在线商城(9页面) HTML+CSS+JavaScript 网页设计实例 企业网站制作...
