前端学习从入门到高级全程记录之14 （京东项目二）

目标

本期继续学习经典项目—京东项目

1.京东项目（二）

首先我们来看一下本期所需要用到的知识：

nav导航栏所用知识点

固定定位的盒子靠近版心右侧对齐

跟绝对定位的盒子居中对齐原理差不多。

left 50% 然后 margin-left 版心宽度一半。

焦点图部分所用知识点

负值自己的宽度一半（固定定位也是如此）

背景半透明

1.强烈推荐： background: rgba(r,g,b,alpha);

 r,g,b 是红绿蓝的颜色，  alpha 是透明度的意思，取值范围是 0~1 之间。

2.了解ie低版本浏览器 半透明

filter:Alpha(opacity=50) ； // opacity值为0 到 100

但是 此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了

因此，低版本的 ie6.7浏览器，我们不需要透明了，直接采用优雅降级的做法。

background: gary;

background: rgba(0,0,0,.2);

写上两句 背景， 低版本ie只执行gray， 其他浏览器执行 半透明下面这一句。

BFC(块级格式化上下文)

BFC(Block formatting context)

直译为"块级格式化上下文"。

元素的显示模式

我们前面讲过 元素的显示模式 display。

分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。

那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。

注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。

这个BFC 有着具体的布局特性：

有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。

就好比，你有了练习武术的体格了。 有潜力，有资质。

什么情况下可以让元素产生BFC

以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？

在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先…

同样，要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
2. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

白话文： 孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。

BFC的主要用途

BFC能用来做什么？

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

主要用到

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

(2) 解决外边距合并问题

外边距合并的问题。

主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

(3) 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

BFC 总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

优雅降级和渐进增强

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似 爬山，由低出往高处爬

  优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

浏览器前缀

后面我们会有 常用的解决H5和C3 的兼容解决文件， 我们这里暂且不涉及。

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

2.项目搭建（二）

1.navitems开始
这里有一个量文字的高的技巧：

先量文字下方的距离，然后再复制盒子到上面并与上面对齐，这时的高就是文字的高。
index.html:

秒杀
优惠券
闪购
拍卖
京东服饰
京东超市
生鲜
全球购
京东金融

base.css:

.navitems{position: absolute;left: 200px;bottom: 0;
}
.navitems ul{float: left;
}
.navitems ul li{float: left;margin-left: 30px;
}
.navitems li a{font-size: 16px;color: #555A5F;font-weight: 700;height: 40px;line-height: 40px;display: block;
}
.navitems li a:hover{color: #F10215;
}
.navitems .spacer{float: left;margin-top: 15px;margin-left: 20px;margin-right: -10px;
}

效果图：

navitems结束

2.底部服务开始
有头有尾，我们第二个做的就是尾部。
需要图片：

先把大体的框架给做出来：
index.html:

1
2
3
4

base.css:

/*footer开始*/
.footer{height: 560px;background-color: #EAEAEA;
}
.footer-service{border-bottom: 1px solid #DEDEDE;
}
.footer-service-ineer{background-color: pink;padding: 30px 0;
}
.footer-service-ineer li{float: left;width: 297px;height: 42px;background-color: purple;
}
/*footer结束*/

效果图：

接下来完善它：
index.html:

多
品类齐全，轻松购物
快
多仓直发，极速配送
好
正品行货，精致服务
省
天天低价，畅选无忧

base.css:

/*footer开始*/
.footer{height: 560px;background-color: #EAEAEA;
}
.footer-service{border-bottom: 1px solid #DEDEDE;
}
.footer-service-ineer{/*background-color: pink;*/padding: 30px 0;
}
.footer-service-ineer li{float: left;width: 297px;height: 42px;/*background-color: purple;*/
}
.service-unit{width: 225px;height: 42px;margin: 0 auto;position: relative;
}
.service-unit h5{width: 36px;height: 42px;/*background-color: blue;*/position: absolute;top: 0;left: 0;background: url(../img/ico.png) no-repeat;text-indent: -999px;overflow: hidden;
}
h1,h5,p{margin: 0;
}
.service-unit p{line-height: 42px;margin-left: 45px;font-size: 18px;font-weight: 700;
}
.service-unit .kuai{/*之所以不直接写“kuai”是必须增加它的权重,防止被层叠掉*/background-position: 0 -44px;
}
.service-unit .hao{/*之所以不直接写“hao”是必须增加它的权重,防止被层叠掉*/background-position: 0 -86px;
}
.service-unit .sheng{/*之所以不直接写“sheng”是必须增加它的权重,防止被层叠掉*/background-position: 0 -128px;
}
/*footer结束*/

效果图：

服务模块完成

3.help模块开始
先把框架搭出来：
index.html:

购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服

base.css:

.help{height: 180px;background-color: pink;padding-top: 20px;
}
.help dl{float: left;width: 198px;
}
.hlep dt{font-size: 14px;font-weight: 700;color: #666;height: 30px;
}
.help dd a{color: #727272;font-size: 12px;
}
.help dd a:hover{color: #F10215;
}

*{margin: 0;padding: 0;
}
把之前h5去边框的可以去掉，换成这个万能的

效果图：

接下来完善它：
所需图片：

index.html:

购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
购物指南
购物流程
会员介绍
生活旅行
常见问题
大家电
联系客服
京东自营覆盖区县
京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
查看详情

base.css：

.help{height: 180px;/*background-color: pink;*/padding-top: 20px;
}
.help dl{float: left;width: 195px;
}
.hlep dt{font-size: 14px;font-weight: 700;color: #666;height: 30px;
}
.help dd {height: 22px;
}
.help dd a{color: #727272;font-size: 12px;
}
.help dd a:hover{color: #F10215;
}
.help .cover{float: right;width: 207px;height: 150px;background:url(../img/ico_footer.png) no-repeat;
}
.cover dt{text-align: center;
}
.help .info{width: 175px;height: 50px;font-size: 12px;margin-top: 5px;margin-left: 10px;line-height: 18px;color: #727272;
}
.more{text-align: right;padding-right: 10px;
}

效果图：

help完成

4.京东底部
index.html:

关于我们|联系我们|联系客服|合作招商|商家帮助|营销中心|手机京东|友情链接|销售联盟|京东社区|风险监测|隐私政策|京东公益|English Site|Media & IR
京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号
互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155
Copyright © 2004 - 2019  京东JD.com 版权所有|消费者维权热线：4006067733经营证照|(京)网械平台备字(2018)第00003号|营业执照
京东旗下网站：京东钱包|京东云

base.css:

/*版权模块statr*/
.copyright{border-top: 1px solid #ccc;padding-top: 15px;
}
.links{text-align: center;
}
.links a{color: #727272;font-size: 12px;
}
.links span{font-size: 12px;color: #D4CDCD;margin: 0 8px;
}
.c-info{font-size: 12px;color: #9E9E9B;text-align: center;line-height: 20px;margin-top: 10px;
}
.tupian{text-align: center;margin-top: 10px;
}
.tupian a{width: 103px;height: 32px;display: inline-block;background:url(../img/ico_footer.png) no-repeat 0 -151px;
}
.tupian .kexin{background-position: -104px -151px;
}
.tupian .chengxin{background-position: -104px -183px;
}
.tupian .intenet{background-position: 0px -183px;
}
.tupian .chain{background-position: 0px -217px;
}
.tupian .app{background-position: -104px -217px;
}
/*版权模块end*/
/*footer结束*/

效果图：

5.京东主题部分广告制作
中间部分，我们把它命名为main，是头部和底部之间的。需要图片：

index.html:

 123

注意，这次不再是base.css，而是index.css!!!

index.css:

/*main start*/
.jd{height: 480px;background-color: pink;position: relative;
}
.jd-inner{height: 480px;background-color: skyblue;position: relative;z-index: 1;/*要让版心压住图片，给他权重大一些*/
}
.ad{height: 480px;background: url(../img/bg.png) no-repeat top center;position: absolute;top: 0;left: 0;width: 100%;/*一定要写 position会转换为行内块，根据内容定宽度*/z-index: 0;
}
.ad a{display: block;width: 100%;height: 100%;
}
/*main end*/

效果图：

6.广告复习again
上面左右两边的翅膀非常重要，考验了很多知识点，一定要记住：不要让翅膀压住版心，给它们权重，这样就不会压住了。但要注意：只有定位的盒子才有z-index。
7.版心三个模块划分
index.html:

index.css:

.jd-clo1{width: 190px;height: 480px;background-color: pink;float: left;
}
.jd-clo2{width: 790px;height: 480px;background-color: purple;float: left;margin-left: 10px;
}
.jd-clo3{width: 190px;height: 480px;background-color: yellow;float: right;
}

效果图：

8.家用电器模块
index.html:

家用电器
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码
手机/运营商/数码

index.css:

.jd-clo1{width: 190px;height: 465px;background-color: #6e6568;float: left;padding-top: 15px;
}
.jd-clo1 li{padding-left: 10px;height: 28px;line-height: 28px;
}
.jd-clo1 li:hover{background-color: #999395;
}
.jd-clo1 li a{color: #fff;font-size: 14px;
}
.jd-clo1 li span{color: #fff;font-size: 12px;
}
.jd-clo2{width: 790px;height: 480px;background-color: purple;float: left;margin-left: 10px;
}
.jd-clo3{width: 190px;height: 480px;background-color: yellow;float: right;
}

效果：

9.轮播图部分完成
需要图片：



index.html:



index.css:

.jd-clo2{width: 790px;height: 480px;background-color: purple;float: left;margin-left: 10px;
}
.jd-clo2-hd{height: 340px;/*background-color: pink;*/margin-bottom: 10px;position: relative;
}
.jd-clo2-bd div{width: 390px;height: 130px;float: left;
}
.jd-clo2-bd div img{width: 100%;
}
.firstpic{margin-right: 10px;
}
.arr-l,.arr-r{position: absolute;top: 50%;margin-top: -30px;width: 30px;height: 60px;background: rgba(0,0,0,0.3);font-family: "icomoon";color: #fff;text-align: center;line-height: 60px;font-size: 25px;}
.arr-l{left: 0;}
.arr-r{right: 0;
}
.jd-clo2-hd ol{position: absolute;bottom: 20px;left: 50%;margin-left: -90px;width: 180px;height: 20px;background: rgba(255,255,255,0.3);border-radius: 10px;
}
.jd-clo2-hd ol li{width: 12px;height: 12px;background-color: #fff;border-radius: 50%;float: left;margin: 4px 5px;cursor: pointer;
}
.jd-clo2-hd .current{background-color: #F10215;
}
.jd-clo3{width: 190px;height: 480px;background-color: yellow;float: right;
}
/*main end*/

效果图：

10.三个小问题
1.完成上面的代码书写后，你检查自己的代码，会发现这样的事情：

这个li居然是343.2像素，但是显然我们写代码的时候并不是这样，到底是怎么一回事？

其实是因为图片和文字的基线对齐：

所以会有3、4像素的差距。所以我们改一下：
注意，是在base.css中加入：

img{vertical-align: top;/*去除图片底侧缝隙*/
}

效果立竿见影：

2.当父亲盒子里面有图片时，图片宽高设置为100%即可，就是跟父亲一样宽高。
3.
这个结构大家一定要记住，以后用js的时候会很方便。

3.总结

本期学习到此结束，下期继续京东项目。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！