(案例)品优购-index主体页面制作

新建一个新的index.css 写index的样式

1. main主体模块制作

这里面main盒子的宽度和高度都要写980px *455px
focus的宽度和高度也是需要写的 721px*455px 左浮动 float:left;
newsflash 的宽度和高度 250p*455px 右浮动 float:right

2. Focus里面的图片不能直接插入图片，要用ul>li>img js的时候好控制

   Focus里面的图片不能直接插入图片，要用ul>li>img js的时候好控制
   因为是C3模型所以 测量的时候把边框量进去

2.快报模块

1. news-hd
   - news-hd里面左边是一个h5左浮动，右边是一个a标签 右浮动，给一个高度和下边框

• news-bd里面是ul里面包含li里面再放a标签 给一个padding:5px 15px 0

2. 2号盒子 给一个左边框，右边框和下边框，每一个li大小63px *71px，li需要给一个右边框和下边框，盒子放着会掉下来，这时候给ul设置成252px就可以放的下了。然后给lifeService一个overflow:hidden

里面怎么写呢？
li里面放一个i (24px*28px)+ p，将i转换成行内块元素，然后text-align:center；(行内块可以用text-align)设置水平居中

-文字超出隐藏

overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;

bargin模块
直接给一个div把图片插入进去就可以了

.bargin {
margin-top：5px;
}

3. 推荐模块制作

高度163px 宽度直接w就可以了，img是行内块元素，可以用text-align来控制
竖线的做法: 先是给li一个::after伪元素，然后在用定位，因为是压住图片，所以定位到后面就可以了，::after是行内元素

让li里面的图片宽度和高度写固定，这样图片就不会变得很乱了。在这个案例里面所有的图片都是238px*163px

3. floor楼层区制作(不用给高度，不知道多高)

家电区box_hd模块制作

这里的竖线直接放在标签后面
在这里面table_list也要有一个行高
这里直接给a一个padding值撑开盒子，这样竖线就能原理文字了

box_bd给一个高度361px(量准确了不然图片放不下)，因为里面的模块高度都是一样高的。

重点
tab栏切换卡
要准备两个盒子 一个叫做tab_list 用来放选项卡的，一个放tab_content用来放内容的，选项和内容一一对应。
在本案例中,当点击tab_list盒子中的第一个li，就会把table_content中的内容一显示出来
案例中写内容一的时候给这个div取一个名字叫做tab_list_item 里面的内容直接用5个div

tab_list_item>div

这里面有ul 和li来做 li要有一个宽度和高度


这边的竖线是给div一个边框就可以了

a属于行内元素，包含行内块或者块级元素的时候要给他转换成块级元素最合适
一般情况下，a如果包含有宽度的盒子，a需要转换为块级元素