原生HTML，CSS，JS模仿的一个京东的首页（部分）

于 2021-05-28 23:36:40 发布
阅读量713 收藏 4
点赞数 1
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_51896272/article/details/117376144
版权

原生HTML，CSS，JS模仿的一个京东的首页（部分）

前端小白一个，自学没多久，来记录一下自己写的代码

效果图

在这里插入图片描述

HTML文件

HTML文件

CSS样式文件

CSS样式文件

JS文件

JS文件

JS文件实现了：

1.超级简单的轮播图，甚至有点丑（狗头护体）

2.定位点击更新（就简单地操作DOM）
在这里插入图片描述
点击地址，然后在顶部切换地址名称，并将对应的地址的背景颜色设置为红色

其他文件

网页中还引入了其他几个文件：

重置样式表

Font Awesome图标库（Font Awesome图标库需要在网上下载，下载地址，使用方法可以参考B站李立超老师的HTML+CSS课程里介绍图标字体那一章，链接在这里 9分55秒开始就是下载和使用方法）

HTML5期末大作业：京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
11-10 1296
HTML5期末大作业：京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页
京东官网首页js+css+html基础
qq_45387575的博客
04-23 1536
1、让盒子宽度撑满整个页面 width: 100%; 2、加了绝对定位（已经脱离了标准流）的盒子不能使用margin:auto 来使盒子居中 解决办法： .box { position: absolute; /* 调整水平居中，先左移50%的宽度，在用外边框调整至自身盒子一半的距离，实现居中 */ left: 50%; margin-left: -100px; /* 垂...
京东首页Html+css+javascript代码
04-15
用前端三语言简单实现京东首页搭建，实现了导航栏和轮播图功能，对购物网站搭建框架有了基本的了解。
模仿京东首页的源码（html+css）
08-27
仿京东首页，用的是html、css，仿京东首页，用的是html、css
简易京东网页HTML代码（HTML&JS;）
01-02
HTML课程设计（模拟京东网页 购物网站）主要功能DIV 网页框架设计 链接
jd-h5:使用原生js写的京东首页
07-23
【jd-h5:使用原生js写的京东首页】项目是一个基于HTML5、CSS3和JavaScript技术的实践案例，旨在模仿京东商城的首页功能。在这个项目中，开发者运用了原生JavaScript来实现页面交互，同时也结合了jQuery库以提高开发...
京东商城（HTML和CSS实现京东商城网站）
灵魂漫步的博客
06-19 7026
本页面模仿京东商城 本系统完全模仿京东商城写的页面，页面功能齐全 技术实现 采用HTML5,CSS3,JavaScript,Jquery 京东商城页面 导航栏部分代码 <!-- 购物导航栏-1--> <div class="shop-right fn-hide"> <div class="nav-top"> <a...
原生JS轮播图实现：模仿京东商城首页效果
"模仿京东商城首页的原生JS轮播图源代码" 指示这份代码是以京东商城首页的轮播图为模板而编写的。京东作为中国知名的电子商务平台，其首页轮播图设计简洁且功能齐全，常被作为模仿学习的对象。描述强调了该源代码是...
picturepriview:原生js图片预览插件，仿淘宝京东图片放大及缩略图预览
05-14
本项目"picturepreview:原生js图片预览插件，仿淘宝京东图片放大及缩略图预览"专注于提供一种纯JavaScript实现的图片预览解决方案，它模仿了电商巨头如淘宝和京东的图片查看体验，让用户在网页上可以方便地查看大图...
模仿京东页面
03-11
总的来说，模仿京东页面是一个综合性的Web开发练习，涵盖了HTML、CSS、JavaScript以及前后端交互等多个方面。这个过程中，你会深入理解网页的构建原理，提升用户体验设计能力，并有机会接触到现代前端开发的最佳实践...
京东首页html+css+js.zip
07-17
解决了之前页面放大缩小布局错位的问题，现在不会因为分辨率变化而发生变化，包含轮播图，吸顶灯，返回顶部等功能
JS实现京东首页之页面顶部、Logo和搜索框功能
10-20
主要实现京东的页面顶部，logo和搜索框功能，本文有效果展示，页面布局详细分析，具体实现代码，介绍的非常详细，具有参考借鉴价值，需要的的朋友参考下吧
仿京东首页页面
10-26
完整布局，仿照京东首页，运用H5+css3完成页面的实现，可以用来学习如何布局，写得都很详细，可以慢慢学习，哪怕零基础。。。
京东页面JS效果实现，js实现导航条控制，很完整
03-26
京东页面JS效果实现，js实现导航条控制，很完整，跟京东页面的效果一模一样。
仿照京东html界面
10-22
仿照京东的html界面包含轮播，以及各式各样的js 互动效果、
js实现移动端编辑添加地址【模仿京东】
10-19
本篇文章主要介绍了js实现移动端编辑添加地址[模仿京东]的实例。具有很好的参考价值。下面跟着小编一起来看下吧
原生js实现京东淘宝购物车的做法
ApassionBoy
08-13 2271
有好久没有写博客了，后面还是发现多写总结，才会有成长的快一些 好了，直接进入主题，话不多说，来看看购物车常用的功能，如图下。 图中的购物车，也是我们PC端常用到的一种，它主要包含了，“商品列表” 商品列中有包括了以下功能： 无疑就是这些很熟悉的业务了。下面来看看这些功能是怎么实现的。 选中多个商品、 计算商品总价、计算商品数量 商品数量加减操作、 删除商品 提交订单 ...
H5电商（仿京东首页）
09-30
Html5电商首页（仿京东首页），风格非常漂亮，源码呈现，值得借鉴。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绒毛鸭鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值