html+css学习第五节

一、strong和b、em和i

strong和em都是表示强调的标签,表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
网页显示
区别在于,strong 和 em 是具备语义化的,而b和i是不具备语义化的。

二、引用标签

1.blockquote:

引用大段的段落解释
网页显示

2.q:

引用小段的短语解释

3.abbr:

缩写或首字母缩略词
网页显示

4.address:

引用文档地址信息

5.cite:

引用著作
网页显示

三、iframe嵌套页面

iframe 元素会创建包含另一个文档的内联框架(即行内框架)
(可以引入其他的html到当前html中显示)
主要利用iframe的属性进行样式的调节

1.常见属性

网页显示 <iframe src="https://www.taobao.com" frameborder="0" ></iframe>
网页显示

 <iframe src="https://www.taobao.com" frameborder="0" scrolling=no></iframe>

(消除滚动条)
网页显示

<iframe srcdoc="hello world" src="https://www.taobao.com" frameborder="0" scrolling="no"width="400"height="400"></iframe>

![网页显示](https://img-blog.csdnimg.cn/24433d4390ed40ba9b0aca828f4b5220.png

)<!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{width: 100%;height: 770px;}
    </style>
</head>
<body>
    <iframe srcdoc="<h1>hello world<h1>" src="https://www.taobao.com" frameborder="0" scrolling="no"width="400"height="400"></iframe>
</body>
</html>

网页显示

2.应用场景

数据传输、共享代码、局部刷新、第三方介入等。

<iframe  src="https://img.alicdn.com/imgextra/i3/4201740998/O1CN01sl5Z451JF81cILjxh_!!4201740998.jpg_180x180xzq90.jpg_.webp" frameborder="0" width="200"height="200"></iframe>

网页显示

四、br标签和wbr标签

1.br标签

br:表示换行操作,而wbr标签表示软换行操作

<!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>
        For this part, you are required to write a composition about 120 words on the topic: Changes in People's Daily Expenses. 
        <br> Your composition should be written on the following table and Chinese given below.  
    </p>
</body>
</html>

网页显示

2.wbr标签

如果单词太长,或者你担心浏览器会在错误的位置换行,那么您可以使用wbr元素来添加 Word Break Opportunity(单词换行时机)

五、pre与code

1.pre

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。(针对网页中的程序代码的显示效果)

2.code

只应该表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 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>
    <pre>
        <code>
            &lt;!DOCTYPE html&gt;
&lt; html lang="en" &gt;
&lt; head &gt;
    &lt; meta charset="UTF-8"&gt;
    &lt; meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt; meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title>Document</title>
</head>
<body>
    hello world

</body>
        </code>
    </pre>
</body>
</html>

网页显示

六、map标签和area标签

给特殊图形添加链接

1.map标签

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area能添加的热区的形状:矩形、图形、多边形

2.area标签

area元素的href属性定义区域的URL,shape属性来定义区域的形状,coords属性定义热区的坐标。

<!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="./img/web1.png" alt=""usemap="#round">
    <map name="round">
        <area shape="rect" coords="9 7 50 25" href="https://www.taobao.com" alt="">
    </map>
</body>
</html>

网页显示

七、embed 和 object 标签

embed 和 object 都表示能够嵌入一些多媒体,如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="./img/zflash369.swf" type="">
    <!-- <object>
        <param name="movie" value="./img/zflash369.swf">
    </object> -->
</body>
</html>

八、audio和video标签

audio标签表示嵌入音频文件,video标签表示嵌入视频文件。默认控件是不显示的,可通过controls属性来显示控件。()属于h5的功能
为了能够支持多个备选文件的兼容支持,可以配合source标签。

<!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>
    <audio src="C:\Users\徐\Documents\vs code\img\林俊杰 - 裹着心的光 [mqms2].flac" controls></audio>
</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>
</head>
<body>
   <!--  <audio src="C:\Users\徐\Documents\vs code\img\林俊杰 - 裹着心的光 [mqms2].flac" controls></audio> -->
   <video src="C:\Users\徐\Videos\钟离.mp4" controls></video>
</body>
</html>

网页显示

九、 文字注解与文字方向

ruby标签定义ruby注释(中文注音或字符),rt标签定义字符(中文注音或字符)的解释或发音。
bdo标签课覆盖默认的文本方向

<!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>
    <ruby><rt>han</rt></ruby>
    <p>
        <bdo dir="ltr">绝对理智</bdo>假期
    </p>
</body>
</html>

网页显示

十、link标签扩展学习

<!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"type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
    <link rel="dns-prefetch" href="//static.360buyimg.com">
</head>
<body>
    
</body>
</html>

网页显示

十一、Meta标签扩展

在这里插入图片描述

十二、html5新标签语义化

1.

header:页眉
footer:页脚
main:主体
hgroup:标题组合
nav:导航

<!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>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

注:header、footer、main在一个网页中只能出现一次。

2.

article:独立的内容
aside:辅助信息的内容
section:区域
figure:描述图像或视频
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>
</head>
<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="./img/原神.jpg" alt="">
                            <figcaption>
                                原神
                                <br>
                                深渊法师
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
        </article>
    </main>
    <footer></footer>
</body>
</html>

在这里插入图片描述

3.

datalistat:选项列表

<datalist id="elems">
                        <option value="a"></option>
                        <option value="ab"></option>
                        <option value="abc"></option>
                        <option value="apple"></option>
                        <option value="abbr"></option>
                        <option value="around"></option>
                    </datalist>

在这里插入图片描述

details/summary:文档细节/文档标题

<details>
                        <summary>html</summary>
                        <p>语义化标签</p>
                    </details>

在这里插入图片描述

progress/meter:定义进度条/定义度量范围

<progress min="0"max="10"value="5"></progress>
                    <meter min="0"max="100"value="80"low="10"high="60"></meter>

在这里插入图片描述

time:定义日期或时间

 <p>
                        今天是<time title="11-26">周六</time>假期
                    </p>

mark:带有记号的文本

 <p>
                        今天是<mark>周六</mark>假期
                    </p>

在这里插入图片描述

十三、flex弹性布局

在这里插入图片描述
在这里插入图片描述

1.flex-direction

flex-direction 用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。
在这里插入图片描述
在这里插入图片描述

#box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

2.flex-warp

flex-wrap 用来控制子项整体单行显示还是换行显示。

<!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>
        #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: red;}
    </style>
</head>
<body>
    <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>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
注:nowrap会适配宽度,当压缩不了的时候才会溢出,容器自适应。
在这里插入图片描述

3.flex-flow

flex-flow 属性是flex-direction 和 flex-wrap的缩写,表示flex布局的flow流动特性。第一个值表示方向,第二个值表示换行,中间用空格隔开。

flex-flow: column wrap;

在这里插入图片描述

4.justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。(根据flex-direction
决定)
在这里插入图片描述
主轴:水平

justify-content:flex-end ;

在这里插入图片描述

justify-content:space-between ;

在这里插入图片描述

justify-content:space-around;

在这里插入图片描述

justify-content:space-evenly;

在这里插入图片描述

5.align-items

align-items 中的 items 指的就是flex子项们,因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
在这里插入图片描述

justify-content: space-evenly;align-items:flex-start ;

在这里插入图片描述

justify-content: space-evenly;align-items:flex-end ;

在这里插入图片描述

6.align-content

align-content 可以看成和justfy-content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。(多行)
在这里插入图片描述

justify-content: space-evenly;flex-wrap: wrap;align-items: flex-start;align-content: flex-start;

在这里插入图片描述

justify-content: space-evenly;flex-wrap: wrap;align-items: flex-start;align-content: flex-end;

在这里插入图片描述

十四、作用在flex子项上的css属性

在这里插入图片描述

1.

#box{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;}
    #box div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
    #box div:nth-child(2){order: 1;}
    #box div:nth-child(3){order: -1;}

在这里插入图片描述

2.

 #box{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;}
    #box div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
    #box div:nth-child(2){color: black;background:yellow ;flex-grow:0.5 ;}

在这里插入图片描述

3.

#box{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;}
    #box div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
    #box div:nth-child(2){color: black;background:yellow ;flex-grow:0.5 ;}
    #box div:nth-child(3){color: black;background:blue ;flex-grow:0.2 ;}

在这里插入图片描述

4.

 #box2 div:nth-child(2){color: black;background:yellow ;flex-shrink: 2;}
    #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:red; }

在这里插入图片描述

5.

#box2 div:nth-child(2){color: black;background:yellow ;flex-basis: 100px;}
    #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:red; }

在这里插入图片描述

6.

#box2 div:nth-child(2){color: black;background:yellow ;width: 100px;flex: 0 1 auto;}

在这里插入图片描述#box2 div:nth-

7.

child(2){color: black;background:yellow ;flex:2;}
    #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:red; }

注:让弹性的优先级高于默认宽度在这里插入图片描述

8.

#box2{width:300px;height: 300px;border:1px black solid;margin: 20px auto;display: flex;align-items: center;}
    #box2 div{width:50px;height: 50px;color: white;line-height: 50px;text-align: center;background:red; }
    #box2 div:nth-child(2){color: black;background:yellow ;}
    #box2 div:nth-child(1){align-self: flex-start ;}

注:整体设置,单个设置
在这里插入图片描述

十五、flex案例

1.骰子

<!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-between;}
        #box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
        #box2 div:last-child{align-self:flex-end;}

        #box3{width: 100px;height: 100px;border: 1px solid black;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:first-child{align-self:flex-start;}
        #box3 div:last-child{align-self:flex-end;}

        #box4{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box4 div{width: 100%;display: flex;justify-content: space-between;}
        #box4 div:last-child{align-items: flex-end;}
        #box4 i{display: block; width: 30%;height: 60%;background: black;border-radius: 50%;}
        
        #box5{width: 100px;height: 100px;border: 1px solid black;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: black;border-radius: 50%;}

        #box6{width: 100px;height: 100px;border: 1px solid black;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: black;border-radius: 50%;}

    </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="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>
</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>
    <style>
    *{margin: 0;padding: 0;}
    #main{display: flex;}
    #left{width: 200px;height: 200px;background:red ;}
    #center{flex:1;height: 300px;background: yellow;}
    #right{width: 150px;height: 200px;background: blue;}

    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

3.百度弹性导航

<!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;}
    #box1{width: 735px;height:256px;border: 1px solid bisque;border-radius: 20px; margin-left: 300px;margin-top: 100px;}
    #box1 div{display: flex;flex-wrap: wrap;justify-content: space-around;}
    #box1 div:first-child{margin-top: 30px;}
    #box1 div:last-child{margin-top:30px}
    #box1 i{display: block;}
    #box1 i img{width:60px;height:60px;}
    #box1 h3{font-style: normal;font-weight: normal;text-align: center;}
    </style>
</head>
<body>
    <div id="box1">
        <div>
            <i>
                <img src="https://m.baidu.com/bdlogo/dh1_xinwen_c91c0322e430b019ac7bad08ea95f248.png" alt="">
                <h3>新闻</h3>
            </i>
            <i>
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=758148275,3252013660&fm=179&app=35&f=PNG?w=387&h=387&s=EF871B66D67551847907386B02007018" alt="">
                <h3>视频</h3>
            </i>
            <i>
                <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2832844731,2703324651&fm=179&app=35&f=PNG?w=129&h=129&s=E537AA76B469D5055E7FA8FA0300C03F" alt="">
                <h3>小说</h3>
            </i>
            <i>
                <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2195259559,863568018&fm=179&app=35&f=PNG?w=387&h=387&s=66293666D07951844847E87B0200503B" alt="">
                <h3>图片</h3>
            </i>
            <i>
                <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2383097158,3535800927&fm=179&app=35&f=PNG?w=387&h=387&s=00934A7ED46751050D1233D10200C09E" alt="">
            <h3>地图</h3>
        </i>
        </div>
        <div>
            <i>
                <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1220673176,1987534443&fm=179&app=35&f=PNG?w=387&h=387&s=2291A16C4A316184535E5649020050FD" alt="">
                <h3>网站</h3>
            </i>
            <i>
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1952867002,2106294501&fm=179&app=35&f=PNG?w=390&h=387&s=01938A7E60320D9A4FB2A3C10300709F" alt="">
                <h3>贴吧</h3>
            </i>
            <i>
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3079529804,4278101905&fm=179&app=35&f=PNG?w=129&h=129&s=81D187663C679005430E26500300C0DA" alt="">
                <h3>健康</h3>
            </i>
            <i>
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1774094608,3517642310&fm=179&app=35&f=PNG?w=387&h=387&s=00938A7EC836608445DA1EC90200509F" alt="">
                <h3>营销</h3>
            </i>
            <i>
                <img src="https://t8.baidu.com/it/u=233749758,3836311004&fm=179&app=35&f=PNG?w=387&h=387&s=CB023366FA4751455E923BD30200E09E" alt="">
                <h3>更多</h3>
            </i>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

十六、Grid网格布局

Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。
在这里插入图片描述

1.grid-template-columns

对网格进行纵横划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位网格剩余空间比例单位)

2.grid-template-rows

有时候,我们网格的划分是很规律的,如果需要添加多个纵横网格时,可以利用repeat()语法进行简化操作。

<!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: 500px;height: 500px;border: 1px gray dotted;display: grid;
   /*  grid-template-rows: 100px auto 25%;
    grid-template-columns: 100px 100px 200px 100px;} */
    grid-template-rows:repeat(3,1fr);
    grid-template-columns:repeat(3,1fr) ;
}
.box div{background: red;border: 1px black solid;}
    </style>
</head>
<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>
</body>
</html>

在这里插入图片描述

3.grid-template-areas

area是区域的意思,grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。

4.grid-template

grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。

<!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 gray dotted;display: grid;
    grid-template-rows:repeat(3,1fr);
    grid-template-columns:repeat(3,1fr) ;
}
.box div{background: red;border: 1px black solid;}

.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 a1"
    "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;}

    </style>
</head>
<body>
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

5.grid-column-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。

6.grid-row-gap

CSS grid-gap属性是grid-colum-gap和grid-row-gap属性的缩写。

/*  grid-column-gap: 10px;
    grid-row-gap: 20px; */
    grid-gap: 20px 10px;

在这里插入图片描述

7.justify-items和align-items

justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。
align-items指定了网络元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
在这里插入图片描述

justify-items: start;

在这里插入图片描述

justify-items: center;
    align-items: center;

在这里插入图片描述

8.justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的水平分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
在这里插入图片描述

justify-content: center;

注:针对整个网格
在这里插入图片描述

9.作用在grid子项上的css属性

在这里插入图片描述

grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: span 2;
 /* 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 2;

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTMLCSS和JavaScript是前端开发中最基础的三种技术,它们分别负责网页的结构、样式和交互。下面是对它们的简单介绍: 1. HTML(超文本标记语言):HTML是一种用于创建网页结构的标记语言。通过使用不同的HTML标签,可以定义网页的标题、段落、链接、图像等内容。HTML是网页的骨架,用于描述页面的结构和语义。 2. CSS(层叠样式表):CSS用于控制网页的样式和布局。通过CSS,可以设置网页的字体、颜色、背景、边框等外观效果,还可以实现响应式布局和动画效果。CSSHTML结合使用,可以使网页更加美观和易于阅读。 3. JavaScript(JS):JavaScript是一种脚本语言,用于实现网页的交互功能。通过JavaScript,可以对用户的操作做出响应,实现表单验证、动态内容加载、页面元素的交互效果等。JavaScript可以与HTMLCSS结合使用,使网页具有更强的交互性和动态性。 学习HTMLCSS和JavaScript可以按照以下步骤进行: 1. 学习HTML基础:了解HTML标签的基本语法和常用标签,学会创建网页的结构和内容。 2. 掌握CSS样式:学习CSS的基本语法和常用属性,掌握如何设置网页的样式和布局。 3. 学习JavaScript编程:了解JavaScript的基本语法和常用功能,学会使用JavaScript实现网页的交互效果。 4. 综合实践:通过实际项目或练习,将HTMLCSS和JavaScript结合起来,实现一个完整的网页或Web应用程序。 在学习过程中,可以参考一些优秀的教程和资源***www.w3schools.com/)等。此外,还可以通过阅读相关书籍、参加在线课程或加入开发社区来提升自己的技能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值