前端练习项目——品优购 Day6 main主体盒子搭建

由于main主体模块会不断变化，因此不能写在common.css里，要新建一个index.css。 

 1.整体结构分析

 由于整体盒子还没有版心大，因此这次整体盒子main在版心内 

     首先是一个大盒子（版心），版心内是整体盒子main，main中有两部分——focus焦点图模块和newsflash快报模块。由于左边是商品分类，不能遮挡，因此main需要加上margin-left为商品分类提供位置。

2.main主体模块制作

.main {
    width: 980px;
    height: 455px;
    /* background-color: pink; */
    margin-left: 220px;
    margin-top: 10px;
}

       整体结构比较简单，就是给出宽高，然后调整间距即可。有一点需要注意的是：左边列表并不是盒子，它是上面盒子超出的区域，因此margin-left参照的边界是版心的边界。

3.focus焦点图模块制作

这里本来应该是个轮播图，但是需要用到JS，因此暂时不作处理

（1）整体结构分析

  用ul li a模式，a里面塞一个图片即可

<div class="focus">
                <ul>
                    <li>
                        <a href="#"><img src="upload/main.jpg"></a>
                    </li>
                </ul>
            </div>

  由于右边还有一个盒子，因此focus需要加上浮动

.main .focus {
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;
}

  focus模块与左边和上面的缝隙已经由父盒子调整完毕

4.newsflash快报模块搭建

 （1）整体结构分析

        整体是一个大盒子，大盒子里面从上到下分为三个小盒子——news新闻模块，lifeservice生活服务模块，bargin特价商品模块。

（2）newsflash大盒子模块搭建

.main .newsflash {
    float: right;
    width: 250px;
    height: 455px;
    /* background-color: skyblue; */
}

       大盒子采取右浮动（因为要和focus盒子中间留出空隙，一个靠左，一个靠右，排在一行），给出宽和高。 

（3）news新闻模块搭建

1.结构分析

       分为上盒子和下盒子，上盒子里有一个h5和一个a，还有一个字体图标。下盒子有5个li，用ul li a模式制作。

2.news盒子搭建

.main .news {
    height: 165px;
    /* background-color: pink; */
    border: 1px solid #e4e4e4;
}

给出高度，宽度继承父盒子，然后加上边框。

news-hd模块搭建

<div class="news-hd">
    <h5>品优购快报</h5>
     <a href="#" class="more">更多
          <span class="iconfont">&#xe603;</span>
     </a>
</div>

.news .news-hd {
    height: 33px;
    line-height: 33px;
    /* line-height属性不管是否浮动都对文字有效（因为是上下操作） */
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}

让文字垂直居中显示，加一个下方的边框（虚线），左右间距拉开。

 h5模块和more模块CSS代码

.news-hd h5 {
    float: left;
    font-size: 14px;
}

.news-hd .more {
    float: right;
}

h5要放在左边，用左浮动拉开，链接放右边，用右浮动拉开。

 news-bd模块搭建

<div class="news-bd">
       <ul>
           <li><a href="#"><strong>[特惠]</strong>爆款耳机五折秒！</a></li>
           <li><a href="#"><strong>[特惠]</strong>母亲节，特惠好礼低至五折！</a></li>
           <li><a href="#"><strong>[特惠]</strong>海尔智能空调立省1000！</a></li>
           <li><a href="#"><strong>[特惠]</strong>苹果12立抢！</a></li>
           <li><a href="#"><strong>[特惠]</strong></a>电脑外设甩卖！</li>
       </ul>
</div>

用ul li a模式，其中“[]”里的内容要用<strong>标签加粗。

 news-bd模块CSS代码

.news-bd {
    padding: 5px 15px 0px;
}

 拉开间距即可

 li的CSS代码：

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    /* 下面三行代码使超出边界的内容转化为省略号显示 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 前两行代码是让文字垂直居中

 比较重要的就是后三行代码：使超出边界的内容转化为省略号显示。overflow:hidden 隐藏超出的内容   white-space:hidden  当文字超出时不换行    text-overflow:ellipsis  文字超出用省略号代替。

（4）lifeservice生活服务模块搭建

1.整体结构分析

       总共十二个小方块，每一个都是一个li。每个li中有一个div（或i）用于存放图片，下面有一个a用于存放文字。

2.lifeservice大盒子搭建

.lifeservice {
    height: 209px;
    /* background-color: purple; */
    border: 1px solid #e4e4e4;
    border-top: 0;
    overflow: hidden;
}

 首先，给高度。然后定义一个边框，由于上面的盒子（.news）有下边框了，因此把下边框去掉。

 接下来的overflow:hidden会在下面解释。

3.li的CSS代码

.lifeservice li {
    float: left;
    width: 62px;
    height: 71px;
    text-align: center;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

要做成网格的形状，li必须有右边框和下边框，然后进行浮动，使li一行一行排列，形成网状结构。

第一个问题：父盒子lifeservice的宽度也不够装下四个li，这时由于空间不够，li会根据浮动再开一行，一行只能放下三个。  这时注意到li还有一个父盒子ul，可以把ul的宽度扩大，直到能够装下四个li为止。

.lifeservice ul {
    width: 256px;
}

第二个问题：为什么父盒子lifeservice要用overflow:hidden？因为由于li有边框，导致宽度不好计算，62px使四个li会超出边界。因为父盒子lifeservice有右边框，因此可以用overflow:hidden消除ul超出的距离，使父盒子的右边框成为li的右边框。否则就会变成下图所示。

overflow:hidden就是清除右边和下边的超出距离的。（对于下边来说，高度同样不好确定，由于父盒子有下边框，因此可以用父盒子的下边框来当li的边框） 

4.图片的CSS代码

.lifeservice .tupian {
    display: inline-block;
    width: 24px;
    height: 28px;
    background-color: pink;
    margin-top: 12px;
    background: url(../images/精灵图.png) no-repeat -19px -15px;
}

      扩大间距的代码就不用多解释，图片依然是使用精灵图，这里使用背景的简略写法：背景图片   重复效果   图片位置。

        这里有一个问题：为什么要使用display:inline-block。

        由于li的CSS代码中有 text-align:center，目的是让div中的图片和a中的文字都居中显示。由于div中的图片是背景图片，也就是让div居中显示。因为div设置的有宽度，而text-align:center只能让行内元素和行内块元素位于父元素中间（如果div不指定宽度那么跟父元素宽度一样，这种情况就不用讨论了），因此想让一个有宽度的div居中，需要转化为inline-block。

         text-align属性可以被继承。text-align属性只能在块元素上设置。

注：行内元素与行内块元素特点：

行内元素特征：

           (1)设置宽高无效

　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　(3)不会自动进行换行

行内块状元素特征：

           (1)不自动换行

　　　(2)能够识别宽高

　　　(3)默认排列方式为从左到右

 a的CSS代码

.lifeservice ul li a {
    display: block;
    cursor: pointer;
}

       因为要重开一行，所以改为块级元素，不设置宽度（继承父元素）导致继承text-align:center后文字居中显示。然后设置一下鼠标样式。

（5）bargin特价商品模块搭建

 一个盒子里放一个链接，链接里放一个图片即可。

 CSS代码的话，只需要调整一下上面的间距即可，此时不用给高度，因为上面两个盒子已经给出了高度，剩下的就是bargin模块的。

.bargin {
    margin-top: 5px;
}