豚鼠学习html第五周
一.
1. b与i标签
（1）strong与b，em与i
表现形态都是文本加粗和文本斜体
- 好处是不用再进行区分，且strong和em用的较多
- 实操效果
<!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>
<i>猫猫</i>
<em>猫猫</em>
<strong>猫猫</strong>
<b>猫猫</b>
</body>
</html>
2.引用标签的基本操作
-实操效果
<!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>
<p>
<abbr title="bilibili">b站</abbr>
大伟哥<q>大伟哥就是大伟哥啦</q>
<address>2026217626@qq.com</address>
<cite>压抑</cite>
</p>
</body>
</html>
3.ifarm嵌套内容
-实操效果
<!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>
iframe{height:100px;}
</style>
</head>
<body>
<iframe src="http://www.taobao.com" frameborder="0"scrolling="no"width="100%"></iframe>
</body>
</html>
4.pr与wbr标签
- wbr 在特定的地方换行，br强制换行
<!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>
<p> hellp dadawdwa wdawdwad dwadawda <br> dawdwadadawdawdawdawd ewad/p>
<p> ewqewe eqweq eqweqeqeqw eqweweqeq qeqeq66 <wbr>eeqeqeqeqeqeqeqeq<wbr></p>
</body>
</html>
5.pre与code标签
-在其中输入代码不会显示，利用md语法可以显示，语法和和csdn的md编辑器语法一样
<!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>
<pre>
<code>
<b>
wdawdadwda
</b>
</code>
</pre>
</body>
</html>
6.map与area
- 给特殊图案添加链接
- 实操效果
<!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>
<img src="./图片/u=1862289332,3729606110&fm=253&fmt=auto&app=138&f=JPEG.webp" alt=""usemap="#yuanshi">
<map name="yuanshi">
<area shape="poly" coords="250 2 313 97 426 75 404 188" href="" alt="">
</map>
</body>
</html>
7.embed与object标签
- obj需要和param配合使用
- 移动端flash兼容较差，一般不用flash
- 实操效果
<!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>
<embed src="./图片/u=1862289332,3729606110&fm=253&fmt=auto&app=138&f=JPEG.webp" type="">
<object>
<param name="66" value="./图片/u=1862289332,3729606110&fm=253&fmt=auto&app=138&f=JPEG.webp">
</object>
</body>
</html>
8.video与audio标签
- 为了适应低级的浏览器，需要添加下图代码以方便解析
-controls 显示 loop重复 autoplay 自动播放 - 实操效果
<!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>
高级浏览器
<video src=""></video>
<audio src="" ></audio>
低级浏览器
<video src="">
<source src=""> </source>
<source src=""> </source>
</video>
<div style="height: 250px;overflow: hidden;position: relative;">
<video width="100%:" min-height="100%" airplay="allow" autoplay="autoplay" data-object-fit="fill" id="video" loop="loop" muted="muted" playsinline="true" preload="auto" src="https://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4" webkit-playsinline="true" x-webkit-airplay="allow" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-video-player-type="h5"></video>
</div>
</body>
</html>
9.文字注解与文字方向
- 方便浏览器进行解析
- p标签从右向左开始，bod定义文字方向
- 实操效果
<!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>
.w6{direction:rtl;unicode-bidi: bidi-override;}
.ww{direction:rtl;unicode-bidi: bidi-override;}
</style>
</head>
<body>
<ruby>
泠<rt>ling</rt>鸢
</ruby>
<p>
<bdo dir="rtl">迷离间如水山歌绕过一弯又一弯</bdo>
</p>
<p >
<span class="w6">想洞庭归途远柳下稍思量</span>
</p>
<p class="ww"> 想洞庭归途远柳下稍思量</p>
</body>
</html>
10.拓展link标签
- icon 效果给网页添加小图标
- dns-prefetch 提前对dsn解析，加速网站工作速度
<!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>
<link rel="icon" href="#">
<link rel="dns-prefetch" href="#">
</head>
<body>
</body>
</html>
11.meta标签拓展学习
- 作用
wbekit 双内核渲染，让ie浏览器用更高级别进行渲染，规定时间刷新，规定时间缓存 - 实操效果
<!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>
<meta http-equiv="refresh" content="1">
<meta http-equiv="expires"content="Wed ,20 Jun 2019 22:33:00 GMT">
</head>
<body>
</body>
</html>
- 无法截取演示图，略过
12.hmtl5新语义化标签
header — 头部区域。
nav — 导航栏链接。
section — 文档的章节、页眉、页脚或者文档中的其他部分。(根据W3C文档，一个section包括了一组内容及其标题)
article — 定义独立的内容。
aside — 页面主区域内容之外的其他内容，通常是侧边栏之类的，不过其包含的内容会与主区域内容相关。
figcaption — figure元素的标题，通常放置在figure的第一个或最后一个子元素的位置，包含在figure标签内。
figure — 独立的流内容，如图像、图表、照片和代码等。(内容与主内容相关，但删除后不对文档流产生影响)
footer — 底部区域。
以上元素除了figcaption外都是块级元素。
- 实操效果
<!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>
ul{list-style:none;display: block;float: left;}
.ddd{height: 410px;width: 100%;}
li{text-align: center;}
</style>
</head>
<body>
<header>
<hagroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hagroup>
<nav>
<ul>
<li>首页</li>
<li>标签</li>
<li>论坛</li>
</ul>
<ul>
<li>11</li>
<li>222</li>
<li>33</li>
</ul>
</nav>
</header>
<main>
<article>
<section class="ddd">
<ul>
<li> <figure>
<img src="./图片/u=1862289332,3729606110&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="#"width="300px"height="300px">
<figcaption>原皮快滚，这不是元原石头
<br>
十二生肖爱上美少女
</figcaption>
</figure> </li>
</ul>
<ul>
<li> <figure>
<img src="./图片/u=1862289332,3729606110&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="#"width="300px"height="300px">
<figcaption>原皮快滚，这不是元原石头
<br>
十二生肖爱上美少女
</figcaption>
</figure> </li>
</ul><ul>
<li> <figure>
<img src="./图片/u=1862289332,3729606110&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="#"width="300px"height="300px">
<figcaption>原皮快滚，这不是元原石头
<br>
十二生肖爱上美少女
</figcaption>
</figure> </li>
</ul>
</section>
<div>
<section>1替代</section>
<section>2</section>
<section>3</section>
<section>
<input type="text" list="elems">
<datalist id="elems">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</datalist>
</section>
</article>
<aside>
????
</aside>
</div>
<details open><summary> 孙吧 </summary> <p>粪坑</p></details>
<progress min="0" max="500" value="8"></progress>进度
<meter min="0" max="80" value="10" low="10" high="60"></meter>度量
<meter min="0" max="80" value="80" low="10" high="60"></meter>度量
<meter min="0" max="80" value="60" low="10" high="60"></meter>度量
<footer>
脚部
</footer>
<p>今天
<time title="2-21">快考试了</time>很忙
</p>
<p>
今天<mark style="color:blue; background:aqua" >快考试了</mark> 有点慌
</p>
</main>
</body>
</html>
二.
1.flex弹性盒模型
- align-items表示子元素对其方式，而align-items表示多行的对其方式
- flex简写
按上图顺序
上图为默认值 - flex高于单一样式
- 实操效果
<!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>
#div1{width: 200px;height: 200px;border: 2px black solid;margin: 50px auto; display: flex; flex-direction: row-reverse;flex-wrap: wrap-reverse;justify-content: center;}
#div2{width: 50px;height: 50px; background-color: aquamarine;text-align: center;line-height: 50px;margin: auto;}
.div3{width: 200px;height: 200px;border: 2px black solid;margin: 50px auto; display: flex; flex-direction: row-reverse;flex-wrap: wrap-reverse;justify-content: space-evenly;}
.div3 div{width: 50px; background-color: aquamarine;text-align: center;line-height: 50px;}
.div4{width: 200px;height: 200px;border: 2px black solid;margin: 50px auto; display: flex; flex-direction: row-reverse;flex-wrap: wrap-reverse;justify-content: space-evenly;align-items: center;}
.div4 div{width: 50px;height: 50px; background-color: aquamarine;text-align: center;line-height: 50px;}
.div5{width: 300px;height: 300px;border: 2px black solid;margin: 50px auto; display: flex; flex-direction: row-reverse;flex-wrap: wrap-reverse;justify-content: space-evenly;align-items: flex-start;align-items: center;}
.div5 div{width: 50px;height: 50px; background-color: aquamarine;text-align: center;line-height: 50px;}
</style>
</head>
<body>
margin:center可以帮助其居中
<div id="div1">
<div id="div2">1</div>
<div id="div2">2</div>
<div id="div2">3</div>
</div>
宽度自动调节，会溢出
<div class="div3">
<div>测试</div>
<div>测试</div>
<div>城市生存手册手册手册</div>
<div>成熟成熟市场</div>
</div>
<div class="div4">
<div>测试</div>
<div>测试</div>
<div>城市生存手册手册手册</div>
<div>成熟成熟市场</div>
</div>
<div class="div5">
<div>测试</div>
<div>测试</div>
<div>城市生存手册手册手册</div>
<div>成熟成熟市场</div>
</div>
</body>
</html>
<!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>
#div1{width: 400px;height: 400px;border: 2px black solid;margin: 50px auto; display: flex;}
#div1 div{width: 50px;height: 50px;margin: auto; background: green;}
#div1 div:nth-child(3){order: -1;background: yellow;flex-grow: 1;}
#div2{width: 200px;height: 200px;border: 2px black solid;margin: 50px auto; display: flex;}
#div2 div{width: 50px;height:50px; background-color: aquamarine;text-align: center;line-height: 50px;}
#div2 div:nth-child(3){background: yellow;flex-shrink: 1;}
#div2 div:nth-child(1){background: yellow;flex-shrink: 0;}
#div3{width: 400px;height: 400px;border: 2px black solid;margin: 50px auto; display: flex;}
#div3 div{width: 50px;height: 50px; background: green;}
#div3 div:nth-child(3){flex-basis: 100px; order: -1;background: yellow;align-self: center;}
</style>
</head>
<body>
<p>flex-grow(1)全部占满,0.5占空余空间的一半,累加和大于一则无空白区域，按比例分配</p>
order大往后排,小往前排
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
<div id="div3">
flex-basis相对于width优先级更高,相当于设置宽，自动收缩优先级更高
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
2.flex案例
- 实操效果
<!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>
*{margin: 0px; padding: 0px;}
#main{display: flex;}
#l{width: 200px;height: 200px;background: beige;}
#c{flex: 1;height: 300px;background: darkblue;}
#r{height: 200px;width: 200px;background: violet;}
</style>
</head>
<body>
<div id="main">
<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
</div>
</body>
</html>
<!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>
#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: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:black ;border-radius: 50%;}
#box2 div:nth-child(2){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:black ;border-radius: 50%;}
#box3 div:nth-child(1){align-self: flex-start;}
#box3 div:nth-child(3){align-self: flex-end;}
#div4{width: 100px;height: 100px;border: 1px black solid; border-radius: 5px;display: flex;flex-wrap: wrap;}
#div4 div{width: 100%;display: flex;justify-content: space-between;}
#div4 section{width:30%;height: 60%;background:black ;border-radius: 50%; }
#div4 div:nth-child(2){align-items: flex-end;}
#div5{width: 100px;height: 100px;border: 1px black solid; border-radius: 5px;display: flex;flex-wrap: wrap;}
#div5 div{width: 100%;display: flex;justify-content: center;align-items: center;}
#div5 section{width:30%;height:90%;background:black ;border-radius: 50%; }
#div5 div:nth-child(1){align-items: flex-start;justify-content: space-between;}
#div5 div:nth-child(3){align-items: flex-end;justify-content: space-between;}
#div6{width: 100px;height: 100px;border: 1px black solid; border-radius: 5px;display: flex;flex-wrap: wrap;}
#div6 div{width: 100%;display: flex;justify-content: center;align-items: center;}
#div6 section{width:30%;height:90%;background:black ;border-radius: 50%; }
#div6 div:nth-child(1){align-items: flex-start;justify-content: space-between;}
#div6 div:nth-child(2){align-items: flex-start;justify-content: space-between;}
#div6 div:nth-child(3){align-items: flex-end;justify-content: space-between;}
</style>
</head>
<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="div4">
<div>
<section ></section>
<section></section>
</div>
<div>
<section ></section>
<section ></section>
</div>
</div>
<div id="div5">
<div>
<section ></section>
<section></section>
</div>
<div><section class="s5"></section></div>
<div>
<section ></section>
<section ></section>
</div>
</div>
<div id="div6">
<div>
<section ></section>
<section></section>
</div>
<div><section ></section>
<section></section>
</div>
<div>
<section ></section>
<section ></section>
</div>
</div>
</body>
</html>
<!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>
*{margin: 0; padding: 0;}
mian{display: flex;}
#div1{width: 100%;height: 100px; justify-content: space-around;border: 1px black solid;display: flex; }
#div1 section{width: 50px;height:50px;background: red;}
</style>
</head>
<body>
<main>
<div id="div1">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
</main>
</body>
</html>
3.网格布局
上图为fr 1 fr 1 fr 1的复写方式
- 上图为复合写法，横着是列，竖着表示的是行部分
- place- items 纵向 水平
- items 针对网格内的元素，content针对整行，place 纵 横
-
span表示截取个数
-
实操效果
<!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: 300px;height: 300px;border: 1px darkblue dotted;display: grid;grid-template-columns: 1fr 1fr 1fr ;grid-template-rows:1fr 1fr 1fr;
}
.box div{background: darkblue ;border:1px black solid; grid-column-start:2 ;
grid-column-end:2 ;
grid-row-start:2 ;
grid-row-end:3;}
.box1{width: 300px;height: 300px;border: 1px darkblue dotted;display: grid;grid-template-columns: 1fr 1fr 1fr ;grid-template-rows:1fr 1fr 1fr;
}
.box1 div{background: darkblue ;border:1px black solid;
grid-area: 3/2/4/2;}
.box2{width: 300px;height: 300px;border: 1px darkblue dotted;display: grid;grid-template-columns: 1fr 1fr 1fr ;grid-template-rows:1fr 1fr 1fr;
}
.box2 div{background: darkblue ;border:1px black solid;
}
.box2 div:nth-child(2){place-self:start end;}
</style>
</head>
<body>
<div class="box">
<div>11111</div>
</div>
<div class="box1">
<div>11111</div>
</div>
<div class="box2">
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
</div>
</body>
</html>
<!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: 300px;height: 300px;border: 1px darkblue dotted;display: grid;grid-template-columns: 1fr 1fr 1fr ;grid-template-rows:1fr 2fr 1fr;justify-items: center; align-items: center;}
.box div{background: darkblue ;border:1px black solid;}
.box1{width: 300px;height: 300px;border: 1px darkblue dotted;display: grid;grid-template-columns: 1fr 1fr 1fr ;grid-template-rows:1fr 2fr 1fr;
grid-template-areas: "a1 a1 a1""a2 a2 a3""a2 a2 a3";
grid-gap:20px 10px
}
.box1 div{background: darkcyan; border: 1px black solid;}
.box1 div:nth-child(1){grid-area:a1;}
.box1 div:nth-child(2){grid-area:a2;}
.box1 div:nth-child(3){grid-area:a3;}
</style>
</head>
<body>
<main>
<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>
<div class="box1">
<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>
</main>
</body>
</html>
4.gril案例
- 实操效果
<!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-radius: 5px;border: 2px black solid;display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows:1fr 1fr 1fr ;
place-items: center center;
}
.box div{width: 20px; height: 20px; border-radius: 50%;background: black;}
.box div:nth-child(1){grid-area: 2/2/2/2;}
.box div:nth-child(2){grid-area: 1/1/1/1;}
.box div:nth-child(3){grid-area:3/3/3/3;}
.box1{width:100px; height: 100px; border-radius: 5px;border: 2px black solid;display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows:1fr 1fr 1fr ;
place-items: center center;
}
.box1 div{width: 20px; height: 20px; border-radius: 50%;background: black;}
.box1 div:nth-child(1){ grid-area: 1/1/1/1;}
.box1 div:nth-child(2){ grid-area:1/3/1/3;}
.box1 div:nth-child(3){ grid-area: 3/1/3/1;}
.box1 div:nth-child(4){ grid-area: 3/3/3/3;}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
以此类推
</body>
</html>
<!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: 280px;height: 352px;display: grid;margin:30px auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a2 "
"a3 a2 a2 "
"a4 a4 a5 "
"a6 a7 a7 "
;
grid-gap: 6px 6px;
}
.box div{background: red;}
.box div:nth-child(1) {grid-area: a1;}
.box div:nth-child(2) {grid-area: a2;}
.box div:nth-child(3) {grid-area: a3;}
.box div:nth-child(4) {grid-area: a4;}
.box div:nth-child(5) {grid-area: a5;}
.box div:nth-child(6) {grid-area: a6;}
.box div:nth-child(7) {grid-area: a7;}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
- (完)
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
