2019-07-30来黑马程序员的第十九天（上课）

今天还是接着昨天项目讲的，主要内容有四个方面：

一、侧边栏导航

需要基于 全部商品分类 定位 原因是鼠标hover到全部商品上的时候 显示侧边导航

给ul设置宽, 高 并且绝对定位  给父元素添加相对定位  在设置位置

给li设置text-align: left line-height 和高度  (原因是继承了父元素的行高和text-align)

给ul设置一个左边框  颜色和默认的背景颜色一致 (不用操心li  hover的时候左边框的问题)

给右边的小箭头设置绝对定位  li设置相对定位  并且设置位置

ul默认是隐藏的  并且hover 全部商品分类的时候显示ul

二、轮播图区域小圆点

使用的是行内块 可以实现不论多少个小圆点都可以实现水平居中的效果 容错率更高 (是让li在通栏的ul里面居中)

ul的宽度是100%  然后li是行内块元素  给ul添加text-align: center 让li元素水平居中  行内块会受到行高的控制 所以需要给父元素添加line-height: 0;

定位居中: 让ul定位  水平居中  让li在ul里面水平显示  (核心是ul本身居中  带着里面的li  li在ul里面是浮动的)  局限性: ul只能达到父盒子一般的宽度

三、快播区域

上中下三个盒子,先把三个盒子的大小实体化出来 距离调好

上盒子在细分成上下两个盒子

里面的新闻列表添加超出部分显示...省略号

中间的盒子使用表格(三行四列)完成

四、边框使用一个盒子代替

这个盒子使用定位 定在对应位置上面 宽高根据情况使用百分比 (有兴趣的同学可以改写成伪元素)

不要停下学习的脚步，每天都会在成长的，Fighting！！！