803. 大学生HTML5期末大作业 ―【仿天猫商城网页(9页)】 Web前端网页制作 html5+css3+js

最新推荐文章于 2025-05-14 14:41:23 发布

仙女网页制作

最新推荐文章于 2025-05-14 14:41:23 发布

阅读量868

点赞数 14

分类专栏： Web网页设计实例商城文章标签：前端 html 课程设计 html5 css3 javascript jquery

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

版权

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

797 篇文章

订阅专栏

商城

36 篇文章

订阅专栏

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

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

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

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

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

一、网页概述

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

二、网页文件

本网页共包含9个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<title>金银猫CSmall金银珠宝首饰在线交易平台--金银猫CSmall</title>
<meta name="keywords" content="{$metaKeywords}" />
<meta name="description" content="{$metaDesc}" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Bookmark" href="favicon.ico">
<link rel="Shortcut Icon" href="favicon.ico">

</head>
<body>

<div class="topbar">
<div class="wrap iconlist">
<div class="memberbox width-6">嗨！欢迎来到金猫银猫 <a href="#">请登录</a> <a href="#">免费注册</a> </div>
<div class="width-6">
<a href="#"><i class="icon_heart icon_topbar"></i>我关注的品牌</a>
<a href="#">金猫银猫会员</a>
<a href="#"><i class="icon_shopcart icon_topbar"></i>购物车<span id="shopcart_count">0</span>件</a>
<span class="fav">收藏夹<i class="icon icon_dropdown"></i></span> |
<span><i class="icon_phone icon_topbar"></i>手机版</span>
<span class="fav">商家支持<i class="icon icon_dropdown"></i></span>
<span class="fav"><i class="icon_shopcart icon_topbar"></i>网站导航<i class="icon icon_dropdown"></i></span>
</div>

</div>
</div>

(function () {

$('.navbar-toggle').click(function () {
var nav = $('.navMobile');
if (nav.is(':visible')) {
nav.slideUp('slow');
} else {
nav.slideDown('slow');
}
});

})();

</script>

<div id="header">
<div class=" wrap">
<div class="logobar width-3">
<a href="../" title="返回首页" class="logo "></a>
</div>
<div id="searchbar" class="width-6">
<form method="get" action="/product/">
<input type="text" name="keywords" class="txt" value="" placeholder="站内搜索"/>
<input type="submit" class="bt" value="搜索"/>
<div class="clear"></div>
</form>
<a href="#">时尚彩宝</a> |
<a href="#">钻石</a> |
<a href="#">时尚搭配</a> |
<a href="#">设计师定制</a> |
<a href="#">珠宝资讯</a> |
<a href="#">贵金属投资</a>
</div>

</div>
</div>
</div>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* 首页样式 */
body{background:#f5f5f5;}
.longBanner {

}
.longBanner a{
height: 100%;
}
#flashbox{ text-align: right; padding-bottom: 57px; overflow: hidden; background:url("../images/index_07.jpg") bottom center no-repeat ; background-size: 100% 55px;}

#flashbox img{ width: 100%;}
.index_hang{margin-bottom: 20px;}

.index_brand .t{ height: 30px; line-height: 20px; padding:0 17% 0 200px; background: url("../images/index_hotBrand.png") no-repeat ; }

.index_brand .t a{ margin: 0 5px; display: inline-block; }
.index_brand .t a.cur{ margin: 0 5px; border-bottom: solid 2px #333;color: #333; font-weight: bold; }

.index_brand .brandfirst{position: relative; overflow: hidden;}
.index_brand .brandfirst .close{ position: absolute; right:0; display: none; font-size: 20px;}
.index_brand .brandfirst .bigbrand{ width: 800px;}
.index_brand .brandfirst .bigbrand a{ display: table-cell; padding-right: 10px;}

.index_brand .brandlist .branditem{ height: 80px; width:16.3%; text-align: center; background: #fff; margin: 1px; float: left; }
.index_brand .brandlist img{ margin-top: 15px;}

.index_brand .brand3 a { display: block;padding: 5px; background: #fff;}

.index_comment .t{ background: url("../images/index_09.gif") no-repeat center; height: 122px;}

.index_comment .c{ border-top: solid 3px #f60;border-right: solid 1px #e8e8e8;}
.index_comment .item{ padding: 15px 15px 5px; border-left: solid 1px #e8e8e8;border-bottom: solid 1px #e8e8e8; }

.index_comment .pic{ margin: 0px 0 10px; }
.index_comment .name{color:#777; margin: 5px 0 5px; }
.index_comment .price{ color:#f60; font-size: 14px; }

.index_comment img{width: 100%;}
.index_pro { background: #fafaf8;}
.index_pro .t{ height: 40px; padding: 20px 10%; text-align: center; color: #fff;}
.index_pro .brand{ background: #fff; padding: 20px; text-align: center;}
.index_pro .brand a{ margin: 5px 0; display: block;}
.index_pro .keyword{padding: 25px;}
.index_pro .keyword a{ float: left; width: 45%; text-align: center; line-height: 30px;}

.index_pro .t .item{ }
.index_pro .t .item i{display: block;height: 30px; width: 26px; margin: 0 auto; background:url("../images/icon_pro_c.gif") no-repeat;}
.index_pro .t .item i.i1{background-position: 0 0;}
.index_pro .t .item i.i2{background-position: 0 -45px;}
.index_pro .t .item i.i3{background-position: 0 -90px;}
.index_pro .t .item i.i4{background-position: 0 -135px;}
.index_pro .t .item i.i5{background-position: 0 -180px;}
.index_pro .t .item i.i6{background-position: 0 -225px;}
.index_pro .t .item i.i7{background-position: 0 -270px;}
.index_pro .t .item i.i8{background-position: 0 -315px;}
.index_pro .list .item{ border-bottom: solid 1px #e8e8e8; line-height: 0; }

.pro1 { border-top:#272d93 solid 3px; }
.pro1 .t{ background: #272d93;}
.pro2 { border-top:#0ccab6 solid 3px; }
.pro2 .t{ background: #0ccab6;}
.pro3 { border-top:#b40cde solid 3px; }
.pro3 .t{ background: #b40cde;}
.pro4 { border-top:#ff6384 solid 3px; }
.pro4 .t{ background: #ff6384;}
.pro5 { border-top:#ff0cbd solid 3px; }
.pro5 .t{ background: #ff0cbd;}
.pro6 { border-top:#ffac0c solid 3px; }
.pro6 .t{ background: #ffac0c;}
.pro7 { border-top:#8d643b solid 3px; }
.pro7 .t{ background: #8d643b;}
.pro8 { border-top:#820c0c solid 3px; }
.pro8 .t{ background: #820c0c;}

.index_special { background: #fff;}
.index_special .t{ margin-bottom: 15px; background: url("../images/index_49.jpg") center no-repeat #fff; height: 130px; border-bottom: solid 1px #222;}

.icon-c i{background: url("../images/icon_c.gif") no-repeat; background-size: 200% auto; display: block; border-radius: 50%; width: 100%;}
.icon-c div{ padding: 8px; text-align: center;}
.icon-c a{transition:none;}
.icon-c a .i1{ background-position: 0 0;}
.icon-c a:hover .i1{ background-position: right 0;}
.icon-c a .i2{ background-position: 0 7%;}
.icon-c a:hover .i2{ background-position: right 7%;}
.icon-c a .i3{ background-position: 0 14%;}
.icon-c a:hover .i3{ background-position: right 14%;}
.icon-c a .i4{ background-position: 0 21%;}
.icon-c a:hover .i4{ background-position: right 21%;}
.icon-c a .i5{ background-position: 0 28%;}
.icon-c a:hover .i5{ background-position: right 28%;}
.icon-c a .i6{ background-position: 0 35%;}
.icon-c a:hover .i6{ background-position: right 35%;}
.icon-c a .i7{ background-position: 0 42%;}
.icon-c a:hover .i7{ background-position: right 42%;}
.icon-c a .i8{ background-position: 0 49%;}
.icon-c a:hover .i8{ background-position: right 49%;}
.icon-c a .i9{ background-position: 0 56%;}
.icon-c a:hover .i9{ background-position: right 56%;}
.icon-c a .i10{ background-position: 0 63%;}
.icon-c a:hover .i10{ background-position: right 63%;}
.icon-c a .i11{ background-position: 0 70%;}
.icon-c a:hover .i11{ background-position: right 70%;}
.icon-c a .i12{ background-position: 0 77%;}
.icon-c a:hover .i12{ background-position: right 77%;}
/**product line Bar**/
#nav .proli{width: 16%;}
#flashbox ,#flashbox ul{ width: 100%; height: 480px;}
#flashbox li{ height: 480px;}

...

3.JS

代码如下（节选示例）：

(function($) {

$.smallslider=function(elm, options){

   // this 为当前的smallslider对象，为了区别，使用 _this 替换
   var _this = this;
   _this.elm = elm ;   // elm 为当前的 DOM对象，即使用class="smallslider" 的那个div对象。
   _this.$elm = $(elm); // $elm 为elm对象的jquery形式
   _this.opts=$.extend({},$.smallslider.defaults, options);
_this.sliderTimer= null ;

   // 初始化对象
   _this.init = function()
   {
       _this.$ul = _this.$elm.find('>ul') ; // 为子元素ul
       _this.$lis = _this.$elm.find('li') ; // 为所有ul下子元素li 数组
       _this.$ims = _this.$elm.find('img') ; // 为所有li下子元素img 数组
       _this.itemNums = _this.$lis.length ;
       _this.width = _this.$elm.width();
       _this.height = _this.$elm.height();
       _this.current = 0 ;           // 当前的index索引

       if(_this.itemNums > 1)
       {
           if(_this.opts.switchEffect=='ease')
           {
           _this.$ul.css({
               position:'absolute',
               left:0,
               top: 0
           });
           if(_this.opts.switchPath=='left')
           {
               var width = _this.itemNums * _this.width;
               _this.$lis.css({
               'float' : 'left'
               });
               _this.$ul.css({
               'width' : width
               });
           }
           else if(_this.opts.switchPath=='up')
           {
               var height = _this.itemNums * _this.height;
               _this.$ul.css({
               'height' : height
               });
           }
           }
           else if(_this.opts.switchEffect=='fadeOut')
           {
           _this.$ul.css({
               position:'relative'
           });
           _this.$lis.css({
               position:'absolute',
               zIndex:1
           }).eq(0).css({
               zIndex:2
           });
           }
           if(_this.opts.showButtons)
           {
           _this.createButtons();   // 创建按钮。
           }
           if(_this.opts.showText)
           {
           _this.createText();   // 创建文字显示。
           }
           if(_this.opts.autoStart)
           {
           _this.startSlider(1);
           }
           if(_this.opts.onImageStop)
           {
           _this.onImage();
           }
       }
   };
   _this.createButtons = function()
   {
       var buttons='';
       for(var i=1; i <= _this.itemNums ; i++ ){
           buttons += '<span>'+i+'</span>';
       }
       buttons ='<div class="smallslider-btns">' + buttons + '</div>';
       var left=0,right=0,top =0,bottom=0;
       var style_btns={};
       switch(_this.opts.buttonPosition){
           case 'leftTop':
           left = _this.opts.buttonOffsetX;
           top = _this.opts.buttonOffsetY;
           style_btns={left: left + 'px' , top: top+'px'};
           break;
           case 'rightTop':
           right = _this.opts.buttonOffsetX;
           top = _this.opts.buttonOffsetY;
           style_btns={right: right + 'px' , top: top+'px'};
           break;
           case 'rightBottom':
           right = _this.opts.buttonOffsetX;
           bottom = _this.opts.buttonOffsetY;
           style_btns={right: right + 'px' ,bottom: bottom+'px'};
           break;
           case 'leftBottom':
           left = _this.opts.buttonOffsetX;
           bottom = _this.opts.buttonOffsetY;
           style_btns={left: left + 'px' ,bottom: bottom+'px'};
           break;
       }