手写仿淘宝商城页面（html+css+部分js）

最新推荐文章于 2024-05-23 11:09:13 发布
最新推荐文章于 2024-05-23 11:09:13 发布
阅读量4.7k 收藏 97
点赞数 13
文章标签： js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiediyue/article/details/120639344
版权

一个练手项目，边看视频边写的。发着娱乐，不喜勿喷。

效果图：

代码如下

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="CSS/index.css">
  <link rel="icon" href="淘宝.png"> <!-- 网址图标 -->
  <title>淘宝网 - 淘！我喜欢</title>
</head>
<body>
  <!-- 头部信息 -->
  <div id="headMessage" class="layer clearfix ">
    <ul class="fl">
      <li id="cdl_li01">
        <span id="area_change">中国大陆</span>
        <span class="iconfont arrow">&#xe60c;</span>
        <div id="areasBox">
          <ul id="areas">
            <li>全球</li>
            <li>中国大陆</li> 
            <li>中国香港</li>
            <li>中国澳门</li>
            <li>中国台湾</li>
            <li>韩国</li>
            <li>马来西亚</li>
            <li>澳大利亚</li>
            <li>新加坡</li>
            <li>新西兰</li>
            <li>加拿大</li>
            <li>美国</li>
            <li>日本</li>
            <li>法国</li>
            <li>德国</li>
            <li>瑞士</li>
          </ul>
          </div>
      </li>
      <li class="mr7">
        <a href="#" class="login mr7">亲，请登录</a>
        <a href="#">免费注册</a>
      </li>
      <li>
        <a href="#">手机逛淘宝</a>
      </li>
    </ul>

    <ul class="fr">
      <li id="wdtb">
        <a href="#">我的淘宝</a>
        <span class="iconfont arrow">&#xe60c;</span>
        <div id="mytbBox">
          <ul id="mytbbox_ul01">
            <li>已买到的宝贝</li>
            <li>我的足迹</li>
          </ul>
        </div>
      </li>
      <li>
        <span class="iconfont mr5 c4">&#xe66e;</span>
        <a href="shoppingCart.html">购物车</a>
        <strong>0</strong>
        <span class="iconfont arrow">&#xe60c;</span>
      </li>
      <li id="scj">
        <a href="#"><span class="iconfont mr5 store">&#xe622;</span>收藏夹</a>
        <span class="iconfont arrow">&#xe60c;</span>
        <div id="favorites">
          <ul id="favorites_ul">
            <li>收藏的宝贝</li>
            <li>收藏的店铺</li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">商品分类</a>
      </li>
      <li class="line">|</li> 
      <li id="qnmjzx">
        <a href="#">千牛卖家中心</a>
        <span class="iconfont arrow">&#xe60c;</span>
        <div id="sellerCenter">
          <ul id="sellerCenter_ul">
            <li>免费开店</li>
            <li>已卖出的宝贝</li>
            <li>出售中的宝贝</li>
            <li>卖家服务市场</li>
            <li>卖家培训中心</li>
            <li>体检中心</li>
            <li>问商友</li>
          </ul>
        </div>
      </li>
      <li id="lxkf">
        <a href="#">联系客服</a>
        <span class="iconfont arrow">&#xe60c;</span>
        <div id="connect">
          <ul id="connect_ul">
            <li>消费者客服</li>
            <li>商家服务大厅</li>
          </ul>
        </div>
      </li>
      <li>
        <span class="iconfont c4 mr5">&#xe608;</span>
        <a href="#">网站导航</a>
        <span class="iconfont arrow">&#xe60c;</span>
      </li>
    </ul>
  </div>

  <!-- 头部广告 -->
  <div id="headAdvertise">
    <div class="layer clearfix">
      <a href="#" class="fl go"><img src="images/go.png" alt=""></a>
      <ul class="fr">
        <li class="item1">
          <a href="#" class="fr">
            <img src="images/adimg_01.jpg" alt="">
          </a>
          <h3><a href="#">电视会场</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item2">
          <a href="#" class="fr">
            <img src="images/adimg_02.jpg" alt="">
          </a>
          <h3><a href="#">电视会场</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item3">
          <a href="#" class="fr">
            <img src="images/adimg_03.jpg" alt="">
          </a>
          <h3><a href="#">电视会场</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item4">
        <a href="#" class="fr">
          <img src="images/adimg_04.jpg" alt="">
        </a>
          <h3><a href="#">电视会场</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item5">
          <a href="#" class="fr">
            <img src="images/adimg_05.jpg" alt="">
          </a>
          <h3><a href="#">电视会场</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
      </ul>
    </div>
  </div>

  <!-- 头部搜索 -->
  <div id="headSearch">
    <div class="clearfix layer">
      <!-- 左 -->
      <h1 class="fl"><a href="#">淘宝网</a></h1>
      <!-- 右 -->
      <div class="fr code">
        <span class="iconfont close">&#xe639;</span>
        <span class="c5">手机淘宝</span>
        <img src="images/code.png" alt="">
      </div>
      <!-- 中间 -->
      <div class="search">
        <!-- 上 -->
        <ul class="searchTab clearfix" id="words_ul01">
          <li class="active" id="words_bb">宝贝</li>
          <li id="words_tm">天猫</li>
          <li id="words_dp">店铺</li>
        </ul>
        <!-- 中 -->
        <div class="searchContent clearfix">
          <form action="#">
            <div class="searchBox fl">
              <input type="text" id="inputBox"> <!-- placeholder="网红裤腰带 洋气 国际范 9块9包邮" -->
              <div class="placeholder" id="searchTemplate">
                <i class="iconfont">&#xe618;</i>
                <span>网红裤腰带 洋气 国际范 9块9包邮</span>
              </div>
              <span class="iconfont imgSearch">&#xe6ba;</span>
            </div>
            <div class="btn fl">
              <button type="submit">搜索</button>
            </div>
          </form> 
        </div>
        <!-- 下 -->
        <div class="hotKey">
          <a href="#">新款连衣裙</a>
          <a href="#">四件套</a>
          <a href="#" class="c5">潮流T恤</a>
          <a href="#">时尚女鞋</a>
          <a href="#">短裤</a>
          <a href="#">半身裙</a>
          <a href="#" class="c5">男士外套</a>
          <a href="#">墙纸</a>
          <a href="#">行车记录仪</a>
          <a href="#">新款男鞋</a>
          <a href="#">耳机</a>
          <a href="#" class="c5">时尚女包</a>
          <a href="#">沙发</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 导航 -->
  <div id="nav" class="clearfix layer">
    <h2 class="fl">主题市场</h2>
    <ul class="fl">
      <li class="size"><a href="#">天猫</a></li>
      <li class="size"><a href="#">聚划算</a></li>
      <li class="size"><a href="#">天猫超市</a></li>
      <li class="line">|</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 class="line">|</li>
      <li><a href="#">飞猪旅行</a></li>
      <li><a href="#">智能生活</a></li>
      <li><a href="#">苏宁易购</a></li>
    </ul>
  </div>

  <!-- 首屏内容 -->
  <div id="firstScreen" class="layer clearfix">
    <!-- 左边的内容 -->
    <div class="firstLeft fl">
      <!-- 侧边导航 -->
      <div class="sideNav fl">
        <ul>
          <li><a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a>
          <span class="iconfont fr">&#xe641;</span>
          </li>
          <li><a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a>
            <span class="iconfont fr">&#xe641;</span>
          </li>
          <li><a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a>
            <span class="iconfont fr">&#xe641;</span>
          </li>
          <li><a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a>
            <span class="iconfont fr">&#xe641;</span>
          </li>
          <li><a href="#">美妆</a> / <a href="#">洗漱</a> / <a href="#">保健品</a>
            <span class="iconfont fr">&#xe641;</span>
          </li>
          <li><a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a>
            <span class="iconfont fr">&#xe641;</span>
          </li>
          <li><a href="#">运动</a> / <a href="#">户外</a
最低0.47元/天 解锁文章
kamiYYY
关注
  • 13
    点赞
  • 踩
  • 97
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
静态HTML网页设计作品——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
qq_524614081的博客
04-25 1997
HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
小米商城（HTML+CSS）网页设计期末作业
01-04
点开资源前大家可以去小米商城官网查看设计效果，通过带着读者手写简化版小米商城网页，逐步巩固学习到的HTML和css基础知识，例如：背景属性的使用background、iconfont字体图标、div+css页面布局设计模式、超链接a...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H480.zip
05-09
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、Ja
HTML+CSS实现淘宝首页
热门推荐
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
基于HTML+CSS+JavaScript仿淘宝购物商城设计毕业论文源码
最新发布
网页设计与制作 | HTML+CSS+JS
05-23 828
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
H5高仿淘宝(html模板)
iidhdfji123的博客
11-14 1572
【实例截图】 【核心代码】 H5仿淘宝移动端大型综合购物商城app模板 ├── car.html ├── class.html ├── find.html ├── index.html ├── my-coupon.html ├── my-invitation.html ├── my-membership.html ├── my-order.html ├── my-orders.html ├── my-products-class.html ├── my-purchase.html ├── my-set.ht
高仿淘宝店html网页模板
07-08
高仿淘宝店html网页模板,计算机应用专业大一作业。登陆注册界面，商品详情界面，购物车，以及配送界面等。
静态网页设计——基于HTML仿淘宝电商网站项目的设计与实现 企业网站制作
12-16 459
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
小米官网项目手写代码(html+css)
12-29
【小米官网项目手写代码(html+css)】是一个前端学习项目，主要运用了HTML和CSS两种基础技术。在这个项目中，作者通过纯手工编写代码，实现了对小米官网页面的复刻，旨在帮助初学者理解并掌握这两种语言的核心概念和...
甘特图实现 HTML+CSS
07-22
**甘特图实现：HTML+CSS详解** 在项目管理和任务调度中，甘特图是一种非常实用的工具，它能够清晰地展示任务的时间线和进度，帮助我们更好地理解项目的整体流程和各个任务之间的关系。本教程将详细介绍如何使用HTML...
html+css+js的绿色环保网页设计 手写环境保护主题网页作业源码分享
03-28
在本项目中，我们主要探讨的是如何利用HTML、CSS和JavaScript技术来创建一个绿色环保主题的网页设计。这个设计包括三个页面：首页、公司简介和产品展示，旨在展示环保理念并提供用户友好的交互体验。 首先，HTML...
仿淘宝商城界面
02-14
仿淘宝商城界面代码
仿淘宝首页html
02-26
仿淘宝网首页的源代码，很漂亮，可以用于html学习、使用等
仿淘宝网html网页模板_学写静态网页模板参考
01-28
仿淘宝网html网页模板_学写静态网页模板参考
商城系统（仿淘宝无限制）
03-01
主要功能介绍 1 包含一口价和拍卖价格两种出售模式 2 商品比较，收藏，浏览记录功能 3 卖家开店功能，6套店铺模版 4 二级域名支持 5 商品可实现三级分类 6 后台分权限管理
仿淘宝商城项目实践
10-21
与传统的项目相比，该行业技术要求相对较高，传统的项目1000高并发已经是上线了，但是在电商项目中，如淘宝，京 东这样的。再举个例子，再淘宝双十一这天，如何满足高并发的需求和支付环节的安全都是难点。 技术新且范围广 分布式 高并发、集群、负载均衡、高可用 海量数据、业务复杂 系统安全(因为涉及支付及隐私等)
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
创建类似淘宝的静态网页（二）创建搜索栏
drawback12138的博客
04-13 731
一开始，献上最后的结果图，如下 显而易见，搜索栏从左往右包括三个部分。左边logo部分，中间搜索部分，右边图片部分。其中中间搜索部分又包括上下两个部分。所以，思路是创建一个大搜索栏div，里面包括三个子div，三个div从左往右排列。 这一部分的html代码如下： <!-- 搜索区域 --> <div class="search-wrap"> <div cla...
使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)
Hello World!
10-25 2153
转自：http://www.cnblogs.com/kyo-yo/archive/2010/05/14/My-jQuery-AutoComplete.html 其实这个已经是个比较常见的功能了，网上也有很多人做过这个了，但是很多都是仅仅做了一些基本的网页上自动完成功能，没有与具体的数据库进行联动，我今天所介绍这个自动完成的就是我修改的jQuery.AutoComplete+数据库的一个解
原生html+css 手写滚动条
05-30
好的，以下是一个基本的原生HTML+CSS手写滚动条的示例： HTML代码： ``` <!-- 这里是你的内容 --> ``` CSS代码： ``` /* 滚动条容器 */ .scrollable { position: relative; height: 200px; /* 容器高度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值