HTML+CSS系列学习:重生之我要精通编程语言修仙 第五篇
四十五、b与i标签
strong与b,em和i
表现形态都是 文本加粗 和 文本斜体(都属于内联元素)
区别:
strong和em是具备语义化的,而b和i是不具备语义化的
作用:简化选择器的操作
例如:我可以分别给em 和 i 加上各自的选择器,这两个选择器在都是文本斜体的内容上,可呈现不同的样式。
四十六、引用标签
引用标签
blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr:缩写或首字母缩略词
address:引用文档地址信息
cite:引用著作的标题
<body>
<p>
<abbr title="World Health Organization">WHO</abbr>成立于1948年。
<blockquote>世界卫生组织(英文名称:World Health Organization,缩写WHO,中文简称世卫组织)是联合国下属的一个专门机构,总部设置在瑞士日内瓦,只有主权国家才能参加,是国际上最大的政府间卫生组织。
世界卫生组织的宗旨是使全世界人民获得尽可能高水平的健康。世界卫生组织的主要职能包括:促进流行病和地方病的防治;提供和改进公共卫生、疾病医疗和有关事项的教学与训练;推动确定生物制品的国际标准。
当地时间2020年1月30日晚,世界卫生组织宣布,将新型冠状病毒疫情列为国际关注的突发公共卫生事件。2月10日,世界卫生组织牵头成立的新型冠状病毒国际专家组先遣队已经抵达中国,将和中方人员合作,贡献专业知识,解答实际问题 。
2020年5月27日,世卫组织宣布成立世卫组织基金会 。2021年3月30日,中国-世卫组织新冠病毒溯源联合研究报告在日内瓦发布。
当地时间2021年5月25日,世卫应急专家对各国卫生部长表示,因资金短缺,世卫组织面临“瘫痪”风险
</blockquote>
<q>
中文名 联合国世界卫生组织
</q>
<address>关于世卫组织:世卫组织官网[引用日期2022-11-25]</address>
<cite>
世卫组织将新型冠状病毒疫情列为国际关注的突发公共卫生事件
<br> WHO专家先遣队抵达中国 将与中方人员合作
<br> 世卫组织宣布成立基金会以更好应对全球卫生挑战
</cite>
</p>
</body>
效果展示:
四十七、iframe标签
作用:可以引入其他html到当前html中显示
属性:
frameborder:规定是否显示框架周围的边框
width:定义iframe的宽度
height:定义iframe的高度
scrolling:规定是否在iframe中显示滚动条
scr:规定在iframe中引入的URL
scrdoc:规定在iframe中显示的页面内容
主要是利用iframe的属性进行样式的调节
应用场景:数据传输、共享代码、局部刷新、第三方介入等。
<body>
<!-- <iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no"
width="400px" height="400px"></iframe> -->
<!-- <iframe src="https://www.taobao.com" frameborder="0" scrolling="no" ></iframe> -->
<iframe src="https://yt-adp.ws.126.net/myzhang/1800160_affu_20210331.png" frameborder="0" width="450" height="40"></iframe>
</body>
效果展示:
四十八、br与wbr标签
br标签表示换行操作
wbr标签表示软换行操作(适当时机换行)
<body>
<!-- <p>
red red red red red blue blue blue blue blue <br> red red red red red blue blue blue blue blue
</p> -->
<p>
afvpoijefcp9 asjewaefcod9k esj9focaik we0casdwopadkawpokdfak ewsf aes09dcf<wbr>HELLO<wbr>jk awo[pcfdkwad-po0a ewkdc0-awdxk
</p>
</body>
效果如下:
四十九、pre与code标签
都是针对网页中的程序代码的显示效果。
pre作用:可定义预格式化的文本,被包围在pre中的文本通常会保留空格和换行符
code作用:通常只是把文本变成等宽字体(暗示:这段文本是源程序代码)
code使用范围:
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。
<body>
<pre>
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
</code>
</pre>
</body>
效果展示:
五十、map和area标签
定义一个客户端图像映射。
图像映射指带有可点击区域的一副图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL,shape属性来定义区域的形状,coords属性定义热区的坐标。
作用:给特殊图像添加链接。
area能添加的热区的图形:矩形、圆形、多边形。
<body>
<img src="./images/矢量图形.jpg" alt="" usemap="#star">
<map name="star">
<!-- <area shape="" coords="100 50 200 130" href="https://www.taobao.com" alt=""> -->
<area shape="circle" coords="100 60 100 " href="https://www.taobao.com" alt="">
</map>
</body>
五十一、embed和object标签
embed和object都表示能够嵌入一些多媒体,如flash动画、插件等。
基本使用没有太多区别,主要是为了兼容不同的浏览器而已。
PS:object元素需要配合param 元素一起完成。
作用:给flash和一些插件做渲染
<body>
<!-- <embed src="./images/flash.swf" type=""> -->
<object >
<param name="movie" value="./images/flash.swf">
</object>
</body>
五十二、audio与video标签
audio表示嵌入音频文件
loop:循环;
autoplay:自动播放
video表示嵌入视频文件
属于H5的功能。
默认控件时不显示的,可通过controls属性来显示控件
为了能够支持多个备选文件的兼容支持(不支持MP3、MP4),可以配合source标签
<body>
<audio src="../生日快乐/儿童合唱团 - 生日快乐.mp3" controls loop autoplay></audio>
<!-- <video src="" controls></video> -->
<div style="width: 100%; height: 300px;overflow: hidden;">
<video src="https://mp.weixin.qq.com/s/XnBViVMMrv6lvYOExz6cBw" controls style="width: 100% height 100px">
<source src=""></source>
<source src=""></source>
</video>
</div>
</body>
效果展示:
五十三、文字注解与文字方向
ruby标签定义ruby注释(中文注音或字符)
rt标签定义字符(中文注音或字符)的解释或发音
bdo标签可覆盖默认的文本方向
<style>
span{direction: rtl;unicode-bidi: bidi-override;font-size: 50px}
</style>
<body>
<ruby style="font-size: 50px">
张 <rt>zhang</rt>月
</ruby>
<p>
<bdo dir="rtl" style="font-size: 50px">酒后不知天在水</bdo>满船清梦压星河
</p>
<p>
<span>酒后不知天在水</span>满船清梦压星河
</p>
</body>
效果展示:
五十四、扩展link标签
五十五、扩展meta标签
<meta name="description" content="大连美团网精选大连美食餐
厅,酒店预订,电影票,旅游景点外,卖订餐,大连团购信息,您可查询商家评价店铺
信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食,大连酒店,大连团建">
<meta name="randerer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
让ie浏览器更高级渲染
<meta http-equiv="refresh" content="3" url="">
刷新,三秒后跳转对应网址
<meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT">
缓存
五十六、HTML5新语义化标签(上)
header:页眉
footer:页脚
main:主体
hgroup:标签组合
nav:导航
article:独立的内容
aside:辅助信息的内容
section:区域
figure:描述图像或视频
figcaption:描述图像或视频的标题部分
PS:header、footer、main一个网页中只能出现一次
<body>
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<ul>
<li>
<figure>
<img src="../Part.2/猫猫.jpg" alt="">
<figcaption>
可爱的猫咪
</figcaption>
</figure>
</li>
</ul>
</section>
<section></section>
<section></section>
</article>
<aside>
</aside>
</main>
<footer></footer>
</body>
效果展示:
五十七、HTML5新语义化标签(下)
datalist:选项列表
details/summary:文档细节/文档标题
progress/meter:定义进度条/定义度量范围
time:定义日期或时间
mark:带有记号的文本
<body>
<header></header>
<main>
<article>
<section>
<input type="text" list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="abcd"></option>
<option value="abcde"></option>
<option value="abcdef"></option>
</datalist>
<details>
<summary>HTML</summary>
<p>超文本标记语言</p>
</details>
<progress min="0" max="10" value="8"></progress>
<meter min="0" max="100" value="80" low="10" high="60"></meter>
<p>
今天是 <time title="2-14">情人节</time> ,街上人很多
</p>
<p>
今天是 <mark>情人节</mark> ,街上人很多
</p>
</section>
</article>
</main>
<footer></footer>
</body>
效果展示:
五十八、flex弹性布局
1.flex-direction
flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上
#box1{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: column;}
#box1 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
<div id="box1">
<div>1</div>
<div>2</div>
<div>3</div>
效果如下:
2.flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示
#box2{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: wrap;}
#box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
<div id="box2">
<div>11</div>
<div>21</div>
<div>31</div>
<div>11</div>
<div>21</div>
<div>31</div>
<div>11</div>
<div>22</div>
<div>31</div>
</div>
效果展示:
3.flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写,表示flex布局的flow流动特性。
第一个值表示方向,第二个值表示换行,中间用空格隔开
#box2{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;/* flex-wrap: wrap; */flex-flow: column wrap;}
#box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
<div id="box2">
<div>11</div>
<div>21</div>
<div>31</div>
<div>11</div>
<div>21</div>
<div>31</div>
<div>11</div>
<div>22</div>
<div>31</div>
</div>
效果展示:
4.justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式
#box3{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content:space-around ;}
#box3 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
<div id="box3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
效果展示:
5.align-items
align-items中的items指的就是flex子项们,因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
#box4{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;align-items: center;}
#box4 div{width: 50px;background-color: red;}
<div id="box4">
<div>测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本测试文本测试文本</div>
</div>
效果如下:
6.align-content
align-content可以看成和justify-content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。
<div id="box4">
#box4{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display:
flex;justify-content: space-evenly;flex-wrap: wrap;align-items: flex-start;align-content: center;}
#box4 div{width: 50px;background-color: red;}
<div>测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本测试文本测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本</div>
<div>测试文本测试文本</div>
<div>测试文本测试文本测试文本测试文本</div>
</div>
五十九、作用在flex上的CSS属性
1.order
#box1{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
#box1 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
#box1 div:nth-child(2){order: 1;}
#box1 div:nth-child(3){order: -1;}
<div id="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
效果展示:
2.flex-grow
#box1{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
#box1 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
#box1 div:nth-child(2){background-color: yellow;color: black;flex-grow: 1;}
#box1 div:nth-child(3){background-color: blue;color: black;flex-grow: 2;}
<div id="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
效果展示:
3.flex-shrink
#box2{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
#box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
#box2 div:nth-child(2){background-color: yellow;color: black;flex-shrink:3;}
<div id="box2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
效果如下:
4.flex-basis
#box2{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
#box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
#box2 div:nth-child(2){background-color: yellow;color: black;/* flex-shrink:3; */flex-basis: 100px;}
<div id="box2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
效果展示:
5.align-self
#box2{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
#box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background-color: red;}
#box2 div:nth-child(2){background-color: yellow;color: black;/* flex-shrink:3; */flex-basis: 100px;}
#box2 div:nth-child(1){align-self: center;}
<div id="box2">
<div>1</div>
<div>测试文字</div>
<div>3</div>
<div>4</div>
</div>
效果展示:
flex练习
1.骰子
<style>
#box1{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: flex;
justify-content: center;align-items: center;}
#box1 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}
#box2{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: flex;
justify-content: space-evenly}
#box2 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}
#box2 div:last-child{align-self: flex-end;}
#box3{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: flex;
justify-content: space-between;align-items: center;}
#box3 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}
#box3 div:first-child{align-self: flex-start;}
#box3 div:last-child{align-self: flex-end;}
#box4{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: flex;
flex-wrap: wrap;}
#box4 div{width: 100%;display: flex;justify-content: space-between;}
#box4 div:last-child{align-iitems: flex-end;}
#box4 i {display: block;width: 30%;height: 60%;background-color: black;border-radius: 50%;}
#box5{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: flex;
flex-wrap: wrap;}
#box5 div{width: 100%;display: flex;justify-content: center;align-items: center;}
#box5 div:first-child{align-items: flex-start;justify-content: space-between;}
#box5 div:last-child{align-items: flex-end;justify-content: space-between;}
#box5 i {display: block;width: 30%;height: 90%;background-color: black;border-radius: 50%;}
#box6{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: flex;
flex-wrap: wrap;}
#box6 div{width: 100%;display: flex;justify-content: space-between;}
#box6 div:first-child{align-items: flex-start;}
#box6 div:last-child{align-items: flex-end;}
#box6 i {display: block;width: 30%;height: 90%;background-color: black;border-radius: 50%;}
<body>
<div id="box1">
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
</div>
<div id="box3">
<div></div>
<div></div>
<div></div>
</div>
<div id="box4">
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
</div>
<div id="box5">
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
</div>
<div id="box6">
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
</div>
</body>
</style>
效果展示:
2.两列一宽
<style>
*{margin: 0;padding: 0;}
#main{display: flex;}
#left{width: 200px;height: 200px;background-color: red;}
#center{flex: 1;height: 300px;background: yellow;}
#right{width: 150px;height: 200px;background: blue;}
</style>
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
效果展示:
六十、Grid网格布局
Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。
1.grid-temlate
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作。
<style>
.box{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
grid-template-rows: 100px auto 25px;
grid-template-columns: 100px 100px 200px 100px;}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
效果展示:
2.grid-temlate-areas
area是区域的意思, grid-template- areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template- rows,grid-template columns和grid-template-areas属性的缩写。
.box2
{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3 , 1fr);
grid-template-columns: repeat(3 , 1fr);
grid-template-areas:
"a1 a1 a2"
"a2 a2 a3"
"a2 a2 a3";}
.box2 div{background: red;border: 1px black solid;}
.box2 div:nth-child(1){grid-area: a1;}
.box2 div:nth-child(2){grid-area: a2;}
.box2 div:nth-child(3){grid-area: a3;}
<div id="box2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
效果如下:
3.grid-column-gap和grid-rows-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid row-gap属性的缩写。
4.justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。
align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
#box3{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
justify-items: end;
align-items: end;}
5、justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。
place-content可以让align-content和justify-content属性写在一个CSS声明中。
#box4{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
grid-template-columns:repeat(3,auto);
grid-template-rows: repeat(3,auto);
place-content: space-between space-between;}
六十一、作用在flex上的CSS属性
<style>
#box
{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows: repeat(3,1fr); }
#box div
{background: red ;border: 1px black solid;
/* grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2; */
grid-column: 2 / 3;
grid-row: 2 / span 1;
grid-area: 2/3/4/4;/*第一个值是水平的起始位置,第二个值是垂直的起始位置,第三个值是水平的结束位置,第四个值是垂直的结束位置*/
}
#box div:nth-child(2){justify-self: start;align-self: end;place-self: end start;}
</style>
Grid练习
骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
}
.box div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box div:nth-child(1){grid-area: 2/2/3/3;}
.box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
}
.box2 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box2 div:nth-child(2){grid-area: 3/3/4/4;}
.box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box3 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box3 div:nth-child(2){grid-area: a5}
.box3 div:nth-child(3){grid-area: a9}
.box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box4 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box4 div:nth-child(2){grid-area: a3}
.box4 div:nth-child(3){grid-area: a7}
.box4 div:nth-child(4){grid-area: a9}
.box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box5 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box5 div:nth-child(2){grid-area: a3}
.box5 div:nth-child(3){grid-area: a7}
.box5 div:nth-child(4){grid-area: a9}
.box5 div:nth-child(5){grid-area: a5}
.box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box6 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box6 div:nth-child(2){grid-area: a3}
.box6 div:nth-child(3){grid-area: a7}
.box6 div:nth-child(4){grid-area: a9}
.box6 div:nth-child(5){grid-area: a6}
.box6 div:nth-child(6){grid-area: a4}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果展示: