品优购项目06课后作业--产品详情页，text-align:justify属性无效，

0.编程中出现的问题

0.1 html文字字数不一致的布局方法，也就是如何实现文字俩端对齐？

text-align:justify;

0.2 text-align:justify;属性无效怎么办？

text-align-last: justify;

1.结构分析

1.1 快捷导航栏+header头部模块+nav导航模块

本模块与主页模块是一样的，直接从index.html文件中复制这三部分的代码即可

1.2 主产品模块

主产品模块分为左右2个盒子（蓝色盒子），使用浮动让它们并排显示

1.3 产品详情模块

产品详情模块分为左右2个部分，左边盒子内部主要使用li制作，右边盒子里面使用div搭建
需要注意的是tab栏部分，tab_list与tab_con需要一一对应

2.代码部分

2.1 主产品模块代码

2.1.1 主产品模块左边代码

2.1.1.1 左1盒子

1.需要注意的是“向右箭头”的制作，使用的是字体图标
2.并且使用伪类选择器，将前3个li的后面添加上“向右箭头”。n+3指的是选择第三个及以后的li，那么-n+3就是选择前三个li

html部分

<div class="product_list">
    <ul>
      <li><a href="#">手机、数码、通讯</a></li>
      <li><a href="#">手机</a></li>
      <li><a href="#">Apple苹果</a></li>
      <li><a href="#">iPhone 6s plus系类</a></li>
    </ul>
 </div>

css部分

.product_list{
    height: 25px;
    line-height: 25px;
    font-size: 12px;
}
.product_list ul li {
    float: left;
    margin-left: 15px;
}
.product_list ul li:nth-child(-n+3)::after {
    content: '\e920';
    font-family: 'icomoon';
}

2.1.1.2 左2盒子

定义一个带边框的盒子，插入图片即可

2.1.1.3 左3盒子

定义7个li盒子，里面放入链接，链接里面放入图片
需要注意的是，第一个li和最后一个li的宽度和其他的不一样

css部分

.product_allimg {
    width: 400px;
    height: 60px;
    margin-top: 65px;
    text-align: center;
}
.product_allimg ul li {
    float: left;
    width: 60px;
    height: 60px;
}
.product_allimg ul li:nth-child(1){
    width:50px;
    line-height: 60px;
}
.product_allimg ul li:nth-child(7){
    width:50px;
    line-height: 60px;
}

2.1.1.4 左4盒子

使用4个li制作，后三个li可以使用：：before添加字体图标
对比前的方块可以设置左外边距，因为最后一个li的距离和其他li不太一样

2.1.2 主产品模块右边代码

2.1.2.1 右1盒子

1.黑体字用h3标签
2.红色字使用p标签

html部分

<div class="product_r1">
   <h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
   <p class="style_red">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
</div>

css部分

.product_r1 {
    height: 68px;
    margin-top: 15px;
}
.product_r1 h3 {
    font-size: 16px;
    margin-bottom: 15px;
}
.product_r1 p {
    font-size: 12px;
}

2.1.2.2 右2盒子

编写过程中出现的问题
参考博客

1.html文字字数不一致的布局方法，也就是需要文字2端对齐
2.使用text-align:justify属性可以实现2端对齐
3.实际编程过程中，text-align:justify属性无效
4.text-align实现两端对齐文本效果，但是要特别注意text-align不会处理被打断的行和最后一行！
如果你的文字只占了一行，同时它也是最后一行了，所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last，并将其设置为justify

html部分

<div class="product_r2">
                <div class="jiage">
                    <div class="fl">
                        <p class="product_format">价格</p><h2 class="fl style_red">￥5299.00</h2><i class="fl style_red">降价通知</i>
                    </div>
                    <div class="fr">累计评价<a href="#">612188</a></div>
                </div>
                <div class="cuxiao">
                    <p class="product_format fl">促销</p>
                    <div class="fl"> <span>加价购</span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品 <a href="#">详情 》</a> </div>
                </div>
            </div>

css部分

.product_r2 {
    height: 115px;
    background-color: #fee9eb;
}
.jiage {
    height: 42px;
    margin-left: 9px;
}
.product_format {
    float: left;
    width: 48px;
    height: 42px;
    line-height: 42px;
    margin-right: 15px;
    text-align-last: justify;
}
.jiage .fl h2{
    font-size: 24px;
    line-height: 42px;
}
.jiage .fl i {
    margin-top: 15px;
}

.jiage .fr {
    font-size: 12px;
    margin-right: 10px;
    line-height: 42px;
}
.jiage .fr a {
    color:#1474af;
}

.cuxiao {
    height: 70px;
    margin-left: 9px;
}
.cuxiao div {
    width: 545px;
}
.cuxiao span {
    line-height: 42px;
    width: 40px;
    height: 24px;
    background-color:#c81623;
    color: #ededed;
    margin-right: 7px;
    
}

2.1.2.3 右3盒子

html部分

<div class="product_r3">
                <div class="support">
                    <p class="product_format">支持</p>
                    <div>以旧换新，闲置手机回收  4G套餐超值抢  礼品购</div>
                </div>
                <div class="pesong">
                    <p class="product_format">配送至</p>
                    <div>北京海淀区中关     有货    支持  99元免运费 |货到付款 |211限时达   
                        由自营发货，并提供售后服务。11:00前完成下单，预计今天（08月10日）送达
                    </div>
                </div>
            </div>

css

.product_r3 {
    width: 550px;
    height: 100px;
    border-bottom: 2px solid #ededed;
}
.support {
    height: 42px;
    line-height: 42px;
}
.pesong div {
    width: 450px;
    height: 54px;
}

2.1.2.4 右4盒子

1.给5个大的div的盒子，每个盒子中再放入若干个li
2.通过nth-child()选择器统一格式化所有的li
3.通过nth-child（1），对每行第一个元素的格式进行设置
4.通过nth-child（n+2），对每行第二个及第二个以后的li设置

html部分

<div class="product_r4">
                <div class="div">
                    <ul>
                        <li>选择颜色</li>
                        <li>金色</li>
                        <li>银色</li>
                        <li>黑色</li>
                        <li>玫瑰金</li>
                    </ul>
                </div>
                <div class="div">
                    <ul>
                        <li>选择版本</li>
                        <li>公开版</li>
                        <li>移动4G</li>
                    </ul>
                </div>
                <div class="div">
                    <ul>
                        <li>选择容量</li>
                        <li>16GB</li>
                        <li>64GB</li>
                        <li>128GB</li>
                    </ul>
                </div>
                <div class="div">
                    <ul>
                        <li>购买方式</li>
                        <li>官方标配</li>
                        <li>移动优惠购</li>
                        <li>电信优惠购</li>
                    </ul>
                </div>
                <div class="div">
                    <ul>
                        <li>套装</li>
                        <li>保护套装</li>
                        <li>充电套装</li>
                    </ul>
                </div>
            </div>

css部分代码

/* 右4盒子 */
.product_r4{
    margin-top: 8px;
    width: 550px;
    height: 240px;
    border-bottom: 2px solid #ededed;
}
.product_r4 div {
    height: 40px;
    margin-top: 8px;
    margin-left: 10px;
}
.product_r4 div ul li {
    float: left;
}
.product_r4 div ul li:nth-child(1){
    width: 50px;
    height: 35px;
    margin-right: 12px;
    line-height: 45px;
    text-align-last: justify;
}
.product_r4 div ul li:nth-child(n+2){
    padding: 12px 15px 12px 15px;
    margin-right: 10px;
    border: 1px solid #ededed;
    background-color: #f7f7f7;
    
}

2.1.2.5 右5盒子

1.定义一个div盒子，里面放入2个盒子
2.里面2个盒子都右浮动