今天还是接着昨天项目讲的，主要内容有四个方面：
一、侧边栏导航
需要基于 全部商品分类 定位 原因是鼠标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！！！
网友评论