html+css+js网页制作 淘宝首页1个页面带js 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
html+css+js网页制作 淘宝首页1个页面带js 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89634573
2，点击上方下载
目录1
项目视频
html+css+js网页制作 淘宝首页1个页面带js
页面1
代码展示
<body><div class="web-shop"><!-- 头部区域 --><header><div class="container"><ul class="headerul"><li><a href="" class="arrow">中国大陆</a></li><li><a href="" class="orange">亲，请登录</a></li><li><a href="">免费注册</a></li><li><a href="">手机逛淘宝</a></li></ul><ul class="headerul"><li><a href="" class="arrow">我的淘宝</a></li><li><a href="" class="arrow">购物车</a></li><li><a href="">收藏夹</a></li><li><a href="" class="arrow">商品分类</a></li><li><a href="" class="arrow">卖家中心</a></li><li><a href="" class="arrow">联系客服</a></li><li><a href="" class="arrow">网站导航</a></li></ul></div></header><!-- 搜索区域 --><div class="search"><div class="search-logo"><a href="https://www.taobao.com/"></a></div><div class="search-box"><ul class="search-tab"><li><a href="">淘宝</a></li><li><a href="">天猫</a></li><li><a href="">店铺</a></li></ul><form class="search-input"><input type="text" class="box1" name="search" /><button type="submit" class="btn">搜索</button></form><div><ul class="search-choose"><li><a href="">新款连衣裙</a></li><li><a href="">四件套</a></li><li><a href="" class="orange">潮流T恤</a></li><li><a href="">时尚女鞋</a></li><li><a href="">短裤</a></li><li><a href="">半身裙</a></li><li><a href="">男士外套</a></li><li><a href="">墙纸</a></li><li><a href="">新款男鞋</a></li><li><a href="">耳机</a></li></ul></div></div><div class="search-code"><a href=""><img src="./img/jnh.png" /></a></div></div><!-- 导航栏 --><div class="nav"><ul><li class="left-nav"><a>主题市场</a></li><li><a>天猫</a></li><li><a>聚划算</a></li><li style="color: #fff;">|</li><li><a>天猫商城</a></li><li><a>司法拍卖</a></li><li><a>淘宝心选</a></li><li style="color: #fff;">|</li><li><a>飞猪旅行</a></li><li><a>智能生活</a></li><li><a>苏宁易购</a></li></ul></div><!-- 内容区域 --><div class="shop"><!-- 左侧功能条 --><div class="left-items"><ul><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>鞋靴</a>/<a>箱包</a>/<a>配件</a></li><li><a>童装</a>/<a>孕产</a>/<a>玩具</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li><li><a>女装</a>/<a>男装</a>/<a>内衣</a></li></ul></div><!-- 图片展示 --><div class="img-items"><div><img src="./img/tu1.jpg" /><img src="./img/tu2.jpg" /></div><div><img src="./img/tu3.jpg" /><img src="./img/tu4.jpg" /></div></div><!-- 信息展示 --><div class="right-items"><div><img src="./img/hi.png" /></div><div class="shop-btn"><button>登录</button><button>注册</button><button>开店</button></div><div class="right-warn">网上有害信息举报专区</div><div class="right-info"><ul class="info-top"><li><a>公告</a></li><li><a>规则</a></li><li><a>论坛</a></li><li><a>安全</a></li><li><a>公益</a></li></ul><ul class="info-bottom"><li>公益阿里、腾讯等六家公司同台联合做公益</li><li>淘宝造物节之城市秘密、聚划算88红包省钱卡</li></ul></div><div class="right-rechage"><ul><li><a class="icon icon1"></a><p>充话费</p></li><li><a class="icon icon2"></a><p>旅行</p></li><li><a class="icon icon3"></a><p>车险</p></li><li><a class="icon icon4"></a><p>游戏</p></li><li><a class="icon icon1"></a><p>充话费</p></li><li><a class="icon icon2"></a><p>旅行</p></li><li><a class="icon icon3"></a><p>车险</p></li><li><a class="icon icon4"></a><p>游戏</p></li><li><a class="icon icon1"></a><p>充话费</p></li><li><a class="icon icon2"></a><p>旅行</p></li><li><a class="icon icon3"></a><p>车险</p></li><li><a class="icon icon4"></a><p>游戏</p></li><li><a class="icon icon1"></a><p>充话费</p></li><li><a class="icon icon2"></a><p>旅行</p></li><li><a class="icon icon3"></a><p>车险</p></li><li><a class="icon icon4"></a><p>游戏</p></li></ul></div></div></div><!-- 整体中间部分 --><div class="body-2"><div class="item"><div class="title"><img src="./img/body-2-logo-1.jpg" alt="" /><span>与品质生活不期而遇</span></div><div class="content"><div class="content-item"><img src="./img/body-2-baby-1.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-2.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-3.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div></div><div class="content"><div class="content-item"><img src="./img/body-2-baby-1.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-2.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-3.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div></div></div><div class="item"><div class="title"><img src="./img/body-2-logo-1.jpg" alt="" /><span>与品质生活不期而遇</span></div><div class="content"><div class="content-item"><img src="./img/body-2-baby-1.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-2.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-3.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div></div><div class="content"><div class="content-item"><img src="./img/body-2-baby-1.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-2.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div><div class="content-item"><img src="./img/body-2-baby-3.png" alt="" /><p class="desc1">小狗图案不锈钢皂</p><p class="desc2">小狗图案不锈钢皂</p><p class="desc3">13673人说好</p></div></div></div></div><!-- 最后一部分 --><div class="body-3"><h1 class="title-h1"><div class="icon"></div>热卖单品</h1><div class="content"><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-1">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div><div class="item"><img src="./img/body-3-1.png" alt="" /><p class="desc-1">纯棉男女军绿色t恤2018新款宽松韩版初秋长</p><p class="desc-2">评价：17705 收藏：6875</p><p></p></div></div></div><div class="footer"><div class="item"><h2 class="title">消费者保证</h2><div><span>保障范围</span><span>退货退款流程</span><span>服务中心</span><span>更多特色服务</span></div></div><div class="item"><h2 class="title">消费者保证</h2><div><span>保障范围</span><span>退货退款流程</span><span>服务中心</span><span>更多特色服务</span></div></div><div class="item"><h2 class="title">消费者保证</h2><div><span>保障范围</span><span>退货退款流程</span><span>服务中心</span><span>更多特色服务</span></div></div><div class="item"><h2 class="title">消费者保证</h2><div><span>保障范围</span><span>退货退款流程</span><span>服务中心</span><span>更多特色服务</span></div></div></div></div>
</body>```## 总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:### 1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；#### 2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；### 3.整体性好
围绕一个统一的目标设计，强调整体的功能性； ### 4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。### 5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。 更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!更多优质博客文章、网页模板点击以下链接查阅：[html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)[html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)[html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型: