当前位置:网站首页>蓝桥杯线上模拟赛——Flex 经典骰子布局
蓝桥杯线上模拟赛——Flex 经典骰子布局
2022-08-09 12:53:00 【算法与编程之美】
1 引言
目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式,这次试题将利用 Flex 实现经典布局效果。
进入模拟赛:https://www.lanqiao.cn/problems/1523/learning/
2 问题描述
本次试题主要是补全Flex 经典骰子布局项目的index.html 文件空缺的 css 代码,并按照提示或要求完成效果图。
需要注意的是要严格按照考试步骤操作,要根据考试需求所要求的进行文件的添加、代码的添加修改等以及不要修改项目文件名、文件夹路径等。
CSS3(Flex Box)弹性盒子部分知识点:
(具体可看:https://www.runoob.com/css3/css3-flexbox.html)
1.弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。(注意:弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。)
2.flex-direction(位置方向):row(从左到右排列) | row-reverse| column(纵向排列)|column-reverse
3.flex-wrap(换行): nowrap(默认)|wrap(多行、溢出的部分会被放置到新行,子项内部会发生断行)|wrap-reverse|initial|inherit
4.align-items(在纵轴方向上的对齐): flex-start | flex-end | center | baseline | stretch
5.align-content(各个行纵轴方向的对齐): flex-start | flex-end | center | space-between | space-around | stretch
6.justify-content(沿着弹性容器的主轴线对齐): flex-start | flex-end | center | space-between | space-around
7.flex-basis(设置或检索弹性盒伸缩基准):number | auto | initial | inherit
3 算法描述
前期准备。
1.1在终端输入命令打开项目并进行运行。
1.2仔细阅读考试需求中的文字,重点要清楚试题要我们做什么。同时还要注意题目所给的小细节。跟据要求进行代码书写。
2.1将每个骰子的外层div进行命名,分别为div2、div3、div4……。
2.2根据要求及样式进行CSS书写。
/*todo:请补全剩余骰子布局代码*/ .div2 { justify-content: space-around; align-items: center; flex-direction: column; } .div3 { justify-content: space-around; } .div3 p:nth-child(1) { align-self: flex-start; } .div3 p:nth-child(2) { align-self: center; } .div3 p:nth-child(3) { align-self: flex-end; } .div4,.div5,.div6,.div7,.div8,.div9 { flex-direction: column; justify-content: space-around; } .div4 div,.div5 div,.div6 div,.div7 div,.div8 div,.div9 div { display: flex; justify-content: space-around; } .div8 div { justify-content: space-between; } |
4 结语
总的来说,主要要对CSS3弹性盒子的属性意义要有一定的了解。在本次练习中主要难点在于对部分属性的不了解。同时在此次练习中,还学到了:nth-child(n)、:nth-of-type(n)选择器的使用。通过第一次的练习以及练习中所获的,希望在后续练习中更进一步。
边栏推荐
- 剑指 Offer 57 - II. 和为s的连续正数序列(滑动窗口)
- SQL Server查询优化 (转载非原创)
- FFmpeg多媒体文件处理(ffmpeg操作目录及list的实现)
- Do you know the difference between comments, keywords, and identifiers?
- FFMPEG多媒体文件处理(ffmpeg文件的删除与重命名)
- WSA toolkit installed app store tip doesn't work how to solve?
- FFmpeg multimedia file processing (FFMPEG logging system)
- 第六届”蓝帽杯“全国大学生网络安全技能大赛 半决赛
- 基于 R 语言的深度学习——简单回归案例
- read stream special attention
猜你喜欢
Unicom network management protocol block diagram
透明tune proxy
Final assignment of R language data analysis in a university
Redis源码剖析之跳表(skiplist)
FFmpeg多媒体文件处理(ffmpeg处理流数据的基本概念)
Anta and Huawei Sports Health jointly verify the champion running shoes and lead Chinese sports with innovation
gin的中间件和路由分组
How to reduce the size of desktop icons after the computer is reinstalled
注:检测到当前使用的ADB不是HBuilder内置或自定义ADB:PID为:9544进程名称为:adb.exe 路径为:c:\users\administrator\appdata\local\and
novel research
随机推荐
5G China unicom 直放站 网管协议 实时性要求
GIN初探,环境安装
七夕力扣刷不停,343. 整数拆分(剑指 Offer 14- I. 剪绳子、剑指 Offer 14- II. 剪绳子 II)
5G China unicom 一般性异常处理
telnet+ftp 对设备进行 操控 和 升级
NFS pays special attention to the problem of permissions
[HCIP Continuous Update] Principle and Configuration of IS-IS Protocol
流量焦虑背后是企业对客户关系管理的不足
我的2020年终总结
电脑重装系统还原0x80070005错误如何解决
5G 联通网管设计思路
周末看点回顾|我国IPv6网络全面建成;2022昇腾AI开发者创享日·南京站成功举办…
Professor Chen Qiang "application in machine learning and R" course chapter 17
Explanation of RTSP protocol
【TKE】GR+VPC-CNI混用模式下未产品化功能配置
剑指offer,剪绳子2
绘制混合密度函数图以及添加分位数线
为什么文字不贴合边
Microsoft 10/11 命令行打开系统设置页(WUAP,!WIN32)
2022年非一线IT行业就业前景?