HTML+CSS系列学习 第五篇

已于 2022-12-04 15:21:23 修改
阅读量319 收藏 1
点赞数
文章标签： css html 前端
于 2022-11-25 18:04:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/self_correction/article/details/128030475
版权

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>
            &lt;!DOCTYPE html&gt;
            <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>

效果展示：
在这里插入图片描述

self_correction
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 2279
，HTML5和CSS3核心知识
HTML+CSS大作业
而风不止
11-14 1781
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML+CSS系列学习 第二篇
self_correction的博客
10-27 1185
1.拨云见日 基础环节：HTML, CSS 切图流程：传统切图，智能切图，公司流行企图 实战环节：PC企业布局, PC游戏站布局 2.溯本求源 基础的扩展：HTML ,扩展CSS 新语法：HTML5，CSS3 浏览器的兼容与解决方案：hack 3.风生水起 布局：弹性布局，网格布局，移动端布局，响应式布局 布局框架：Bootstrap 4.巧夺天工 工程方面：预编译CSS，postcss 架构：CSS架构 高级功能：CSS高级用法 交互：CSS与JS交互
（HTML+css）学习小征程！！！
gua_Piter的博客
10-20 2045
HTML 称为超文本标签语言，是一种标识性的语言，用于创建网页和Web应用程序。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。@CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
html5+Css总结(附带案例)
ThegreatHaige的博客
09-10 3340
HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成： 1.html:也是前端网页基本框架结构，类似于骨架一样的作用 2.CSS: 也叫层叠样式表，就是为美化界面而存在 3.Javascript: 使页面具有动态的效果(包括与用户的一个交互) 一&二.Html HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。 所谓超文本Hypertext，是指连接单个或
学习 HTML+CSS 这一篇就够了
li520_fei的博客
03-17 2862
文章目录学习 HTML+CSS 这一篇就够了 ！HTML 简介一、网页1 .什么是网页2. 什么是 HTML3.网页的形成4.网页总结二、浏览器1. 常用浏览器2.浏览器内核三、 Web 标准（重点）1. 为什么需要 Web 标准2. Web 标准的构成HTML标签一、HTML 语法规范1. 基本语法概述2.标签关系二、HTML 基本结构标签1. 第一个 HTML2. 基本结构标签总结三、开发工具1. 网页开发工具2. VSCode 工具生成骨架标签新增代码4.1 文档类型声明标签4.2 lang 语言种
HTML5+CSS、CSS3基础知识点总结
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
#3使用html+css+js制作网页 制作登录网页
Eritque arcus的博客
01-31 2万+
#3使用html+css+js制作网页 制作登录网页 详细教程
纯HTML5+CSS3仿B站首页
weixin_48493613的博客
08-15 8556
纯HTML5+CSS3仿B站首页
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript
热门推荐
qq_365392777
09-29 3万+
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
HTML5（超文本标记语言第五版）是网页内容的结构化标准，它增强了对多媒体的支持，如音频、视频和图像，并引入了新的标签来更好地定义页面结构，如、、和等。此外，HTML5还改进了离线存储机制，使得网页可以离线访问...
html+css+js 学习笔记之html篇
CSDN@YuanDaiMa2048的博客
08-14 55
第一部分 持续记录学习html5+css3+js时的一些课程笔记
CSS中禁用DOM事件
bingmoujs的博客
08-26 856
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
《CSS 3D 变形探秘：开启网页设计新维度》
qq_69304031的博客
08-28 512
可以分别控制 x 轴、y 轴和 z 轴的缩放比例，实现不同方向的拉伸或压缩。transform scale(sx,sy，sz)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，沿z轴是z如果sy省略，默认sy=sx。transform scale(sx,sy)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，如果sy省略，默认sy=sx。函数可以使元素沿 x 轴或 y 轴倾斜，为设计带来独特的视角效果。ranslate(tx,ty,tz]:沿x轴移动tx距离，沿y轴移动ty的距离。
CSS解析:定位和层叠上下文
最新发布
晓风残月淡的博客
08-31 1238
许多开发人员对定位的理解很粗略，如果不完全了解定位，就很容易给自己挖坑。有时候可能会把错误的元素放在其他元素前面，要解决这个问题却没有那么简单。一般的布局方法是用各种操作来控制文档流的行为。定位则不同：它将元素彻底从文档流中移走。它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。
CSS学习
2301_77205900的博客
08-28 807
CSS全称Cascading Style Sheets一种样式表语言，为html标签修饰定义外观，分工不同CSS与HTML关系html是网页的内容css是网页的样式（结构）
tailwindcss
readmancynn的博客
08-31 819
Tailwind CSS 是一个可定制化的 CSS 框架，最大的特点是功能类优先，和我们知道的bootstrap，element ui，antd，veui等框架一样。将一些CSS样式封装好，用来加速我们开发的一个工具。简单理解 TailwindCSS 就是 CSS 的 lodash, 他是一个增强工具类，你可以用原子类的方式写样式，也可以基于 PostCSS 作为工具函数做 Mixin。
Nuxt 项目实战 - 15：自定义unocss规则，让编写样式更高效
Potter：I am not for learning and learning, but for study and work
08-28 385
看到这个你发现问题了，由于我们颜色变量引用的是16进制颜色值，然后rgba的参数是4个，而且是用逗号隔开。可能你会想编译后改样式，类似webpack的css loader一样，但是我们会失去unocss的提示，在开发的时候还是很不方便。如果你有兴趣，欢迎加入你的加入，一起完善这个工具。，可以帮你一键将markdown发布至多平台，方便大家更好的传播知识和分享你的经验。说明：你可能会想到改unocss的规则，那么我们来试下。完美实现我们想要的效果，这样就可以更开心的写样式了。最近我开源了一个文章助手。
要隐藏滚动条，您可以使用CSS中的overflow属性。
爱敲代码的卡拉米的博客
08-28 441
请注意，隐藏滚动条可能会导致内容被截断或无法访问到超出视图范围的内容。请确保在隐藏滚动条时考虑到用户体验和页面布局。希望这个解决方案对您有帮助！如果有任何问题，请随时告诉我。元素的滚动条隐藏起来。确保将这段样式代码添加到您的Vue组件的样式部分中，并且根据需要调整选择器以匹配您想要隐藏滚动条的元素。要隐藏滚动条，您可以使用CSS中的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值