第一次网站制作｜｜京东网站仿做｜｜简单易上手

真真真真真的很菜

已于 2022-09-27 09:15:48 修改

阅读量1.2k

点赞数 3

文章标签： css html 前端 visual studio code

于 2022-09-27 09:12:26 首次发布

本文链接：https://blog.csdn.net/m0_46270734/article/details/127064504

版权

这篇博客介绍了作者初次尝试制作网站，以仿制京东网站为例，详细讲解了使用HTML和CSS的过程。在VScode编辑器下，通过创建html网页和编写css代码，实现了页面布局。特别提到了使用swiper插件来制作轮播图，并分享了初学者在布局时使用边框辅助调整的技巧。最后展示了部分实现结果，并欢迎读者指出代码中的不足。

摘要由CSDN通过智能技术生成

第一次网站制作｜｜京东网站仿做｜｜简单易上手

使用工具

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">
            <