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

小兔鲜儿:底部区域(头尾在每个页面都有,样式写在common.css中)

底部区域布局效果:

三个 div 盒子,服务,帮助中心,版权

 

服务区域:

ul嵌套 li 标签,li 中嵌套 h5(图片)和 p 内容

先确定 h5 中的宽高,然后引入背景图片,分别设置每个 h5 中的图片位置(css精灵)

帮助中心区域 :

  • 分为左右两个区域,flex 布局使两个区域一行排列,用主轴对齐方式 space-between对齐
  • 左区域五个自定义列表,flex 布局使他们一行排列,设置右边距和下边距
  • 右区域给 ul 设置 flex布局,分别设置右边距下边距,内容水平居中
  • help仅仅设置了高度,宽度是wrapper中设置好的版心宽度。left盒子也不设置具体宽度,都是靠外边距和字号撑开,右边也仅仅设置了二维码图片宽高,内容也同样没有设置宽高

 

版权区域 :

因为已经是底部了,不需要考虑引擎优化,所以直接用 p 标签包裹 a 即可


http://www.kler.cn/a/471415.html

相关文章:

  • HTTP/HTTPS ①-代理 || URL || GET/POST || CDN
  • 利用Python爬虫获取淘宝店铺所有商品信息案例指南
  • 设计模式(1)——面向对象和面向过程,封装、继承和多态
  • 使用 Spring 的 事件发布和监听机制,结合异步执行 的功能达到方法异步执行
  • <style lang=“scss“ scoped>: 这是更常见的写法,也是官方文档中推荐的写法
  • 如何在读博过程中缓解压力
  • 广东省乡镇界arcgis格式shp数据乡镇名称和编码下载内容测评
  • 全局变量(PHP)(小迪网络安全笔记~
  • 【信息系统项目管理师】第15章:项目风险管理过程详解
  • 【网络协议】静态路由详解
  • WebLogic安全基线
  • fail api scope is not declared in the privacy agreement微信小程序uniapp 解决录音无法播放、授权
  • OpenAI CEO 奥特曼发长文《反思》
  • arr.length 和 string.length()
  • Android NDK开发入门3之基本语法
  • 简单的jmeter数据请求学习
  • MYSQL--------事务控制和锁定语句
  • 显示技术进化征程上,海信RGB-Mini LED何以成为“关键力量”?
  • PHP语言的数据库交互
  • selenium合集