Web前端一套全部清晰 ⑥ day4 CSS.1 基础选择器、文字控制属性

news2024/10/5 4:11:53

后来的我不在抱怨 所有的事与愿违都是我能力或者判断力不足 仅此而已

                                                                                                        —— 24.5.1

一、CSS定义

1. 将CSS放在html文件的<style>标签中

        层叠样式表(Cascading style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现(美化内容)

        书写位置:title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

① 语法：

<title>
    CSS 初体验
</title>
<style>
/*选择器{}*/
<p>{
    /*CSS 属性*/
    color red;
}
</p>

</style>
<p>体验 CSS</p>

② 示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS初体验</title>
    <!-- CSS书写在title下方 -->
    <style>
        /* 选择器 */
        p {
            /* CSS属性 */
            /* 属性名和属性值同时成对出现 -> 键值对 */
            /* color 字体颜色 */
            color: rgba(0, 255, 255, 0.805);
            /* font-size 调整字号 px像素单位 */
            font-size: 27px;
        }
    </style>
    <p>体验CSS</p>
</head>
<body>
    
</body>
</html>

③ 总结

        1.CSS书写在什么位置？

               head 标签中 title 标签下方

        2.哪个标签里面可以书写CSS代码？

                style标签

        3.CSS代码的书写规则是什么？

                选择器{属性名:属性值;}

<title>CSS 初体验</title>
<style>
    p{
        color:red
    }
</style>

2.CSS引入方式

① 语法：

        内部样式表：学习使用

                CSS代码写在 style 标签里面

        外部样式表：开发使用

                CSS代码写在单独的CSS文件中(.css)

                在 HTML 使用 link 标签引入

<link rel="stylesheat" href="./my.css">

        行内样式：配合JavaScript使用

                CSS 写在标签的 style 属性值里

<div style="color:red;font_size:20px;">这是 div 标签</div>

② 示例

CSS文件

/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性} */
p {
    color: red;
}

HTML文件

 <!-- CSS代码单独写在CSS文件中（.css）-->
 <!-- 在HTML使用 link 标签引入  -->
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 引入方式</title>
    <!-- link:引入外部样式表 rel：关系、样式表 -->
    <link rel="stylesheet" href="./03.mine.css">
 </head>
 <body>
    <p>这是 p 标签</p>
    <!-- 行内：style=“CSS 属性” -->
    <div style="color: cadetblue;font-size: 27px;">这是 div 标签</div>
 </body>
 </html>

HTML文件

 <!-- CSS代码单独写在CSS文件中（.css）-->
 <!-- 在HTML使用 link 标签引入  -->
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 引入方式</title>
    <!-- link:引入外部样式表 rel：关系、样式表 -->
    <link rel="stylesheet" href="./03.mine.css">
 </head>
 <body>
    <p>这是 p 标签</p>
    <!-- 行内测试行内写法：style=“CSS的属性 可以写多个” -->
    <div style="color: cadetblue;font-size: 27px;">这是 div 标签</div>
 </body>
 </html>

③ 总结

        1.实际工作中，常用哪种 CSS 引入方式？

                外部样式表 .css文件

        2.在HTML中，使用哪个标签可以引入外部样式表

                link 标签       

二、选择器

1.标签选择器

标签选择器：使用标签名作为选择器 -> 选中同名标签设置相同的样式

例如：p、h1、div、a、img……

<style>
    p{
        color:red;
    }
</style>

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
    /* 选中同名标签设置相同的样式，无法差异化同名标签的样式 */
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        这是 p 标签
    </p>
    <p>
        一切都会好的
    </p>
    <p>
        我一直相信
    </p>
</body>
</html>

2.类选择器

作用：

        查找标签，差异化设置标签的显示效果

步骤：

        定义类选择器 -> .类名

        使用类选择器 -> 标签添加 class="类名"

<style)
    /*定义类选择器*/
    .red {
        color: red;    
    </style>

<!-- 使用类选择器 -->
<div class="red">
    这是 div 标签
</div)

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 定义 */
        .red{
            color: red;
        }

        .size{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 使用 -->
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class="red">
        1111111
    </p>
    <p>
        2222222
    </p>
    <!-- 一个标签可以使用多个类名 class属性值写多个属性值 用空格隔开 -->
    <div class="red size">
        div 标签
    </div>
</body>
</html>

注意：

        类名自定义，不要用纯数字或中文，尽量用英文命名

                一个类选择器可以供多个标签使用

                一个标签可以使用多个类名，类名之间用空格隔开

        开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news - hd

3.id选择器

作用：

        查找标签，差异化设置标签的显示效果

场景：

        id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤:

        定义id 选择器 → #id名

        使甪 id 选择器 → 标签添加 id="id名

规则：

        同一个 id 选择器在一个页面只能使用一次

<style>
    /*定义idd选择器*/
    #red {
        color: red;
    }
</style>

<!--使用 id选择器 -->
<div id="red">这是 div 标签</div>

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* 定义 */
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="red">div 标签</div>

</body>
</html>

4.通配符选择器

作用:

        查找页面所有标签，设置相同样式

通配符选择器：*

        不需要调用
        浏览器自动查找页面所有标签，设置相同的样式

*{
    color:red
}

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        标签
    </p>
    <div>
        div 标签
    </div>
    <h1>
        h1 标签
    </h1>
    <h2>
        一切都会好的
    </h2>
    <h3>
        我一直相信
    </h3>
</body>
</html>

三、画盒子

目标：使用合适的选择器画盒子

新属性：

        width                                  宽度

        height                                 高度

        background-color              背景色

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画盒子</title>
    <style>
        .Divred1{
            width: 114px;
            height: 75px;
            background-color: brown;
        }
        .Divred2{
            width: 227px;
            height: 63px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="Divred1">div1</div>
    <div class="Divred2">div2</div>
</body>
</html>

四、文字控制属性

1.字体大小 font-size

属性名：font-size

属性值：文字尺寸，PC端网页最常用的单位：px

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小</title>
    <style>
        /* 经验：谷歌浏览器中，文字默认大小：16px */
        p{
            /* 注意事项：font-size属性必须有单位，否则属性不生效 */
            font-size: 27px;
        }
    </style>
</head>
<body>
    <p>测试字体大小</p>
    <div>测试默认字体大小</div>
</body>
</html>

2.字体粗细 font-weight

属性名：font-weight

属性值：

        数字(开发使用)

        关键字

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体粗细</title>
    <style>
        h3{
            font-weight: 400;
        }

        div{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h3>
        h3 标题
    </h3>
    <div>
        div标签
    </div>

</body>
</html>

3.字体倾斜 font-style

作用：清除文字默认的倾斜效果

属性名：font-style

属性值

        正常(不倾斜)：normal

        倾斜：italic

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体倾斜</title>
    <style>
        em{
            font-style: normal;
        }

        div{
            font-style: italic;
        }
    </style>
</head>
<body>
    <em>em 标签</em>
    <div>div 标签</div>
</body>
</html>

4.行高 line-height

作用：设置多行文本的差距

属性名：line-height

属性值

        数字+px

        数字(当前标签font-size属性值的倍数)

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        p{
            /* line-height: 27px; */
            line-height: 2;
        }
    </style>
</head>
<body>
    <p>你说我们星座不相配,相处会针锋相对
        在一起纯属是浪费,你的下场会很狼狈
        那为什么还要相会,缘分搞错了方位
        怪我放下了防备,只想跟你相依相偎
        一堆莫名其妙的理由来推掉我邀请
        你不在我身边的时候寂寞得快要命
        给你送过的礼物你从来都不会感激
        就算我把月亮摘下来也不会有转机
        既然不想在一起,何必要甜言蜜语
        告诉我你的秘密,还有文身的意义
        怪我爱得太深所以才看不清楚真相
        直到你和别人牵了手我才停下了逞强</p>
</body>
</html>

行高的测量方法：从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)

总结：

        ①如何书写line-height属性

                数字+px

                数字(当前标签font-size值的倍数)

        ②测量行高的方式是什么

                从一行文字的最顶(最底)测量到下一行文字的最顶(最底)

行高-垂直居中

        垂直居中技巧：行高属性值等于盒子高度属性值

5.字体族 font-family

属性名：font-family

属性值：字体名

font-family：楷体；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体族</title>
    <style>
        div{
            font-family: 楷体;
        }
        /* 字体族中寻找，从线上网页进行复制 */
        p{
            font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        }
    </style>
</head>
<body>
    <p>
        一切都会好的
    </p>
    <div>
        测试文字
    </div>
</body>
</html>

从左至右寻找电脑自带的字体

6.字体复合属性 font

使用场景：设置网页文字公共样式

font复合属性

复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写）

div {
        font:italic 780 30px/2 楷体;

}

注意:字号和字体值必须书写，否则 font 属性不生效

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font 属性</title>
    <style>
            /* 文字倾斜，文字加粗，文字大小是30px，行高2倍，楷体 */
        div {
            font:italic 700 30px/2 楷体;
        }
    </style>
</head>
<body>
    <div>
        测试 font属性
    </div>
</body>
</html>

font属性可以只用写字号和字体，font必须写字号和字体，否则font属性不生效

可以从网页复制font属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font 属性</title>
    <style>
            /* 文字倾斜，文字加粗，文字大小是30px，行高2倍，楷体 */
        div {
            /* font:italic 700 30px/2 楷体; */
            font: 30px 楷体;
        }
    </style>
</head>
<body>
    <div>
        测试 font属性
    </div>
</body>
</html>

7.文本缩进 text-indent

属性名:text-indent
属性值:
        数字 + pX
        数字 + em(推荐:1em=当前标签的字号大小)

p{
    text-indent:2em;
}

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
    一周目结束，好久没有一次性通关一款游戏了，
    又让我想起初高中的时候也是整日整夜的打魔女之泉，
    虽然是1代的重置版，但是了了我之前因为1代有时限而没玩的遗憾，
    真的很喜欢这种游戏玩法和美术风格，画质比之前几代也提升了很多，
    玩法还是之前那样，从小小魔女经过种种磨练最终成长为独当一面最强魔女，
    剧情很精彩，但是没有爱情线会更好，可恶的黄毛！！！
    </p>
</body>
</html>

8.文本对齐 text-align

作用:控制内容水平对齐方式
属性名:text-align
属性值:
        left                左对齐(默认)
        center           居中对齐
        right              右对齐

居中的是文字内容，并不是标签属性

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐方式</title>
</head>
<style>
    h1{
        /* center 中间效果 */
        text-align: center;
    }
    h2{
        text-align: right;
    }
</style>
<body>
    <h1>
        我一直相信
    </h1>
    <h2>
        一切都会好的
    </h2>
    <h3>
        万事胜意
    </h3>
</body>
</html>

水平对齐方式 - 图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片对齐方式</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <img src="./敲键盘.jpg" alt="">
    </div>
</body>
</html>

9.文本修饰线 text-decoration

属性名:text-decoration
属性值：

                   none                        无
                underline                 下划线
                line-through             删除线
                overline                   上划线

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本修饰线</title>
    <style>
        a{
            text-decoration: none;
        }

        div{
            text-decoration: underline;
        }

        p{
            text-decoration: line-through;
        }

        span{
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <a href="#">a 标签，去除下划线</a>
    <div>div 标签，添加下划线</div>
    <p>p标签，添加删除线</p>
    <span>span标签，添加顶划线</span>
</body>
</html>

10.color 文字颜色

属性名:color
属性值
颜色表示方式              属性值                      说明                                           使用场景
颜色关键字            颜色英文单词       red、green、 blue...                            学习测试
rgb表示法             rgb(r, g, b)       r,g,b表示红绿蓝三原色，取值:0-255             了解
rgba表示法         rgba(r, g, b, a)      a表示透明度，取值:0-1                开发使用，实现透明色
十六进制表示法 #RRGGBB     #000000，#ffcc00，简写:#000，#fc0         开发使用(复制)

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字颜色</title>
    <style>
        h1{
            color: rgb(0, 45, 81);
        }
        h2{
            color: yellowgreen;
        }
        h3{
            color: rgba(27, 45, 81, 0.3);
        }
        h4{
            color:#0000fc;
        }
        h5{
            color: #0f0;
        }
    </style>
</head>
<body>
    <h1>
        英文单词表示法
    </h1>
    <h2>
        rgb表示法
    </h2>
    <h3>
        rgba表示法
    </h3>
    <h4>
        16进制表示法
    </h4>
    <h5>
        16进制表示法简写
    </h5>
</body>
</html>

五、调试工具 - 谷歌浏览器

作用：

        检查、调试代码；帮助程序员发现代码问题，解决问题

使用：

1.打开调试工具

        浏览器窗口内任意位置 / 选中标签 -> 鼠标右键 -> 检查

        F12

2.使用调试工具

3.调试工具的细节

        ① 如果是错误的属性，有黄色叹号

        ② CSS属性的前面有多选框，如果勾选则这个属性生效，如果没有勾选，则这个属性不生效

六、综合案例一_新闻详情

网页制作思路：

        ① 从上到下，先整体在局部

        ② 先标签，再CSS美化

实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <style>
        h1 {
            text-align: center;
            font-weight: 400;
            font-size: 30px;
            color:#333;
        }
        p {
            text-indent: 2em;
            font-size: 18px;
            color: #999;
            line-height: 2;
        }
        div {
            text-indent: 2em;
            line-height: 2;
        }
        .pic{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1>
    <p>来源:央视网|2222年12月12日 12:12:12</p>
    <div><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设
        高标准农田等一系列措施，为秋粮稳产提供有力支撑。
    </div>
    <div>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。
    </div>
    <p class="pic">
        <img src="./新闻页面.jpg" alt="">
    </p>
    <div>
        王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示确保来年增产增收。范田内，像“华夏香丝”这样抗早节水的品种还有20多个，这些水稻新品将在荆门全面推广，
    </div>
    <div>
        此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。
    </div>
</body>
</html>

七、综合案例二_CSS简介

网页制作思路：

        ① 从上到下，先整体在局部

        ② 先标签，再CSS美化

实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 简介</title>
    <style>
        h1 {
            color:#333;
        }
        p {
            text-indent: 2em;
            font-size: 14px;
            line-height: 30px;
            color: #444;
        }
        a{
            color: #0069c2;
        }
        li{
            font-size: 14px;
            color:#444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>
        CSS(层叠样式表)
    </h1>
    <p>
        层叠样式表 (Cascading Style Sheets;缩写为 CSS)，是一种 <a href="#">样式表</a> 语言，用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的
        XML分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题
    </p>
    <p>
        <strong>CSS是开放网络的核心语言之一</strong> ，由 W3C规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.cs 文件中，同时
        控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS被分为不同等级:CSS1现已废弃，CSS2.1 是推荐标准，CSS3 分
        成多个小模块目正在标准化中。
    </p>
    <ul>
        <li>
            SS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。
        </li>
        <li>
            CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。
        </li>
        <li>
            CSS 参考 针对资深 Web 开发者的 <a href="#"> 详细参考手册</a>描述了 CSS 的各个属性与概念。
        </li>
    </ul>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1640919.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

软件应用开发安全设计指南

软件应用开发安全设计指南

1.1 应用系统架构安全设计要求 设计时要充分考虑到系统架构的稳固性、可维护性和可扩展性&#xff0c;以确保系统在面对各种安全威胁时能够稳定运行。 在设计系统架构时&#xff0c;要充分考虑各种安全威胁&#xff0c;如DDoS攻击、SQL注入、跨站脚本攻击&#xff08;XSS&…
阅读更多...
Github 2024-05-03 Java开源项目日报 Top9

Github 2024-05-03 Java开源项目日报 Top9

根据Github Trendings的统计，今日(2024-05-03统计)共有9个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Java项目9Kotlin项目1C++项目1libGDX: 跨平台Java游戏开发框架 创建周期：4284 天开发语言：Java, C++协议类型：Apache License 2.0Star数量：2…
阅读更多...
如何在Android设备上恢复丢失的照片

如何在Android设备上恢复丢失的照片

Android手机或平板电脑上的照片丢失了&#xff1f;不要惊慌&#xff0c;您也许可以恢复它们。 由于我们的大量数据和日常生活都存储在一台设备上&#xff0c;有时将所有照片存储在本地的 Android 智能手机或平板电脑上可能是一项冒险的工作。无论是通过事故&#xff08;损坏、…
阅读更多...
【JVM】从硬件层面和应用层面的有序性和可见性，到Java的volatile和synchronized

【JVM】从硬件层面和应用层面的有序性和可见性，到Java的volatile和synchronized

Java的关键字volatile保证了有序性和可见性&#xff0c;这里我试着从底层开始讲一下有序性和可见性。 一&#xff0c;一致性 数据如果同时被两个cpu读取了&#xff0c;如何保证数据的一致性&#xff1f;或者换句话说&#xff0c;cpu1改了数据&#xff0c;cpu2的数据就成了无效…
阅读更多...
【C++】深入剖析C++11 initializer_list 新的类功能 可变模板参数

【C++】深入剖析C++11 initializer_list 新的类功能 可变模板参数

目录 一、std::initializer_list 1、std::initializer_list是什么类型 2、std::initializer_list 的应用场景 ①给自定义容器赋值 ② 传递同类型的数据集合 二、新的类功能 1、默认成员函数 2、关键字default 3、关键字delete 三、可变参数模板 一、std::initialize…
阅读更多...
C++仿函数周边及包装器

C++仿函数周边及包装器

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…
阅读更多...
RunnerGo四月更新：强化UI自动化测试与UI录制插件功能

RunnerGo四月更新：强化UI自动化测试与UI录制插件功能

RunnerGo最近更新的 UI自动化测试和UI录制插件可以让测试人员更高效地布置UI自动化场景。这次优化升级的插件录制能力&#xff0c;可以更准确的定位元素并执行步骤&#xff0c;并增加了局部截图功能&#xff0c;准确查看定位的元素位置等。 UI插件V2.0介绍 接下来&#xff0c;让…
阅读更多...
python基础算法题0502

python基础算法题0502

数字反转 无论是字符串反转还是数字反转&#xff0c;其实都一样。 需求 代码 class Solution:def reverse(self, x: int) -> int:if 0 < x < 2 ** 31 - 1:m str(x)[::-1]if int(m)<2**31-1:return int(m)else:return 0if 0 > x > -2 ** 31:y -xn str(y…
阅读更多...
2.6Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue生命周期

2.6Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue生命周期

在使用vue进行日常开发中&#xff0c;我们总有这样的需求&#xff0c;想在页面刚一加载出这个表格组件时&#xff0c;就发送请求去后台拉取 数据&#xff0c;亦或者想在组件加载前显示个loading图&#xff0c;当组件加载出来就让这个loading图消失等等这样或那样的需求。 要实…
阅读更多...
Java_JVM_JVMs

Java_JVM_JVMs

JVM 官方文档说明文档目录 官方文档 JVM Specification 说明 以Java SE 17为标准 文档目录 2&#xff1a;JVM 结构 class文件数据类型 基本数据类型引用数据类型 运行时数据区 栈帧 其他内容 对象的表示浮点数运算特殊方法 初始化方法【实例、类】多态方法 3&#xff…
阅读更多...
【多变量控制系统 Multivariable Control System】（1）DSM：术语、基本公式和MATLAB仿真【新加坡南洋理工大学】

【多变量控制系统 Multivariable Control System】（1）DSM：术语、基本公式和MATLAB仿真【新加坡南洋理工大学】

说明&#xff1a; 题目版权归校方所有&#xff0c;仅供学习和参考使用。 DSM Control DSM Direct Synthesis Method Process Model Closed-Loop Transfer Function 基本公式 &#xff08;1&#xff09;输入、输出关系 &#xff08;2&#xff09;控制器表示 MatLab仿真…
阅读更多...
如何在Mac上恢复格式化硬盘的数据？

如何在Mac上恢复格式化硬盘的数据？

“嗨&#xff0c;我格式化了我的一个Mac硬盘&#xff0c;而没有使用Time Machine备份数据。这个硬盘被未知病毒感染了&#xff0c;所以我把它格式化为出厂设置。但是&#xff0c;我忘了备份我的文件。现在&#xff0c;我想恢复格式化的硬盘驱动器并恢复我的文档&#xff0c;您能…
阅读更多...
Go协程的底层原理（图文详解）

Go协程的底层原理（图文详解）

为什么要有协程 什么是进程 操作系统“程序”的最小单位进程用来占用内存空间进程相当于厂房&#xff0c;占用工厂空间 什么是线程 进程如果比作厂房&#xff0c;线程就是厂房里面的生产线&#xff1a; 每个进程可以有多个线程线程使用系统分配给进程的内存&#xff0c;线…
阅读更多...
OpenWRT有线桥接部署教程

OpenWRT有线桥接部署教程

前言 之前咱们讲到OpenWRT部署WAN实现PPPoE拨号上网和自动获取IP模式上网的办法&#xff1a; OpenWRT设置PPPoE拨号教程 OpenWRT设置自动获取IP&#xff0c;作为二级路由器 这一次&#xff0c;咱们尝试用OpenWRT有线桥接上一级路由器的教程。 可能有小伙伴敏锐地发现了&am…
阅读更多...
15、ESP32 Wifi

15、ESP32 Wifi

ESP32 的 WIFI 功能是模块内置的&#xff0c;通过 ESP32 的基础库调用一些函数就可以轻松使用它。 Wifi STA 模式&#xff1a; 让 ESP32 连接附近 WIFI&#xff0c;可以上网访问数据。 // 代码显示搜索连接附近指定的 WIFI // 通过 pin 按键可断开连接#include <WiFi.h>…
阅读更多...
Docker - 修改服务的端口

Docker - 修改服务的端口

1. 测试 新建一个httpd服务 docker run -itd -p 1314:80 --name test -h test httpd 2. 先停止容器和 docke r服务 docker stop test #停止容器3. 修改配置 cd /var/lib/docker/containers ls 找到需要修改的 cd 1fc55f0d24014217cff68c9a417ca46cf50312caa5c9e6bb24085126…
阅读更多...
全栈开发之路——前端篇（4）watch监视、数据绑定和计算属性

全栈开发之路——前端篇（4）watch监视、数据绑定和计算属性

全栈开发一条龙——前端篇 第一篇&#xff1a;框架确定、ide设置与项目创建 第二篇&#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇&#xff1a;setup语法&#xff0c;设置响应式数据。 辅助文档&#xff1a;HTML标签大全&#xff08;实时更新&#xff…
阅读更多...
抖音 通用交易系统 下单 密钥生成

抖音 通用交易系统 下单 密钥生成

已PHP为例 前提提条件 必须在 linux 系统中 生成 准备工作 接下来打开命令 执行命令即可 openssl genrsa -out private_key.pem 2048 rsa -in private_key.pem -pubout -out public_key.pem exit 会生成 公匙和 私匙 在小程序中 将 生成应用公匙 复制到小程序后台 在执行…
阅读更多...
数据结构——循环结构：for循环

数据结构——循环结构：for循环

今天是星期五&#xff0c;明天休息&#xff0c;后天补课&#xff0c;然后就是运动会&#xff0c;接着是放假。&#xff08;但这些都和我没关系啊&#xff0c;哭死&#xff01;&#xff09;今天脑袋难得清醒一会儿&#xff0c;主要是醒的比较早吧&#xff0c;早起学了一会&#…
阅读更多...
苹果CEO对未来一代人工智能投资持乐观态度

苹果CEO对未来一代人工智能投资持乐观态度

尽管在动荡的第二季度&#xff0c;苹果的收入和iPhone销量有所下降&#xff0c;但其新兴的人工智能技术可能会带来急需的提振。 在5月2日的电话财报会议上&#xff0c;苹果公布季度收入为908亿美元&#xff0c;比去年下降4%。iPhone的收入也下降了10%&#xff0c;至460亿美元。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023