资讯专栏INFORMATION COLUMN

练习九宫格

shiina / 2774人阅读

摘要:背景每日一练绘制九宫格要求九宫格垂直居中于页面只能使用和标签添加背景边框代码九宫格要求不能修改标签,仅通过实现效果添加绿色的边框效果图有很多种方法可以实现我用的是伸缩盒本来不想用的但是文字的上下居中没有固定的高度只有百分比

背景:每日一练:绘制九宫格
要求:九宫格垂直居中于页面,只能使用ul和li标签,添加背景边框

代码





九宫格

要求:

1:不能修改标签,仅通过 css 实现效果

2:添加绿色的边框

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

效果图:

有很多种方法可以实现,我用的是伸缩盒,本来不想用的,但是文字的上下居中没有固定的高度只有百分比实在没想到方法居中.最后才加了伸缩盒.以后有时间要多尝试别的方法.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116341.html

相关文章

  • 【CSS练习】IT修真院--练习1-九宫

    摘要:用于显示日志信息及输入一些命令请求监听。可获得请求列表,点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理,帮服务器识别设备用预览。 九宫格——用html+css制作一个网页 一. 目标效果: showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圆角...

    Tecode 评论0 收藏0
  • 教你如何用Python处理图片九宫,炫酷朋友圈

    摘要:成果展示先来看看成果,原图为文章开始的图片,一图切九图朋友圈九张图发朋友圈的时候,还有个比较有意思的事,上传时是乱序的,还需要你自己像玩拼图一样自己摆位置。这下又可以在朋友圈秀操作了比如改改背景呀,黑色背景什么的。 showImg(https://segmentfault.com/img/remote/1460000019609677); 01 前言 在日常的生活中,大家偶尔会看到朋友...

    zhunjiee 评论0 收藏0
  • 从零开始学习React Native,先重布局开始学起

    摘要:五图片文字混合布局美食之旅呼和浩特希拉穆仁草原响沙湾鄂尔多斯起省千款特价走过路过不错过海外精选百元出境游周边玩乐十元度周末具体的样式见源代码。六底部布局首页行程客服我的具体的样式见源代码。 React Native布局学习,模仿携程的首页内容,可以很好的让我们练习一下flexbox布局,最后完成的效果图如下: 附上Github地址,欢迎starshowImg(https://segme...

    sunsmell 评论0 收藏0
  • AutoLayout:constraint priority 约束优先级(九宫续,一个更优方案)

    摘要:原文链接约束优先级九宫格续,一个更优方案这两个项目的源码均在我的,如有需要直接下载下来试一试。依然是九宫格格子长宽,单张大图长宽。还是保持了底部的与和九宫格的间距都是。因为是九宫格,所以高度由每排第一张图存不存在决定。 原文链接:AutoLayout:constraint priority 约束优先级(九宫格续,一个更优方案) 这两个项目的源码均在我的 github,如有需要直接下载...

    wing324 评论0 收藏0
  • 基于Vue实现拖拽升级(九宫拖拽)

    摘要:前言在本文中将会用完成九宫格拖拽效果,同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了,有问题或者发现错误的请指正,谢谢大家珍惜淡定的心境,苦过后更加清 前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入 传送门:Demo以及完整代码连接 效果实例 showImg(https://segmentfault.com/im...

    RyanQ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<