前端第九波

最新推荐文章于 2024-06-15 11:46:27 发布

空巷挽清风

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量162

点赞数

分类专栏： HTML CSS 文章标签：前端京东页面模仿 html css

本文链接：https://blog.csdn.net/Kong_xiang/article/details/90446957

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

这段时间用空余的时间一直在模仿着个个网页进行练习，练习之前所学到的知识点，各种指令，放盒子布局。有一些不成熟的体会：

在写页面的时候就像是在搭积木一样，进行一个一个的盒子进行放置，先放一个大盒子（body）再放一个在中间的差不多大的可以适应大多数屏幕的版心盒子，然后在版心上分区域，再在区域中分功能模块，再进行分层放个个功能专区的盒子，设置浮动，定位等确定他的相对位置。然后还有一些细节的优化，使整体更加的美观，增加用户的使用体验。

经过这段时间我学到了好多，在布局方面也有了很大的提高，感觉在放盒子的时候头脑更加清醒。

模仿京东商城网页:

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <link rel="stylesheet" href="CSS/index.css" />
</head>
<body>
    <!-- 顶部广告开始 -->
    <div class="J_event">
        <a href="#" class="w">
            <i></i>
        </a>
    </div>
    <!-- 顶部广告结束 -->
    <!-- 快捷导航栏开始 -->
    <div class="shortcut">
        <div class="w">
            <ul class="fl">
                <li>
                    <i class="pos"></i>
                    北京
                </li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">
                        您好，请登录 &nbsp;&nbsp;
                    </a>
                    <a href="#" class="style-red">
                        免费注册
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        我的订单
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        我的京东
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        京东会员
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#" class="style-red">
                        企业采购
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        客户服务
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        网站导航
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li style="position: relative;">
                    <a href="#">
                        手机京东
                    </a>
                    <div class="erweima"></div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 快捷导航栏结束 -->
    <!-- header start -->
    <div class="header">
        <div class="w inner">
            <!-- logo部分 start -->
            <div class="logo">
                <h1>
                    <a href="#" title="京东网">京东</a>
                </h1>
            </div>
            <!-- logo部分 end -->

            <!-- search部分 start -->
            <div class="search">
                <input type="text" placeholder="商品">
                <button>搜索</button>
                <em></em>
            </div>
            <!-- search部分 end -->
            <!-- hotwords start  -->
            <div class="hotwords">
                <a href="#" class=style-red>潮流泡泡染</a>
                <a href="#">婴幼奶粉</a>
                <a href="#">汽车用品</a>
                <a href="#">AMD新品</a>
                <a href="#">万家乐</a>
                <a href="#">劳力士</a>
                <a href="#">第2件9.9</a>
                <a href="#">0元赢</a>
                <a href="#">手机优惠</a>
            </div>
            <!-- hotwords end -->
            <!-- 我的购物车盒子 start -->
            <div class="cw-icon">
                <i></i>
                <h1>我的购物车</h1>
                <s>0</s>
            </div>
            <!-- 我的购物车盒子 end -->
            <!-- 导航栏信息 envitems start -->
            <div class="envitems">
                <ul>
                    <li><a href="#">秒杀</a></li>
                    <li><a href="#">优惠券</a></li>
                    <li><a href="#">PLUS会员</a></li>
                    <li><a href="#">闪购</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">京东时尚</a></li>
                    <li><a href="#">京东超市</a></li>
                    <li><a href="#">京东生鲜</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">海囤全球</a></li>
                    <li><a href="#">京东金融</a></li>
                </ul>
            </div>
            <!-- 导航栏信息 envitems end -->
        </div>
    </div>
    <!-- header end -->
    <!-- 底部开始 -->
    <div class="mod">
        <!-- 底部服务模块开始 -->
        <div class="mod_service">
            <div class="w mod_service_inner">
                <ul class="mod_service_list">
                    <li class="mod_service_item">
                        <h5 class="mod_service_item_duo">多</h5>
                       <p class="mod_service_item_text">品类齐全，轻松购物</p>
                    </li>
                    <li class="mod_service_item">
                        <h5 class="mod_service_item_kuai">快</h5>
                        <p class="mod_service_item_text">多仓直发，急速配送</p>
                    </li>
                    <li class="mod_service_item">
                        <h5 class="mod_service_item_hao">好</h5>
                        <p class="mod_service_item_text">正品行货，精致服务</p>
                    </li>
                    <li class="mod_service_item">
                        <h5 class="mod_service_item_sheng">省</h5>
                        <p class="mod_service_item_text">天天低价，畅选无忧</p>
                    </li>
                </ul>
            </div>    
        </div>
        <!-- 底部服务模块结束 -->
        <!-- 底部帮助模块开始 -->
        <div class="mod_help">
            <div class="w mod_help_inner">
                <div class="mod_help_list">
                    <div class="mod_help_nav">
                        <h5>购物指南</h5>
                        <ul>
                            <li><a href="#">购物流程</a></li>
                            <li><a href="#">会员介绍</a></li>
                            <li><a href="#">生活旅行</a></li>
                            <li><a href="#">常见问题</a></li>
                            <li><a href="#">大家电</a></li>
                            <li><a href="#">联系客服</a></li>
                        </ul>
                    </div>
                    <div class="mod_help_nav">
                        <h5>配送方式</h5>
                        <ul>
                            <li><a href="#">上门自提</a></li>
                            <li><a href="#">211限时达</a></li>
                            <li><a href="#">配送服务查询</a></li>
                            <li><a href="#">配送费收取标准</a></li>
                            <li><a href="#">海外配送</a></li>
                        </ul>
                    </div>
                    <div class="mod_help_nav">
                        <h5>支付方式</h5>
                        <ul>
                            <li><a href="#">货到付款</a></li>
                            <li><a href="#">在线支付</a></li>
                            <li><a href="#">分期付款</a></li>
                            <li><a href="#">邮局汇款</a></li>
                            <li><a href="#">公司转账</a></li>
                        </ul>
                    </div>
                    <div class="mod_help_nav">
                        <h5>售后服务</h5>
                        <ul>
                            <li><a href="#">售后政策</a></li>
                            <li><a href="#">价格保护</a></li>
                            <li><a href="#">退款说明</a></li>
                            <li><a href="#">返修/退换货</a></li>
                            <li><a href="#">取消订单</a></li>
                        </ul>
                    </div>
                    <div class="mod_help_nav">
                        <h5>特色服务</h5>
                        <ul>
                            <li><a href="#">夺宝岛</a></li>
                            <li><a href="#">DIY装机</a></li>
                            <li><a href="#">延保服务</a></li>
                            <li><a href="#">京东E卡</a></li>
                            <li><a href="#">京东通信</a></li>
                            <li><a href="#">京鱼座智能</a></li>
                        </ul>
                    </div>
                    <div class="mod_help_cover">
                        <h5>京东自营覆盖区县</h5>
                        <div class="mod_help_cover_con">
                            <p class="mod_help_cover_info">
                                京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
                            </p>
                            <p class="mod_help_cover_more">
                                <a href="#">
                                    查看详情>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部帮助模块结束 -->
        <!-- 底部版权(copyright)模块开始 -->
        <div class="mod_copyright">
            <div class="w mod_copyright_inner">
                <p class="mod_copyright_links">
                    <a href="#">关于我们</a>
                    <span class="spacer_1">|</span>
                    <a href="#">联系我们</a>
                    <span class="spacer_1">|</span>
                    <a href="#">联系客服</a>
                    <span class="spacer_1">|</span>
                    <a href="#">合作招商</a>
                    <span class="spacer_1">|</span>
                    <a href="#">商家帮助</a>
                    <span class="spacer_1">|</span>
                    <a href="#">营销中心</a>
                    <span class="spacer_1">|</span>
                    <a href="#">手机京东</a>
                    <span class="spacer_1">|</span>
                    <a href="#">友情链接</a>
                    <span class="spacer_1">|</span>
                    <a href="#">销售联盟</a>
                    <span class="spacer_1">|</span>
                    <a href="#">京东社区</a>
                    <span class="spacer_1">|</span>
                    <a href="#">风险监测</a>
                    <span class="spacer_1">|</span>
                    <a href="#">隐私政策</a>
                    <span class="spacer_1">|</span>
                    <a href="#">京东公益</a>
                    <span class="spacer_1">|</span>
                    <a href="#">English Site</a>
                    <span class="spacer_1">|</span>
                    <a href="#">Media & IR</a>
                </p>
                <div class="mod_copyright_info">
                    <div class="mod_copyright_cert">
                        <p>
                            <a href="#">京公网安备 11000002000088号</a>
                            <span class="spacer_1">|</span>
                            <a href="#">京ICP证070359号</a>
                            <span class="spacer_1">|</span>
                            <a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
                            <span class="spacer_1">|</span>
                            <a href="#">新出发京零 字第大120007号</a>
                        </p>
                        <p>
                            <a href="#">互联网出版许可证编号新出网证(京)字150号</a>
                            <span class="spacer_1">|</span>
                            <a href="#">出版物经营许可证</a>
                            <span class="spacer_1">|</span>
                            <a href="#">网络文化经营许可证京网文[2014]2148-348号</a>
                            <span class="spacer_1">|</span>
                            <a href="#">违法和不良信息举报电话：4006561155</a>
                        </p>
                        <p>
                            <a href="#">Copyright © 2004 - 2019  京东JD.com 版权所有</a>
                            <span class="spacer_1">|</span>
                            <a href="#">消费者维权热线：4006067733经营证照</a>
                            <span class="spacer_1">|</span>
                            <a href="#">(京)网械平台备字(2018)第00003号</a>
                            <span class="spacer_1">|</span>
                            <a href="#">营业执照</a>
                        </p>
                    </div>
                    <div class="mod_copyright_inter">
                        <p>
                            <a href="#">Global Site</a>
                            <span class="spacer_1">|</span>
                            <a href="#">Сайт России</a>
                            <span class="spacer_1">|</span>
                            <a href="#">Situs Indonesia</a>
                            <span class="spacer_1">|</span>
                            <a href="#">Sitio de España</a>
                            <span class="spacer_1">|</span>
                            <a href="#">เว็บไซต์ประเทศไทย</a>
                        </p>
                    </div>
                    <div class="mod_copyright_subsites">
                        <p>
                            <a href="#">京东旗下网站：京东钱包</a>
                            <span class="spacer_1">|</span>
                            <a href="#">京东云</a>
                        </p>
                    </div>
                </div>
                <p class="mod_copyright_auth">
                    <a href="#" class="ico_1"></a>
                    <a href="#" class="ico_2"></a>
                    <a href="#" class="ico_3"></a>
                    <a href="#" class="ico_4"></a>
                    <a href="#" class="ico_5"></a>
                </p>
            </div>
        </div>
        <!-- 底部版权(copyright)模块结束 -->
    </div>
    <!-- 底部结束 -->
</body>
</html>

index.css

*{
    margin: 0;
    padding: 0;/*内边距*/
}

body{
    background-color: #eee;                     /*设置全局的背景颜色*/
    font: 16px/1.5 Microsoft YaHei ;color:#666; /*设置全局的字号大小和字体的样式，还有字体的颜色*/
}
@font-face {                                    /*引入字体图标库*/
  font-family: 'icomoon';                       /*字体图标库的名字*/
  src:  url('../fonts/icomoon.eot?1x1j55');
  src:  url('../fonts/icomoon.eot?1x1j55#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?1x1j55') format('truetype'),
    url('../fonts/icomoon.woff?1x1j55') format('woff'),
    url('../fonts/icomoon.svg?1x1j55#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.style-red{
    color: #f10215!important;                   /*定义京东的主色*/
}
a{
    color: #666;
    text-decoration: none;                      /*a标签取消下划线*/
}
a:hover{                                        /*鼠标经过时的样式*/
    color: #c81623;
}
i{
    font-style: normal;                         /*消除i标签的倾斜效果*/
}
li{
    list-style: none;                           /*消除li标签前的黑色小圆点*/
}
input{
    padding: 0px;                               /*消除input输出框的内边距*/
}
button{
    padding: 0px;                               /*消除按钮的内边距*/
    border: 0;                                  /*消除按钮的边框*/
    cursor: pointer;                            /*鼠标经过时变为小手*/   
}
.w{                                             /*设置版心的宽度与位置*/
    width: 1190px;
    margin: auto;
}
.fl{                                            /*左浮动*/
    float: left;
}
.fr{                                            /*右浮动*/
    float: right;
}

/*顶部 start*/
.J_event{
    height: 80px;
    width: 100%;
    background-color: #000;
}
.J_event a{
    display: block;
    height: 80px;
    background: url(../img/header.jpg) no-repeat;/*no-repeat，设置图片不重复*/
    margin: auto;
    cursor: pointer;
    position: relative;                          /*设置定位，相对定位*/           
}
.J_event a i{
    height: 20px;
    width: 20px;
    position: absolute;                          /*设置定位，绝对定位*/   
    top: 0px;
    right: 5px;
    font-family: "icomoon";
    text-align: center;
    line-height: 20px;
    color: #eee;
    background: rgba(0,0,0,.3);                   /*设置透明度*/
}
/*顶部 end*/

/*快捷导航栏开始*/
.shortcut{
    height: 30px;
    width: 100%;
    background-color: #e3e4e5;
    border-bottom: 1px solid #dddddd;
    line-height: 30px;
}
.shortcut .fl li{
    margin-left: 200px; 
}
.shortcut a{
    font-size: 12px;
    color: #9d9d9d;
}
.shortcut a:hover{
    color: #c81623;
}
.pos{
    font-family: "icomoon";
    font-size: 16px;
    color: red;
}
.shortcut .fr li{
    float: left;
}
.dropdown{
    padding-right: 15px;
    position: relative;
}
.dropdown i{  
    right: -2px;
    top: -2px;
    font-family: "icomoon";
    font-size: 14px; 
    color: #9d9d9d;
    position: absolute;
}
.spacer{
    height: 10px;
    width: 1px;
    background-color: #ccc;
    margin: 10px 10px 0;
}
.erweima{
    width: 60px;
    height: 60px;
    display: inline;
    background: url("../img/mobile.png") no-repeat;
    border: 1px solid #ccc;
    padding: 3px;
    position: absolute;
    background-position: center;
    right: -8px;
    top: 32px;
}
/*快捷导航栏结束*/
/*header start*/
.header{
    height: 140px;
    width: 100%;
}
.header .inner{
    width: 1190px;
    height: 140px;
    position: relative;
}
.logo{
    height: 170px;
    width: 190px; 
    /*background-color: #fefefe;*/
    position: absolute;
    top: -30px;
    left: 0px;
}
.logo h1{
    text-indent: -99999em;
    overflow: hidden;
    margin: 0px;
}
.logo a{
    display: block;
    height: 170px;
    width: 190px;
    background: url(../img/logo.png) no-repeat;
}
.search{
    height: 35px;
    width: 550px;
    background-color: pink;
    position: absolute;
    top: 25px;
    left: 320px;
}
.search input{
    height: 33px;
    width: 500px;
    border: 1px solid #f10215;
    outline: none;
    padding-left: 5px;
    color: #989898;
    float: left;
}
.search button{
    height: 35px;
    width: 43px;
    background-color: #f10215;
    float: left;
}
.search em{
    position: absolute;
    height: 24px;
    width: 24px;
    background: url("../img/sprite_fs@1x.png") no-repeat;
    background-position: 0 0;
    right: 50px;
    top: 6px;
    cursor: pointer;
}
.hotwords{
    height: 20px;
    width: 550px;
/*    background-color: pink;*/
    position: absolute;
    top: 70px;
    left: 320px;
}
.hotwords a{
    color: #9e9b99;
    float: left;
    font-size: 14px;
    padding: 4px;
}
.hotwords a:hover{
    color: #f10215;
}
.cw-icon{
    position: absolute;
    height: 36px;
    width: 150px;
    background-color: #fff;
    top: 25px;
    right: 120px;
}
.cw-icon i{
    position: absolute;
    font-family: "icomoon";
    font-size: 16px;
    top: 6px;
    left: 28px;
    color: #f10215;
}
.cw-icon h1{
    font-size: 14px;
    text-indent: 50px;
    line-height: 36px;
    font-weight: normal;
}
.cw-icon h1:hover{
    color: #f10215;
}
.cw-icon s{
    position: absolute;
    top: 0px;
    left: 115px;
    text-decoration: none;                      /*取消文本修饰*/
    background-color: #f10215;
    color: #fff;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    padding: 0 3px;
    border-radius: 7px;
}
.envitems{
    position: absolute;
    bottom: 0px;
    left: 200px;
}
.envitems ul{
    float: left;
}
.envitems ul li{
    float: left;
    margin-left: 30px;
}
.envitems li a{ 
    font-size: 16px;
    line-height: 40px;
    color: #555a5f;
    font-weight: 700;
}
.envitems li a:hover{
    color: #f10215;
}
.envitems .spacer{
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    margin-right: -10px;
    margin-bottom: 0px;
}
/*header end*/
/*底部开始*/
.mod{

}
.mod_service{
    height: 104px;
    /*background-color: pink;*/
    border-bottom: 1px solid #dedede
}
.mod_service_inner{
    /*background-color: #000;*/
    padding-top: 31px;
}
.mod_service_list{
    display: block;
    height: 42px;
    /*background-color: #fff;*/
}
.mod_service_item{
    position: relative;
    width: 297px;
    height: 42px;
    float: left;
    padding: 0px;
    text-align: center;
}
.mod_service_list li h5{
    position: absolute;
    display: block;
    width: 36px;
    height: 42px;
    overflow: hidden;
    text-indent: -999999em;
}
.mod_service_item_duo{
    background:url("../img/ico.png") no-repeat;
    background-position: 0px 0px;
    left: 33px;
}
.mod_service_item_kuai{
    background:url("../img/ico.png") no-repeat;
    background-position: 0px -42px;
    left: 33px;
}
.mod_service_item_hao{
    background:url("../img/ico.png") no-repeat;
    background-position: 0px -85px;
    left: 33px;
}
.mod_service_item_sheng{
    background: url("../img/ico.png") no-repeat;
    background-position: 0px -128px;
    left: 33px;
}
.mod_service_item_text{
    line-height: 42px;
    font-weight: 700;
    color: #444444;
}
.mod_help{
    height: 160px;
    padding: 20px 0;
    /*background-color: yellow;*/
}
.mod_help .mod_help_inner{
    height: 160px;
    border-bottom: 1px solid #dedede;
}
.mod_help_list{
    /*background-color: #fff;*/
}
.mod_help_nav{
    float: left;
    width: 198px;
    height: 154.33px;
    /*background-color: #fff;*/
    line-height: 22px;
    font: 12px/1.5 "Microsoft YaHei";
    color: #666;
}
.mod_help_nav h5{
    font-size: 14px;
    margin-bottom: 5px;
}
.mod_help_cover{
    float: left;
    width: 198px;
    height: 154.33px;
    /*background-color: #fff;*/
    line-height: 22px;
    font: 12px/1.5 "Microsoft YaHei";
    color: #666;
}
.mod_help_cover h5{
    text-align: center;
    font-size: 14px;
    margin-bottom: 5px;
}
.mod_help_cover .mod_help_cover_con{
    float: left;
}
.mod_help_cover_info{
    margin: 0 6px; 
    display: block;
    line-height: 22px;
    font: 12px/1.5 "Microsoft YaHei";
    color: #666;
}
.mod_help_cover_more{
    display: block;
    text-align: right;
}

.mod_copyright{
    font: 12px/1.5 "Microsoft YaHei";
}
.mod_copyright_inner{
    text-align: center;
    font-size: 12px;
    height: 261.89px;
}
.spacer_1{
    margin: 0 10px;
}
.mod_copyright_inner .mod_copyright_links{
    display: block;
}
.mod_copyright_info a{
    color: #999;
}
.mod_copyright_auth{
    margin: 25px 0;
}
.mod_copyright_auth a{
    display: inline-block;
    background-color: pink;
    width: 103px;
    height: 32px;
    margin: 0 3px;
    line-height: 1000px;
}
.ico_1{
    background: url("../img/ico_footer.png") no-repeat;
    background-position: 0 -151px;
}
.ico_2{
    background: url("../img/ico_footer.png") no-repeat;
    background-position: 0 -184px;
}
.ico_3{
    background: url("../img/ico_footer.png") no-repeat;
    background-position: -104px -184px;
}
.ico_4{
    background: url("../img/ico_footer.png") no-repeat;
    background-position: 0 -217px;
}
.ico_5{
    background: url("../img/ico_footer.png") no-repeat;
    background-position: -104px -217px;
}
/*底部结束*/

当然和真正的京东主页面还有很大的差距，还会继续努力的。

空巷挽清风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端第九波

这段时间用空余的时间一直在模仿着个个网页进行练习，练习之前所学到的知识点，各种指令，放盒子布局。有一些不成熟的体会：在写页面的时候就像是在搭积木一样，进行一个一个的盒子进行放置，先放一个大盒子（body）再放一个在中间的差不多大的可以适应大多数屏幕的版心盒子，然后在版心上分区域，再在区域中分功能模块，再进行分层放个个功能专区的盒子，设置浮动，定位等确定他的相对位置...
复制链接

扫一扫