Web开发-CSS篇-上

news2024/9/21 22:34:47

CSS的发展历史

        CSS（层叠样式表）最初由万维网联盟（W3C）于1996年发布。CSS1是最早的版本，它为网页设计提供了基本的样式功能，如字体、颜色和间距。随着互联网的发展，CSS也不断演进：

  • CSS1（1996年）：引入基本的样式功能。
  • CSS2（1998年）：增加了定位、媒体类型和更复杂的选择器。
  • CSS3（2001年）：引入模块化设计，包括媒体查询、动画、过渡等。

CSS的发展使得网页设计更加灵活，能够适应不同设备和屏幕尺寸。

CSS与HTML的关系

        CSS与HTML的关系密不可分。HTML用于构建网页的结构和内容，而CSS则负责控制这些内容的外观和布局。通过将样式与内容分离，开发者可以更轻松地管理和维护网页，提高代码的可读性。

为什么要学CSS

学习CSS的原因有很多，包括：

  • 提升用户体验：良好的样式能够提高网页的可读性和可用性。
  • 增强网页可访问性：合理的布局和样式使得内容更易于访问。
  • 职业发展：掌握CSS是成为前端开发者的基本要求，可以增强求职竞争力。

CSS在HTML中的三种引用方式

1. 内联式（行内式）

        内联式是在HTML元素的style属性中直接添加CSS样式。适合简单快速的样式修改，但不推荐大规模使用。

  • 优点：快速方便，不需要额外的文件。
  • 缺点：样式不易维护，无法重用。

2. 嵌入式

        嵌入式CSS是将样式放在HTML文档的<head>部分，使用<style>标签。适用于单个页面的样式管理。

  • 优点：可以集中管理页面样式。
  • 缺点：无法在多个页面间共享样式。

3. 外部式

        外部CSS是通过<link>标签引入一个独立的CSS文件，适合大型项目，样式可以在多个页面间共享。

  • 优点：易于维护和更新，样式可重用。
  • 缺点：需要额外的HTTP请求。
示例： 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>初识CSS</title>

	<style>
	/*css样式：选择器+声明，声明由属性+值构成*/
		span{
			color: orange;
			font-size:30px;
			}
	</style>

	<link rel="stylesheet" href="css/studemo1.css">


</head>
<body>
	<h4>有志者事竟成</h4>
	<p>
		<span>三天</span>,<span>一个月</span>
	</p>

	<p style="color: red;">大帅比</p>

	<!-- 三种引入方式针对同一标签修饰的优先级问题本质是代码从上至下执行的顺序覆盖问题，其实并无优先级。
		层叠样式表，顾名思义-->

</body>
</html>

外部引入的.css文件 

/*引入css的三种方式：
内联式（行内式）
嵌入式
外部式

*/
h4{color: blue;}

优先级和权重

CSS的优先级决定了哪些样式会被应用，通常规则如下：

  1. 内联样式具有最高优先级。
  2. 嵌入式样式次之。
  3. 外部样式的优先级最低。

         <!-- 三种引入方式针对同一标签修饰的优先级问题本质是代码从上至下执行的顺序覆盖问题，其实并无优先级。层叠样式表，顾名思义-->

顺便一提，html中注释为：<!--  --> 而在CSS中注释为：/* */   

选择器

什么是选择器？

选择器用于选择要应用样式的HTML元素。选择器可以根据元素的标签、ID、类等进行匹配。

基本选择器

  1. 元素选择器：选择特定标签的元素。

  2. ID选择器：选择具有特定ID的元素，使用#符号。

  3. 类选择器：选择具有特定类的元素，使用.符号。

高级选择器

  1. 后代选择器：选择某个元素内部的所有指定元素。

  2. 子代选择器：选择某个元素的直接子元素。

  3. 交集选择器：选择同时匹配多个选择器的元素。

  4. 组合选择器：选择满足多个条件的元素。

  5. 伪类选择器：选择处于特定状态的元素。

下面示例两个一组，一个html文件，一个是css文件从外部引入 

示例1： 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>人民日报金句 </title>

	<link rel="stylesheet" href="./css/studemo2.css">

</head>
<body>
	<p id="top"></p>
	<div id="contains">
		<!-- 一个标签可以归属多个类 -->
		<h1 class="active title">最走心，最励志的人民日报金句文案 </h1>
		
		<p>
			1、人生这条路很长，未来如星辰大海般璀璨，不必踟躇于过去的半亩方塘。那些所谓的遗憾，可能是一种成长；那些曾受过的伤，终会化作照亮前路的光。——《人民日报》
		</p>
			
		<p>
			2、人这辈子千万不要马虎两件事，一是找对爱人，二是找对事业，因为太阳升起时要投身事业，太阳落山时要与爱人相拥的。我们终其一生，都在寻找两样东西，一是价值感，二是归属感…价值感来源于肯定，归属感来源于被爱。——《人民日报》
		</p>
			
		<p>
			3、现在的你，是十年前你的决定，十年后的你，是现在你的决定。种一棵树，最好是十年前，其次是现在。想要改变，从此刻开始，一切还不晚。<span id="st">星光不问赶路人，时光不负有心人,</span>愿十年后的今天不为虚度年华儿悔恨，所得皆所愿。我们各自努力，顶峰相见。——《人民日报》
		</p>

		<img src="./images/01.jpeg" alt="">

		<p class="active title">
			4、历经沉浮，休戚与共。然兴衰往复，皆不足为惧，于沉寂中孤守，于浮华中炼心。——《人民日报》
		</p>
			
		<p>
			5、鸟叫虫鸣是自然韵味，车水马驼也是另一种美。教室里朗朗书声，传递出学子们的蓬勃朝气，街头巷尾喧哗的人声，烘托出人间烟火的可贵;列车飞驰的轰鸣，奔跑出社会向前的节拍。但只有当生产生活的声音与自然的声音交汇在一起时，才有最美的和谐乐章。——《人民日报》
		</p>
			
		<p>
			6、你所有的压力，都是因为你太想要。你所有的痛苦，都是因为你太较真了。有些事不能尽你心意，就是提醒你该转弯了。如果事事都如意，那就不叫生活了，所以睡前原谅一切，醒来不问过往，珍惜所有的不期而遇，看淡所有的不辞而别。——《人民日报》
		</p>

		<img src="./images/02.jpeg" alt="" title="我最帅，哈哈哈！">

		<p>
			7、真正有光的人，压的时间越久，深度越深，绽放的光芒才可以灿烂。——《人民日报》
		</p>

		<p>
			8、我们希望，瞬间的积淀不要流淌，岁月的馈赠别被消磨，而是在时间的河床上凝聚起沉潜的力量，让我们与时代和社会一起，向阳生长。——《人民日报》
		</p>

		<p>
			9、错过无眠的夜晚。错过寂落的叮咛。错过感怀或刺伤，错过滂沱与分享。错过一双蜻蜓的翅膀。错过一缕蚂蚁的浅唱。错过命中那些永不再来的叶落花开春回冬往。错过终于勇敢的沉默，错过早已错过的迷惘。一次错过是过失，一再错过是过错。——《人民日报》
		</p>

		<img src="./images/03.jpeg" alt="" title="">

		
		<p>
			10、抉择是新生，是涅槃后更为强壮的灵魂，是摧枯拉朽、洗髓换骨后的轻盈如燕，是从悲观中升华出的达观，是最终化成的不老青山。——《人民日报》
		</p>

		<p>
			11、不跟生活认输，不向岁月低头，如果风景不够好，就让我们多走几步；如果道路不好走，就让我们放慢脚步，只要还在路上，总能看到想要的风景，总能找到属于自己的方向。——《人民日报》
		</p>
	
		<p>
			12、平和地接纳，不屈地奋斗，坚定地前行，如一泓清泉，静水流深，看似力量并不汹涌澎湃，却能磋磨岩石锋利的尖角，涤荡水中的混沌的杂质，把困难揉碎，长成属于自己的力量。——《人民日报》
		</p>
		<img src="./images/04.jpeg" alt=""><br>

		<a href="#top">点击回到顶部</a>

	</div>

	
</body>
</html>
/*
css常用选择器
	一、基本选择器
		-标签（元素）选择器
		-类（class）选择器
		-id选择器
	二、高级选择器
		-后代选择器
		-子代选择器
		-组合选择器
		-交集选择器
		-伪类选择器
*/

#st{color: blue; font-size: 20px;}

.active {color: grey;}
.title{font-size: 30px}

p{color: orange; font-size: 18px; font-weight: bold;}

 示例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>后代/子代选择器</title>
	<link rel="stylesheet" href="./css/studemo3.css">
</head>
<!-- css高级选择器
	后代、子代、组合、交集、伪类
 -->
<body>
	<div class="wrap">
		<h3>悲观</h3>
		<p>
			悲观者永远正确
			<a href="">hello!</a>
		</p>
		<a href="">JJX</a>
	</div>

	<div>
		<p>你好，选择器。</p>
		<a href="">小圆圈</a>
	</div>
	
	
</body>
</html>
/*后代选择器：针对div的后代a标签*/

div a{color: orange;font-size: 20px}


/*子代选择器*/
.wrap>a{color: pink;}

/*组合选择器*/
h3,p{color: red;font-size: 16px;}

 示例3：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>交集/伪类选择器</title>
	<link rel="stylesheet" href="./css/studemo4.css">
</head>
<body>
	<h3>WWW。。。</h3>
	<div>
		<p>
			JJX，你好！
		</p>

	</div>
	<p>HELLO</p>
	<a href="#">小布丁</a>
	<div>
		<p id="mi">小米商城</p>
	</div>
	
	
</body>
</html>
/*交集选择器*/
div p{color: green;}
h3{color: blue;}
div ph3{font-size: 16px;font-weight: lighter;}


/*伪类选择器*/

/*link,visted,active只针对于a标签，hover所有标签都适用*/

a:link{color: grey;}	/*未访问过的状态*/
a:visted{color: black;}	/*访问过后的状态*/
a:hover{color: red;}	/*悬浮时的状态*/
a:active{color: green;} /*鼠标摁住的状态*/

#mi:hover{color: blue;}

div:hover{background-color: orangered;}
效果展示：

为点击小米商城时，为绿色，当鼠标悬浮时字体变为蓝色，同时背景变为橙色

选择器权重 /继承

    <!-- 选择器权重： 内联式>id选择器>类选择器>元素选择器 -->

示例：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>继承</title>

	<link rel="stylesheet" href="./css/studemo5.css">

</head>
<body>
	<div>
		<ul>
			<li>
				<p>
					你好
				</p>
			</li>
		</ul>
	</div>

	<!-- 选择器权重： 内联式>id选择器>类选择器>元素选择器 -->
	
</body>
</html>

        此外，标签的属性可以继承，学过面向对象的编程语言都知道继承是什么，我就不多解释，毕竟小白不可能来看我的文章 ，但有的属性可以继承，有的不能。

/*继承*/
body{
	color: green;
	font-size: 18px;
	border: 2px solid yellowgreen;/*此属性不会被继承*/
}
效果展示：

 !important属性

示例：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>字体属性</title>

	<link rel="stylesheet" href="./css/studemo6.css">

</head>
<body>
	<div>
		<p style="color:green;">
			hello world!你好，世界！
		</p>
	</div>

</body>
</html>
/* !impoortant可超出选择器权重之外进行修改 */
p{
    color: purple !important;
}

        !important是能够打破权重规则，对其进行强制的修改，只要经!important修饰的属性，网页所表现出来的一定是!important所修饰的值，不建议用，平时也用的少，了解即可，此处内联式为绿色，外部引入!important紫色，所以最终结果一定是紫色。

效果展示：

字体属性

字体属性决定了文本的外观。常见的字体属性包括：

  • font-family：设置字体。
  • font-size：设置字体大小。
  • font-weight：设置字体粗细。
  • color：设置字体颜色。
示例： 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>字体属性</title>

	<link rel="stylesheet" href="./css/studemo6.css">

</head>
<body>
	<div>
		<p style="color:green;">
			hello world!你好，世界！
		</p>
	</div>

</body>
</html>
/* !impoortant可超出选择器权重之外进行修改 */
p{color: purple !important;}
body{
	color: #FFFFFF; /*16进制表示颜色*/
	font-family:Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei;
	font-size: 20px;
	font-style: italic; /*转为斜体*/
	font-weight: 600;	/*font-weight: bold;*/
	text-decoration: underline;
}

font-family设置的字体，按顺序优先执行，如果没有第一种字体则会显示第二种字体，以此类推，如果都没有，则会显示浏览器默认字体；

font-size如果不设置，默认为16px；

三种颜色表示方式：
color: red; 单词表示，不常用
color: rgb(255, 0, 255); 颜色范围[0,255] ,透明度[0,1]
color: rgba(0, 0, 0, 1.0);
color: ##AAAE38; 16进制表示，常用

像素单位
px是绝对单位
em，rem是相对单位

字体粗细表示有两种方式，
font-weight: bold;不常用
font-weight: 500;常用，范围[100,900],normal为默认值400

font的另一种表示： 

如此多的font表示起来不方便，还有另一种表示方法：

body {
    font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    color: #333;
    background-color: #fff;
    min-width: 1226px;

- `font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;`  
  - 这一行定义了字体的大小、行高和字体系列。
    - `14px` 是字体的大小。
    - `1.5` 是行高，相对于字体大小的比例（即行高为字体大小的 1.5 倍）。
    - 接下来的字体系列是一个回退字体列表，如果第一种字体不可用，浏览器会依次尝试使用后面的字体，直到找到可用的字体。最终的 `sans-serif` 是一个通用字体类别，表示无衬线字体。

- `color: #333;`  
  - 这行设置文本颜色为深灰色（十六进制颜色代码 #333）。

- `background-color: #fff;`  
  - 这行设置背景颜色为白色（十六进制颜色代码 #fff）。

- `min-width: 1226px;`  
  - 这行设置 `body` 元素的最小宽度为 1226 像素。无论屏幕大小如何，`body` 的宽度不会小于这个值。

 

文本属性

文本的属性包括：

  • text-align：设置文本对齐方式。
  • line-height：设置行高。
  • letter-spacing：设置字间距。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文本属性</title>

	<style>
		.box p{
			background-color: lightpink;
			font-size: 20px;
			color:#F6730A;
			text-indent: 2em;/*text-indent: 40px;*/
			/*行高*/
			line-height: 2em;/*line-height: 40px;*/
			/*文字间距*/
			letter-spacing: 5px;
			/*文本对齐方式:center,left,right*/
			text-align:left;	
		}
		
		#lam{
			text-align: center;
			/*单词间距*/
			word-spacing:20px;
		}
		
	</style>

</head>

<body>
	<div class="box">
		<p>
			当今社会是科学技术和信息时代迅猛发展的时代，随着计算机的普及和广泛使用，掌握和应用计算机已经是科学发展和走向未来信息化时代的需要，且已成为当今合格人材的必备素质之一。作为当今社会的主人，掌握电脑操作这一信息处理的工具是尤为重要的。现代教育技术迅速发展，需要学习的知识越来越多，知识更新的周期越来越短。为了培养优秀的跨世纪人材，必须提高教学效益，改革教学方法与教学手段。才能适应现代教育技术的发展。
		</p>
	</div>
	<p id="lam">hello world!</p>
	
</body>
</html>
效果展示：

  

标签元素分类：

HTML标签可以分为以下几类：

  1. 块状元素：如<div>、<p>，可以设置宽高，独占一行。
  2. 行内元素：如<span>、<a>，不能设置宽高，紧随其后排列。
  3. 行内块元素：如<img>、<button>，可以设置宽高，独占一行。

各元素的特点

  • 块状元素：可以设置宽高，独占一行。
  • 行内元素：不能设置宽高，元素在一行内流动。
  • 行内块元素：既可以设置宽高，也不独占一行。
示例： 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>元素分类</title>
	<style>
		div{
			background-color: green;
			width: 200px;
			height: 20px;
		}
		input{
			width: 200px;
			height: 200px;
		}
		img{
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
	<!-- 1.块状元素
			(1)独自占一行；
			(2)可以设置宽高，如果不设置默认为父标签的100%宽度高度；
		2.行内元素
			(1)都显示在一行；
			(2)不能设置宽高；
		3.行内快元素
			(1)在一行内显示；
			(2)可以设置宽高；
	 -->
	 块状元素
	 <div>JJX</div>
	 <p>JJX</p>
	 <h3>h系列标签都属块状元素标签</h3>
	 <ul>
	 	<li>JJX</li>
	 </ul>
	 <ol>
	 	<li>JJX</li>
	 </ol>
	 <table>
	 	<th></th>
	 	<tr></tr>
	 </table>
	 <dl>
	 	<dd></dd>
	 </dl>

	 <hr>
	 行内元素<br>
	 <a href=""></a>
	 <span></span>

	 <hr>
	 行内块元素<br>
	 <input type="text">
	 <img src="" alt="">


</body>
</html>

display属性

display属性用于控制元素的显示方式：

  • block：块状元素，独占一行。
  • inline：行内元素，不独占一行。
  • inline-block：行内块元素，既可以设置宽高，又不独占一行。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>display属性</title>
	<style>
		div{
			background-color: orange;
			width: 200px;
			height: 200px;
/*			display: none;*/

		}
		span{
			width: 200px;
/*			height: 200px;*/
			text-align: center;
			line-height: 40px;
			background-color: hotpink;
			display: inline-block;/*转成行内块属性
		}
	</style>
</head>
<body>
	<div>
		<p>
			JJX
		</p>
	</div>

	<span>小圆圈</span>

	
</body>
</html>

效果展示：

 小米商城顶部栏复刻

最后做个示例，用小米商城导航栏做个演示，先看原图：

 我们要复刻导航栏部分，这里是代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>小米商城顶部栏复刻</title>
	<style>
		.top_bar{
			background-color: #333;
			width: 100%;
			height: 40px;
		}
		.top_bar a{
			display: inline-block;
			line-height: 40px;
			color: #b0b0b0;
			text-decoration: none;
		}
		.top_bar span{
			color: #424242;
		}
		.top_bar a:hover{
			color: #fff;
		}
		
	</style>
</head>
<body>
	<div class="top_bar">
		<a href="https://www.mi.com/">小米官网</a>
		<span>|</span>
		<a href="https://www.mi.com/shop">小米商城</a>
		<span>|</span>
		<a href="https://hyperos.mi.com/" target="_blank">小米澎湃OS</a>
		<span>|</span>
		<a href="https://www.xiaomiev.com/" target="_blank">小米汽车</a>
		<span>|</span>
		<a href="https://i.mi.com/" target="_blank">云服务 </a>
		<span>|</span> 
		<a href="https://iot.mi.com/" target="_blank">IoT</a>

		
		
	</div>
	
</body>
</html>

来看效果

         这里用display属性转换a标签为行内块才得以设置行高，如果不转换，a标签作为行内元素是不能设置行高的，正因如此才能使a标签的范围变大，还使用text-decoration: none;去掉了a标签自带的下划线，利用伪类选择器hover，悬浮时字体呈现高亮。

总结： 

        我们回顾了CSS的发展历史，了解了它与HTML的紧密联系以及学习CSS的必要性。我们还详细介绍了CSS在HTML中的三种引用方式及其优缺点，以及如何通过选择器来精准地控制网页元素的样式。

 剩下内容会作为CSS下篇更新，最后写作不易，点个赞支持一下吧……

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

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

相关文章

AI人工智能 强化学习

AI人工智能 强化学习

AI人工智能 强化学习基础 强化学习基础 这种类型的学习被用来加强或加强基于评论者信息的网络。 也就是说&#xff0c;在强化学习下训练的网络从环境中获得一些反馈。 但是&#xff0c;反馈是评价性的&#xff0c;并且不像监督式学习的情况那样具有启发性。 基于这种反馈&…
阅读更多...
Python自动化水印处理：让你的图像版权保护更高效

Python自动化水印处理：让你的图像版权保护更高效

在这个数字化时代&#xff0c;图像和照片已成为我们日常生活和工作中的重要组成部分。然而&#xff0c;随着互联网的普及&#xff0c;版权保护变得越来越具有挑战性。 在这个数字化时代&#xff0c;图像和照片已成为我们日常生活和工作中的重要组成部分。然而&#xff0c;随着…
阅读更多...
在线音频剪辑免费工具哪个好用？推荐这6款新手必备的工具

在线音频剪辑免费工具哪个好用？推荐这6款新手必备的工具

在这个声音无处不在的时代&#xff0c;音频剪辑不仅是专业音乐人的专利&#xff0c;更是每个新媒体运营者不可或缺的利器。 无论是制作引人入胜的短视频背景音乐&#xff0c;还是编辑动人心弦的播客内容&#xff0c;一款强大的音频剪辑工具都能让你的作品如虎添翼。 今天&…
阅读更多...
Linux系统之ls命令的基本使用

Linux系统之ls命令的基本使用

Linux系统之ls命令的基本使用 一、ls命令介绍二、ls命令的使用帮助2.1 命令格式2.2 命令选项2.3 使用帮助 三、ls命令的基本使用3.1 列出当前目录中的所有文件和目录3.2 列出指定目录中的所有文件和目录3.3 显示文件的详细信息3.4 列出所有文件和目录3.5 显示目录本身&#xff…
阅读更多...
临床必备！常用的营养评估量表分享，附操作步骤与评分标准

临床必备！常用的营养评估量表分享，附操作步骤与评分标准

常笑医学整理了3个临床常用的营养评估量表&#xff0c;支持下载和在线使用&#xff0c;供临床医护工作人员参考。 01 营养风险筛查评分简表 &#xff08;完整量表请点击量表名称查看&#xff09; NRS2002&#xff08;Nutrition Risk Screening 2002, NRS2002&#xff09;是欧洲…
阅读更多...
嵌入式学习笔记十三——C语言指针变量、一维数组的指针、快速排序

嵌入式学习笔记十三——C语言指针变量、一维数组的指针、快速排序

指针变量 指针初始化 指针变量初始化&#xff1a;如果没有初始化&#xff0c;指针是随机值&#xff0c;既野指针。初始化可以让指针变量有明确的指向。 int a 10;int *p &a;//指针初始化int *p NULL; //NULL 0号地址 --- 空指针 指针赋值 int * p;p NULL;int a;i…
阅读更多...
【机器学习西瓜书学习笔记——特征选择与稀疏学习】

【机器学习西瓜书学习笔记——特征选择与稀疏学习】

机器学习西瓜书学习笔记【第十一章】 第十一章 特征选择与稀疏学习11.1子集搜索与评价特征特征选择为什么要特征选择如何进行特征选择子集搜索子集评价 11.2过滤式选择Relief适用场景如何确定相关统计量 11.3包裹式选择优缺点 11.4嵌入式选择与L1正则化L1/L2正则化L1正则化问题…
阅读更多...
【微信小程序开发】——奶茶点餐小程序的制作（一）

【微信小程序开发】——奶茶点餐小程序的制作（一）

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…
阅读更多...
Nginx+Tomcat负载均衡、动静分离群集（群集）

Nginx+Tomcat负载均衡、动静分离群集（群集）

实验主机&#xff1a;101 102 103 101:nginx 102:tomcat1 103:tomcat2 先配置两个tomcat服务器 拉进去所需的安装包&#xff1b; 同步会话开始搭建&#xff1b; 安装编译环境&#xff1b; 解压并移动到方便管理的地方&#xff1b; 然后在root的家目录下创建一个目录及测试…
阅读更多...
Google安装JSON-handle扩展

Google安装JSON-handle扩展

JSON-hande下载地址&#xff1a; JSON-Handle 官网 - 打开json格式文件的浏览编辑器 1. 重命名扩展文件(crx)后缀 为 zip。 2. 解压zip成文件夹&#xff0c;保存到指定目录。 3. Google浏览器地址栏输入 “chrome://extensions/”回车。然后开启 开发者模式。 4. 点击“加载…
阅读更多...
疯狂Java讲义_08_泛型

疯狂Java讲义_08_泛型

文章目录 泛型的传参若函数里的参数使用基类接受所有的派生类&#xff0c;怎么做&#xff1f; 类型通配符的上限类型通配符的下限 泛型的传参 注意 若类 Base 是类 Derived 的基类&#xff08;父类&#xff09;&#xff0c;那么数组类型 Base[] 是 Derived[] 的基类&#xff0…
阅读更多...
【编码解码神器】CyberChef v10.18.9

【编码解码神器】CyberChef v10.18.9

# 简介 CyberChef 是一个在线编码解码工具&#xff0c;包含了四百多种在线编解码工具&#xff0c;它提供了一种简单易用的方式来对数据进行各种加密、解密、编码和解码操作。你可以把它想象成一个多功能的”数字厨房”&#xff0c;在这里&#xff0c;你可以用各种”烹饪”方法…
阅读更多...
无人机与自主系统

无人机与自主系统

无人机&#xff08;Unmanned Aerial Vehicle, UAV&#xff09;和自主系统正在迅速改变许多行业&#xff0c;从农业到物流&#xff0c;再到军事领域。无人机作为一种能够自主或半自主飞行的飞行器&#xff0c;结合自主系统的技术&#xff0c;具备了更高的灵活性和执行复杂任务的…
阅读更多...
牛羊肉巨头的数字化战略：凯宇星辉如何领先市场

牛羊肉巨头的数字化战略：凯宇星辉如何领先市场

凯宇星辉的创业成长史&#xff0c;给出了中国牛羊肉企业如何从散户走向集团化经营的路线图。 总部位于大连的凯宇星辉&#xff0c;在牛羊肉进口贸易领域白手起家&#xff0c;十余年时间&#xff0c;已形成以澳新、南美、北美等全球三大牛羊肉主产区为主渠道的全球直采网络布局…
阅读更多...
【linux|001】Unix和Linux的关系 及 它们的发展历史

【linux|001】Unix和Linux的关系 及 它们的发展历史

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 ​ &#x1f3c5;阿里云ACE认证高级工程师 ​ &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社…
阅读更多...
巴黎奥运会上，墨水屏标签能怎么玩？

巴黎奥运会上，墨水屏标签能怎么玩？

截至8月7日&#xff0c;中国代表团在2024巴黎奥运会上已经斩获了22金21银16铜&#xff0c;合计59枚奖牌&#xff0c;位居奖牌第二。在为奥运健儿欢呼喝彩的同时&#xff0c;我们也注意到巴黎奥运会在环保方面的创新&#xff0c;并探讨如何应用墨水屏标签这一智慧显示技术&#…
阅读更多...
[转]通俗易懂的LLM（上篇）

[转]通俗易懂的LLM（上篇）

前言 2022年年底OpenAI发布ChatGPT&#xff0c;将LLM&#xff08;Large Language Model&#xff09;带向了一个新的高度&#xff0c;而2023年OpenAI继续放出大招&#xff1a;更强大的GPT-4问世&#xff0c;瞬间引爆了整个互联网圈。在这个大模型时代&#xff0c;作为一名NLPer&…
阅读更多...
什么是oled？

什么是oled？

LED 是有机发光二极管&#xff08;Organic Light-Emitting Diode&#xff09;的缩写&#xff0c;是一种先进的显示技术。与传统的液晶显示技术&#xff08;LCD&#xff09;不同&#xff0c;OLED 显示器不需要背光模块&#xff0c;因为每个像素本身可以发光。 OLED 的基本原理和…
阅读更多...
文档控件DevExpress Office File API v24.1 - 支持基于Unix系统的打印

文档控件DevExpress Office File API v24.1 - 支持基于Unix系统的打印

DevExpress Office File API是一个专为C#, VB.NET 和 ASP.NET等开发人员提供的非可视化.NET库。有了这个库&#xff0c;不用安装Microsoft Office&#xff0c;就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS, XLSx, DOC, DOCx, RTF, CS…
阅读更多...
Java实战二 添加lombok使用@Data，编写第一个接口-用户注册并使用postman测试

Java实战二 添加lombok使用@Data，编写第一个接口-用户注册并使用postman测试

添加lombok依赖 使用Data注解&#xff0c;省略写getter和setter 创建返回结果Result类 创建三层结构UserController类UserService接口UserServiceImpl实现类UserMapper接口 UserController编写注册接口register UserService定义方法 UserServiceImpl实现方法 UserMapper中编写s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023