小兔鲜儿：生鲜区域，最新专题

生鲜区域:

 

生鲜区域标题部分：

 

生鲜区域内容部分：

• 分左右两个部分 

• 右边区域是8个 li 标签区域，li中嵌套 a ,上部分是图片，下部分是内容；与 a 并列的是cover，定位在 li 之外，设置是溢出隐藏，鼠标悬停之后出现

• 设置 cover 子绝父（li）相定位是 li 的下边，且下边距是 -86 ，因为是在 li 之外，设置溢出隐藏；鼠标悬停 cover 下外边距设置为 0 ,也就是距离 li 为0

• 为 cover 设置过渡效果   transition: all 0.5s;

• p 是块级元素，用其 设置水平线，margin 左右设置为 auto 实现该线居中

• 设置原本的 li 边框线为白色，鼠标悬停之后设置为 绿色

 

 

 最新专题

 标题区域

 内容区域:

• 有三个 li 标签内容一行排列
• 每个 li 中有 上边图片部分 和 下边内容
• 上边图片部分还设置有定位文字