京东项目案例

长时间没有写前端了，一上手就是一个京东项目，磨蹭了好几天。有了这次的基础下面的代码写出来会更快吧！

下面是效果图

1 初始化文件

• 新建项目的基本文件夹，创建工作环境
• 新建首页文件index.html
• normalize.css的初始化文件拖到css文件夹中

对于浏览器的兼容性的问题有做初始化处理，以及其他的基本样式

2  头部实现

•  小图标

https://www.jd.com/favicon.ico 

一般的小图标都是网址加favicon.ico结尾就可以找到

对与自己想要生成的ico图标可以用专用的网站将图片转换为ico图标： 可用比特虫

• 初始化的文件

<link rel="stylesheet" type="text/css" href="css/normalize.css" charset="utf-8"></link>

一定要charset 负责会一直link无效

• hover注意细节

：hover前不可以加空格

hover失效的几个原因

 

• 代码

    <!-- header部分 -->
    <header> 
        <div  class="w">
            <a href= "#">
                <img src="images/header.png" height="80px" width="1190" alt="">
            </a>
        </div>
        
    </header>
    <!-- header结束 -->
    <!-- 快速导航栏部分 start-->
    <div class="daohang">
        <div class="w">
            <ul class="fl">
                <li class="city"><i class="col"></i> 湖北</li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">你好请登录</a>
                    <a href="#" class="col">免费注册</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">我的京东</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">京东会员</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">企业采购</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">客服服务</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">网站导航</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li class="moble">
                    <a href="#">手机京东</a>
                    <img  src="images/mobile.png" alt="">
                </li>
                 
            </ul>
        </div>  
    </div>
    <!-- 快速导航栏部分 end-->
    <!-- 中间部分 start -->
    <div class="w middle">
        <div class="logle">
            <h1>    <!-- h1可以提高权重 -->
                <a href=""></a>
            </h1>
        </div>
        <!-- 搜索 -->
        <div class="form">
            <input type="text" placeholder="乳胶漆">
            <button></button><!--  与  <input type="button" value="">不同的是他是双标签 -->
        </div>
        <!-- 购物车 -->
        <div class="shopcar">
            <i></i>
            <a href="#" class="col"> 我的购物车</a>
            <span>0</span>
        </div>
        <!-- 关键词 -->
        <div class="hotwords">
            <a href="#" class="col">沁园净水器</a>
            <a href="#">清凉家装</a>
            <a href="#">安坐座椅</a>
            <a href="#">畅玩8</a>
            <a href="#">高效农机</a>
            <a href="#">清凉空调</a>
            <a href="#">唯品会</a>
            <a href="#">AMD新品</a>
            <a href="#">低至五折</a>
        </div>
        <!-- 小导航部分 -->
        <div class="navitems">
            <ul>
                <li><a href="#">秒杀</a></li>
                <li><a href="#">优惠券</a>
                <li><a href="#">PLUS会员</a></li>
                <li><a href="#">闪购</a></li>
                <li class="space"></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">京东时尚</a></li>
                <li><a href="#">京东超市</a></li>
                <li><a href="#">京东生鲜</a></li>
                <li class="space"></li>
                <li><a href="#">海囤全球</a></li>
                <li><a href="#">京东金融</a></li>
            </ul>
        </div>
    </div>
    <!-- 中间部分 end -->

• 实现效果截图：

 

3 底部实现

使用fw生成切片会比截图清晰多了，开始一直在原图上截图导致截取结果总是标准。

• 我的代码

  <!-- 页面底部分 start -->
    <footer>
        <!-- 服务 -->
        <div class="service">
            <div class="w">
               <ul>
                   <li>
                       <h5></h5>
                       <p>品类齐全,轻松购物</p>
                   </li>
                   <li>
                        <h5></h5>
                        <p>品类齐全,轻松购物</p>
                    </li>
                    <li>
                            <h5></h5>
                            <p>品类齐全,轻松购物</p>
                        </li>
                        <li>
                                <h5></h5>
                                <p>品类齐全,轻松购物</p>
                            </li>
               </ul>
            </div>
        </div>
        <!-- 帮助模块 -->
        <div class="help w">
            <div class="fl">
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                        <dt>配送方式</dt>
                        <dd><a href="#">联系客服</a></dd>
                        <dd><a href="#">211限时达</a></dd>
                        <dd><a href="#">配送服务查询</a></dd>
                        <dd><a href="#">配送费用收取标准</a></dd>
                        <dd><a href="#">海外配送</a></dd>
                </dl>
                <dl>
                        <dt>支付方式</dt>
                        <dd><a href="#">货到付款</a></dd>
                        <dd><a href="#">在线支付</a></dd>
                        <dd><a href="#">分期付款</a></dd>
                        <dd><a href="#">邮局汇款</a></dd>
                        <dd><a href="#">公司转账</a></dd>
                </dl>
                <dl>
                        <dt>售后服务</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">价格保护</a></dd>
                        <dd><a href="#">退款说明</a></dd>
                        <dd><a href="#">返修/退换货</a></dd>
                        <dd><a href="#">取消订单</a></dd>
                </dl>
                <dl>
                        <dt>特色服务</dt>
                        <dd><a href="#">夺宝岛</a></dd>
                        <dd><a href="#">DIY装机</a></dd>
                        <dd><a href="#">延保服务</a></dd>
                        <dd><a href="#">京东E卡</a></dd>
                        <dd><a href="#">京东通信</a></dd>
                        <dd><a href="#">京鱼座智能</a></dd>
                </dl>
            </div>
            <div class="fr">
               <div class="coverge">
                   <h5>京东自营覆盖区县</h5>
                   <p>
                     京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
                   </p>
                   <a href="#">查看详情</a>
               </div>
            </div>
        </div>
        <!-- 版权 -->
        <div class="root">
             <span>
                 <a href="#">关于我们</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">联系我们</a>
             </span>
             <span class="space2">|</span>
             <span>
                 <a href="#">联系客服</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">合作招商</a>
             </span>
             <span class="space2">|</span>
             <span>
                 <a href="#">商家帮助</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">营销中心</a>
             </span>
             <span class="space2">|</span>
             <span>
                 <a href="#">手机京东</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">友情链接</a>
             </span>
             <span class="space2">|</span>
             <span>
                 <a href="#">销售联盟</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">京东社区</a>
             </span>
             <span class="space2">|</span>
             <span>
                 <a href="#">风险监测</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">隐私政策</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">京东公益</a>
             </span>
             <span class="space2">|</span>
              <span>
                 <a href="#">English Site</a>
             </span>
             <span class="space2">|</span>
             <span>
                <a href="#">Media & IR</a>
            </span>
        </div>
        <div class="root2">
                <span>
                        <a href="#">京公网安备11000002000088</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">京ICP证070359号</a>
                    </span>
                    <span class="space2">|</span>
                    <span>
                        <a href="#">互联网药品信息服务资格证编号（京）-经营性-2014-0008</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">新出发京零 字第大120007号</a>
                    </span>       
        </div>
        <div class="root2">
                <span>
                 <a href="#">互联网出版许可证编号新出网证（京）字150号</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">出版物径营许可证</a>
                    </span>
                    <span class="space2">|</span>
                    <span>
                        <a href="#">网络文化经营许可证京网文[2014]2148 - 348号</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">违法和不良信息举报电话：4006561155</a>
                    </span>
        </div>
        <div class="root2">
                <span>
                        <a href="#">Copyright@ 2004 -2019 京东JD.com版权所有</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">消费者维权热线：4006067733 经营证照</a>
                    </span>
                    <span class="space2">|</span>
                    <span>
                        <a href="#">(京)网城平台备字(2018)第00003号</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">营业执照</a>
                    </span>
        </div>
        <div class="root2">
                <span>
                        <a href="#">Global Site</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">Ca</a>
                    </span>
                    <span class="space2">|</span>
                    <span>
                        <a href="#">Situs Indonesia</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">Sitio de Espana</a>
                    </span>
                    <span class="space2">|</span>
        </div>
        <div class="root2">
                <span>
                        <a href="#">京东旗下网站：京东钱包</a>
                    </span>
                    <span class="space2">|</span>
                     <span>
                        <a href="#">京东云</a>
                    </span>
        </div>
        <div class="foot">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#" class="sp2">  </a>
            <a href="#" class="sp"></a>
            <a href="#"></a>
        </div>
    </footer>
    <!-- 页面底部分 end -->

• 实现效果截图

4 中间分类

• 我的代码

   <!-- 中间分类区域 start -->
    <div class="w grid">
        <div class="grid-col1 fl">
            <ul>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
                <li><a href="#">手机</a>/ <a href="#">运营商</a>/ <a href="#">数码</a></li>
            </ul>
         </div>
        <div class="grid-col2 fr">
                <div class="grid-col2-1 fl">
                    <a href="#"></a>
                    <a href="#" class="arrow-l"> < </a>
                    <a href="#" class="arrow-r"> > </a>
                    <ul class="cicle">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="current"></li>
                    </ul>
                </div>
                <div class="grid-col2-2 fl">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
                <div class="grid-col2-3 fl">
                   <div class="start">
                        <a href="#">
                        <img src="images/no_login.jpg" alt="">
                        </a>                       
                        Hi~欢迎来到京东！<br>
                        <a href="#">登录</a> 
                        <a href="#">注册</a>        
                   </div>
                   <div class="login">                                
                          <a href="# fl">新人福利</a> 
                          <a href="# fl">PLUS会员</a>          
                   </div>
                   <div class="mid">
                       <h5 class="fl">京东快报</h5>
                       <span class="fr">更多 ></span><br>
                       <div>
                           <h6>热评</h6>
                           <a href="#">华为首款鸿蒙操作系统正开始</a>
                       </div>
                       <div>
                            <h6>推荐</h6>
                            <a href="#">一场车祸毁一辆车，然后将</a>
                        </div>
                        <div>
                        <h6>热议</h6>
                        <a href="#">华为Mate 30 Pro震撼全场，</a>
                        </div>
                        <div>
                            <h6>HOT</h6>
                            <a href="#">电动车禁令已近发布，其中</a>

                        </div>
                    </div>
                    <div class="end">
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                        <a href="#"></a>     
                    </div>
                </div>
        </div>
       
    </div>
    <!-- 中间分类区域 end -->

• 注意要点：

我在这里写的轮播图只是静态的，现实是要用js实现。期待后期更新。

• 实现效果：