HTML+CSS系列学习 第五篇

原创 已于 2022-12-04 15:21:23 修改 · 365 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #前端

于 2022-11-25 18:04:05 首次发布
本文详细介绍了HTML和CSS的各种标签和属性，包括b与i、引用、iframe、br与wbr、pre与code、map与area、embed与object、audio与video、文字注解与文字方向、link与meta扩展、HTML5新语义化标签、flex布局和Grid布局。通过实例展示了这些标签和属性的用法及效果，帮助读者深入理解并掌握HTML和CSS的使用。

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>

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

【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 2824
，HTML5和CSS3核心知识
html+css+js 学习笔记之css篇
优快云@YuanDaiMa2048的博客
08-16 164
第二部分 持续记录学习html5+css3+js时的一些课程笔记
HTML+CSS系列学习 第二篇
self_correction的博客
10-27 1405
1.拨云见日 基础环节：HTML, CSS 切图流程：传统切图，智能切图，公司流行企图 实战环节：PC企业布局, PC游戏站布局 2.溯本求源 基础的扩展：HTML ,扩展CSS 新语法：HTML5，CSS3 浏览器的兼容与解决方案：hack 3.风生水起 布局：弹性布局，网格布局，移动端布局，响应式布局 布局框架：Bootstrap 4.巧夺天工 工程方面：预编译CSS，postcss 架构：CSS架构 高级功能：CSS高级用法 交互：CSS与JS交互
前端学习第一站——HTML+CSS
qq_59212867的博客
12-27 700
前端三剑客之一Html知识大整合~
HTML+CSS大作业
而风不止
11-14 1969
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
（HTML+css）学习小征程！！！
gua_Piter的博客
10-20 2273
HTML 称为超文本标签语言，是一种标识性的语言，用于创建网页和Web应用程序。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。@CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
html5+Css总结(附带案例)
ThegreatHaige的博客
09-10 3586
HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成： 1.html:也是前端网页基本框架结构，类似于骨架一样的作用 2.CSS: 也叫层叠样式表，就是为美化界面而存在 3.Javascript: 使页面具有动态的效果(包括与用户的一个交互) 一&二.Html HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。 所谓超文本Hypertext，是指连接单个或
学习 HTML+CSS 这一篇就够了
li520_fei的博客
03-17 3498
文章目录学习 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 语言种
【Web前端入门】HTML+CSS 万字总结——带你深入学习掌握
HTML网页设计 专注大学生网页设计
10-23 752
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。学习HTML就是学习标签的一个过程，难度指数低，重在反复练习！
HTML+CSS自学制作的第一个网页
qq_56982044的博客
12-01 1106
大家好，这是我自学HTML和CSS之后跟着黑马程序员教程制作的第一个网页，做网页的过程中让我更加明确了之前不太理解的一个知识，因此想写一篇博客记录一下，希望对大家有帮助！
新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版
quanzhankaifaqua的博客
07-10 1517
系统地讲解Web前端开发的核心技术，主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等，并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。《HTML5+CSS3 Web前端开发与实例教程：微课视频版》以“从项目中来到项目中去”为主旨，从Web前端开发的基本概念入手，系统介绍HTML5、CSS3网页编程技巧。
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
HTML5（超文本标记语言第五版）是网页内容的结构化标准，它增强了对多媒体的支持，如音频、视频和图像，并引入了新的标签来更好地定义页面结构，如、、和等。此外，HTML5还改进了离线存储机制，使得网页可以离线访问...
HTML5静态网页设计-电影主题泰坦尼克号电影 html+css 4页网页成品模版
12-03
HTML5是第五代超文本标记语言，它不仅支持传统的网页内容，还扩展了更多的语义化标签，提高了网页的可读性和可访问性。在设计静态网页时，HTML5能够帮助我们构建结构化的页面内容，使得网页设计更加直观和易于管理。...
CSS基础详解(2)--Grid网格布局详解
最新发布
Coding...
12-10 878
网格布局是一种通过水平与垂直线构成的页面排版方式，由列(column)、行(row)和沟槽(gutter)组成。通过CSS的display: grid属性可创建网格容器，使用grid-template-columns定义列宽（支持px、fr等单位），grid-gap设置间隙。repeat()函数可简化重复轨道定义，minmax()函数能灵活控制行/列尺寸范围。网格分为显式（手动定义）和隐式（自动生成）两种，通过grid-auto-rows可控制隐式行高。网格布局能实现响应式、精确的元素排列，提升页面统一性。
CSS 选择器
froginwe11的博客
12-07 357
CSS选择器是CSS样式规则的基础，正确使用选择器可以有效地提高网页样式设计的效率。本文介绍了CSS选择器的类型、使用方法和注意事项，希望对您有所帮助。
css 按钮的脉冲光环动画，强调动画。
PrimaryColor
12-05 171
【代码】css 按钮的脉冲光环动画，强调动画。
使用css制作一个环形进度展示圈
苦夏木禾
12-05 255
本文介绍了一种纯CSS实现环形比例图的方法，无需依赖Echarts等图表库。核心使用CSS3的conic-gradient（锥形渐变）属性来创建分段效果，通过radial-gradient实现中间镂空的圆环样式。示例代码展示了如何构建一个三色环形图（比例70%/15%/15%），并利用绝对定位在中心显示数值和单位说明。这种方法简洁高效，适合轻量级数据可视化需求，代码量少且易于自定义修改。
CSS 文本描边最稳方案：多重 text-shadow 实现清晰黑描边
apple_70049717的博客
12-10 229
在前端页面中，当文字内容处于复杂背景（如视频画面、图片区域）之上时，白色字体很容易与背景混合导致不清晰。左上、右上、左下、右下 4 个角方向。描边厚度：由偏移量（如 2px）决定。无模糊：确保边缘硬朗，不会糊成光晕。是最有效的增强可读性的方法。上、下、左、右 4 个方向。
Vue3 + TS + TailwindCSS 操作引导组件开发逐行解析
weixin_62613321的博客
12-05 854
本文介绍了基于Vue3+TS+TailwindCSS开发的3D操作引导组件。该组件针对3D高斯游览场景，通过图示和文字说明帮助用户快速掌握移动、旋转、缩放等交互操作。组件采用分栏式设计，顶部为三个操作分类标签页，下方展示对应操作的提示信息和示意图。实现上使用了动态class绑定、响应式状态管理等技术，并采用TailwindCSS进行样式设计。组件通过v-model控制显示状态，提升了3D场景下的用户体验和交互效率。
大学生JSP+CSS网页设计作业系列第八篇
本系列文件“大学生jsp+css网页精品作业系列08”是针对大学生在进行JSP和CSS网页设计作业时的一套参考资料或模板。从标题和描述中可以看出，该系列主要包含的是用Java Server Pages (JSP) 和 Cascading Style Sheets...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值