510.精品商城网页大学生期末大作业 Web前端网页制作 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/142665408

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

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

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

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

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

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、三级页面、下拉菜单、搜索、注册、登录等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含8个页面：

三、网页效果

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

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百尚饰品零售批发商城</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/iconfont/RjdaoIcon.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
   $("img").delayLoading({
       defaultImg: "images/ptu-loading.gif", // 预加载前显示的图片
       errorImg: "", // 读取图片错误时替换图片(默认：与defaultImg一样)
       imgSrcAttr: "originalSrc", // 记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc)
       beforehand: 0, // 预先提前多少像素加载图片(默认：0)
       event: "scroll", // 触发加载图片事件(默认：scroll)
       duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"
       container: window, // 对象加载的位置容器(默认：window)
       success: function (imgObj) { }, // 加载图片成功后的回调函数(默认：不执行任何操作)
       error: function (imgObj) { } // 加载图片失败后的回调函数(默认：不执行任何操作)
   });
});
</script>
<script type="text/javascript">
$(function(){
   var count = 0;
   var $li = $("#por-slider>ul>li");
   $(".next").click(function(){
       count++;
       if(count == $li.length){
           count =0;
       }
       $li.eq(count).fadeIn().siblings().fadeOut();
       $(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
       console.log(count);
   });
   $(".prve").click(function(){
       count--;
       if(count == -1){
           count = $li.length-1;
       }
       console.log(count);
       $li.eq(count).fadeIn().siblings().fadeOut();
       $(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
   });
   $(".slider_icon i").mouseenter(function(){
       $(this).addClass('btn_act').siblings().removeClass("btn_act");
       $li.eq($(this).index()).fadeIn().siblings().fadeOut();
       count = $(this).index();
   });
});
</script>

</head>
<body>

<div class="topnav">
   <div class="con">
   <div class="txt">欢迎您来到百尚饰品零售和批发商城！</div>
<ul class="rightnav">
   <li>
   <a href="login.html" class="m"><i class="icon-0119 ic"></i><span>登录</span><i class="icon-0232 jt"></i></a>
<div class="navlist">
   <a href="user-index.html">个人中心</a>
<a href="user-order.html">我的订单</a>
<a href="user-collection.html">我的收藏</a>
<a href="">注销用户</a>
</div>
</li>
<li><a href="register.html" class="m"><span>注册</span></a></li>
<li><a href="" class="m"><i class="icon-0145 ic"></i><span>问答</span></a></li>
<li>
   <a href="" class="m"><span>快速导航</span><i class="icon-0232 jt"></i></a>
<div class="navlist">
   <a href="">批发商中心</a>
<a href="">零售用户</a>
<a href="">招兵买马</a>
<a href="">法律声明</a>
<a href="">支付方式</a>
<a href="">物流说明</a>
</div>
</li>
</ul>
</div>
</div>

<header>
   <div class="mainso">
   <div class="logo">
</div>

<div class="search-t">
   <div class="soo">
   <input type="text" name="key" class="inkey" placeholder="请输商品入关键词" autocomplete="off">
<input type="submit" class="sobut" value="搜索">
</div>
<div class="soci">
   <a href="goods-list.html">女款包包</a>
<a href="goods-list.html">脚链</a>
<a href="goods-list.html">新款包</a>
<a href="goods-list.html">太阳眼镜</a>
<a href="goods-list.html">女款包包</a>
</div>
</div>

<div class="rightc">
   <a href="user-collection.html" class="colle" title="我的收藏"><i class="icon-0352"></i><em>18</em></a>
<a href="user-cart.html" class="shopcart">
   <i class="icon-0494"></i>
<span>我的购物车</span>
<em>当前购物车数据：<strong>262</strong></em>
</a>
</div>

</div>
   <nav class="mainnav">
   <ul>
   <li class="mli l"><a href="index.html" class="mz">首页</a></li>
<li class="mli l">
   <a href="goods-list.html" class="mz"><span>快速导航</span><i class="icon-0220"></i></a>
<div class="dsunav">
   
   <div class="seasonnav">
   <a href="goods-list.html" class="c">春</a>
<a href="goods-list.html" class="x">夏</a>
<a href="goods-list.html" class="q">秋</a>
<a href="goods-list.html" class="d">冬</a>
</div>

<div class="middlenav">
   <div class="lei1">
   <a href="" class="t1">新品专区</a>
<a href="" class="t2">推荐商品</a>
</div>
<div class="lei2">
   <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>
<a href="">新品专区</a>
<a href="">新品专区</a>
<a href="">新品专区</a>
</div>
<div class="lei3">
   <a href="">新品专区</a>
<a href="">新品专区</a>
<a href="">新品专区</a>
<a href="">新品专区</a>
<a href="">新品专区</a>
<a href="">新品专区</a>
<a href="">新品专区</a>
</div>
</div>


</div>
</li>
<li class="mli l"><a href="goods-new.html" class="mz">新品区</a></li>
<li class="mli l"><a href="goods-recommend.html" class="mz">推荐商品</a></li>
<li class="mli l"><a href="wenti.html" class="mz">常见问题</a></li>
<li class="mli l"><a href="news.html" class="mz">相关资讯</a></li>
<li class="mli r"><a href="about.html" class="bian">关于我们</a></li>
<li class="mli r"><a href="kefu.html" class="bian">客服</a></li>
</ul>
   </nav>
</header>

...

2.CSS

代码如下（节选示例）：

/*
主颜色：#fa5555
*/
@charset "utf-8";
/* CSS Document */
*{
   margin:0;padding:0;
   list-style: none;
   text-align: none;
   font-size: 12px;
   color: #4d4d4d;
   font-family:"微软雅黑";
   text-decoration: none;
   font-weight: normal;
   outline: none ;
}
html{
font-size:62.5%;/*10÷16=62.5%*/
height:100%;
}
body{
   margin:0;padding:0;
   background-color:#fff;
   font-size:1.2rem ; /*12px÷10=1.2rem*/
   height:100%;
   font-family:'microsoft yahei';
   min-width:1180px;
}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
.l{float:left;}
.r{float:right;}
.txtcenter{text-align:center;}
.cu{font-weight: bold;}
li{list-style-type:none;}
em{font-style:normal}
.block{display:block;}
.none{display:none;}

/*TOP*/
.topnav{
   width:100%;
   height:38px;
   background-image: url(img/top_bj.jpg);
}
.topnav .con{
   width:1180px;
   height:38px;
   margin:0 auto;
}
.topnav .con .txt{
   display:block;
   float:left;
   height:38px;
   font:12px/38px 'microsoft yahei';
   color:#666;
}
.topnav .rightnav{
   display:block;
   float:right;
   height:38px;
}
.topnav .rightnav li{
   display:block;
   height:38px;
   float:left;
   position:relative;
   transition-duration:0.2s;
}
.topnav .rightnav li:hover{
   background-color:#e5e5e5;
}
.topnav .rightnav li .m{
   display:block;
   padding:0 15px;
   font:14px/37px 'microsoft yahei';
   color:#666;
}

.topnav .rightnav li .m span{
   display:block;
   font:14px/37px 'microsoft yahei';
   float:left;
}
.topnav .rightnav li .m .jt{
   display:block;
   font:12px/36px 'microsoft yahei';
   float:left;
   margin-left:6px;
   transition-duration:0.2s;
}
.topnav .rightnav li:hover .m .jt{
   color:#666;
   font:12px/44px 'microsoft yahei';
}
.topnav .rightnav li .m .ic{
   display:block;
   font:18px/36px 'microsoft yahei';
   float:left;
   margin-right:6px;
   transition-duration:0.2s;
}
.topnav .rightnav li:hover .m .ic{
   color:#333;
}
.topnav .rightnav li .navlist{
   display:block;
   width:104px;
   height:0px;
   position:absolute;
   top:38px;
   right:0;

   transition-duration:0.4s;
   background-color:#e5e5e5;
   z-index:9998;
   overflow:hidden;
}
.topnav .rightnav li:hover .navlist{
   height:auto;padding:6px 0;
}
.topnav .rightnav li .navlist a{
   display:block;
   width:104px;
   height:32px;
   font:13px/32px 'microsoft yahei';
   color:#666;
   text-align:center;
   transition-duration:0.2s;
}
.topnav .rightnav li .navlist a:hover{
   background-color:#efeded;
}

...

3.JS

代码如下（节选示例）：

(function( window, undefined ) {
"use strict";
var
// A central reference to the root jQuery(document)
rootjQuery,

// The deferred used on DOM ready
readyList,

   // Use the correct document accordingly with window argument (sandbox)
   document = window.document,
   location = window.location,

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

// [[Class]] -> type pairs
class2type = {},

// List of deleted data cache ids, so we can reuse them
core_deletedIds = [],

core_version = "1.9.0",

   // Save a reference to some core methods
   core_concat = core_deletedIds.concat,
   core_push = core_deletedIds.push,
   core_slice = core_deletedIds.slice,
   core_indexOf = core_deletedIds.indexOf,
   core_toString = class2type.toString,
   core_hasOwn = class2type.hasOwnProperty,
   core_trim = core_version.trim,

   // Define a local copy of jQuery
   jQuery = function( selector, context ) {
       // The jQuery object is actually just the init constructor 'enhanced'
       return new jQuery.fn.init( selector, context, rootjQuery );
   },

// Used for matching numbers
core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,

// Used for splitting on whitespace
core_rnotwhite = /\S+/g,

// Make sure we trim BOM and NBSP (here's looking at you, Safari 5.0 and IE)
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

   // A simple way to check for HTML strings
   // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
   // Strict HTML recognition (#11290: must start with <)
   rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,

// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,

   // JSON RegExp
   rvalidchars = /^[\],:{}\s]*$/,
   rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
   rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
   rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,

   // Matches dashed string for camelizing
   rmsPrefix = /^-ms-/,
   rdashAlpha = /-([\da-z])/gi,

   // Used by jQuery.camelCase as callback to replace()
   fcamelCase = function( all, letter ) {
       return letter.toUpperCase();
   },

   // The ready event handler and self cleanup method
   DOMContentLoaded = function() {
       if ( document.addEventListener ) {
           document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
           jQuery.ready();
       } else if ( document.readyState === "complete" ) {
           // we're here because readyState === "complete" in oldIE
           // which is good enough for us to call the dom ready!
           document.detachEvent( "onreadystatechange", DOMContentLoaded );
           jQuery.ready();
       }
   };

...