当前位置: 首页 > news >正文

小兔鲜儿:生鲜区域,最新专题

生鲜区域:

 

生鲜区域标题部分:

 

生鲜区域内容部分:

  • 分左右两个部分 

  • 右边区域是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 中有 上边图片部分 和 下边内容
  • 上边图片部分还设置有定位文字

http://www.lryc.cn/news/517548.html

相关文章:

  • TypeScript语言的网络编程
  • 复合机器人助力手机壳cnc加工向自动化升级
  • 在 C# 中显示动画 GIF 并在运行时更改它们
  • 个人博客搭建(二)—Typora+PicGo+OSS
  • Cloudflare IP 优选工具:轻松找到最快的 CDN 节点
  • HTB:Ransom[WriteUP]
  • Eclipse配置Tomcat服务器(最全图文详解)
  • STM32烧写失败之Contents mismatch at: 0800005CH (Flash=FFH Required=29H) !
  • 用户界面的UML建模10
  • 电影动画shader解析与实现
  • 蓝桥杯 第十五届 研究生组 B题 召唤数学精灵
  • 在 Go 应用中 如何像 FastAPI 一样优雅地构建控制器
  • 用户界面的UML建模11
  • 历代iPhone运行内存大小和电池容量信息
  • 计算机网络之---物理层设备
  • 57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景
  • 第八讲 一元函数积分学的概念和性质
  • ADMM原理及应用
  • mysql之sql的优化方案(重点)
  • 【LeetCode】303. 区域和检索 - 数组不可变
  • 前端开发 vue 中如何实现 u-form 多个form表单同时校验
  • 【网络】什么是速率 (Rate)带宽 (Bandwidth)吞吐量 (Throughput)?
  • (leetcode算法题)769. 最多能完成排序的块
  • 高光谱相机的特点
  • 《Spring Framework实战》8:4.1.3.Bean 概述
  • BGP的local_preference本地优先级属性
  • IP地址与端口号
  • Fastapi + vue3 自动化测试平台(2)--日志中间件
  • iOS - AutoreleasePool
  • 1.CSS的复合选择器