仿京东商城主页（静态页面）

最新推荐文章于 2024-04-29 22:14:03 发布
最新推荐文章于 2024-04-29 22:14:03 发布
阅读量2.5k 收藏 15
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44928106/article/details/107380767
版权

此项目主要使用HTML5+CSS来编写，对京东商城主业进行了整体的仿制，由于缺少素材，局部无法完全仿制。

HTML5部分：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

        <meta name="Keywords" content="手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

    <title>京东欢迎你</title>

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

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

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

 

</head>

<body>

    <!--header开始-->

        <header>

           <div class="w">

               <a href="#">

                   <img src="images/header.jpg" alt="">

               </a>

           </div>

        </header>

        <!-- heder结束 -->

        <!-- 快速导航栏开始 -->

        <div class="shortcut">

      <div class="w">

          <ul class="fl city">

              <li>! 北京</li>

          </ul>

          <ul class="fr">

            <li><a href="login.html" target="_blank">你好,请登录</a><a href="signin.html" class="colorred">免费注册</a></li>

            <li class="l"></li>

            

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="#" class="mobile">手机京东

                <img src="images/mobile.png" alt="">

                

            </a></li>

           

 

          </ul>

      </div>

        </div>

        <!-- 快速导航栏结束 -->

        <!-- 中间部分开始 -->

        <div class="w middle">

            <div class="logo">

               <h1> <!-- <h1>提高权重 -->

                    <a href="#"></a>

                </h1>

            </div>

            <div class="form">

                <input type="text" placeholder="扫描仪">

                <button>搜索</button>

 

            </div>

            <div class="shopcar">

                <a href="#">我的购物车</a>

                <i>8</i> 

            </div>

            <div class="hotword">

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

               

            </div>

            <div class="navtimes">

                <ul>

                    <li>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a> 

                        <a href="">秒杀</a>

 

                    </li>

                </ul>

            </div>

        </div>

        <!-- 中间部分结束 -->

        <!-- 中间分类模块 -->

        <div class="w grid">

            <div class="grid-col1 fl">

                <div class="ad">

                    <img src="images/ad-l.png" alt="" height="480" width="250">

                  <img src="images/ad-r.jpg" alt="" class="ad-r">

                </div>

                <ul>

                    <li><a href="">家用电器</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a&g

最低0.47元/天 解锁文章
嘻嘻
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5-电子商务企业模板-全套页面-源码
12-02
一整套电子商务H5网页，可以用于个人开发或者课程设计，内含源码，解压即可运行
【HTML】HTML5网页作业----模仿京东，模仿站点
coding加油站
08-18 7077
html作业，html作业，html设计，模仿京东，期末作业
[HTML+CSS] 仿京东首页项目实战
最新发布
2401_84447297的博客
04-29 357
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
热门推荐
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
前端静态页面html珠宝首饰电商平台网站购物商城系统.rar含源码
weixin_40228600的博客
10-23 782
前端网站设计，html珠宝首饰类网站，高端大气 部分网站源码截图： 源码下载地址：请点击》》》
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 7421
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
仿京东首页静态页面
11-14
【仿京东首页静态页面】是前端开发者为了学习和实践电商网站设计所创建的一个项目。这个项目的主要目的是模拟京东商城的首页布局、样式和交互，帮助开发者提升网页制作技能，了解和掌握电商网站的设计规范和用户体验...
仿京东静态页面.rar
06-15
在实际项目中，"仿京东静态页面"可能会包含多个HTML文件，分别对应不同的页面部分，如首页、商品详情页、购物车页等。这些文件之间通过超链接进行组织，形成完整的网站结构。 最后，这个项目不仅锻炼了开发者的技术...
东软班仿京东首页HTML静态页面
03-24
【标题】"东软班仿京东首页HTML静态页面"是一个项目，旨在让学生通过模拟京东网站的首页布局和设计，学习并实践HTML、CSS以及JavaScript等前端技术。这个项目可以帮助学生理解网页开发的基本流程，提高他们对用户...
仿京东静态页面.zip
12-26
【描述】"仿京东静态页面"说明这个项目主要关注的是京东网站的视觉呈现和用户交互，而不涉及后端功能，如购物车、支付和用户登录等。静态页面意味着所有的内容都存储在HTML文件中，没有动态数据库支持。开发者可能...
HTML+CSS仿京东购物车页面静态页面
06-27
HTML和CSS是网页设计的基础，本项目以"HTML+CSS仿京东购物车页面静态页面"为主题，旨在通过实例教学帮助开发者掌握如何利用这两种语言构建一个类似京东购物车的交互式界面。下面将详细讲解其中涉及的关键知识点。 1...
H5电商（仿京东首页）
09-30
Html5电商首页（仿京东首页），风格非常漂亮，源码呈现，值得借鉴。
小兔鲜儿-商城APP（静态网页）
m0_61044901的博客
01-06 5368
小兔鲜儿-商城APP（静态网页）
HTML+CSS篮球静态网页设计（web前端网页制作课作业）NBA杜兰特篮球运动网页
HTML网页设计
08-11 1689
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；......
HTML期末大作业 : 个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品...
qq_365392777
10-15 5018
常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A...
小米官网静态网页项目实战2
weixin_53732821的博客
04-21 333
顶部导航条 结构：最外围的容器（最大） 三个div块 左右两侧各一块，购物车独占一块（样式需设置） css下的文档（样式） /* 主页index1.html的样式表 */ /* 顶部导航条的样式 */ .topbar-wrapper{ /* 设置宽度全屏 */ width: 100%; /* 设置高度和行高 */ height: 40px; line-height: 40px; /* 设
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript web前端大二实训大作业
qq_365392777
09-26 1万+
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平
HTML+CSS作品展示（仿写京东移动端首页①）
weixin_42541725的博客
01-26 2909
仿写京东移动端首页①
HTML&CSS仿京东首页制作静态页面总结
ccj_cmp的博客
07-05 3170
HTML&CSS仿京东首页制作静态页面
微信小程序商城首页静态页面案例
06-10
以下是一个微信小程序商城首页静态页面的案例： ```html <view class="container"> <view class="banner"> <image src="/images/banner.png"></image> </view> <view class="category"> <view class="item"> <image src="/images/category1.png"></image> <text>服装</text> </view> <view class="item"> <image src="/images/category2.png"></image> <text>鞋子</text> </view> <view class="item"> <image src="/images/category3.png"></image> <text>配饰</text> </view> <view class="item"> <image src="/images/category4.png"></image> <text>家居</text> </view> </view> <view class="product"> <view class="title"> <text>热门商品</text> <navigator url="/pages/product/list/list">更多</navigator> </view> <view class="list"> <view class="item"> <image src="/images/product1.png"></image> <text>商品名称</text> <text class="price">¥99</text> </view> <view class="item"> <image src="/images/product2.png"></image> <text>商品名称</text> <text class="price">¥199</text> </view> <view class="item"> <image src="/images/product3.png"></image> <text>商品名称</text> <text class="price">¥299</text> </view> </view> </view> <view class="footer"> <text>© 2021 小程序商城</text> </view> </view> ``` 以上代码实现了一个简单的微信小程序商城首页静态页面，包含了 banner、分类、热门商品和底部信息。你可以根据自己的需求进行修改和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值