html+css+js网页设计 自定义电商4个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89676471
2，点击上方下载
目录1
项目视频
html+css+js网页设计 自定义电商4个页面
页面1
页面2
页面3
页面4
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link type="text/css" rel="stylesheet" href="style/reset.css" />
<link type="text/css" rel="stylesheet" href="style/main.css" />
<link rel="stylesheet" href="./style/swiper.min.css" />
</head>
<body>
<div class="headerBar">
<div class="topBar">
<div class="comWidth">
<div class="rightArea">欢迎来到网！<a href="./登陆.html">[登录]</a></div>
</div>
</div>
<div class="logoBar">
<div class="comWidth">
<div class="logo fl"></div>
<div class="search_box fl">
<input type="text" class="search_text fl" />
<input type="button" value="搜 索" class="search_btn fr" />
</div>
<div class="shopCar fr">
<span class="shopText fl">购物车</span>
<span class="shopNum fl">0</span>
</div>
</div>
</div>
<div class="navBox">
<div class="comWidth clearfix">
<div class="shopClass fl">
<h3>全部商品分类<i class="shopClass_icon"></i></h3>
<div class="shopClass_show">
<dl class="shopClass_item">
<dt><a href="./list.html" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
<dl class="shopClass_item">
<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
</dl>
</div>
<div class="shopClass_list hide">
<div class="shopClass_cont">
<dl class="shopList_item">
<dt>电脑装机</dt>
<dd><a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a></dd>
</dl>
<dl class="shopList_item">
<dt>电脑装机</dt>
<dd>
<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a
><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a>
</dd>
</dl>
<dl class="shopList_item">
<dt>电脑装机</dt>
<dd>
<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a
><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a>
</dd>
</dl>
<dl class="shopList_item">
<dt>电脑装机</dt>
<dd>
<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a
><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a>
</dd>
</dl>
<dl class="shopList_item">
<dt>电脑装机</dt>
<dd>
<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a
><a href="#">文字字啊</a><a href="#">文字字字啊</a><a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a><a href="#">文字啊</a>
</dd>
</dl>
<div class="shopList_links">
<a href="#">文字测试内容等等<span></span></a><a href="#">文字容等等<span></span></a>
</div>
</div>
</div>
</div>
<ul class="nav fl">
<li><a href="#" class="active">数码城</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>
<div class="banner comWidth clearfix">
<div class="banner_bar banner_big">
<ul class="imgBox">
<li>
<div class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper_item">
<a href="#"><img src="images/banner/banner_01.jpg" alt="banner" /></a>
</div>
<div class="swiper-slide swiper_item">
<a href="#"><img src="images/banner/banner_01.jpg" alt="banner" /></a>
</div>
<div class="swiper-slide swiper_item">
<a href="#"><img src="images/banner/banner_01.jpg" alt="banner" /></a>
</div>
<div class="swiper-slide swiper_item">
<a href="#"><img src="images/banner/banner_01.jpg" alt="banner" /></a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="shopTit comWidth">
<span class="icon"></span>
<h3>家用电脑</h3>
<a href="./list.html" class="more">更多>></a>
</div>
<div class="shopList comWidth clearfix">
<div class="leftArea">
<div class="banner_bar banner_sm">
<ul class="imgBox">
<li>
<a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner" /></a>
</li>
<li>
<a href="#"><img src="images/banner/banner_sm_02.jpg" alt="banner" /></a>
</li>
</ul>
<div class="imgNum"><a href="#" class="active"></a><a href="#"></a><a href="#"></a><a href="#"></a></div>
</div>
</div>
<div class="rightArea">
<div class="shopList_top clearfix">
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="shopList_sm clearfix">
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
</div>
</div>
<div class="shopTit comWidth">
<span class="icon"></span>
<h3>家用电脑</h3>
<a href="./list.html" class="more">更多>></a>
</div>
<div class="shopList comWidth clearfix">
<div class="leftArea">
<div class="banner_bar banner_sm">
<ul class="imgBox">
<li>
<a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner" /></a>
</li>
<li>
<a href="#"><img src="images/banner/banner_sm_02.jpg" alt="banner" /></a>
</li>
</ul>
<div class="imgNum"><a href="#" class="active"></a><a href="#"></a><a href="#"></a><a href="#"></a></div>
</div>
</div>
<div class="rightArea">
<div class="shopList_top clearfix">
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item">
<div class="shop_img">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="shopList_sm clearfix">
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopItem_sm">
<div class="shopItem_smImg">
<a href="#"><img src="images/shopImg.jpg" alt="" /></a>
</div>
<div class="shopItem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
</div>
</div>
<div class="hr_25"></div>
<div class="footer">
<p><a href="#">简介</a><i>|</i><a href="#">公告</a><i>|</i> <a href="#">招纳贤士</a><i>|</i><a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
<p>Copyright © 2006 - 2024 版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="web">
<a href="#"><img src="images/webLogo.jpg" alt="logo" /></a><a href="#"><img src="images/webLogo.jpg" alt="logo" /></a><a href="#"><img src="images/webLogo.jpg" alt="logo" /></a
><a href="#"><img src="images/webLogo.jpg" alt="logo" /></a>
</p>
</div>
</body>
<script src="./js/swiper.min.js"></script>
<script src="./js/index.js"></script>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
