647. 大学生HTML5毕业设计 ―【基于HTML品优购购物商城的设计与实现】 Web前端网页制作 html5+css3+js

原创已于 2024-11-21 12:44:34 修改 · 1.5k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #课程设计 #javascript #html5 #css3 #jquery

于 2024-11-21 12:44:14 首次发布

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

商城

39 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3+js，div+css布局，带购物车，购物车可自动计算商品单价，带论文，代码简单；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含7个页面，带论文：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
</title>

<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="stylesheet" href="./fonts/demo.css">

<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="css/common.css">

<link rel="stylesheet" href="css/index.css">
</head>

<body>

<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="./login.html">请登录</a>   <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> <a href="javascript:;">我的订单</a> </li>
<li></li>
<li> <a href="javascript:;">我的品优购</a> </li>
<li></li>
<li> <a href="javascript:;">品优购会员</a> </li>
<li></li>
<li> <a href="javascript:;">企业采购</a> </li>
<li></li>
<li> <a href="javascript:;">关注品优购</a> </li>
<li></li>
<li> <a href="javascript:;">客户服务</a> </li>
<li></li>
<li> <a href="javascript:;">网站导航</a> </li>
</ul>
</div>
</div>
</section>


<header class="header w">

<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>

<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>

<div class="hotwords">
<a href="javascript:;" class="style_red">优惠购首发</a>
<a href="javascript:;">亿元优惠</a>
<a href="javascript:;">9.9元团购</a>
<a href="javascript:;">美满99减30</a>
<a href="javascript:;">办公用品</a>
<a href="javascript:;">电脑</a>
<a href="javascript:;">通信</a>
</div>

<div class="shopcar">
<a class="iconfont"></a>
<a href="./shap_car.html">我的购物车</a>
<i class="count">2</i>
</div>
</header>


<nav class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li class="iconfont"><a href="javascript:;">家用电器</a> <i></i> </li>
<li class="iconfont"><a class="iphone" href="list.html">手机</a>、 <a class="iph" href="#">数码、通信</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">电脑、办公</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">家居、家具、家装、厨具</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">男装、女装、童装、内衣</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">化妆、清洁，用品、宠物</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">箱包、珠宝、奢侈品</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">运动户外、钟表</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">汽车、汽车用品</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">母婴、玩具乐器</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">食品、酒类、生鲜、特产</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">医药保健</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">图书、音像、电子书</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">彩票、旅行、充值、票务</a> <i></i> </li>
<li class="iconfont"><a href="javascript:;">理财、众筹、白条、保险</a> <i></i> </li>

</ul>
</div>
</div>
<div class="navitems">
<ul>
<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>
<li><a href="#">首饰城</a></li>
</ul>
</div>
</div>
</nav>

...

2.CSS

代码如下（节选示例）：

/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}

.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* tabs */
.nav-tabs {
position: relative;
}

.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}

#tabs {
border-bottom: 1px solid #eee;
}

#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}

#tabs .active {
border-bottom-color: #f00;
color: #222;
}

.tab-container .content {
display: none;
}

/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}

.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}

.main .logo a {
font-size: 160px;
color: #333;
}

.helps {
margin-top: 40px;
}

.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}

.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}

.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}

...