第一次网站制作||京东网站仿做||简单易上手
使用工具
VScode
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" />
<!-- SEO:搜索引擎优化,网站优化三大标签:标题、关键字、描述 -->
<!-- 标题 -->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
<!-- 关键字 -->
<meta
name="Keywords"
content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
/>
<!-- 描述 -->
<meta
name="description"
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"
/>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="reset.css" />
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="base.css" />
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="fontawesome/css/all.css" />
<!-- 引入当前页面的样式表 -->
<link rel="stylesheet" href="index.css" />
<!-- 引入网站图标 -->
<link rel="icon" href="img/吉祥物.webp" />
<!-- 引入js的tools工具 -->
<script type="text/javascript" src="js/tools.js"></script>
<!-- 引入外部js文件 -->
<script type="text/javascript" src="index.js"></script>
<!--使用swiper插件需要引入的库-->
<!-- 引入jQ库 -->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入swiper库 -->
<script src="插件/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="插件/dist/css/swiper.css">
</head>
<body>
<!-- 顶部导航条 -->
<div class="topbar-wrapper">
<div class="topbar w clearfix">
<!-- 左侧位置菜单 -->
<div class="location">
<div class="city">
<i class="fas fa-map-marker-alt"></i>
<a href="#">山西</a>
</div>
<!-- 添加一个位置的弹出层 -->
<div class="city-location">
<ul>
<a href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_028f45b4dfbf4b37a13998326a62df09">北京</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">天津</a>
<a href="javascript:;">重庆</a>
<a href="javascript:;">河北</a>
<a class="shanxi" href="javascript:;">山西</a>
<a href="javascript:;">河南</a>
<a href="javascript:;">辽宁</a>
<a href="javascript:;">吉林</a>
<a href="javascript:;">黑龙江</a>
<a href="javascript:;">内蒙古</a>
<a href="javascript:;">江苏</a>
<a href="javascript:;">山东</a>
<a href="javascript:;">安徽</a>
<a href="javascript:;">浙江</a>
<a href="javascript:;">福建</a>
<a href="javascript:;">湖北</a>
<a href="javascript:;">广东</a>
<a href="javascript:;">广西</a>
<a href="javascript:;">江西</a>
<a href="javascript:;">四川</a>
<a href="javascript:;">海南</a>
<a href="javascript:;">贵州</a>
<a href="javascript:;">云南</a>
<a href="javascript:;">西藏</a>
<a href="javascript:;">陕西</a>
<a href="javascript:;">青海</a>
<a href="javascript:;">宁夏</a>
<a href="javascript:;">新疆</a>
<a href="javascript:;">港澳</a>
<a href="javascript:;">钓鱼岛</a>
<a href="javascript:;">海外</a>
<a href="javascript:;">台湾</a>
<a href="javascript:;">台湾</a>
<a href="javascript:;">台湾</a>
</ul>
</div>
</div>
<!-- 右侧菜单 -->
<ul class="shortcut">
<li>
<a href="#">你好,请登录</a>
<a class="zi" href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_028f45b4dfbf4b37a13998326a62df09">免费注册</a>
</li>
<li class="line"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="line"></li>
<li class="my-jd">
<div class="my">
<a herf="#">我的京东</a>
<i class="fas fa-angle-down" aria-hidden="true"></i>
</div>
<!-- 添加一个我的京东的弹出层 -->
<div class="my-list">
<div class="item1">
<a href="">待处理订单</a>
</div>
<div class="item1">
<a href="">我的问答</a>
</div>
<div class="item1">
<a href="">返修退换货</a>
</div>
</div>
</li>
<li class="line"></li>
<li>
<a herf="#">京东会员</a>
</li>
<li class="line"></li>
<li class="firm-cg">
<div class="firm">
<a class="zi" herf="#">企业采购</a>
<i class="fas fa-angle-down"></i>
</div>
<!-- 添加一个企业采购的弹出层 -->
<div class="firm-list">
<div class="my-list2">
<div class="item1">
<a href="">企业购</a>
</div>
<div class="item1">
<a href="">工业品</a>
</div>
<div class="item1">
<a href="">礼品卡</a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li class="server-kh">
<div class="server">
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</div>
<!-- 添加一个客户服务的弹出层 -->
<div class="server-list">
<div class="my-list3">
<div class="item1">
<a href="">企业招商</a>
</div>
<div class="item1">
<a href="">学习中心</a>
</div>
<div class="item1">
<a href="">商家帮助</a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li class="web-dh">
<