京东商品浏览网页制作：HTML+CSS

最新推荐文章于 2024-09-05 23:00:20 发布
最新推荐文章于 2024-09-05 23:00:20 发布
阅读量1w 收藏 129
点赞数 19
分类专栏： HTML+CSS 文章标签： css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mortal__/article/details/109701969
版权
这篇博客面向新手，介绍了如何使用HTML和CSS创建一个京东商品排列的静态网页，不涉及JavaScript部分。内容包括网页效果展示，HTML结构讲解以及CSS样式设计，特别是对于Font-Awesome图标的引入和本地定位下拉框的制作技巧。
摘要由CSDN通过智能技术生成

新手向：京东商品排列静态网页HTML代码(不含js部分）

网页效果：

注意：

  • 引入font-awesome部分图标，需要将font-awesome图标文件夹下全部文件附入方可正常显示。Font-Awesome-master图标文档下载
    提取码：09yb

  • 本地定位下拉框制作，注意盒子结构。

HTML部分：

<!doctype html>
<html>

<head>
    <title>java-京东搜索结果页面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jd_index.css">
    <link rel="stylesheet" href="Font-Awesome-master/css/all.css">
</head>

<body>
    <!-- 1、网页头部 -->
    <div id="top">
        <!--LOCATION包裹 当前地区 和 隐藏地区表格-->
        <div class="LOCATION">
            <div class="location">
                <li class="fas fa-map-marker-alt"></li>
                <a href="#" class="lf">安徽</a>
            </div>
            <div class="dropdown-layer">
                <div class="item">
                    <a href="#">北京</a>
                </div>
                <div class="item">
                    <a href="#">上海</a>
                </div>
                <div class="item">
                    <a href="#">天津</a>
                </div>
                <div class="item">
                    <a href="#">重庆</a>
                </div>
                <div class="item">
                    <a href="#">河北</a>
                </div>
                <div class="item">
                    <a href="#">山西</a>
                </div>
                <div class="item">
                    <a href="#">辽宁</a>
                </div>
                <div class="item">
                    <a href="#">河南</a>
                </div>
                <div class="item">
                    <a href="#">吉林</a>
                </div>
                <div class="item">
                    <a href="#">黑龙江</a>
                </div>
                <div class="item">
                    <a href="#">内蒙古</a>
                </div>
                <div class="item">
                    <a href="#">江苏</a>
                </div>
                <div class="item">
                    <a href="#">山东</a>
                </div>
                <div class="item">
                    <a href="#">安徽</a>
                </div>
                <div class="item">
                    <a href="#">浙江</a>
                </div>
                <div class="item">
                    <a href="#">福建</a>
                </div>
                <div class="item">
                    <a href="#">湖南</a>
                </div>
                <div class="item">
                    <a href="#">湖北</a>
                </div>
                <div class="item">
                    <a href="#">广东</a>
                </div>
                <div class="item">
                    <a href="#">广西</a>
                </div>
                <div class="item">
                    <a href="#">江西</a>
                </div>
                <div class="item">
                    <a href="#">四川</a>
                </div>
                <div class="item">
                    <a href="#">海南</a>
                </div>
                <div class="item">
                    <a href="#">云南</a>
                </div>
                <div class="item">
                    <a href="#">贵州</a>
                </div>
                <div class="item">
                    <a href="#">西藏</a>
                </div>
                <div class="item">
                    <a href="#">陕西</a>
                </div>
                <div class="item">
                    <a href="#">甘肃</a>
                </div>
                <div class="item">
                    <a href="#">青海</a>
                </div>
                <div class="item">
                    <a href="#">宁夏</a>
                </div>
                <div class="item">
                    <a href="#">新建</a>
                </div>
                <div class="item">
                    <a href="#">港澳</a>
                </div>
                <div class="item">
                    <a href="#">台湾</a>
                </div>
                <div class="item">
                    <a href="#">钓鱼岛</a>
                </div>
                <div class="item">
                    <a href="#">海外</a>
                </div>
                <div class="areamini_inter">
                    <div class="areamini_inter_split"></div>
                    <p class="areamini_inter_desc">地区专项版本</p>
                    <ul class="areamini_inter_list">
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">中国港澳</div>
                            </a>
                        </li>
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">中国台湾</div>
                            </a>
                        </li>
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">京东全球</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="areamini_inter">
                    <div class="areamini_inter_split"></div>
                    <p class="areamini_inter_desc">Available Sites</p>
                    <ul class="areamini_inter_list">
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">Global Site</div>
                            </a>
                        </li>
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">Сайт России</div>
                            </a>
                        </li>
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">Situs Indonesia</div>
                            </a>
                        </li>
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">Sitio de España</div>
                            </a>
                        </li>
                        <li class="areamini_inter_item">
                            <a class="areamini_inter_link" href="#">
                                <div class="areamini_inter_name">เว็บไซต์ประเทศไทย</div>
                            </a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
        <!-- 3、文字列表(右) -->
        <ul class="rt">
            <li>
                您好，欢迎来到京东
                <a href="#">[登录]</a>
                <a href="#">[免费注册]</a>
            </li>
            <li>
                <b></b> <!-- 边框 -->
                <a href="#">我的订单</a>
            </li>
            <li class="vip">
                <b></b> <!-- 边框 -->
                <a href="#">会员俱乐部</a>
            </li>
            <li class="dakehu">
                <b></b> <!-- 边框 -->
                <a href="#">企业频道</a>
            </li>
            <li class="app_jd">
                <b></b> <!-- 边框 -->
                <a href="#">手机京东</a>
            </li>
            <li class="service">
                <b></b> <!-- 边框 -->
                <a href="#">客户服务</a>
                <!-- 弹出菜单 -->
                <ul id="service_items">
                    <li>
                        <a href="#">帮助中心</a>
                    </li>
                    <li>
                        <a href="#">帮助中心</a>
                    </li>
最低0.47元/天 解锁文章
Mortal__
关注
专栏目录
商品详情页面html,div+css+JQuery仿京东商品详情界面
weixin_42407739的博客
06-03 2692
【实例简介】div+css+JQuery仿京东商品详情界面【实例截图】【核心代码】京东商品详情界面├── __MACOSX│ └── 浜笢鍟嗗搧璇︽儏鐣岄潰│ ├── css│ ├── images│ │ ├── images│ │ └── products│ └── js└── 浜笢鍟嗗搧璇︽儏鐣岄潰├── css│...
京东商品详情页
08-16
该Demo是本人在学习jQuery过程中仿照京东商品详情页自己制作的，里面包含有详细的css样式、Jquery的代码及注释，希望对有需要的小伙伴有所帮助。
html+css京东页制作
01-15
京东页面制作
HTML+CSS仿写京东页面附代码（web前端作业）
最新发布
gitblog_09743的博客
09-05 444
HTML+CSS仿写京东页面附代码（web前端作业） 仿京东页面.rar项目地址:https://gitcode.com/open-source-toolkit/0cef4 简介 本仓库提供了一个使用HTML和CSS仿写的京东页面代码，适用于web前端作业或学习参考。通过本项目，你可以学习到如何使用HTML和CSS来构建一个类似于京东的电商页面。 内容 index.html: 主页面文件，包含...
京东商城商品详情页面网页源码解析（静动态结合，包含CSS、HTML、Javascript、jQuery）
06-10
本资源主要用于前端初学者学习使用，资源内容为京东商城商品详情页的源码。包含了CSS、HTML、JavaScript、jQuery，其中包含了一部分的中文解析，非常适合前端初学这练手。
京东HTML静态模板页面全套
02-08
包含登陆注册商品列表商品详情订单收货地址等全套模板页面
京东网页（html代码）
2301_77416097的博客
01-12 2772
【代码】京东网页（html代码）
京东商城（HTML和CSS实现京东商城网站）
灵魂漫步的博客
06-19 6922
本页面模仿京东商城 本系统完全模仿京东商城写的页面，页面功能齐全 技术实现 采用HTML5,CSS3,JavaScript,Jquery 京东商城页面 导航栏部分代码 <!-- 购物导航栏-1--> <div class="shop-right fn-hide"> <div class="nav-top"> <a...
基于html5和css3制作的京东商城的页面.zip
02-13
【HTML5与CSS3在京东商城页面制作中的应用】 HTML5是超文本标记语言的第五次重大修订，它带来了许多新的结构性元素、表单控件和多媒体支持，极大地提升了网页的交互性和表现力。在京东商城这样的大型电商平台上，...
京东网页制作html＋css
08-14
HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 是网页制作的基础技术。HTML 主要负责网页的内容结构，通过标签来定义文本、图片、链接、表格等各种元素。例如，`<p>` 标签用于表示段落，`<img>...
div+css+JQuery仿京东商品详情界面
09-08
div+css+JQuery仿京东商品详情界面
简易京东网页HTML代码（HTML&JS;）
01-02
HTML课程设计（模拟京东网页 购物网站）主要功能DIV 网页框架设计 链接
京东前端HTML模板
12-17
仿制京东前台模板，包括首页，注册，登录等。
css+html京东网页的制作
12-21
仿照京东网站进行编写的京东网页 运用HTML5+CSS3进行网页布局和网页元素样式设计，能依据流行趋势设计网页背景、图文列表和图文混排、动画、交互等。
HTML+CSS+JavaScript仿京东购物网站制作 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
QQ_____365392777的博客
08-13 958
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
仿照京东商品展示html,仿京东的商品展示详情页面
weixin_32698563的博客
06-07 3028
【实例简介】仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。【实例截图】【核心代码】9374d44a-1695-43f2-a897-d32eef875b93└── shangchengxiangmu├── css│ └── shouye.css├── images│ ├── left.png│ ├── loader....
【京东】商品详情页采集
网页爬虫与数据采集 · 八爪鱼
09-27 3877
采集场景 打开京东商品详情页（实例网址：https://item.jd.com/100006607659.html#crumb-wrap ），采集点击不同的参数（颜色、版本等）后得到的数据（商品编号、价格、主图链接等字段会随着参数变化而变化）。 鼠标放到图片上，右键，选择【在新标签页中打开图片】可查看高清大图 下文其他图片同理 采集字段 商品标题、颜色、版本、价格、商品名称、商品编号、图片网址等。 采集结果 采集结果可导出为Excel、CSV、HTML、数据库等多种格式。导出为Excel示例： 教程说明
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 5406
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录 注册 首页 购物 商品详情 ,等多个页面~特别适合web期末作业 网页制作介绍 关于HTML期末网页制作，，大作业A+水平！！主要特色：京东首页HTML网页制作~ 作为第一次遇到html期末大作业，熬夜了好几天才做了个大概所以想纪念一下~仿京东商城，很好看。 作品(动态效果)演示 作品(静态效果)演示 登录 注册 文件目录 代码实现 一、京东商城实现 HTML
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值