CSS学习笔记之基础教程（二）

news2024/11/25 20:55:41

上节内容CSS学习笔记之基础教程（一）

6、边距

6.1 外边距：margin

6.1.1 外边距

  • margin
  • margin-top
  • margin-left
  • margin-bottom
  • margin-right

<!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>边距</title>
</head>
<style>

  div{
    /* margin: 70px; */
    margin-top: 100px;
    margin-left: 70px;
    margin-bottom: 100px;
    margin-right: 70px;
    border: 1px solid #333333;
  }
</style>
<body>
  <h1>CSS外边距</h1>
  <div>本元素有外边距</div>

</body>
</html>

6.1.2 外边距 Margin - 简写属性

  • （1）
margin: 25px 50px 75px 100px;

上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px

  • （2）
margin: 25px 50px 75px;

上外边距是 25px
右和左外边距是 50px
下外边距是 75px

  • （3）
margin: 25px 50px;

上和下外边距是 25px
右和左外边距是 50px

  • （4）
margin: 25px;

所有四个外边距都是 25px

6.1.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>边距</title>
</head>
<style>

  div{
    /* margin: 70px; */
    /* margin-top: 100px;
    margin-left: 70px;
    margin-bottom: 100px;
    margin-right: 70px; */
    margin: auto;
    width: 100px;
    border: 1px solid #333333;
  }
</style>
<body>
  <h1>CSS外边距</h1>
  <div >本元素有外边距</div>

</body>
</html>

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

6.1.4 inherit 值：继承自父元素


<!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>边距</title>
</head>
<style>

  div{
    /* margin: 70px; */
    /* margin-top: 100px;
    margin-left: 70px;
    margin-bottom: 100px;
    margin-right: 70px; */
    margin-left: 100px;
    border: 1px solid #333333;
  }

  p.ex1{
    margin-left: inherit;
  }

</style>
<body>
  <h1>CSS外边距</h1>
  <div >
    <p class="ex1">本元素集成父元素div的左边距</p>
  </div>

</body>
</html>

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

6.1.5 CSS 外边距合并

  • 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

  • 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

6.1.5.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>边距</title>
</head>
<style>


#d1{
  width: 100px;
  height: 100px;
  background-color: brown;
  margin-bottom: 20px;
}

#d2{
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-top: 10px;
}

</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
  <div >

    <p >d1和d2间距为20px,而不是30px</p>
  </div>

</body>
</html>

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

6.1.5.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>边距</title>
</head>
<style>

* {
  margin:0;
  padding:0;
  border:0;
}
#d1{
  width: 150px;
  height: 150px;
  background-color: brown;
  margin-top: 20px;
}

#d2{
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-top: 10px;
}

</style>
<body>
<div id="d1">
  <div id="d2"></div>
</div>

  <div >

    <p >d1和d2间距为20px,而不是30px</p>
  </div>

</body>
</html>

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

6.2 内边距：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>边距</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  #d1 {
    border: 1px solid #666666;
    /* 统一设置 */
    /* padding: 10px; */
    /* 单独设置 */
    /* padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
  padding-bottom: 25px; */
    /* 简写  上 有 下 左*/
    /* padding: 25px 10px 25px 10px; */
    /* 简写  上、右左、下 */
    /* padding: 25px 10px 25px; */
    /* 简写  上下 、左右 */
    padding: 25px 10px;
  }
</style>

<body>
  <div id="d1">
    <p>本元素有内边距</p>
  </div>



</body>

</html>

7、宽度和高度

  • 注意：height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

7.2 max-width

  • max-width 属性用于设置元素的最大宽度。
  • max-width 属性的值将覆盖 width（宽度）。

8、CSS 轮廓

CSS 轮廓

9、文本

9.1 文本对齐： text-align

  • text-align: center;
  • text-align: left;
  • text-align: right;
  • text-align: justify;

text-align: justify;效果：

在这里插入图片描述

9.2 文本方向：direction 和 unicode-bidi

文本方向

9.3 垂直对齐:vertical-align

  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
</style>
</head>
<body>

<p>一幅 <img src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 默认对齐方式的图像。</p><br>

<p>一幅 <img class="top" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 上对齐的图像。</p><br>

<p>一幅 <img class="middle" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 居中对齐的图像。</p><br>

<p>一幅 <img class="bottom" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 下对齐的图像。</p>

</body>
</html>

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

9.4 文本装饰：text-decoration

  • text-decoration: overline;
  • text-decoration: line-through;
  • text-decoration: underline;
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

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

9.5 文本转换：text-transform（大小写、驼峰）

  • text-transform: capitalize;
  • text-transform: lowercase;
  • text-transform: capitalize;
<!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>
<style>
 p.upper{
  text-transform:uppercase;
  text-indent: 100px;
 }
 p.lower{
  text-transform: lowercase;
}
p.capital{
  text-transform: capitalize;
}

</style>
<body>
  <p class="upper">元素大写：hello</p>
  <p class="lower">元素大写：hello\HELLO</p>
  <p class="capital">元素驼峰：hello world</p>
</body>
</html>

运行效果：

在这里插入图片描述

9.6 CSS 文字间距：text-indent（用于指定文本第一行的缩进）

  • text-indent: 100px;
<!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>
<style>
 p.upper{
  text-transform:uppercase;
  text-indent: 100px;
 }
 p.lower{
  text-transform: lowercase;
}
p.capital{
  text-transform: capitalize;
}

</style>
<body>
  <p class="upper">元素大写：hello</p>
  <p class="lower">元素大写：hello\HELLO</p>
  <p class="capital">元素驼峰：hello world</p>
</body>
</html>

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

9.7 字母间距：letter-spacing

  • letter-spacing: 10px;
  • letter-spacing: -10px;
<!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>
<style>
 p.upper{
  text-transform:uppercase;

  letter-spacing: 10px;
 }

</style>
<body>
  <p >HELLO</p>
  <p class="upper">HELLO</p>

</body>
</html>

运行效果：

在这里插入图片描述

9.8 行高：line-height（指定行之间的间距）

  • line-height: 0.8;

9.9 字间距：word-spacing（指定文本中单词之间的间距）

  • word-spacing: 10px;
  • word-spacing: -5px;

9.10 空白:white-space(指定元素内部空白的处理方式，可用于禁用换行处理)

  • white-space: nowrap;

正常展示：

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h2>空白</h2>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

在这里插入图片描述
禁用换行：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h2>空白</h2>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

在这里插入图片描述

9.11 文本阴影：text-shadow

  • text-shadow: 2px 2px;（水平、垂直）
  • text-shadow: 2px 2px red;（水平、垂直+颜色）
  • text-shadow: 2px 2px 5px red;（水平、垂直+模糊效果+颜色）
<!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>
<style>
  p.shadow1 {
    /* 水平、垂直 */
    text-shadow: 2px 2px;
    font-size: 30px;
  }
  p.shadow2 {
    /* 水平、垂直+颜色 */
    text-shadow: 2px 2px red;
    font-size: 30px;
  }
  p.shadow3 {
    /* 水平、垂直+模糊效果+颜色 */
    text-shadow: 2px 2px 5px red;
    font-size: 30px;
  }
</style>

<body>
  <p style="font-size:30px">你好</p>
  <p class="shadow1">你好</p>
  <p class="shadow2">你好</p>
  <p class="shadow3">你好</p>
</body>

</html>

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

9.12 所有 CSS 文本属性

在这里插入图片描述

9.13、CSS 字体：font-family

通用字体族
在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>

<p>这是一个段落，以 Times New Roman 字体显示：</p>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p>这是一个段落，以 Arial 字体显示：</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p>这是一个段落，以 Lucida Console 字体显示：</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

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

9.14 字体样式：font-style

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

9.15 字体粗细：font-weight

  • font-weight: normal;（正常）
  • font-weight: bold;（加粗）

9.16 字体变体：font-variant

  • font-variant: normal;
  • font-variant: small-caps;

9.17 CSS 字体属性：font-

font 属性是以下属性的简写属性：

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

在这里插入图片描述

10、CSS 图标

<!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">

  <!-- 引用Font Awesome 图标库 -->
  <script src="https://kit.fontawesome.com/yourcode.js"></script>
  <!-- 引用 Bootstrap 图标-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!--引用 Google 图标  -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

11、CSS 链接

11.1 链接颜色：color

11.2 链接状态

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

注意：

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a: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>
</head>
<style>

p.ex1{
  font-size: 30px;
}
/* 未被访问过的 */
a:link{
   color: green;
   text-decoration: none;
   background-color: yellow;
}
/* 已被访问过的 */
a:visited{
  color: gray;
  text-decoration: none;
  background-color: cyan;
}
/* 鼠标悬停在链接上 */
a:hover{
  color: pink;
  text-decoration: underline;
  background-color: lightgreen;
}
/* 被选择的链接 */
a:active{
  color: red;
  text-decoration: underline;
  background-color: hotpink;
}

</style>
<body>
 <p class="ex1"> <a  href="html_jump_page.html" target="_blank">这是一个链接</a></p>
</body>
</html>

12、列表（ul:无序列表，ol:有序列表）

CSS 列表属性使您可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

12.1 不同的列表项目标记:list-style-type

该性质使用html设置方式参考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>
  <style>
   ul,ol,li{
    font-size: 30px;
   }
    ul.a {
      list-style-type: circle;
    }
    ul.b {
      list-style-type: square;
    }
    ol.a{
      list-style-type: upper-roman;
    }
    ol.b{
      list-style-type:armenian
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
<ul class="a">
  <li>肖战</li>
  <li>王一博</li>
</ul>
<ul class="b">
  <li>杨紫</li>
  <li>杨紫</li>
</ul>

<h1>有序列表：</h1>
<ol class="a">
  <li>第一个</li>
  <li>第二个</li>
</ol>
<ol class="b">
  <li>第一个</li>
  <li>第二个</li>
</ol>
</body>

</html>

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

12.2 图像作为列表项标记:list-style-image

  • list-style-image: 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>
  <style>
    ul,
    ol,
    li {
      font-size: 30px;
    }

    ul.a {
      list-style-image: url('imgs/icon_mess_sellorder.png');
    }

    ol.a {
      list-style-image: url('imgs/icon_mess_sellorder.png');
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
  <ul class="a">
    <li>肖战</li>
    <li>王一博</li>
  </ul>


  <h1>有序列表：</h1>
  <ol class="a">
    <li>第一个</li>
    <li>第二个</li>
  </ol>

</body>

</html>

运行效果：
在这里插入图片描述
存在问题：
1、图片没有显示完整（可能跟图片大小有关系）
2、图片和文字没有对齐

12.3 定位列表项标记：list-style-position（指定列表项标记（项目符号）的位置）

  • “list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的。
  • "list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本
<!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>
    ul,
    ol,
    li {
      font-size: 30px;
    }

    ul.a {
      list-style-position: outside;
    }

    ol.a {
      list-style-position: inside;
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
  <ul class="a">
    <li>肖战</li>
    <li>王一博</li>
  </ul>


  <h1>有序列表：</h1>
  <ol class="a">
    <li>第一个</li>
    <li>第二个</li>
  </ol>

</body>

</html>

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

12.4 删除默认设置

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<!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>
    ul,
    ol,
    li {
      font-size: 30px;
    }

    ul.a {
      list-style-position: outside;
    }

    ul.none{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }

    ol.a {
      list-style-position: inside;
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
  <ul class="a">
    <li>肖战</li>
    <li>王一博</li>
  </ul>
  <h1>无序列表(无样式)：</h1>
  <ul class="none">
    <li>肖战</li>
    <li>王一博</li>
  </ul>

  <h1>有序列表：</h1>
  <ol class="a">
    <li>第一个</li>
    <li>第二个</li>
  </ol>

</body>

</html>

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

12.5 列表 - 简写属性

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）
    如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。
ul {
  list-style: square inside url("sqpurple.gif");
}

13、表格

13.1 表格边框：border

<!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>
<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>肖战</td>
      <td>男</td>
    </tr>
  </table>

</body>

</html>

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

13.2 全宽表格:width:100%

<!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>
<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
  table{
    width: 100%;
  }
</style>

<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>肖战</td>
      <td>男</td>
    </tr>
  </table>

</body>

</html>

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

13.3 合并表格边框（单边框）

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

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

相关文章

python-scrapy框架示例

python-scrapy框架示例

参考&#xff1a;https://blog.csdn.net/qq_44907926/article/details/119531324 创建项目步骤&#xff1a; 1.目标网站:www.itcast.cn 2.安装虚拟环境 pip install virtualenv3.创建虚拟环境 virtualenv --always-copy --system-site-packages venv4.激活虚拟环境 venv\sc…
阅读更多...
OCR文本识别模型CRNN

OCR文本识别模型CRNN

CRNN网络结构 论文地址&#xff1a;https://arxiv.org/pdf/1507.05717 参考&#xff1a;https://blog.csdn.net/xiaosongshine/article/details/112198145 git:https://github.com/shuyeah2356/crnn.pytorch CRNN文本识别实现端到端的不定长文本识别。 CRNN网络把包含三部分&…
阅读更多...
推荐5个免费的国内平替版GPT

推荐5个免费的国内平替版GPT

提起AI&#xff0c;大家第一个想到的就是GPT。 虽然它确实很厉害&#xff0c;但奈何于我们水土不服&#xff0c;使用门槛有些高。 不过随着GPT的爆火&#xff0c;现在AI智能工具已经遍布到各行各业了&#xff0c;随着时间的推移&#xff0c;国内的AI工具也已经“百花盛放”了…
阅读更多...
简单了解泛型

简单了解泛型

基本数据类型和对应的包装类 在Java中, 基本数据类型不是继承自Object, 为了在泛型代码中可以支持基本类型, Java给每个基本类型都对应了一个包装类型. 简单来说就是让基本数据类型也能面向对象.基本数据类型可以使用很多方法, 这就必须让它变成类. 基本数据类型对定的包装类…
阅读更多...
Istio 流量管理（请求路由、流量转移、请求重试、流量镜像、故障注入、熔断等）介绍及使用

Istio 流量管理（请求路由、流量转移、请求重试、流量镜像、故障注入、熔断等）介绍及使用

一、Istio 流量管理 Istio是一个开源的服务网格&#xff0c;它为分布式微服务架构提供了网络层的抽象。它使得服务之间的通信变得更为可靠、安全&#xff0c;并且提供了细粒度的流量管理、监控和策略实施功能。Istio通过在服务之间插入一个透明的代理&#xff08;Envoy&#x…
阅读更多...
Unreal游戏GPU参数详解，游戏性能优化再升级

Unreal游戏GPU参数详解，游戏性能优化再升级

UWA GOT Online For Unreal GPU模式近期全新发布&#xff0c;方便开发者从渲染和带宽的角度进行GPU分析。同时&#xff0c;此次更新中UWA也增加了丰富的GPU参数&#xff0c;涵盖了GPU SoC和GPU Counter模块。这些新增的参数不仅能够帮助Unreal开发者从宏观层面监控GPU的压力状况…
阅读更多...
QT-TCP通信

QT-TCP通信

网上的资料太过于书面化&#xff0c;所以看起来有的让人云里雾里&#xff0c;看不懂C-tcpsockt和S-tcpsocket的关系 所以我稍微画了一下草图帮助大家理解两个套接字之间的关系。字迹有的飘逸勉强看看 下面是代码 服务端&#xff1a; MainWindow::MainWindow(QWidget *parent) …
阅读更多...
Jira Server 不维护了，如何将 Jira 平滑迁移到阿里云云效

Jira Server 不维护了，如何将 Jira 平滑迁移到阿里云云效

作者&#xff1a;天彤 Atlassian 在 2020 年官方发布公告&#xff0c;从 2021 年起停止 Jira Server 产品的销售&#xff0c;并且在 2024 年彻底停止 Server 端产品的服务支持&#xff0c;这对于国内使用 Jira 产品的企业和研发团队造成了不小的影响。而此时国内很多 DevOps 产…
阅读更多...
本地主机访问服务器的Redis -- 配置 ssh 端口转发

本地主机访问服务器的Redis -- 配置 ssh 端口转发

前言 在进行Java开发时&#xff0c;高度的依赖 Windows 上的开发软件 idea &#xff0c;那么我们想访问位于服务器上的 redis 怎么办呢&#xff1f;在平时我们想访问位于服务器上的程序&#xff0c;只需要开放它的端口即可&#xff0c;比如我们创建的网站&#xff0c;比如 tomc…
阅读更多...
【拆位法 决策包容性 位运算】2871. 将数组分割成最多数目的子数组

【拆位法 决策包容性 位运算】2871. 将数组分割成最多数目的子数组

本文涉及知识点 拆位法 贪心 位运算 决策包容性 位运算、状态压缩、子集状态压缩汇总 LeetCode2871. 将数组分割成最多数目的子数组 给你一个只包含 非负 整数的数组 nums 。 我们定义满足 l < r 的子数组 nums[l…r] 的分数为 nums[l] AND nums[l 1] AND … AND nums[r…
阅读更多...
使用图网络和视频嵌入预测物理场

使用图网络和视频嵌入预测物理场

文章目录 一、说明二、为什么要预测&#xff1f;三、流体动力学模拟的可视化四、DeepMind神经网络建模五、图形编码六、图形处理器七、图形解码器八、具有不同弹簧常数的轨迹可视化九、预测的物理编码和推出轨迹 一、说明 这是一篇国外流体力学专家在可视化流体物理属性的设计…
阅读更多...
如何使用vue脚手架创建项目

如何使用vue脚手架创建项目

前言 使用vue搭建项目的时候&#xff0c;我们可以通过对应的cmd命令去打开脚手架&#xff0c;然后自己配置对应的功能插件 说明&#xff1a; 要使用Vue脚手架创建项目&#xff0c;你需要先确保你已经安装了Node.js和npm&#xff08;Node.js的包管理器&#xff09;。然后&#…
阅读更多...
Github 2024-05-07 开源项目日报 Tp10

Github 2024-05-07 开源项目日报 Tp10

根据Github Trendings的统计，今日(2024-05-07统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量TypeScript项目4Jupyter Notebook项目2Python项目1Batchfile项目1非开发语言项目1Java项目1HTML项目1C#项目1从零开始构建你喜爱的技术 创建周期…
阅读更多...
性能测试基础介绍

性能测试基础介绍

1.性能测试的意义 1.1.现状 互联网行业发展快&#xff0c;用户量大大增加&#xff1b; 业务和系统架构越来越复杂&#xff0c;数据越来越多&#xff0c;用户不仅仅满足于功能的实现&#xff0c;在某些场景下&#xff0c;更 在意系统性能。 1.2.什么是性能测试 通过一定的手段&…
阅读更多...
Google准备好了吗？OpenAI发布ChatGPT驱动搜索引擎｜TodayAI

Google准备好了吗？OpenAI发布ChatGPT驱动搜索引擎｜TodayAI

在科技界波澜壮阔的发展中&#xff0c;OpenAI正式宣布其最新突破——一个全新的基于ChatGPT技术的搜索引擎&#xff0c;旨在直接挑战谷歌在搜索领域的统治地位。这一创新将可能彻底改变用户上网搜索的方式。 据悉&#xff0c;这款AI驱动的搜索引擎利用了ChatGPT的强大功能&…
阅读更多...
快速搭建linux虚拟机环境

快速搭建linux虚拟机环境

1、虚拟机资源 VMwareWorkstation&#xff1a;Download VMware Workstation Pro virtualbox&#xff1a;Oracle VM VirtualBox 2、虚拟机系统资源 链接&#xff1a;系统资源链接 提取码&#xff1a;0gat 说明&#xff1a;此处的系统资源是采用VMwareWorkstation 虚拟机进…
阅读更多...
【postgreessql 】查询数据库表占用物理空间

【postgreessql 】查询数据库表占用物理空间

查询单个表的磁盘使用量&#xff1a; SELECTrelname,pg_size_pretty ( pg_total_relation_size ( relid ) ) AS total_size FROMpg_catalog.pg_statio_user_tables; 查询所有表的总磁盘使用量&#xff1a; SELECTpg_size_pretty ( SUM ( pg_total_relation_size ( relid ) )…
阅读更多...
【机器学习与实现】线性回归示例——波士顿房价分析

【机器学习与实现】线性回归示例——波士顿房价分析

目录 一、创建Pandas对象并查看数据的基本情况二、使用皮尔逊相关系数分析特征之间的相关性三、可视化不同特征与因变量MEDV&#xff08;房价中值&#xff09;间的相关性四、划分训练集和测试集并进行回归分析 一、创建Pandas对象并查看数据的基本情况 boston.csv数据集下载&a…
阅读更多...
《起风了》观后感

《起风了》观后感

我想宫崎骏的电影是很多人心目中美好的回忆&#xff0c;每当听到有他的新电影要上映&#xff0c;总是迫不及待想去捧场&#xff0c;一刷二刷三刷却还是依然看得津津有味&#xff0c;这就是宫崎骏电影独特的魅力。《起风了》跟他的其他电影有很明显的不同&#xff0c;他的大部分…
阅读更多...
Hive Partitioned Tables 分区表

Hive Partitioned Tables 分区表

Hive Partitioned Tables 分区表 1.分区表概念 Hive分区表&#xff08;Partitioned Tables&#xff09;是一种用于管理大量数据的机制&#xff0c;它可以将数据分散到不同的目录或分区中&#xff0c;以提高查询性能、优化数据存储和管理。 这种表结构可以根据某个列的值进行分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023