CSS学习笔记

目录

    • 1.CSS简介
      • 1.什么是CSS
      • 2.为什么使用CSS
      • 3.CSS作用
    • 2.基本用法
      • 1.CSS语法
      • 2.CSS应用方式
        • 1. 内部样式
        • 2.行内样式
        • 3.外部样式
          • 1.使用 link标签 链接外部样式文件
          • 2.@import 指令 导入外部样式文件
          • 3.使用举例
    • 3.选择器
      • 1.基础选择器
        • 1.标签选择器
        • 2.类选择器
        • 3.ID选择器
        • 4.使用举例
      • 2.复杂选择器
        • 1.复合选择器
        • 2.组合选择器
        • 3.嵌套选择器
        • 4.使用举例
        • 5.伪类选择器
        • 6.伪元素选择器
      • 3.选择器优先级
        • 1.优先级
        • 2.可以使用!important使某个样式有最高的优先级
    • 4.常用CSS属性
      • 1.字体属性
        • 1.font-size:大小、尺寸
        • 2.font-weight:粗细
        • 3.font-family:字体
        • 4.font-style:样式
        • 5.font:组合
      • 2.文本属性
        • 1.使用举例
      • 3.背景属性
      • 4.列表属性
      • 5.表格属性
    • 5.盒子模型
      • 1.简介
      • 2.border
      • 3.padding
      • 4.margin
    • 6.定位方式
    • 7.其他CSS属性
      • 1.浮动属性和清除属性
      • 2.元素的显示和隐藏
        • 1.display
        • 2.visibility
        • 3.display和display的区别
        • 4.代码举例
      • 3.轮廓属性
        • 1.简介
        • 2.基本用法
        • 3.outline和border的区别
        • 4.代码举例
      • 4.宽高相关
      • 5.overflow属性
      • 6.cursor属性
    • 8.页面布局
      • 1.简介
      • 2.表格布局
        • 1.简介
        • 2.用法
        • 3.代码举例
      • 3.div布局
        • 1.简单布局
          • 1. 1-1-1布局
          • 2. 1-2/ 3-1布局
      • 4.圣杯布局

CSS基础知识学习。

在这里插入图片描述

1.CSS简介

1.什么是CSS

CSS是一组样式设置的规则，用于控制页面的外观样式.

2.为什么使用CSS

  1. 实现内容与样式的分离，便于团队开发。

  2. 样式复用，便于网站的后期维护。

  3. 页面的精确控制，让页面更精美。

3.CSS作用

  1. 页面外观美化。
  2. 布局和定位。

2.基本用法

1.CSS语法

<head><style>选择器{属性名：属性值;属性名：属性值;}</style>
</head>
  1. 选择器：要修饰的对象（东西）。
  2. 属性名：修饰对象的哪一个属性（样式）。
  3. 属性值：样式的取值。

例如：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p{color: red;background: #cccccc;}h2{color: blue;}</style></head><body><p>CSS从入门到精通</p><h2>摸鱼</h2></body>
</html>

运行结果：

在这里插入图片描述

2.CSS应用方式

有三种方式：内部样式、行内样式、外部样式。

1. 内部样式

也称为内嵌样式，在页面头部通过style标签定义。对当前页面中所有符合样式选择器的标签都起作用。
行内样式举例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p{color: red;background: #cccccc;}h2{color: blue;}</style></head><body><p>CSS从入门到精通</p><h2>摸鱼</h2></body>
</html>
2.行内样式

也称为嵌入样式，使用HTML标签的style属性定义。只对设置style属性的标签起作用。
行内样式举例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><p style="color: rgb(34, 33, 33);">CSS从入门到精通</p><h2 style="color: blue;">摸鱼</h2></body>
</html>
3.外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入。

1.使用 link标签 链接外部样式文件
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

2.@import 指令 导入外部样式文件
<style>@import "CSS样式文件路径";@import url(CSS样式文件路径);
</style>
3.使用举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> --><style>@import url(style/hello.css);</style>
</head>
<body><p>welcome to CSS!</p><p>欢迎来到CSS课堂!</p><hr><h2 style="color:red;">WEB前段工程师</h2><h2>JAVA开发工程师</h2><hr><div>嘿嘿</div><div>哈哈</div>
</body>
</html>

3.选择器

1.基础选择器

1.标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称。以标签名作为样式应用的依据。

2.类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器。
以标签的class属性作为样式应用的依据。

注意事项：

  1. 调用时不能添加 . 号 。
  2. 同时调用多个类选择器时,以 空格 分隔 。
  3. 类选择器名称不能以 数字 开头。
3.ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配。

以标签的id属性作为样式应用的依据，一对一的关系。

4.使用举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{color:red;font-size:20px;}h2{color:yellow;}.hello{background: #cccccc;}.world{font-weight:bold;}#haha{color:blue;}</style>
</head>
<body><p>welcome to css!</p><p>hello world!</p><hr><p class="hello">welcome to css!</p><p>hello world!</p><h2>前端开发</h2><h3>后端开发</h3><div class="hello">张三</div><div class="world">李四</div><hr><h1 id="haha">哈哈</h1>
</body>
</html>

运行结果：

在这里插入图片描述

2.复杂选择器

1.复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用。

必须同时满足两个条件才能应用样式。

2.组合选择器

也称为集体声明。
将多个具有相同样式的选择器放在一起声明，使用逗号隔开。

3.嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开。

只有满足层次关系最里层的选择器所对应的标签才会应用样式。

注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行。

4.使用举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/* 1.标签选择器和类选择器合起来使用----复合选择器 */h1.aaa{color:red;}/* 1.标签选择器和ID选择器合起来使用----复合选择器 */p#bbb{color:blue;}/* 2.组合选择器 */h1,p,div,span,.ccc{font-size:30px;}div{background:violet;}.ccc{font-weight:bold;}/* 3.嵌套选择器 *//* div p{color:green;text-decoration:underline;} */div>p{color:green;text-decoration:underline;}div h3.ddd{color:red;}</style>
</head>
<body><!-- 需求：只想修饰class属性为aaa的h1标签 --><h1 class="aaa">welcome</h1><h4 class="aaa">css</h4><h1>hello</h1><hr><!-- 我要修饰ID属性为bbb的p标签 --><p id="bbb">world</p ><p>html</p><hr><!-- 给h1、p、div、span标签中的内容设置字号为30px --><h1>hello</h1><p>CSS</p><div>WEB开发</div><span class="ccc">JAVA开发</span><hr><!-- 需求：修饰div内部的p标签 --><div><p>div内部的p标签</p><h3>div内部的h3标签</h3></div><hr><div><h3><p>div内部的h3内部的p标签</p></h3></div><hr><!-- 需求：修饰div内部的class为ddd的标签 --><div><p>div内部的p</p><h3 class="ddd">div内部的h3</h3><p class="ddd">PPPP</p></div><h3 class="ddd">h3h3h3</h3>
</body>
</html>

运行结果：

在这里插入图片描述

5.伪类选择器

根据不同的状态显示不同的样式，一般多用于标签。

四种状态：

:link 未访问的链接 。
:visited 已访问的链接。
:hover 鼠标悬浮到连接上，即移动在连接上。
:active 选定的链接，被激活。

注：默认超链接为：蓝色、下划线。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/*a:link{font-size: 12px;color:black;text-decoration: none;}a:visited{font-size: 15px;color:;}a:hover{font-size: 20px;color:blue;}a:active{font-size: 40px;color:green;}*/a:link,a:visited{color:#666666;font-size: 13px;text-decoration: none;}a:hover,a:active{color:#ff7300;text-decoration: underline;}/*普通的标签也可以使用伪类选择器*/p:hover{color:red;}p:active{color:blue;}</style>
</head>
<body><a href="复杂选择器.html">复杂选择器.html</a><p>CSS从入门到精通！</p>
</body>
</html>
6.伪元素选择器

:first-letter 为第一个字符的样式。
:first-line 为第一行添加样式。
:before 在元素内容的最前面添加的内容，需要配合content属性使用。
:after 在元素内容的最后面添加的内容，需要配合content属性使用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p:first-letter{color:red;font-size:30px;}p:first-line{background:pink;}p:before{content:"嘿嘿";}p:after{content:"哈哈";}</style>
</head>
<body><p>hello world!</p><hr><p>hello world! <br>welcome to css!</p>
</body>
</html>

运行结果：

在这里插入图片描述

3.选择器优先级

1.优先级

行内样式>ID选择器>类选择器>标签选择器。

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式。 后加载会覆盖先加载的同名样式。

2.可以使用!important使某个样式有最高的优先级

4.常用CSS属性

1.字体属性

在这里插入图片描述

1.font-size:大小、尺寸

取值：

  1. inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited：
  2. px像素 pixel。
  3. %百分比，相对父标签字体大小的百分比。
  4. em倍数，相对于父标签字体大小的倍数。
  5. HTML根元素默认字体的大小为16px,也称为基础字体大小。
2.font-weight:粗细
3.font-family:字体
4.font-style:样式
5.font:组合

是font-style、font-weight、font-size、font-family的组合编写。
必须按照先后顺序来，顺序为：font-style、font-weight、font-size、font-family,例子如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{font-size: 30px;}p{/*font-size: 20px;*/font-size: 80%;}body{font-size: 62.5%;}ul li{/*font-size: 30px;font-weight: bold;font-family: 华文行楷,宋体,黑体;font-style: italic;*/font: italic bold 30px 微软雅黑;}</style>
</head>
<body><p>CSS从入门到精通！</p><hr><div>我的DIV<p>CSS从入门到精通</p></div><hr><hr><ul><li>嘿嘿</li></ul>
</body>
</html>

2.文本属性

在这里插入图片描述

1.使用举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{color: red;/*background-color: #ccc;*//*background-color: rgba(0,255,0,0.5);*/background-color: rgba(0, 237, 255, 0.5);line-height: 50px;text-align: center;}img{vertical-align: middle;}div{text-indent: 30px;}span{font-size: 30px;text-decoration: underline;text-transform: capitalize;letter-spacing: 10px;world-spacing:;}h3{width: 300px;height: 200px;background-color:#ccc;white-space: nowrap;overflow:hidden;}</style>
</head>
<body><p>welcome to css!</p><p>welcome to css!</p><p>welcome to css!</p><hr><img src="head.jpg" width="15%">HTML和CSS很简单吗？<hr><div>&nbsp;&nbsp;welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</div><hr><div>welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</div><hr><span>hello world</span><hr><h3>welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</h3><hr>
</body>
</html>

运行结果：

在这里插入图片描述

3.背景属性

在这里插入图片描述

4.列表属性

在这里插入图片描述

5.表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>table{width:500px;border:1px solid blue;border-collapse:collapse;}td{border:1px solid blue;}</style>
</head>
<body><!-- table>(tr>td{td$}*5)*4 --><table cellspacing="0px"cellpadding="0px"><tr><td>bbb</td><td>aaa</td><td>aaa</td><td>td4</td><td>td5</td></tr><tr><td>aaa</td><td>aaa</td><td>bbb</td><td>td4</td><td>td5</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td><td>td5</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td><td>td5</td></tr></table>
</body>
</html>

运行结果：

在这里插入图片描述

5.盒子模型

1.简介

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

  1. width 宽度。
  2. height 高度 。
  3. border 边框 。
  4. padding 内边距。
  5. margin 外边距。

2.border

表示盒子的边框。

分为四个方向： 上top、右right、下bottom、左left。
border-top、border-right、border-bottom、border-left。

每个边框包含三种样式：
border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style

样式style的取值：
solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线。

3.padding

表示盒子的内边距，即内容与边框之间的距离。

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）。

4.margin

表示盒子的外边距，即盒子与盒子之间的距离。

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）。

6.定位方式

通过position属性实现对元素的定位，有四种定位方式。

在这里插入图片描述

代码举例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/* id选择器 */#container {width: 800px;border: 2px solid #000000;position:relative;}/* 类选择器 */.div1,.div2,.div3,.div4 {width: 100px;height: 50px;}.div1 {background: red;position: relative;top: 20px;left: 50px;z-index: -5;}.div2 {background: blue;position: absolute;left: 100px;bottom: 50px;z-index: 100px;}.div3 {background: green;position: fixed;bottom: 50px;left: 100px;}.div4 {background: cyan;}</style>
</head><body><div id="container"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><div class="div4">div4</div></div>
</body></html>

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

7.其他CSS属性

1.浮动属性和清除属性

  1. 通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示。
  2. 通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素。

2.元素的显示和隐藏

1.display

通过display属性设置元素是否显示，以及是否独占一行。

常用取值：

2.visibility

也可以通过visibility属性设置元素的显示和隐藏。

常用属性：

在这里插入图片描述

3.display和display的区别

  1. display隐藏时不再占据页面中的空间，后面的元素会占用其位置。

  2. visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示。

4.代码举例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.div1{width:100px;height: 100px;background: blue;display: inline;}span{width: 100px;height: 100px;background: 50px;display: inline-block;}i{display: block;width: 100px;height: 50px;background: red;}p{width: 50px;height: 50px;background: red;}.p1{visibility: hidden;}.login{display: inline-block;text-decoration: none;background: rgba(255, 0,0, 0);color: #940ff2;padding: 10px;text-align: center;border-radius: 10px;}.login:hover{background: #05f14c;}</style></head><body><div class="div1">div1</div><span>span1</span><i>呵呵</i><hr><p class="p1">Hello</p><p class="p2">World</p><hr><a href="javascript:alert('欢迎光临')" class="login">登&nbsp;&nbsp;录</a></body>
</html>

运行结果：

在这里插入图片描述

3.轮廓属性

1.简介

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素。

2.基本用法

常用属性:

outline-width:轮廓宽度 。
outline-color:轮廓颜色。
outline-style:轮廓样式。
outline简写。

在浏览器中，当鼠标单击或使用TAB键让一个表单或链接获得焦点时，该元素会有一个轮廓outline

优点：可以提高使用表单的用户体验。
缺点：有时会影响美观。

3.outline和border的区别
  1. border可以应用于所有html元素，而outline主要用于表单元素、超链接元素。
  2. 当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为。
  3. outline不影响元素的尺寸和位置，而border会影响。
4.代码举例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Documnet</title><style>span{border: 2px solid red;outline: 4px dashed green;}.userName{border: 1px solid red;outline: none;padding-left: 3px;width: 80px;}.email{border: 0;outline: 0;border-bottom: 1px solid #000;}.btnsubmit{border: 0;padding: 5px;width: 100px;}.mydiv{width: 100px;background: #ccc;border: 2px solid red;}</style></head>
<body><span>welcome to CSS</span><hr>用户名：<input type="text" class="username"><a href="#">CSS</a><hr>邮箱：<input type="text" class="email"><input type="submit" value="提交" class="btnsubmit"><hr><div class="mydiv">div</div>
</body>
</html>

运行结果：

在这里插入图片描述

4.宽高相关

  1. max-width:设置元素的最大宽度 。
  2. max-height:设置元素的最大高度。
  3. min-width设置元素的最小宽度。
  4. min-height设置元素的最小高度。

5.overflow属性

当元素内容溢出时该如何处理。

常用取值：

  1. visible溢出时可见，显示在元素外，默认值。
  2. hidden溢出的部分不可见（常用）。
  3. scroll无论是否出现溢出始终出现滚动条。
  4. auto溢出时自动出现滚动条。

6.cursor属性

用于设置光标的形状。

常用属性：

  1. default默认光标，一般为箭头。
  2. pointer手形，光标移动超链接上时一般显示为手形。
  3. move表示可移动。
  4. text表示文本。
  5. wait表示程序正忙，需要等待。
  6. hep表示帮助。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{border:1px solid red;min-width:500px;}div{border:1px solid blue;width: 300px;height: 100px;overflow:auto;}span{cursor:help;}</style>
</head>
<body><p>welcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to css</p><hr><div>welcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to css</div><hr><span>光标形状</span>
</body>
</html>

运行结果：

在这里插入图片描述

8.页面布局

1.简介

常见页面布局：

  1. 表格布局 。
  2. div布局。

2.表格布局

1.简介

  1. 不适用于复杂布局，仅用于简单 、有规则的结构。

  2. 定位相对准确，与浏览器基本无关，适用于简单分隔。

2.用法

table常用样式的属性：

  1. border在表格外围设置边框。
  2. border-spacing设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）。
  3. border-collapse表格中相邻边框是否合并，取值：seprate、collapse。

th/td常用样式属性：

  1. border为单元格设置边框。
  2. padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）。
3.代码举例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.hello{width: 80%;border:1px solid #ccc;border-spacing:0;border-collapse:collapse;}.hello th,.hello td{border:1px solid #ccc;padding:5px;}</style>
</head>
<body><!-- table>(thead>tr>th{th$}*4)+tbody>(tr>td{td$}*4)*6 --><table class="hello"><thead><tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th></tr></thead><tbody><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr></tbody></table>
</body>
</html>

运行结果：

在这里插入图片描述

3.div布局

定位绝对精确，使用灵活，适合于复杂的布局方式。

1.简单布局
1. 1-1-1布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style1.css">
</head>
<body><div id="container"><header class="header">header</header><article class="main">main</article><footer class="footer">footer</footer></div>
</body>
</html>

运行结果：

在这里插入图片描述

2. 1-2/ 3-1布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style2.css"> 
</head>
<body><div id="container"><header class="header">herder</header><article class="wrapper"><section>main</section><aside>right aside</aside></article><footer class="footer">footer</footer></div>
</body>
</html>

运行结果：

在这里插入图片描述

4.圣杯布局

页面结构，两边的边栏宽度固定，中间主体在一定范围内可自适应，并且主体优先被加载。

一般防止页面缩放影响浏览，都会为页面设置一个最小宽度。

<!DOCTYPE html>
<html lang="en"> 
<head><meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style4.css"> 
</head> 
<body><div id="container"><header class="header"> header </header> <article class="wrapper"> <section class="main">main</section><aside class="left"> left</aside>  <aside class="right"> right</aside> </article><footer class="footer"> footer </footer>  </div>
</body> 
</html>

运行结果：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机视觉: 基于隐式BRDF自编码器的文生三维技术

计算机视觉: 基于隐式BRDF自编码器的文生三维技术

论文链接: MATLABER: Material-Aware Text-to-3D via LAtent BRDF auto-EncodeR 背景 得益扩散模型和大量的text - image 成对的图片&#xff0c; 现在文生2D的模型已经比较成熟的框架和模型&#xff0c;主流的技术比如说stable diffusion 和 midjourney 以及工业领域runway 等…
阅读更多...
ElasticSearch环境准备

ElasticSearch环境准备

Elasticsearch 是一个基于 Apache Lucene™ 的开源搜索引擎。不仅仅是一个全文搜索引擎&#xff0c;它还是一个分布式的搜索和分析引擎&#xff0c;可扩展并能够实时处理大数据。以下是关于 Elasticsearch 的一些主要特点和说明&#xff1a; 1.实时分析&#xff1a;Elasticsear…
阅读更多...
反爬虫机制与反爬虫技术(一)

反爬虫机制与反爬虫技术(一)

反爬虫机制与反爬虫技术一 1、网络爬虫的法律与道德问题2、反爬虫机制与反爬虫技术2.1、User-Agent伪装2.2、代理IP2.3、请求频率控制2.4、动态页面处理2.5、验证码识别3、反爬虫案例：豆瓣电影Top250爬取3.1、爬取目标3.2、库（模块）简介3.3、翻页分析3.4、发送请求3.5、数据…
阅读更多...
【Solidity】智能合约案例——①食品溯源合约

【Solidity】智能合约案例——①食品溯源合约

目录 一、合约源码分析&#xff1a; 二、合约整体流程&#xff1a; 1.部署合约 2.管理角色 3.食品信息管理 4.食品溯源管理 一、合约源码分析&#xff1a; Producer.sol:生产者角色的管理合约&#xff0c;功能为&#xff1a;添加新的生产者地址、移除生产者地址、判断角色地址…
阅读更多...
基于支持向量机SVM和MLP多层感知神经网络的数据预测matlab仿真

基于支持向量机SVM和MLP多层感知神经网络的数据预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 一、支持向量机&#xff08;SVM&#xff09; 二、多层感知器&#xff08;MLP&#xff09; 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .…
阅读更多...
vue3前端开发-flex布局篇

vue3前端开发-flex布局篇

文章目录 1.传统布局与flex布局优缺点传统布局flex布局建议 2. flex布局原理2.1 布局原理 3. flex常见属性3.1 父项常见属性3.2 子项常见属性 4.案例实战(携程网首页) 1.传统布局与flex布局优缺点 传统布局 兼容性好布局繁琐局限性&#xff0c;不能再移动端很好的布局 flex布…
阅读更多...
C++深入学习part_1

C++深入学习part_1

Linux下编译C程序 安装g命令&#xff1a;sudo apt install g 编译命令&#xff1a;$ g *.cc 或者 *.cpp -o fileName; hellworld 编译程序可以看到&#xff1a; namespace命名空间 首先&#xff0c;命名空间的提出是为了防止变量重名冲突而设置的。 浅浅试一下&#xff1…
阅读更多...
漏洞复现-易思无人值守智能物流文件上传

漏洞复现-易思无人值守智能物流文件上传

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…
阅读更多...
STC89C51基础及项目第10天：LCD显示字符（非标协议外设）

STC89C51基础及项目第10天：LCD显示字符（非标协议外设）

1. 初识LCD1602&#xff08;233.79&#xff09; 非标协议外设 LCD1602显示 LCD1602&#xff08;Liquid Crystal Display&#xff09;是一种工业字符型液晶&#xff0c;能够同时显示 1602 即 32 字符(16列两行) 引脚说明 第 1 脚&#xff1a; VSS 为电源地第 2 脚&#xff1…
阅读更多...
Unity AI Sentis 基础教程

Unity AI Sentis 基础教程

Unity AI Sentis基础教程 Unity AI Sentis基础教程Unity AI 内测资格申请Unity 项目Package Manager开始尝试模型下载识别图片完整代码代码搭载运行 射线绘画 URP&#xff08;扩展&#xff09;射线绘画脚本脚本搭载效果 Sentis 是 AI 模型的本地推理引擎&#xff0c;它利用最终…
阅读更多...
3D孪生场景搭建：模拟仿真

3D孪生场景搭建：模拟仿真

前面几期文章介绍如何使用NSDT 编辑器 搭建3D应用场景&#xff0c;本期介绍下孪生场景中一个一个非常重要的功能&#xff1a;模拟仿真。 1、什么是模拟仿真 模拟仿真是一种用于描述、分析和模拟现实世界中系统、过程或事件的计算机模型和程序。仿真通过输入各种参数和条件&am…
阅读更多...
【iOS】——仿写计算器

【iOS】——仿写计算器

文章目录 一、实现思路二、实现方法三、判错处理 一、实现思路 先搭建好MVC框架&#xff0c;接着在各个模块中实现各自的任务。首先要创建好UI界面&#xff0c;接着根据UI界面的元素来与数据进行互动&#xff0c;其中创建UI界面需要用到Masonry布局。 二、实现方法 在calcu…
阅读更多...
Maven(4)-利用intellij idea创建maven 多模块项目

Maven(4)-利用intellij idea创建maven 多模块项目

本文通过一个例子来介绍利用maven来构建一个多模块的jave项目。开发工具&#xff1a;intellij idea。 一、项目结构 multi-module-project是主工程&#xff0c;里面包含两个模块&#xff08;Module&#xff09;&#xff1a; web-app是应用层&#xff0c;用于界面展示&#xff…
阅读更多...
AdaBoost（上）：数据分析 | 数据挖掘 | 十大算法之一

AdaBoost（上）：数据分析 | 数据挖掘 | 十大算法之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…
阅读更多...
特殊笔记_10/7

特殊笔记_10/7

安装node到第4.1就行&#xff08;安装npm的淘宝镜像&#xff09; Node.js安装与配置&#xff08;详细步骤&#xff09;_nodejs安装及环境配置_LI4836的博客-CSDN博客 安装vscode 下载组件&#xff1a; 点击第五个 Auto Close Tag&#xff1a;自动闭合标签 Chinese (Simpli…
阅读更多...
MQ - 36 云原生：业界MQ的计算存储分离的设计与实现

MQ - 36 云原生：业界MQ的计算存储分离的设计与实现

文章目录 导图概述什么是存算分离架构必须是存算分离架构吗实现存算分离架构的技术思考如何选择合适的存储层引擎存储层：分区存储模型的设计计算层：弹性无状态的写入业界主流存算分离架构分析RocketMQ 5.0 架构分析Pulsar 存算架构分析总结导图 概述 结合云原生、Serverless…
阅读更多...
JetBrains ToolBox修改应用安装位置

JetBrains ToolBox修改应用安装位置

TooBox修改应用安装位置 1.关闭ToolBox 2.修改配置文件 找到配置文件所在位置 C:\Users\用户名\AppData\Local\JetBrains\Toolbox\.settings.json增加install_location字段 "install_location": "E:\\DevTool\\IDE",E:\DevTool\IDE可以改成自己想要的…
阅读更多...
Springboot项目log4j与logback的Jar包冲突问题

Springboot项目log4j与logback的Jar包冲突问题

异常信息关键词&#xff1a; SLF4J: Class path contains multiple SLF4J bindings. ERROR in ch.qos.logback.core.joran.spi.Interpreter24:14 - no applicable action for [properties], current ElementPath is [[configuration][properties]] 详细异常信息&#xff1a…
阅读更多...
常见排序算法详解

常见排序算法详解

目录 排序的相关概念 排序&#xff1a; 稳定性&#xff1a; 内部排序&#xff1a; 外部排序&#xff1a; 常见的排序&#xff1a; 常见排序算法的实现 插入排序&#xff1a; 基本思想&#xff1a; 直…
阅读更多...
自学接口测试系列 —— 自动化测试用例设计基础！

自学接口测试系列 —— 自动化测试用例设计基础！

一、接口测试思路总结 ❓首先我们在进行接口测试设计前思考一个问题&#xff1a;接口测试&#xff0c;测试的是什么&#xff1f; ❗我们必须要知道&#xff0c;接口测试的本质&#xff1a;是根据接口的参数&#xff0c;设计输入数据&#xff0c;验证接口的返回值。 那么接口…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发