前端第九波

阅读：评论：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 版权所有</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('../?1x1j55');src:  url('../?1x1j55#iefix') format('embedded-opentype'),url('../f?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;
}
/*底部结束*/

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

本文发布于:2024-01-29 00:45:30，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170646033511494.html

上一篇：仿京东商城主页（静态页面）

下一篇：贵州榕江苗寨欢庆鼓藏节

标签：

留言与评论（共有 0 条评论）