CSS学习笔记之中级教程（二）

-.+CSS学习笔记之中级教程（一）

6、CSS 布局 - display: inline-block

  • 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

  • 同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

  • 与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。


<!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="stylesheet" href="css/baseStyle.css">
</head>
<style>span.inline{display: inline;width: 100px;height: 100px;background-color: yellow;padding: 10px;}span.inline-block{display: inline-block;width: 100px;height: 100px;background-color: yellow;padding: 10px;overflow: auto;}span.block{display: block;width: 100px;height: 100px;background-color: yellow;padding: 10px;overflow: auto;}</style>
<body><p>内容内容<span class="inline">inline:行内元素，设置的有边距 但是该性质下不起效</span></p>
<br>
<p>内容内容<span class="inline-block">inline-block:行内块元素，设置的有边距 该性质下起效，且末尾不会添加换行符</span></p>
<br>
<p>内容内容<span class="block">block:块元素，设置的有边距 该性质下起效，元素为另起一行展示，且单独占一行</span>哈哈哈哈</p></body>
</html>

运行效果：
在这里插入图片描述
示例2：
使用 display: inline-block;

<!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="stylesheet" href="css/baseStyle.css"><style>ul {background-color: yellow;}li {display: inline-block;padding: 10px 15px;}a {text-decoration: none;padding: 10px 15px;}/* 鼠标选中效果 */a:hover {background-color: cadetblue;color: white;}</style>
</head><body><ul><li><a href="html_jump_page.html">首页</a></li><li><a href="html_jump_page.html">关于我们</a></li><li><a href="html_jump_page.html">控制台</a></li><li><a href="html_jump_page.html">我的</a></li></ul></body></html>

运行效果：
在这里插入图片描述
不使用：

在这里插入图片描述

  • display: inline-block;效果类似于float:left 但是display: inline-block;子元素间会产生间距

7、CSS 布局 - 水平和垂直对齐

7.1 居中对齐元素：margin: auto;

<!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="stylesheet" href="css/baseStyle.css"><style>div.center {/* 水平居中 */margin: auto;border: 1px solid #777;width: 200px;}</style>
</head><body><div class="center">你好,中国</div>
</body></html>

运行效果：
在这里插入图片描述

7.2 居中对齐文本： text-align: center;

<!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="stylesheet" href="css/baseStyle.css"><style>div.center {border: 1px solid #777;text-align: center;}</style>
</head><body><div class="center">你好,中国</div>
</body></html>

运行效果：
在这里插入图片描述

7.3 居中对齐图像

  • 使图像居中，请将左右外边距设置为 auto，并使其成为一个块元素.
<!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="stylesheet" href="css/baseStyle.css"><style>img.center {display: block;margin-left: auto;margin-right: auto;}</style>
</head><body><img class="center" src="imgs/icon_mess_sellorder.png" alt="pic">
</body></html>

运行效果：
在这里插入图片描述

7.4 左和右对齐

  • position
<!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="stylesheet" href="css/baseStyle.css"><style>div.right {position: absolute;right: 0px;border: 1px solid #73AD21;padding: 15px 10px;}</style>
</head><body><h1>使用position:absolute来使元素右对齐</h1><div class="right">内容内容内容内容内容内容</div></body></html>

运行效果：
在这里插入图片描述

  • float
<!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="stylesheet" href="css/baseStyle.css"><style>div.right {position: absolute;right: 0px;border: 1px solid #73AD21;padding: 15px 10px;}div.floatright{float: right;border: 1px solid #73AD21;padding: 15px 10px;margin-right: 20px;}</style>
</head><body><h1>使用float: right来使元素右对齐</h1><div class="floatright">内容内容内容内容内容内容</div></body></html>

7.5 垂直对齐

7.5.1 padding

<!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="stylesheet" href="css/baseStyle.css"><style>div.center_padding{padding: 70px 0;border: 2px solid #777;           text-align: center;  }</style>
</head><body> <div class="center_padding">内容内容内容内容内容内容</div></body></html>

7.5.2 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性：

<!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="stylesheet" href="css/baseStyle.css"><style>div.center2{line-height: 100px;height: 100px;border: 2px solid #777;      text-align: center;       }</style>
</head><body> <div class="center2">内容内容内容内容内容内容</div></body></html>

多行内容时候使用：

   div.center2{line-height: 1.5;border: 2px solid #777;      text-align: center;   display:inline-block;    }

7.5.3 position 和 transform

.center { height: 200px;position: relative;border: 3px solid green; 
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

7.5.4 Flexbox

.center {display: flex;justify-content: center;align-items: center;height: 200px;border: 3px solid green; 
}

8、CSS 组合器

  • 组合器是解释选择器之间关系的某种机制。

  • CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

8.1 后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择 <div> 元素内的所有 <p> 元素：

div p {background-color: yellow;}

<!DOCTYPE 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><link rel="stylesheet" href="css/baseStyle.css"><style>div  p {background-color: yellow;}</style>
</head><body><p>内容1</p><div><p>内容2</p><section><p>哈哈哈</p></section></div><p>内容3</p><p>内容4</p><p>内容4</p></body></html>

运行效果：
在这里插入图片描述

8.2 子选择器

  • 子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于 <div> 元素子元素的所有 <p>(直系p元素) 元素：
选择其父元素是 <div> 元素的所有 <p> 元素。

div > p {background-color: yellow;
}

<!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="stylesheet" href="css/baseStyle.css"><style>div > p {background-color: yellow;}</style>
</head><body><p>内容1</p>
<div><p>内容2</p><section><p>内容3</p></section>
</div></body></html>

运行效果：

在这里插入图片描述

8.3 相邻兄弟选择器

  • 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

  • 兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：

div + p {background-color: yellow;
}

<!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="stylesheet" href="css/baseStyle.css"><style>div+p {background-color: yellow;}</style>
</head><body><p>内容1</p><div><p>内容2</p></div><p>内容3</p><p>内容4</p></body></html>

运行效果：
在这里插入图片描述

8.4 通用兄弟选择器

  • 通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：

div ~ p {background-color: yellow;
}

<!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="stylesheet" href="css/baseStyle.css"><style>div ~ p {background-color: yellow;}</style>
</head><body><p>内容1</p><div><p>内容2</p></div><p>内容3</p><p>内容4</p><p>内容4</p></body></html>

运行效果：
在这里插入图片描述

9、CSS 伪类

9.1 什么是伪类？

  • 伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

9.2 伪类的语法

selector:pseudo-class {property: value;
}

9.3 锚伪类

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {color: red;
}/* visited link */
a:visited {color: green;
}/* mouse over link */
a:hover {color: hotpink;
}/* selected link */
a:active {color: blue;
}
</style>
</head>
<body><h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p></body>
</html>

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

9.4 伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover {color: #ff0000;
}

在

元素上使用 :hover 伪类的实例： 

<!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="stylesheet" href="css/baseStyle.css"><style>div:hover {background-color: yellow;}</style>
</head><body><p>将鼠标移到下面的div元素上面来改变其背景色</p><div>把鼠标移到我上面</div></body></html>

在 <div> 元素上使用 :hover 伪类来展示提示的实例：

<!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="stylesheet" href="css/baseStyle.css"><style>p {/* 默认隐藏 */display: none;background-color: yellow;padding: 20px;}div:hover p {display: block;}</style>
</head>
<body><div>把鼠标移到我上面<p>哈哈哈 提示内容</p></div>
</body>
</html>

运行效果：
默认不展示p元素，将鼠标放在div上之后p元素展示

9.5 CSS - :first-child 伪类

  • :first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

  • 匹配首个 <p> 元素

（1）在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 <p>元素：

<!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="stylesheet" href="css/baseStyle.css"><style>p:first-child {background-color: yellow;}</style>
</head><body><p>内容1</p><p>内容2</p>
</body></html>

运行效果：
在这里插入图片描述
（2）匹配所有 <p> 元素中的首个 <i> 元素示例：

<!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="stylesheet" href="css/baseStyle.css"><style>p i:first-child {background-color: yellow;}</style>
</head><body><p>内容1</p><p>内容2<i>第一个i</i><i>第二个i</i></p>
</body></html>

运行效果：
在这里插入图片描述
（3） 匹配所有首个 <p> 元素中的所有 <i> 元素示例：

<!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="stylesheet" href="css/baseStyle.css"><style>p:first-child i{background-color: yellow;}</style>
</head><body><p>我很<i>强壮</i></p><p>内容2<i>第一个i</i><i>第二个i</i></p>
</body></html>

运行效果：
在这里插入图片描述

9.6 CSS - :lang 伪类

  • :lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：

<html>
<head>
<style>
q:lang(en) {quotes: "~" "~";
}
</style>
</head>
<body><p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p></body>
</html>

运行效果：
在这里插入图片描述

9.7 所有 CSS 伪类+所有 CSS 伪元素

CSS 伪类

10、CSS 伪元素

10.1 什么是伪元素？

  • CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

10.2 伪元素的语法

selector::pseudo-element {property: value;
}

10.3 ::first-line 伪元素

  • 伪元素用于向文本的首行添加特殊样式。
  • 注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
<!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="stylesheet" href="css/baseStyle.css"><style>p::first-line{background-color: yellow;}</style>
</head><body><p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p></body></html>

运行效果：
在这里插入图片描述

10.4 ::first-letter 伪元素

  • 伪元素用于向文本的首字母添加特殊样式。
  • 注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 “float” 为 “none”）
  • text-transform
  • line-height
  • float
  • clear
<!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="stylesheet" href="css/baseStyle.css"><style>p::first-letter{background-color: yellow;}</style>
</head><body><p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p></body></html>

运行效果：
在这里插入图片描述

10.5 伪元素和 CSS 类

    p.intro::first-letter{background-color: yellow;}

<!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="stylesheet" href="css/baseStyle.css"><style>p.intro::first-letter{background-color: yellow;}</style>
</head><body><p class="intro">这是一个标题</p><p>这是内容</p></body></html>

运行效果：
在这里插入图片描述

10.6 多个伪元素

<!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="stylesheet" href="css/baseStyle.css"><style>p::first-line{color: blue;}p::first-letter{background-color: yellow;}</style>
</head><body><p >您可以结合 ::first-letter 和 ::first-line 伪元素来为文本的首字母和首行添加特殊效果！</p></body></html>

运行效果：
在这里插入图片描述

10.7 ::before 伪元素

  • 伪元素可用于在元素内容之前插入一些内容。
  p::before{content: url(imgs/icon_mess_sellorder.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><link rel="stylesheet" href="css/baseStyle.css"><style>p::before{content: url(imgs/icon_mess_sellorder.png);}</style>
</head><body><p >::before 伪元素在一个元素的内容之前插入内容。</p></body></html>

运行效果：
在这里插入图片描述

10.8 ::after 伪元素

  • 伪元素可用于在元素内容之后插入一些内容。
 p::after{content: url(imgs/icon_mess_sellorder.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><link rel="stylesheet" href="css/baseStyle.css"><style>p::after{content: url(imgs/icon_mess_sellorder.png);}</style>
</head><body><p >::before 伪元素在一个元素的内容之前插入内容。</p></body></html>

运行效果：
在这里插入图片描述

10.9 ::selection 伪元素

  • 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

  • color
  • background
  • cursor
  • outline
<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* 针对 Firefox 的代码 */color: red;background: yellow;
}::selection {color: red;background: yellow;
}
</style>
</head>
<body><h1>请选择本页中的文本：</h1><p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div><p><b>注释：</b>Firefox 支持可供替代的 ::-moz-selection 属性。</p></body>
</html>

运行效果：
鼠标选中前：
在这里插入图片描述

鼠标长按移动选中后：
在这里插入图片描述

11、CSS 不透明度 / 透明度

  • opacity 属性的取值范围为 0.0-1.0。值越低，越透明
img {opacity: 0.5;
}

div {background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */
}

11.1 透明悬停效果

  • 鼠标未悬停时候透明度为0。5，鼠标放置在元素上后透明度为1
img {opacity: 0.5;
}img:hover {opacity: 1.0;
}

12、CSS 垂直导航栏

CSS 垂直导航栏

13、CSS 水平导航栏

CSS 水平导航栏

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

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

相关文章

【数据库】知识总结（期末复习）

【数据库】知识总结（期末复习）

题型&#xff1a; 一、选择题(共10题&#xff0c;每题2分&#xff0c;共20分) 二、填空题(共10空&#xff0c;每空1分&#xff0c;共10分) 三、关系代数计算题&#xff08;共5题&#xff0c;每题2分&#xff0c;共10分&#xff09; 四、SQL计算题(共10题&#xff0c;每题3分…
阅读更多...
C++ | Leetcode C++题解之第92题反转链表II

C++ | Leetcode C++题解之第92题反转链表II

题目&#xff1a; 题解&#xff1a; class Solution { public:ListNode *reverseBetween(ListNode *head, int left, int right) {// 设置 dummyNode 是这一类问题的一般做法ListNode *dummyNode new ListNode(-1);dummyNode->next head;ListNode *pre dummyNode;for (i…
阅读更多...
东莞酷得电子方案 遥控水弹坦克车

东莞酷得电子方案 遥控水弹坦克车

首先遥控小车是一种能够通过无线遥控器进行远程操控的小型机器人。遥控小车应用了哪些软硬件技术呢&#xff1f;本文将从以下几个方面进行详细介绍。 遥控小车应用了多种软硬件技术&#xff0c;涉及底盘结构、动力系统、传感器、控制器等多个方面。 底盘结构&#xff1a;遥控…
阅读更多...
PostgreSQL扩展之PGroonga：多语言全文搜索

PostgreSQL扩展之PGroonga：多语言全文搜索

简介 PGroonga 是一个 PostgreSQL 扩展&#xff0c;它增加了基于 Groonga 的全文搜索索引方法。虽然原生的 PostgreSQL 支持全文索引&#xff0c;但它仅限于基于字母和数字的语言。PGroonga 提供了更广泛的字符支持&#xff0c;使其成为 PostgreSQL 支持的语言的超集&#xff…
阅读更多...
【考研数学】张宇《1000题》强化阶段正确率多少算合格？

【考研数学】张宇《1000题》强化阶段正确率多少算合格？

张宇1000题真的很练人心态.... 基础不好&#xff0c;建议别碰1000题 基础好&#xff0c;1000题建议在两个月以内刷完 如果自己本身在基础阶段学的比较水&#xff0c;自己的薄弱点刷了一小部分题没有针对性完全解决&#xff0c;转身去刷1000题就会发现&#xff0c;会的题目刷…
阅读更多...
一线互联网大数据面试题核心知识库（100万字）

一线互联网大数据面试题核心知识库（100万字）

本面试宝典涵盖大数据面试高频的所有技术栈&#xff0c;包括Liunx&Shell基础&#xff0c;Hadoop&#xff0c;Zookpeer&#xff0c;Flume&#xff0c;Kafka&#xff0c;Hive&#xff0c;Datax&#xff0c;Maxwell&#xff0c;DolphinScheduler&#xff0c;Spark Core&SQ…
阅读更多...
王炸！OpenAI全新模型GPT-4o推出！免费使用，实时语音视频交互来了！

王炸！OpenAI全新模型GPT-4o推出！免费使用，实时语音视频交互来了！

北京时间5月14日凌晨&#xff0c;OpenAI 春季新品发布会举行&#xff0c;新一代旗舰生成模型 GPT-4o来了。GPT-4o 的推出代表着技术进步的一大步&#xff0c;集成了文本、语音和图像三种模态&#xff0c;使人机交互更加自然和高效。 这样的话&#xff0c;目前可以使用的版本包括…
阅读更多...
[Linux][网络][高级IO][三][IO多路转接][epoll]详细讲解

[Linux][网络][高级IO][三][IO多路转接][epoll]详细讲解

目录 1.IO多路转接之epoll1.epoll初识2.epoll_create()3.epoll_ctl()4.epoll_wait()5.epoll工作原理6.epoll使用过程三部曲7.epoll的优点(和select缺点对应)8.思考 && 问题 2.epoll工作方式0.感性理解 && 铺垫1.水平触发(Level Triggered)工作模式2.边缘触发(E…
阅读更多...
webpack优化构建速度示例-externals:

webpack优化构建速度示例-externals:

externals 配置项主要用于防止将某些 import 的包&#xff08;package&#xff09;打包到 bundle 中&#xff0c;而是在运行时&#xff08;runtime&#xff09;再从外部获取这些扩展依赖&#xff08;external dependencies&#xff09;。这样做的主要目的是为了解决打包文件过大…
阅读更多...
cypress的安装使用

cypress的安装使用

cypress npm install -g cnpm --registryhttps://registry.npm.taobao.org cypress的启动打开 npx cypress open js函数的回调 function print(string,callback){console.log(string)callback() } print("a",function(){print("b",function(){console.l…
阅读更多...
spark知识点

spark知识点

目录 第二章Scala基础 一.Scala常用数据类型 二.定义与使用数组 三.定义与使用函数 四.定义与使用列表 五.定义与使用集合 六.定义与使用映射 七.定义与使用元组 第三章Spark编程基础 一.从内存中读取创建RDD 二.从外部存储系统中读取数据创建RDD 三.RDD方法归纳 1.…
阅读更多...
Qt+C++串口调试工具

Qt+C++串口调试工具

程序示例精选 QtC串口调试工具 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《QtC串口调试工具》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应用推荐首选。 …
阅读更多...
异步编程CompletableFuture总结

异步编程CompletableFuture总结

文章目录 1. 简介&#xff1a;2. 比较1、传统方式2、使用CompletableFuture&#xff1a;异步执行返回值 3、组合处理&#xff1a;anyOfallof : 4. 异步回调&#xff1a;thenAcceptthenApplywhenComplete等同于 thenAccepthandel()等同于thenApply 5. 常用方法&#xff1a;1、su…
阅读更多...
Vue的学习 —— ＜路由与网络请求＞

Vue的学习 —— ＜路由与网络请求＞

目录 前言 正文 一、初识路由 二、初识Vue Router 1、安装Vue Router 2、Vue Router基本使用 三、路由重定向 四、嵌套路由 前言 在之前的学习中了解到单页Web应用通常只有一个HTML页面&#xff0c;所有的组件展示和切换都在这个页面上完成。虽然我们可以通过动态组件…
阅读更多...
基于CentOS-7搭建hadoop3.3.6大数据集群(保姆级教程)

基于CentOS-7搭建hadoop3.3.6大数据集群(保姆级教程)

目录 安装虚拟机 为hadoop用户添加权限 关闭防火墙 修改主机名以及ip地址映射 配置ip 连接xshell &#xff0c;以hadoop用户登录 创建目录并将该文件夹权限赋予hadoop用户 安装配置jdk 关闭虚拟机&#xff0c;克隆其他两个节点 修改主机名和ip地址 配置免密登录 安装…
阅读更多...
基于Vue和uni-app的增强型多选框Checkbox组件开发

基于Vue和uni-app的增强型多选框Checkbox组件开发

基于Vue和uni-app的增强型多选框&#xff08;Checkbox&#xff09;组件开发 摘要 随着前端技术的不断发展和用户体验要求的提升&#xff0c;传统的Checkbox组件已不能满足所有需求。本文介绍了一种基于Vue和uni-app的增强型多选框&#xff08;Checkbox&#xff09;组件的开发…
阅读更多...
C语言 | Leetcode C语言题解之第91题解码方法

C语言 | Leetcode C语言题解之第91题解码方法

题目&#xff1a; 题解&#xff1a; int numDecodings(char* s) {int n strlen(s);// a f[i-2], b f[i-1], c f[i]int a 0, b 1, c;for (int i 1; i < n; i) {c 0;if (s[i - 1] ! 0) {c b;}if (i > 1 && s[i - 2] ! 0 && ((s[i - 2] - 0) * 10…
阅读更多...
程序员的实用神器之——通义灵码

程序员的实用神器之——通义灵码

通义灵码介绍 “通义灵码”是一款基于阿里云通义代码大模型打造的智能编码助手&#xff0c;产品于2023年10月31日云栖大会上&#xff0c;正式对外发布。新手亦能驾轻&#xff0c;老手恒常运&#xff0c;唯手熟尔。 通义灵码产品介绍_智能编码助手_AI编程_云效(Apsara Devops)…
阅读更多...
括号生成[中等]

括号生成[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 数字n代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())(…
阅读更多...
mysql主从热备+keepalived 部署mysql高可用主备模式

mysql主从热备+keepalived 部署mysql高可用主备模式

目录 1、环境准备 2、分别在主服务器和备用服务器上安装keepalived 3、修改keepalived服务的配置文件 3.1 修改主服务器上的keepalive服务的配置文件 3.2 修改备用服务器上的keepalive服务配置文件 4、编写mysql监控脚本放到主服务器上 5、在主服务器和备用服务器上查看…
阅读更多...
最新文章

Copyright @ 2022~2023