仿京东HTML网页

最新推荐文章于 2021-06-23 09:20:47 发布
原创 最新推荐文章于 2021-06-23 09:20:47 发布 · 7.6k 阅读 · 53 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#仿京东

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属于自己的京东小网页</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico">
    <script type="text/javascript">
        window.onload=function(){
            var login=document.getElementById("login");
            var max=document.getElementById("max");
            var box=document.getElementById("box");
            var close=document.getElementById("close-all");
            

            login.onclick=function(){
                max.style.display="block";
                box.style.display="block";
            }
            close.onclick=function(){
                max.style.display="none";
                box.style.display="none";
            }
        }
    </script>
</head>
<body>
    <div class="max" id="max"></div>
    <div class="box" id="box">
        <span id="close-all">×</span>
        <p style="color: red;">登陆／注册</p>
        <form >
        <input type="text" name="" value="user" style="width: 250px;height: 22px"><br><br>
        <input type="text" name="" style="width: 130px;height:22px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>获取动态密码</a><br><br>
        <input type="text" name="" value="输入密码" style="width: 250px;height: 22px"><br><br>
        <div class="dl">
            <a href="index.html" style="color: red;">登陆</a>
        </div>
        <div class="zc">
            <a href="index.html" style="color: red;">注册</a>
        </div>
        <br><br>
        </form>
    </div>
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <div class="dt">送至：北京
                <i><p>◇</p></i></div>
            </div>
            <div class="fr">
                <ul>
                    <li>
                        <a href="javascript:;" id="login">你好，请登陆 </a>&nbsp&nbsp
                        <a href="#" class="col-red">免费注册</a>
                    </li>
                    <li class="line"></li>
                    <li>我的订单</li>
                    <li class="line"></li>
                    <li>我的京东</li>
                    <li class="line"></li>
                    <li>京东会员</li>
                    <li class="line"></li>
                    <li>企业采购</li>
                    <li class="line"></li>
                    <li class="tel-jd">
                        <i class="tel"></i>
                        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp手机京东
                    </li>
                    <li class="line"></li>
                    <li>客户服务</li>
                    <li class="line"></li>
                    <li>网站导航</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="top-banner" class="top-banner">
        <div class="w tp">
            <img src="images/topbanner.jpg">
            <a href="javascript:;" id="jd-close" class="close-banner"></a>
        </div>
    </div>
    <script type="text/javascript">
        var clo=document.getElementById('jd-close');
        var topBanner=document.getElementById("top-banner");
        clo.onclick=function(){
            topBanner.style.display="none";
        }
    </script>
    <div class="w clearfix">
        <div class="logo">
            <a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚"></a>
            <div class="db11">
                <a href="#"><img src="images/dong.gif"></a>
            </div>
        </div>
        <div class="search">
            <input type="text" name="" value="双十一降价，快来抢购！">
            <button>搜索</button>
        </div>
        <div class="car">
            <a href="#">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp我的购物车</a>
            <span class="icon1"></span>
            <span class="icon2">&nbsp&nbsp&nbsp></span>
            <span class="icon3">3</span>
        </div>
        <div class="hotworld">
            <a href="#">11月11日</a>
            <a href="#">11.11秒杀</a>
            <a href="#">买2免1</a>
            <a href="#">iphone8</a>
            <a href="#">12期免息</a>
            <a href="#">智能科技</a>
            <a href="#">清仓</a>
            <a href="#">国际服务</a>
            <a href="#">优惠卷</a>
        </div>
    </div>
    
    <div class="jd-nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">
                    <a href="#">全部商品分类</a>
                </div>
                <div class="dd">
                    <div class="items">
                        <p>家用电器</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>手机、数码、京东通信</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>电脑、办公</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>家具、家具、套装、厨具</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>男装、女装、内衣、珠宝</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>个性化装、清洁用品</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>户外运动</p>
                        <span>></span>
                    </div>
                    <div class="items">
                        <p>汽车、汽车用品</p>
                        <span>></span>
         &n

最低0.47元/天 解锁文章

200万优质内容无限畅学
【京东电商网站主界面仿写——HTML第二部分】| 系统架构师 面试题：请分享你在系统设计和架构方面的团队管理经验。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-20 696
由于这个项目整体的代码较长，所以分成几个部分给大家展示。 比较完整的效果在这里~~【京东网站主界面仿写——使用Html5+CSS3+JavaScript等实现(附源代码和效果)，挺炫的喔~~~】 这里先展示第一部分，关于HTML主页界面代码。 这里是主界面显示的第271行到第600行代码。鉴于仅HTML代码行数就已经超过4000行，所以分成多个博客展示哈！ <li><a href="">尖er货</a></li>
仿京东商城网站html模板
12-04
仿京东商城网站html模板
仿京东网站
03-07
用web，java等技术开发的京东网站。这是我组的web课程的结课项目。与大家分享一下
模仿京东页面
03-11
模仿京东页面
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
基于html+css实现的仿京东电商平台网页源码(html期末大作业).zip
01-11
基于html+css实现的仿京东电商平台网页源码(html期末大作业).zip基于html+css实现的仿京东电商平台网页源码(html期末大作业).zip基于html+css实现的仿京东电商平台网页源码(html期末大作业).zip基于html+css实现的...
静态网页设计期末作业纯HTML和CSS实现静态网页仿京东网页设计源码.zip
06-18
静态网页设计期末作业纯HTML和CSS实现静态网页仿京东网页设计源码，大作业必过项目，亲测95分以上了，HTML和CSS实现。操作非常简单。 安装教程 1.下载源文件到本地 2.用Vscode打开，打开H5文件夹，里面的所有页面都...
仿京东网站html网页源码，有交互
01-05
仿京东网站的HTML网页源码主要由HTML、CSS和JavaScript三种技术构成。其中，HTML负责构建网页的基本结构，CSS用于定义网页的样式和布局，而JavaScript则用于添加交互功能，使得网页能够响应用户的操作。 首先，HTML...
仿京东网页
05-22
自己做的一个高仿京东的网页，只有一个页面，第一回发布这个东西，还有点不适应，以后不定期发布文件
仿京东的商品展示详情页面
11-16
仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。
模仿京东首页
10-24
对京东首页的模仿，大概是17年上半年写的代码， 现在的京东页面啥样也不知道了， 反正以前和京东页面是一模一样。 实现也很简单，没有框架之类的。 里面的楼梯导航可以借鉴到任何网站。
仿京东分类Html5页面
03-05
仿京东分类Html5页面，左右分栏，可滑动，支持多层级扩展，CSS样式
仿京东网页制作
01-15
仿京东页面做了一部分功能，完成一些基础的要求。满足
模仿京东首页的源码（html+css）
08-27
仿京东首页，用的是html、css，仿京东首页，用的是html、css
仿京东页面
weixin_53636376的博客
02-03 328
标题 仿京东页面（有点low = = …） css样式代码 <head> <meta charset="utf-8"> <title>仿京东页面</title> <style> *{ margin: 0px; padding: 0px; } .div2{ width: 100%; height: 40px; background-color: #ececec;
仿京东商城
友人C君的博客
04-17 1207
前后花了快一个星期，虽然只是做的静态页面，但是京东首页设计到的布局还是很有参考价值的，其中很多小的板块布局各有特点，可以通过过一个个小的板块来练习自己的html+css能力。 内容简介： html： 标签语义化，如使用header、footer等 头部meta标签的元信息的TDK书写要利于SEO css文件在头部引入，js文件在body底部引入 元素嵌套不宜过深 不同...
【HTML&CSS】静态网页模仿——京东首页
weixin_43689100的博客
11-22 5396
·基本思想 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;首先观察京东首页的大概布局，观察有几个大的块，包括其中的子父模块、并行模块等。动手搭建时，要注意从大到小，从上到下，由整体到局部的思想，一层一层往下写，先搭建大的框架布局，再具体分析每个块里小的部分。可以使用div来进行布局，实现层与层的嵌套。 ·问题总结 问题一：导入
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 5668
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录 注册 首页 购物 商品详情 ,等多个页面~特别适合web期末作业 网页制作介绍 关于HTML期末网页制作，，大作业A+水平！！主要特色：京东首页HTML网页制作~ 作为第一次遇到html期末大作业，熬夜了好几天才做了个大概所以想纪念一下~仿京东商城，很好看。 作品(动态效果)演示 作品(静态效果)演示 登录 注册 文件目录 代码实现 一、京东商城实现 HTML
html网页制作仿京东
最新发布
03-09
<think>嗯，用户想用HTML制作类似京东的电子商务网站页面，需要教程、示例和代码。首先，我应该回忆一下之前提供的参考引用内容。引用[1]提到在index.html中编写代码，或者新建html文件，这可能涉及到基础的HTML结构。引用[2]是一个电子商务网站的干货贴，可能包含产品、研发和运维的内容，但用户需要的是具体的制作步骤。 首先，用户可能需要了解京东这样的电商网站的基本结构，比如顶部导航栏、搜索框、轮播图、商品展示区、页脚等部分。我需要分步骤解释如何构建这些部分，并提供代码示例。 然后，要考虑HTML的基础结构，比如DOCTYPE声明、html、head、body标签，以及CSS和JavaScript的引入方式。接着，顶部导航栏通常包含Logo、导航链接和用户操作按钮，这部分可以用HTML的nav元素，结合CSS Flex布局来实现。 搜索栏可能需要一个表单，包含输入框和搜索按钮，可能用form元素和input元素，样式上需要调整边距和浮动。轮播图的话，可以使用第三方库如Swiper.js，这样用户更容易实现滑动效果，需要引入相关的CSS和JS文件，并按照文档初始化。 商品展示区可能需要使用网格布局，每个商品卡片包含图片、名称、价格等信息。可以用div元素配合CSS Grid或Flex布局，确保响应式设计。页脚部分通常包含多个链接区块，可以用footer元素，内部用多个div或section划分区域。 此外，用户可能需要了解如何将静态页面与后端结合，比如使用PHP、Node.js等处理动态数据，但当前问题主要集中在HTML部分，所以暂时不深入后端。另外，引用[2]提到了一万四千字的干货贴，但用户需要的是具体的前端代码示例，所以可能需要引导用户参考类似教程的结构。 最后，需要提醒用户这只是静态页面的基础，实际开发中还需要考虑响应式设计、交互功能、数据库集成等，并推荐进一步学习的资源，比如引用中的链接或者相关的前端框架教程。</think>### 如何用HTML制作类似京东的电子商务网站页面？ #### 一、基础结构与模块划分 京东类电商网站的核心模块包括： 1. **顶部导航栏**（Logo、搜索框、用户登录/购物车入口） 2. **商品分类导航** 3. **轮播广告区** 4. **商品展示区**（热销商品、秒杀活动） 5. **页脚信息**（服务条款、联系方式） #### 二、代码实现示例 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>电商网站示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <style> /* 顶部导航样式 */ .header { display: flex; justify-content: space-between; padding: 12px 5%; background: #f40; } .search-bar input { width: 400px; padding: 8px; margin-right: 10px; float: left; } </style> </head> <body> <!-- 顶部导航 --> <header class="header"> <div class="logo">LOGO</div> <div class="search-bar"> <input type="text" placeholder="搜索商品"> <button>搜索</button> </div> <div class="user-menu"> <a href="#">登录</a> <a href="#">购物车</a> </div> </header> <!-- 轮播图 --> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="banner1.jpg"></div> <div class="swiper-slide"><img src="banner2.jpg"></div> </div> </div> <!-- 商品展示 --> <div class="product-grid"> <div class="product-card"> <img src="product1.jpg"> <h3>商品名称</h3> <p class="price">¥299.00</p> </div> <!-- 更多商品... --> </div> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script> new Swiper('.swiper', { autoplay: true, loop: true }); </script> </body> </html> ``` #### 三、关键技术要点 1. **响应式布局**：使用Flex/Grid布局实现自适应 2. **交互组件**：推荐使用Swiper.js实现轮播图[^2] 3. **性能优化**：图片懒加载、CDN资源加速 4. **数据动态加载**：建议后续结合Ajax获取商品数据 #### 四、进阶开发建议 1. 后台系统集成（推荐PHP/Node.js） 2. 用户系统开发（注册/登录/订单管理） 3. 支付接口对接（支付宝/微信支付） 4. 数据库设计（MySQL商品表结构示例）： ```sql CREATE TABLE products ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255), price DECIMAL(10,2), stock INT, description TEXT ); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值