HTML5期末大作业:商城购物网站设计——仿唯品会商城(5页) 纯手写 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


常见网页设计作业题材有 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A+水平作业​​, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!



>>>???? 点击进入???? >>>300例HTML期末大作业源码



1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多?
2.没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。


作品介绍

1.网页作品简介​​ :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。包含:​​主页、购物、登录、注册,详情​​总共5个页面。

2.网页作品编辑​​:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

3.网页作品布局​:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术​:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。


文章目录


一、作品展示

1.首页

HTML5期末大作业:商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript_javascript

2.商品展示

HTML5期末大作业:商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript_html5_02

3.购物详情

HTML5期末大作业:商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript_网页设计_03

4.登录/注册

HTML5期末大作业:商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript_html_04

二、文件目录

HTML5期末大作业:商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript_css_05

三、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../public/reset.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="vipshop">
<div class="nav">
<div class="nav-center">
<div class="nav-center-left">
<a href="#"><div class="nav-center-left-act"><span class="zi">佛山市</span><img src="img/下拉.png"></div></a>
<div class="nav-center-left-pos">
<div>
<div>请选择你所在的收货地区</div><div><div class="img-x"></div></div>
</div>
<div>
<div>省份</div>
</div>
<div class="act">

</div>
</div>
</div>
<ul class="nav-center-right">
<li class="pd posir longin">
<a href="../login/login.html">请登录</a>
<div class="longin-1">
<div>
<div></div>
<div><a href="../login/login.html">你好!请[登录]</a></div>
</div>
<div>
<ul>
<li>我的收藏</li>
<li>零钱</li>
<li>我的唯品币</li>
</ul>
<ul>
<li>我的订单</li>
<li>我的优惠券</li>
<li>唯品金融</li>
</ul>
</div>
</div>
</li>
<li class="gray">/</li>
<li class="pd"><a href="../reg/reg.html">注册</a></li>
<li class="gray">/</li>
<li class="pd posir">
<a href="#"><img class="img-he" src="img/header_sign-hash-0459d02c.gif" >签到有礼</a>
<div class="lw">
<h2>请前往<span href="#">唯品会APP首页</span>签到</h2>
<p>即日起,签到网页端入口将下线,请前往“唯品会APP首页-签到领券”继续参与签到活动。</p>
<img src="img/header_signin-hash-670694db.png" >
<div>
<img src="img/1598435695911.png" >
<div>也可以使用微信扫码签到哦</div>
</div>
</div>
</li>
<li class="gray">/</li>
<li class="pd"><a href="#">我的订单</a></li>
<li class="gray">/</li>
<li class="pd wh posir tmov">
<a href="#">我的特卖<img src="img/下拉.png" ></a>
<ul class="tms1">
<li>商品收藏</li>
<li>品牌收藏</li>
<li>我的足迹</li>
</ul>
</li>
<li class="gray">/</li>
<li class="pd wh posir jlb">
<a href="#">会员俱乐部<img src="img/下拉.png" ></a>
<ul class="jlb1">
<li>俱乐部首页</li>
<li>唯品币兑换</li>
</ul>
</li>
<li class="gray">/</li>
<li class="pd wh posir cusser">
<a href="#">客户服务<img src="img/下拉.png" ></a>
<ul class="cus">
<li>俱乐部首页</li>
<li>唯品币兑换</li>
<li>俱乐部首页</li>
<li>唯品币兑换</li>
<li>俱乐部首页</li>
<li>唯品币兑换</li>
</ul>
</li>
<li class="gray">/</li>
<li class="pd posir phone">
<a href="#"><div class="img-phone"></div>手机版</a>
<div class="phone1">
<img src="img/1466134037230.jpg" >
<h3>随时逛 即时抢</h3>
</div>
</li>
<li class="gray">/</li>
<li class="pd wh posir gd">
<a href="#">更多<img src="img/下拉.png" ></a>
<div class="gd1">
<h4>合作专区</h4>
<span>唯品卡</span>
<div class="xian"></div>
<h4>合作专区</h4>
<div class="list">
<span>Sell on vip</span>
<span>品牌招商</span>
<span>官方博客</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="search">
<div class="search-top">
<div class="search-top-left">
<img src="img/1592278113502.png" >
<img src="img/1587017895494.jpg" >
</div>
<div class="search-m posir">
<input class="in1" type="text" placeholder=" 鑫万福" /><button><img src="img/搜索.png" ></button>
<ul class="s-list">
<li>鑫万福</li>
<li class="ma">|</li>
<li>护肤套装</li>
<li class="ma">|</li>
<li>耐克Nike</li>
<li class="ma">|</li>
<li>斯凯奇SKECHERS</li>
<li class="ma">|</li>
<li>阿迪达斯adidas</li>
</ul>
<div class="s-xl">
<div class="s-xl1">
<h5>搜索历史</h5>
<div></div>
<h5>精选推荐</h5>
</div>
</div>
</div>
<div class="s-right posir">
<div></div>
购物袋
<div>0</div>
<div class="s-r-1">
你的购物袋还没有商品,再去逛逛吧~
</div>
</div>
</div>
<div class="tarbar">
<div class="tarbar-fl posir">
<div class="tab-sh">商品分类</div>
<ul class="tarbar-dh">
<li>女装/男装/内衣
<div class="tarbar-dh-right1">
<div class="dh-left">
<div class="dh-lr">
<div class="dh-left1">人气美衣<span>></span></div>
<div class="dh-left2">
<span>防晒衣</span>
<span>短裤</span>
<span>牛仔裤</span>
<span>妈·妈装</span>
<span>大码女装</span>
<span>外套</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">美裙衣橱<span>></span></div>
<div class="dh-left2">
<span>连衣裙</span>
<span>半身裙</span>
<span>套装裙</span>
<span>修身美裙</span>
<span>白色连衣裙</span>
<span>旗袍</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">百搭上衣<span>></span></div>
<div class="dh-left2">
<span>T恤</span>
<span>衬衫</span>
<span>针织衫</span>
<span>卫衣</span>
<span>羊绒/羊毛衫</span>
<span>毛衣</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">外套<span>></span></div>
<div class="dh-left2">
<span>棉衣</span>
<span>毛呢外套</span>
<span>羽绒服</span>
<span>西装外套</span>
<span>马甲</span>
<span>针织外套</span>
</div>
</div>

<li>母婴童装
<div class="tarbar-dh-right1">
<div class="dh-left">
<div class="dh-lr">
<div class="dh-left1">人气美衣<span>></span></div>
<div class="dh-left2">
<span>防晒衣</span>
<span>短裤</span>
<span>牛仔裤</span>
<span>妈·妈装</span>
<span>大码女装</span>
<span>外套</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">美裙衣橱<span>></span></div>
<div class="dh-left2">
<span>连衣裙</span>
<span>半身裙</span>
<span>套装裙</span>
<span>修身美裙</span>
<span>白色连衣裙</span>
<span>旗袍</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">百搭上衣<span>></span></div>
<div class="dh-left2">
<span>T恤</span>
<span>衬衫</span>
<span>针织衫</span>
<span>卫衣</span>
<span>羊绒/羊毛衫</span>
<span>毛衣</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">外套<span>></span></div>
<div class="dh-left2">
<span>棉衣</span>
<span>毛呢外套</span>
<span>羽绒服</span>
<span>西装外套</span>
<span>马甲</span>
<span>针织外套</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">裤子<span>></span></div>
<div class="dh-left2">
<span>短裤</span>
<span>休闲裤</span>
<span>阔腿裤</span>
<span>打底裤</span>
<span>连体/背带裤</span>
<span>哈伦裤</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">特色服饰<span>></span></div>
<div class="dh-left2">
<span>中/老年女装</span>
<span>大码女装</span>
<span>商城同款</span>
<span>设计师</span>
<span>名族风</span>
<span>礼服/旗袍</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">男式内搭<span>></span></div>
<div class="dh-left2">
<span>短袖T恤</span>
<span>长袖T恤</span>
<span>Polo衫</span>
<span>衬衫</span>
<span>短袖衬衫</span>
<span>长袖衬衫</span>
<span>薄衬衫</span>
<span>V领T恤</span>
<span>条纹T恤</span>
<span>纯色T恤</span>
<span>印花T恤</span>
<span>纯色衬衫</span>
<span>格子衬衫</span>
<span>商务衬衫</span>
<span>薄款卫衣</span>
<span>连帽卫衣</span>
<span>套头卫衣</span>
<span>卫衣</span>
<span>针织衫</span>
<span>加绒卫衣</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">男式外套<span>></span></div>
<div class="dh-left2">
<span>西装</span>
<span>风衣</span>
<span>马甲/背心</span>
<span>套装</span>
<span>皮肤衣</span>
<span>牛仔外套</span>
<span>老人马甲</span>
<span>棒球服</span>
<span>薄外套</span>
<span>外套</span>
<span>皮衣</span>
<span>厚外套</span>
<span>棉衣</span>
<span>大衣</span>
<span>短款外套</span>
<span>厚羽绒</span>
<span>中长款外套</span>
<span>夹克外套</span>
<span>针织外套</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">男式裤装<span>></span></div>
<div class="dh-left2">
<span>休闲裤</span>
<span>牛仔裤</span>
<span>短裤</span>
<span>西裤</span>
<span>运动裤</span>
<span>工装裤</span>
<span>束腿裤</span>
<span>小腿裤</span>
<span>九分裤</span>
<span>长裤</span>
<span>哈伦裤</span>
</div>
</div>
<div class="dh-lr">
<div class="dh-left1">男式特色服饰<span>></span></div>
<div class="dh-left2">
<span>爸爸装</span>
<span>运动着装</span>
<span>街头潮流</span>
<span>中国风</span>
<span>职场精英</span>
<span>大码</span>
<span>迷彩风</span>
<span>时尚休闲</span>
</div>
</div>

<div class="foot4">
Copyright © 2008-2021 vip.com,All Rights Reserved
使用本网站即表示接受 <a href="#">唯品会用户协议</a>。版权所有 <a href="#">广州唯品会电子商务有限公司</a><br>
<img src="image/list/police_icon.png" >
<a href="#">粤公网安备 44010302111111号</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">粤ICP备08114786号</a>&nbsp;
<a href="#">增值业务经营许可证:粤B2-20170777</a>&nbsp;
<a href="#">网络文化经营许可证:粤网文〔2018〕5030-1743号</a><br>
<a href="#">经营主体证照</a>&nbsp;&nbsp;&nbsp;
<a href="#">风险监测信息</a>
<a href="#">互联网药品信息服务资格证书:(粤)-经营性-2018-0271</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">网络食品交易第三方平台备案凭证:粤B2-20170777</a>&nbsp;
<a href="#">医疗器械网络交易服务第三方平台备案</a><br>
<a href="#">凭证:(粤)网械平台备字[2019]第00001号</a>&nbsp;
出版物网络交易平台服务经营备案证:粤新出网备(2021)1号&nbsp;&nbsp;
<a href="#">未成年人关怀专区</a><br>
违法和不良信息举报电话:4006789888;举报邮箱:<a href="#">privacy@vipshop.com</a>
</div>
<div class="foot-img clearfix">
<div class="XG XG1 fl"></div>
<img class="fl" src="image/list/footer_no_good-hash-1fe63524.png" >
<div class="XG XG2 fl"></div>
<div class="XG XG3 fl"></div>
<div class="XG XG4 fl"></div>
<div class="XG XG5 fl"></div>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>





六、更多源码

​????作者博客主页​

​???? 320套HTML期末大作业演示地址​

​???? 150套echarts大数据演示地址​

​????100款告白源码地址​