前端篇~~~css（1）

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量647 收藏 8
点赞数 17
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61912766/article/details/140186841
版权

各位小主们，大家好呀~~~小编再一次如约而至（虽然不知道这个约是从何开始的(*/ω＼*)）我们今天正式进入css阶段啦，css主要就是给各大标签添加样式，让我们的标签设计的更美观，更好看，好啦，废话留着在中间说，我们直奔主题~~~

2.1 css的使用

css的写法有三种，分别是行内式写法，内联写法和外联写法

1.行内式写法：行内式的写法我们之前在html中接触过，就是在标签上直接写css样式

<div style="width:200px;height: 200px;background-color: yellow;"></div>

这样写呢会有一定的弊端，就是会导致代码混乱，而且css样式不可复用

什么叫做不可复用呢？举个例子来说一下，比如我们有两个div容器，我们要想让它们的宽高就是200*200，那么采用行内式写法我们需要写两遍 分别在每个div上去写

<div style="width:200px;height: 200px;"></div>

<div style="width:200px;height: 200px;"></div>

2.内联写法：在body标签的上面，head标签的里面去写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
       div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

</body>

3.外联式写法：另外新建一个文件，取名为index.css  注意后缀必须是css       绿色这里可替换

                         然后在html文件里添加link链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./index.css">

href后接的是你css文件的本地路径，路径这里不太明白的小主要翻看html中img标签的内容哦，在那里小编有说过的~~~

</head>

然后在index.css文件中写入你所需的样式即可    注意是在你创建的css文件里写样式哦

div{

width:200px；

height:200px;

}

2.2 选择器

接下来呢小编来向各位小主们介绍一下css选择器，这可是个大工程，各位小主要保持耐心哦~~~

2.2.1  标签选择器：通过写标签名来选中标签写样式

例  要给页面里的所有p标签添加背景颜色为蓝色

p{

background-color：blue；

}

2.2.2  id选择器：通过id来选中标签写样式         写法：#id名

例  要给id为tuan的p标签添加背景颜色为蓝色

#tuan{

background-color：blue；

}

<p id="tuan">长相思2要开播啦</p>

这里要注意一点：id名一般不复用，也就是说这个id名具有唯一性  一个id名仅仅针对于一个标签，一般不会多个标签对应同一个id

我们来举个例子具体说一说

<p id="tuan">长相思2要开播啦</p>

<p id="tuan">期待已久的小夭要和大家见面啦</p>

<p id="tuan">让我们共同期待长相思2的开播吧</p>

一般来说，我们并不像上面这么使用id名，我们三个p标签会使用三个id名，但是如果各位小主就想使用同一个名称，我们采用的是class类名，接下来我们就来隆重推出类选择器

2.2.3  类选择器：通过class来选中标签写样式       写法：.类名

例  要给lass为tuan的p标签添加字体颜色为黑色

.tuan{

color:black;

}

<p class="tuan">长相思2要开播啦</p>

<p class="tuan">期待已久的小夭要和大家见面啦</p>

<p class="tuan">让我们共同期待长相思2的开播吧</p>

这里呢也要强调一点：class名字可以复用，并且同一个标签可以添加多个类名，类名与类名之间用空格分隔开

<p class="tuan mei">庆余年3何时播出</p>

2.2.4  通配符选择器：通配符选择器一般放在最上方，用来清除浏览器自带的默认样式，我们在设计页面时都会先清空自带的浏览器样式，所以在写页面时只需要把通配符选择器固定不变的写在最上方就好啦

*{
            margin: 0;             
            padding: 0;
   }

这里面的margin指的是外边距，padding指的是内边距，各位小主不必捉急，我们会说到内外边距的，稍安勿躁

2.2.5  子代后代选择器

子代选择器  采用的是>来表示           后代选择器采用的是空格来表示

在这里还要说明一点：后代选择器中包含子代选择器  后代选中的样式，在子代中也会适用

 我们来看一个例子，看看样式到底加在了谁的头上 罒ω罒

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
        .one>.two{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
        .one>p{
			background-color: red;
		}
        .one p{
			color: blue;
		}
    </style>
</head>
<body>
 <div class="one">
	<p>111</p>
	<div class="two">
	       <p>2222</p>
	 </div>
	 <div class="three">
	   <p>333333333</p>
	 </div>
 </div>
</body>
</html>

.one>p   指的是one下面的子代p标签，one是父亲，p标签是儿子，所以要找儿子而不是孙子或是曾孙子，这里面只有111是儿子，所以111内容的p标签背景颜色变成红色

.one p    指的是one下面的后代p标签，找的是one下面的儿子，孙子，曾孙子等等，只要是one下面的p标签，字体 颜色都会变成蓝色

我们来看一下效果吧，和各位小主想的一不一样啊？

这里要给各位小主一个温馨提示，我们在设计页面时，是子代就用子代选择器，不要用后代选择器，避免产生不必要的麻烦 

2.2.6  交集并集选择器

交集选择器：选择器紧贴，必须同时满足选择器的条件才会被选中

并集选择器：选择器之间用逗号分隔，满足其中一个选择器的条件就会被选中

我们先来看一下交集选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
        div.box{
			color: pink;

		}
		p.box{
			font-size: 30px;
		}
</style>
</head>
<body>
    <div class="one">聂风</div>
	<div class="two">帝弑天</div>
	<div>1111</div>
	<div>222222</div>
	<div class="box">步惊云</div>
	<p class="box">断浪</p>
</body>
</html>

其中的div.box选中的是既是div又是类名为box的标签

我们来看一下结果，和各位小主思考的可有出入？

 接下来，我们来看一下并集选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
        .one,.two{
			width: 300px;
			height: 300px;
			background-color: green;
			color: red;

		}
	</style>
</head>
<body>
	<div class="one">聂风</div>
	<div class="two">帝弑天</div>
	

</body>
</html>

其中.one,.two 选中的是带有one类名的标签和带有two类名的标签

我们来看一下结果，和各位小主想的一不一致啊？

 

2.2.7  序选择器

我们先来一个小例子，在小例子中去看一看序选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
   <ul>
		<li>1.海贼王</li>
		<li>2.火隐忍者</li>
		<li>3.死神</li>
		<li>4.小猪佩奇</li>
  </ul>

</body>
</html>

假如我们想让海贼王的字体变成绿色，就要使用到序选择器

查找ul中第一个元素并且是li标签

ul li:first-child{
             color: green;

 }

选中最后一个

ul li:last-child{
            color: pink;
        }

或者我们可以在括号里填写第几个，从1开始

ul li:nth-child(3){
            font-weight: bold;

} 

上面这个就是选中ul下面的第三个li标签，把字体加粗

选中 所有偶数位的
        ul li:nth-child(even){
            background-color: yellow;

        }

 选中所有的奇数位
        ul li:nth-child(odd){
            background-color: skyblue;
        }

！！！注意注意！！！

各位小主在这里一定要注意，我们的顺序千万不能乱，我们是先寻找ul下的第x个标签，判断这个标签是不是li标签，如果是则添加样式，如果不是则不添加样式（当然啦，ul下面必须是li标签，这么说怕各位小主不能get其中真意，我们来举个例子看一下）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>	
	</title>
	<style type="text/css">
    div p:nth-child(4){
			color: blue;
		}
	</style>
</head>
<body>
	 <div>
		<p>路飞</p>
		<span>贝利</span>
		<div>
			<p>红发</p>
			<p>黑胡子</p>
			<p>大妈</p>
			<p>凯多</p>
		</div>
		<p>索隆</p>
		<p>山治</p>
		<p>乔巴</p>
		<p>娜美</p>
	</div>
</body>
</html>

各位小主看一下，我们到底哪个字变成了蓝色呢？

为什么是凯多和索隆呢？各位小主请听我细细道来

div p:nth-child(4)    这代表了什么呢？它表示先查找div下面的第四个子元素 ，如果是p标签就添加样式，如果不是p标签，就不添加样式

再次和各位小主强调顺序顺序！！！是先找到第四个子元素再看是不是p标签，而不是找div下面的第四个p标签，这里非常重要！！！

上面的例子我们可以看到有两个div标签，我们先来看第一个div标签，第一个div下面的子元素都已经标记是成绿色啦，那么第一个div下面的第四个标签正好是p标签，所以索隆变成了蓝色，我们再来看第二个div标签，该背景色标记成灰色，第二个div下面的子元素都已经标记成了蓝色，我们来找第二个div下面的第四个子元素，一看正好是p标签，所以凯多变成了蓝色

<div>
        <p>路飞</p>     第一个标签
        <span>贝利</span>  第二个标签
        <div>         第三个标签
            <p>红发</p>   1标签
            <p>黑胡子</p>  2标签
            <p>大妈</p>   3标签
            <p>凯多</p>   4标签
        </div>
        <p>索隆</p>             第四个标签
        <p>山治</p>
        <p>乔巴</p>
        <p>娜美</p>
    </div> 

说到这里，各位小主是明白了还是糊涂啦？O(∩_∩)O哈哈~

我们再来做个小练习，看看各位小主功夫到不到家(#^.^#)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
		
	</title>
	<style type="text/css">
    div span:nth-child(2){
			color: yellow;
		}
	</style>
</head>
<body>
	 <div>
		<span>路飞</span>
		<div>
			<p>红发</p>
			<p>黑胡子</p>
			<p>大妈</p>
			<p>凯多</p>
		</div>
		<span>贝利</span>
		<div>
		    <p>索隆</p>
		    <span>山治</span>
	    </div>
	</div>
</body>
</html>

各位小主看一下，到底哪一个span标签颜色变成黄色呢？我们下期揭晓答案哦~~各位小主也可以在评论区给出自己的答案哦~~~ 

2.2.8  兄弟选择器

兄弟选择器用加号来连接哦，我们来举个小例子看一下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div + p{
			font-size: 30px;

		}
	</style>
</head>
<body>
	<div>偷个懒</div>
	<p>养养眼</p>
	<p>呵呵呵</p>

</body>
</html>

div+p   查找div标签的下一个兄弟p标签，把这个标签的字体变成30px

各位小主随小编来看一下效果吧

2.2.9  伪类选择器     伪类选择器都有：

小编在这里给各位小主介绍两种伪类选择器，一种是:active，一种是:hover

1   :active  按下时开始加载css，松开时还原

2   :hover   鼠标移入到指定区域时加载css样式，其中hover效果可以作用于自身，作用于后代，作用于下一个兄弟

小编在这里给各位小主分别演示一下，先演示:active效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
	</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 100px;
			background-color: red;
		}
        .box:active{
			background-color: pink;
		}
    </style>
</head>
<body>

<div class="box">
	<p>小猪佩奇身上纹，大家都是社会人</p>
	<div>你在他乡还好吗</div>
</div>
<p>中国好声音</p>
</body>
</html>

在鼠标未按下时，效果如下

当鼠标按下时，效果如下

接着小编为各位小主演示一下hover效果

1）hover作用于自身

.box:hover{
            color: green;
} 

当鼠标移入到box时，字体颜色变成绿色

2）hover作用于后代

box:hover div{
        background-color: skyblue;
 }

鼠标移入到box 时 给后代的元素 div 添加样式，使其后代的div背景颜色变成天蓝色

3）hover作用于下一个兄弟

p:hover+div{
        font-size: 30px;
 }

鼠标移入到p标签时，给p标签的下一个兄弟div添加样式，使其字体大小为30px

但是这里有个小bug 就是鼠标无法移入到下一个兄弟上，一旦移入，样式丢失，所以我们一般用hover效果只作用于自身和后代，很少作用于下一个兄弟

2.3 权重问题

！！！大重点来喽！！！

 关于各种选择器的权重有所不同，不同的选择器权利大小也有所不同

同种选择器看顺序，不同选择器看权重

权重从大到小的分布是！important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

其中！important权重最高，可以将一些权重低的选择器中的某些属性提到最高，使其不被覆盖，这么说可能各位小主会觉得有些晕，我们来举个例子来说一下

.box{   类选择器

background-color:blue;

}

#gei{   标签选择器

background-color:black;

}

<div class="box" id="gei"></div>

各位小主看了上面的权重分布应该了解到id选择器的权重高于类选择器的权重，所以此时的div背景颜色是黑色，但我们就想让其背景颜色是蓝色，我们就要给其提权重

.box{   

background-color:blue！important;

}

小编再额外地多说一句，我们依然以上面的例子为例，调换类选择器和标签选择器的顺序，那么div背景颜色是否会发生改变呢？各位小主实验一下吧

#gei{   标签选择器

background-color:black;

}

.box{   类选择器

background-color:blue;

}

<div class="box" id="gei"></div>

各位小主经过实验会发现，div的背景颜色仍然是黑色，这就是小编上面所说的，不同的选择器看权重，不需要管顺序，无论谁前谁后

接下来小编再给各位小主拓展一下权重计算问题，我们再相应的做几个小练习，希望这样能让各位小主们融会贯通~~~

权重计算

秘诀：选择器作用的范围越广，其相对应的权重越小

行内样式权重值1000

id选择器权重值100

类选择器权重值10

标签选择器权重值1

通配符选择器权重值0

接下来小编来带各位小主们看一看交集选择器和并集选择器的权重问题

1>交集选择器权重问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
        div.box{
			color: pink;

		}
        .box{
			color: black;
		}
</style>
</head>
<body>
<div class="box">步惊云</div>
	<p class="box">断浪</p>

</body>
</html>

各位小主可以先猜猜看，到底步惊云的字体颜色是什么色呢？

 

各位小主们猜的对不对啊~~~颜色是粉色哦，而不是黑色

为什么会这样呢？ 请允许小编我细细道来

div.box 是交集选择器，它的权重是由两个选择器类型权重相加得来的，这就是关键所在！！！

div是标签选择器，它的权重为1，.box是类选择器，它的权重值是10

所以div.box的权重值是11，比.box的权重值大，所以人家是老大哥，当然要听人家老大哥的话啦，因此步惊云的颜色是粉色，而不是黑色

2>并集选择器权重问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
        .one,.two{
			width: 300px;
			height: 300px;
			background-color: green;
			color: red;

		}
		.two{
			color: blue;
		}


	</style>
</head>
<body>
	<div class="one">聂风</div>
	<div class="two">帝弑天</div>
</body>
</html>

各位小主依然盲猜一下，我们两个div的样式是什么样子的呢？

各位小主有没有惊讶到？别着急，请让小编娓娓道来(#^.^#)

.one,.two是并集选择器，它的权重值是其中一个选择器的权重值，由于.one和.two都是类选择器，其权重值都为10，所以.one,.two的权重值为10

所以当.one,.two与.two一起出现时，这个时候我们就要看出场的顺序啦，这就是上面小编说的权重值相同时看顺序，由于.two在后，所以.two里面的属性会覆盖掉.one,.two里面相对应的属性，覆盖掉该覆盖的，剩下的继承，这就是各位小主看到效果啦~~~

接下来呢，我们来做个权重的小练习，看看各位小主有没有把权重搞明白罒ω罒

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
        .one,.two{
			
			background-color: green;
			color: red;


		}		
		.one>span{
			color: blue;
			font-size: 12px;
		}
		.one>span:first-child{
			color: black;
		}
		.one>p,p{
			background-color: orange;
		}
		p{
			background-color: skyblue;
		}
		div{
			font-size: 33px;
		}


	</style>
</head>
<body>
	<div >聂风</div>
	<div class="one">
		<span>步惊云</span>
		<span>断浪</span>
		<p>22222</p>
	</div>
	<p>1111</p>
	<div class="two">帝弑天</div>
</body>
</html>

请各位小主来思考一下，最后的展现给大众的到底是什么样式的？我们下期来说一说哦~~

好啦，本期内容到这里就结束啦，今日的内容有些小多，各位小主要耐心的看完哦，也要把小编今日所说的内容充分的理解消化掉，尤其是权重问题，这里很重要，如果权重搞不明白，当我们写网站时就会出现一些样式上的bug，所以这里一定要吃透哦~~~

各位小主们，我们下期见喽！！！

小小前端工程师
关注
【JavaEE初阶】前端篇：CSS（下篇）
哎呀是小张啊 的博客
09-28 1517
这篇博客主要介绍了关于 CSS 的具体属性，包括：字体属性，文本属性，背景属性，圆角矩形，元素的显示模式，盒模型，弹性布局 等，内容不难，但是挺杂的，希望老铁们可以认真的看完这篇博客，绝对是收获满满~
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
前端篇~~~css（3）
qq_61912766的博客
07-11 1544
各位小主来猜猜看，我们的one盒子和two盒子之间的间距应该是多少呢？如果有的小主是这么想的，那么奇迹来喽。各位小主可以看到，我们设置的宽高200*200其实并不是我们box的宽高，而是我们内容的宽高，而我们真正box的宽高是 内容（200）+padding（10）+border（2.667），我们把这样的盒子叫做标准盒模型。各位小主们，很抱歉，小编这次报道迟到了，7月8号我大学舍友来公司报道啦，小编非常开心，舍命陪君子，所以耽误了更新进度，各位小主请见谅~接下来，我们书接上回，继续我们css的征程。
前端篇~~~css（5）
qq_61912766的博客
07-25 1413
说到这里，我们本期的内容就要接近尾声啦~~~小编给各位小主留一些小小的练习题，各位小主可以先尝试做一做，小编下一期再和各位小主分享哦(*^▽^*)，下一期我们进行一下css的收尾工作，进入css3倒计时啦~此三行为关键代码，其中transparent是透明，我们想要角的尖朝向哪里，就把该方位设置成相应的颜色，其他方向设置为透明属性，反之亦然。我们把box作为相对定位，content为绝对定位，我们的角也是绝对定位，先调整content的位置，调整好之后，再调整角的定位。即使元素不可见，还是会占据空间。
前端学习思维导图总结~~~CSS篇
m0_61589682的博客
04-02 443
后端学习小白学期过程中的前端基础学习 总结分享 思维导图
前端代码注释风格 - CSS篇
yangguangxiadewo的专栏
09-02 1329
本文基于《阿里巴巴CSS编程规约》、stylelint rules进行编写，涉及预编译语言（Sass、Less）的编码风格和最佳实践。
web前端——css（一篇教会网页制作）
2301_78341216的博客
06-28 1861
web前端，css
智能编程，一触即发：使用AIGC优化CSS——提升前端开发效率与质量
热门推荐
程序边界
07-25 1万+
利用关键帧创建动画使用网格和Flexbox等布局技巧对表单元素进行样式化，包括单选按钮嵌入字体以及与排版相关的样式利用伪元素和媒体查询进行条件样式化Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。Michael Gearon是一位用户体验设计师和前端开发者，曾与许多知名品牌合作过。本书通过12个项目逐步引导设计师和开发者学习CSS。
“前端兼容——CSS篇”（进阶版）
qq_34419312的博客
10-29 4316
“前端兼容——CSS篇”（进阶版）
前端基础之CSS扫盲
trong_ 的烂笔头
02-27 7465
光使用HTML来写一个前端页面的话其实只是写了一个大体的框架, 整体的页面并不工整美观, 而CSS可以在HTML的基础之上将页面优化的非常好看, HTML只是描述了网页的结构和有什么内容(也就是让网页有了 “骨”), 而CSS可以自由的设置网页的布局和样式(包括大小/位置/字体/颜色/背景等), 可以让网页的内容充实起来(让网页有了 “皮和肉”), CSS也叫层叠样式表, 一个元素可以运用多组样式, 有多层叠加的效果.
【前端基础】CSS介绍|CSS选择器|常用CSS
qq_73017178的博客
06-05 1626
本篇文章主要介绍了CSS的作用，CSS选择器的介绍，常用的CSS：color，front-size，border，width/height，padding，外边距
前端面试题之CSS篇
01-08
本文总结了前端面试题中，关于css部分 ，掌握这些 ，对你面试会有很大帮助。关于JS，浏览器，框架等后续会有更新呦，需要的小可爱可以关注一下，真的全是干货，不要错过哦！:heart_suit::heart_suit::heart_suit: ...
前端面试题（HTML和CSS篇）
01-08
前端面试题(HTML和CSS篇) 1. 常用的几种浏览器的内核。并说说你对他们的理解。 IE Chrome FireFox Safari Opera Trident 内核 以前是Webkit内核，现在是Blink内核 Gecko内核 Webkit内核 最初是自己的Presto...
python 零基础学习篇web前端开发基础css基础1 css的介绍 .mp4
04-21
python 零基础学习篇
「2021」高频前端面试题汇总之CSS篇.pdf
12-14
「2021」高频前端面试题汇总之CSS篇
前端 Flex 布局语法详解
ning的博客
11-10 1089
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 436
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 932
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 943
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
前端面试CSS精华：基础与CSS3特性概览
前端面试之CSS总结是一篇关于面试准备中CSS知识点的概述文章。作者针对前端面试中可能会被问到的CSS基础和CSS3新特性的理解进行了整理。CSS可以类比为绘画，它涉及的内容包括元素的定位、盒模型、颜色、背景和文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值