这段时间 用空余的时间一直在模仿着个个网页进行练习，练习之前所学到的知识点，各种指令，放盒子布局。有一些不成熟的体会：
在写页面的时候就像是在搭积木一样，进行一个一个的盒子进行放置，先放一个大盒子（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="#"> 您好，请登录 </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; } /*底部结束*/当然和真正的京东主页面还有很大的差距，还会继续努力的。
