前端学习系列之CSS

news2024/11/16 23:57:28

目录

CSS

简介

发展史

优势

基本语法

引用方式

内部样式

行内样式

外部样式

选择器

id选择器

class选择器

标签选择器

子代选择器

后代选择器

相邻兄弟选择器

后续兄弟选择器

交集选择器

并集选择器

通配符选择器

伪类选择器

属性选择器

CSS基本属性

优点

字体属性

文本属性

背景属性

边框属性

列表属性

鼠标属性

盒子

概念

格式

边框

外边距

圆角边框

阴影

浮动

标准文档流

display

float

overflow

定位

相对定位

绝对定位

z-index

CSS

简介

        css：层叠样式表，是种格式化网页的标准方式，用于控制设置网页的样式，并且允许css样式信息与网页内容分离的一种技术

发展史

优势

1.格式和结构分离：有利于格式的重用以及网页的修改与维护

2.精确控制页面布局：对网页实现更加精确地控制，如网页的布局、字体、颜色、背景等，样式丰富

3.网页结构表现统一，可以实现复用，实现多个网页同事更新

基本语法

格式：

h1{

        color:blue;

}

CSS的定义是由三部分组成的，包括选择符、属性、属性值

选择符：要修饰的对象

属性：修饰对象的哪一个属性（样式）

属性值：样式的取值

引用方式

css共有三种引用方式：内部样式、行内样式、外部样式；

优先级：采取就近原则：行内样式>内部样式>外部样式

内部样式

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>导入方式</title>

    <!-- 内部样式 -->
    <style>
      h1 {
        color: black;
      }
    </style>

  </head>
  <body>
    <h1>标签</h1>
  </body>
</html>

行内样式

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>导入方式</title>
  </head>
  <body>
    <!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
    <h1 style="color: aqua">标签</h1>
  </body>
</html>

外部样式

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>导入方式</title>

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">

    <!-- 导入式 -->
    <style>
      @import url("css/style.css");
    <style>

  </head>
  <body>
    <h1>标签</h1>
  </body>
</html>

选择器

作用：选择页面上的某一个或某一类元素

id选择器

        id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。

<p id="part">段落</p>

#part{

        color: red;

}

class选择器

class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。

<p class="part">段落1</p>

<p class="part">段落2</p>

.part{

        color: red;

}

标签选择器

除了使用id选择器和class选择器，我们也可以直接使用标签选择器。

<p>段落</p>

<p>段落</p>

p{

        color: red;

}

子代选择器

子代选择器可以选择当前元素的所有子元素。定义的时候用 “> ”隔开。

<div>

        <p>段落</p>

</div>

div>p{

        color: red;

}

后代选择器

        标签元素除了并列书写还可以嵌套书写，后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用“空格 ”隔开。

<p class="part">

        <a href=""></a>

</p>

.part a{

        color: red;

}

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。定义的时候用 “+ ”隔开。

<div>

        <p></p>

</div>

<p></p>

div + p{

        color: red;

}

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用“~ ”隔开。

<div>

        <p></p>

</div>

<p></p>

div ~ p{

        color: red;

}

交集选择器

选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。定义的时候用标签名.ID名/类名 。

<p class="part"></p>

<h1 class="part"></h1>

p .part{

        color: red;

}

并集选择器

多种元素共享某种属性，这时候就可以使用并集选择器。定义的时候用“逗号”隔开。

<p></p>

<h1></h1>

<a class="like"></a>

p h1 .like{

        color: red;

}

通配符选择器

通配符选择器可以匹配任何标签，我们常用于统一页面样式。

<p></p>

<h1></h1>

<a class="like"></a>

*{

        color: red;

}

伪类选择器

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

有四种状态：

        :link 未访问的链接

        :visited 已访问的链接

        :hover 鼠标悬浮到连接上，即移动在连接上

        :active 选定的链接，被激活

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

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

<input type="text" value="文本框" />

<input type="button" value="按钮" />

input[type="text"]{

        width: 150px;

}

input[type="button"]{

        width: 150px;

}

CSS基本属性

优点

1.有效的传递页面信息

2.美化网页

3.凸显页面的主题

4.提高用户体验

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        .title1{
            font-size: 50px;
            background: aquamarine;
        }
    </style>

</head>
<body>

学习的<span class="title1">人最帅</span>

</body>
</html>

字体属性

css字体属性指的是设置字体相关的样式。

字体属性及说明
属性说明
font简写属性，把所有针对字体的属性设置在一个声明中
font-size设置字体的尺寸
font-style设置字体的风格；Normal：正常、italic：斜体、oblique：倾斜
font-weight设置字体的粗细；Normal：正常、lighter：细体、bold：粗体、bolder：特粗体
font-family设置字体；指定多种字体时用逗号分开

文本属性

文本属性包括阴影效果、大小写、文本缩进、对齐方式等等。

文本属性及说明
属性说明
color设置文本颜色
direction设置文本方向
letter-spacing设置字符间距
line-height设置行高
text-align设置文本内容的对其方式
text-decoration向文本添加修饰
text-overflow设置对象内溢出的文本处理方式
text-indent设置首行文本的缩进
text-transform控制文本转换
text-shadow设置文本阴影
unicode-bidi设置文本方向
word-spacing设置字间距
white-space设置元素中空白的处理方式

背景属性

CSS背景属性主要用于设置对象的背景颜色、背景图片、背景图片的重复性、背景图片的位置等。

常见的背景属性及说明
属性说明
background简写属性
background-attachment设置背景图像是否固定或者随着页面其余部分滚动
background-color设置元素的背景颜色
background-image将图像设置为背景
background-position设置背景图像的起始位置
background-repeat设置背景图像是否重复

background-clip属性规定背景的绘制区域，该属性是CSS3的属性，主要用于设置背景图像的裁剪区域，其基本语法格式是:

background-clip ： border-box|padding-box|content-box;

边框属性

CSS边框属性可以设置对象边框的颜色、样式以及宽度。使用对象的边框属性时必须先设定对象的高度及宽度。语法格式如下：

border：边框宽度 边框样式 边框颜色

边框样式的取值及说明
边框样式说明边框样式说明
none无边框ridge菱型边框
double双线边框dashed虚线边框
hidden隐藏边框solide实线边框
groove3D凹槽边框inset3D内嵌边框
dotted点线边框outset3D凸边框

注意：border-width属性可以单独设置边框宽度；border-style属性可以单独设边框样式；border-color属性可以单独设置边框颜色。

列表属性

常用的列表属性是list-style-type 、list-style-image、 list-style-position以及list-style。

属性含义说明
list-style-type设置列表前的标记
list-style-image将图像作为列表前的标记
list-style-position设置标记的位置取值：outside(默认)、inside
list-style简写

list-style-type属性用于设置列表项标记的类型，主要有disp (实心圆)、circle (空心圆)、square (实心方块)、none (不使用项目符号) 。

list-styl-image属性用于设置使用什么图像作为列表符号。

list-style-position属t用来指定列表符号的显示位置，当值为outside时， 表示将列表符号放在文本块之外，该值为默认值，当值为inside时，表示将列表符号放在文本块之内。

鼠标属性

CSS中可以通过鼠标指针的cursor属性设置鼠标指针的显示图形，语法格式如下：

cursor：鼠标指针样式

cursor属性取值说明
crosshair十字准线s-resize向下改变大小
pointer | hand手型e-resize向右改变大小
wait表w-resize向左改变大小
help问号ne-resize向上右改变大小
no-drop无法释放nw-resize向上左改变大小
text文字或编辑se-resize向下右改变大小
move移动sw-resize向下左改变大小
n-resize向上改变大小

盒子

概念

CSS盒子模型是一种在网页设计中用于描述元素布局的概念模型。在CSS中，每个元素都被视为一个矩形盒子，这个盒子包含了该元素的内容、内边距（padding）、边框（border）和外边距（margin）。

  1. 内容（content）：这是盒子里装的东西，可以是文本、图像或者其他元素。内容的尺寸可以通过height和width属性来控制。
  2. 内边距（padding）：这是内容与边框之间的空间。内边距的大小可以通过padding属性来控制。
  3. 边框（border）：这是围绕内容和内边距的一条线。边框的样式、宽度和颜色可以通过border属性来控制。
  4. 外边距（margin）：这是盒子与其他元素之间的空间。外边距的大小可以通过margin属性来控制。

在CSS中，可以通过设置元素的width和height属性来控制盒子的尺寸。但是需要注意的是，增加内边距和边框的宽度会增加盒子的尺寸，但不会影响内容区域的尺寸。而增加外边距则会增加盒子与其他元素之间的距离，但不会影响盒子的尺寸。

格式

<div></div>

边框

格式：

border：粗细 样式 颜色

外边距

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化

圆角边框

使用：border-radius

<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*一个border-radius只管一个圆的1/4*/
            border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,顺时针方向*/
        }
</style>

阴影

box-shadow: 10px 10px 1px black;

浮动

标准文档流

块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong

注： 行内元素可以包含在块级元素中，反之则不可以

display

display属性定义了一个元素应如何在页面上显示

常用值：

  1. block：将元素显示为块级元素。块级元素会在其前后创建新行，并且占据整个容器的宽度。例如，<div>、<p>、<h1>等元素的默认display属性值为block。
  2. inline：将元素显示为内联元素。内联元素不会创建新行，而是在当前行内显示。例如，<span>、<a>等元素的默认display属性值为inline。
  3. none：将元素隐藏，不显示。
  4. inline-block：将元素显示为内联块级元素。内联块级元素可以在当前行内显示，并且可以设置宽度和高度。
  5. flex：将元素显示为弹性盒模型。弹性盒模型是一种用于创建复杂的布局和对齐元素的CSS技术。
  6. grid：将元素显示为网格容器。网格容器是一种用于创建二维布局的CSS技术。

这也是一种实现行内元素排列的方式，但是我们很多情况用float

float

在CSS中，float属性用于将元素放置在其容器的左侧或右侧，使文本和内联元素环绕它。这个属性常用于文字环绕图片等场景。

float属性有三个值：

  1. left：将元素向左浮动。
  2. right：将元素向右浮动。
  3. none：默认值，元素不浮动，会停在原处

注意：

        1.浮动元素会脱离正常的文档流，不会影响到其它元素的布局。

        2.浮动元素之后的元素会环绕浮动元素。

        3.如果容器内只有浮动元素，那么容器将不会显示，因为浮动元素会脱离文档流。

overflow

overflow属性用于指定当内容溢出元素框时该如何处理。

属性有三个值：

  1. visible：默认值，内容会溢出元素框，并在页面中显示出来。
  2. hidden：内容不会溢出元素框，溢出的内容会被裁剪，并且其余内容是不可见的。
  3. auto：浏览器会自动判断是否需要裁剪内容，如果需要，则裁剪内容并显示滚动条。

格式：

div { overflow: hidden; }

使用overflow属性可以控制页面元素的显示效果，从而实现各种不同的布局效果。

定位

相对定位

        相对定位是一种布局策略，它相对于元素在正常文档流中的位置进行定位。使用相对定位属性可以让元素相对于其原始位置进行平移、旋转等操作，而不会影响到其他元素的布局

格式：

//一个元素向右平移100像素

div {

        position: relative;

        left: 100px;

}

如：

top:-20px;/*向上偏移20px*/
left:20px;/*向右偏移20px*/
bottom:10px;/*向上偏移10px*/
right:20px;/*向左偏移20px*/

通过设置元素的position属性为relative来实现的

控制元素位置属性：

        top

        right

        bottom

        left

        相对定位不会改变元素在正常文档流中的位置，它只是在视觉上移动了元素。因此，使用相对定位不会影响到其他元素的布局。        

绝对定位

        绝对定位是一种布局策略，它可以使一个元素脱离正常的文档流，并相对于其包含块进行定位。使用绝对定位属性可以让元素在页面中精确定位，并且不会影响到其他元素的布局。

通过设置元素的position属性为absolute来实现的。

控制元素位置属性：

        top

        right

        bottom

        left

格式：

//将一个元素绝对定位到页面的右下角：

div {

        position: absolute;

        bottom: 0;

        right: 0;

}

        绝对定位会使元素脱离正常的文档流，并且会覆盖其他元素的内容。因此，在使用绝对定位时需要谨慎考虑其布局效果，并与其他布局技术结合使用

z-index

        z-index属性在CSS中用于确定元素的堆叠顺序。z-index的值是一个整数，表示元素在Z轴上的位置。一个较大的z-index值意味着元素在叠层顺序中会更靠近顶部。

        需要注意的是，z-index属性只对设置了定位（position:relative/absolute/fixed/sticky）的元素有效。默认值为auto，如果z-index设置为auto，则根据元素的定位类型（static/relative/absolute/fixed/sticky），其层叠顺序会受到不同的影响。

        此外，z-index也支持负值，但要注意的是，如果定位元素有发生嵌套，那么负值的z-index可能不会按照预期工作。在CSS2.1时代，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用。

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

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

相关文章

pycharm中绘制一个3D曲线

pycharm中绘制一个3D曲线

import numpy as np import matplotlib.pyplot as plt # 中文的设置 import matplotlib as mp1 from mpl_toolkits.mplot3d import Axes3D mp1.rcParams["font.sans-serif"] ["kaiti"] mp1.rcParams["axes.unicode_minus"] False # 数据创建 X…
阅读更多...
Python过滤掉特定区域内的矩形框

Python过滤掉特定区域内的矩形框

Python过滤掉特定区域内的矩形框 前言前提条件相关介绍实验环境过滤掉特定区域内的矩形框方法一&#xff1a;直接法&#xff08;for循环遍历&#xff09;代码实现输出结果 方法二&#xff1a;列表推导式代码实现输出结果 前言 由于本人水平有限&#xff0c;难免出现错漏&#x…
阅读更多...
51k+ Star！动画图解、一键运行的数据结构与算法教程！

51k+ Star！动画图解、一键运行的数据结构与算法教程！

大家好&#xff0c;我是 Java陈序员。 我们都知道&#xff0c;《数据结构与算法》 —— 是程序员的必修课。 无论是使用什么编程语音&#xff0c;亦或者是前后端开发&#xff0c;都需要修好《数据结构与算法》这门课&#xff01; 在各个互联网大产的面试中&#xff0c;对数据…
阅读更多...
RocketMQ事务消息源码解析

RocketMQ事务消息源码解析

RocketMQ提供了事务消息的功能&#xff0c;采用2PC(两阶段协议)补偿机制&#xff08;事务回查&#xff09;的分布式事务功能&#xff0c;通过这种方式能达到分布式事务的最终一致。 一. 概述 半事务消息&#xff1a;指的是发送至broker但是还没被commit的消息&#xff0c;在半…
阅读更多...
【Linux】24、文件系统、磁盘 IO

【Linux】24、文件系统、磁盘 IO

文章目录 一、文件系统1.1 索引节点和目录项1.2 虚拟文件系统 VFS1.3 文件系统 I/O1.5 性能观测1.5.1 容量1.5.2 缓存1.5.3 find 命令的缓存 二、磁盘 I/O2.1 通用块层2.2 I/O 栈2.3 磁盘性能指标2.3.1 磁盘 I/O 观测2.3.2 进程 I/O 观测 2.4 案例&#xff1a;找到打大量日志的…
阅读更多...
UiPath学习笔记

UiPath学习笔记

文章目录 前言RPA介绍UiPath下载安装组件内容 前言 最近有一个项目的采集调研涉及到了客户端的采集&#xff0c;就取了解了一下RPA和UIPATH&#xff0c;记录一下 RPA介绍 RPA&#xff08;Robotic Process Automation&#xff1a;机器人处理自动化&#xff09;&#xff0c;是…
阅读更多...
聊聊什么是IO流

聊聊什么是IO流

目录 Java IOIO 基础Java IO 流了解吗&#xff1f; IO 设计模式1、装饰器模式2、适配器模式适配器模式和装饰器模式有什么区别呢&#xff1f;3、工厂模式4、观察者模式 IO 模型有哪些常见的 IO 模型&#xff1f;BIO(Blocking I/O)NIO (Non-blocking/New I/O)AIO (Asynchronous …
阅读更多...
Java包（package）

Java包（package）

1、概念 为了更好的组织类&#xff0c;用于区别类名的命名空间&#xff0c;其实就是基于工程的一个文件路径&#xff0c;如&#xff1a; 2、作用 三个作用&#xff1a; 1&#xff09;区分相同名称的类。 2&#xff09;能够较好地管理大量的类。 3&#xff09;控制访问范围。 在…
阅读更多...
网站实现验证码功能

网站实现验证码功能

一、验证码 一般来说&#xff0c;网站在登录的时候会生成一个验证码来验证是否是人类还是爬虫&#xff0c;还有一个好处是防止恶意人士对密码进行爆破。 二、流程图 三、详细说明 3.1 后端生成验证码 Override public Result<Map<String, String>> getVerifica…
阅读更多...
国内哪个超声波清洗机品牌比较好？质量好超声波清洗机总结

国内哪个超声波清洗机品牌比较好？质量好超声波清洗机总结

近年来超声波清洗机可以说是非常火爆&#xff0c;可以清洗化妆刷、眼镜、牙套等等一些小物件&#xff0c;大物件物品可以入手大型超声波清洗机&#xff0c;总之现在超声波清洗机已经衍生到可以在家使用&#xff0c;不再是在眼镜店看到它的身影或者是一些工业领域上&#xff0c;…
阅读更多...
第二节：服务拆分（案例）

第二节：服务拆分（案例）

一、服务拆分注意事项 1.1 拆分原则 每个微服务&#xff0c;不要重复开发相同业务&#xff08;例如在单体项目中用到了一个查询&#xff0c;这个查询功能能够查询出订单信息、商品信息、用户信息&#xff0c;那么在拆分微服务时就不要将其写在一起了&#xff0c;订单的微服务只…
阅读更多...
1、RocketMQ源码分析（一）

1、RocketMQ源码分析（一）

RocketMQ简单介绍 RabbitMQ的底层是使用erlang语言编写的&#xff0c;不便分析其底层&#xff0c;RocketMQ作为原阿里下经历阿里双十一严格考验的中间件&#xff0c;同时也是使用我们熟悉的java语言编写&#xff0c;我们先把入门的基础必备了解透&#xff0c;然后在去分析源码…
阅读更多...
基于WebSocket实现客户聊天室

基于WebSocket实现客户聊天室

目录 一、实现聊天室原理 二、聊天室前端代码 三、聊天室后端代码&#xff08;重点&#xff09; 四、聊天室实现效果展示 一、实现聊天室原理 1.1 介绍websocket协议 websocket是一种通信协议&#xff0c;再通过websocket实现弹幕聊天室时候&#xff0c;实现原理是客户端首…
阅读更多...
使用K-means把人群分类

使用K-means把人群分类

1.前言 K-mean 是无监督的聚类算法 算法分类&#xff1a; 2.实现步骤 1.数据加工&#xff1a;把数据转为全数字&#xff08;比如性别男女&#xff0c;转换为0 和 1&#xff09; 2.模型训练 fit 3.预测 3.代码 原数据类似这样(source&#xff1a;http:img-blog.csdnimg.cn…
阅读更多...
vmware 安装 AlmaLinux OS 8.6

vmware 安装 AlmaLinux OS 8.6

选择系统镜像 选择镜像 选择安装位置和修改名称 可以自定义硬件&#xff0c;也可以不选择&#xff0c;后面可以再设置 自定义硬件可以设置内存和cpu等信息 安装虚拟机系统 密码如果简单的话需要点击两次done 才能保存
阅读更多...
集成开发环境PyCharm的使用【侯小啾python领航计划系列（三）】

集成开发环境PyCharm的使用【侯小啾python领航计划系列（三）】

集成开发环境 PyCharm 的使用【侯小啾python领航计划系列（三）】 大家好，我是博主侯小啾， 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…
阅读更多...
Stable Diffusion AI绘画系列【10】:AI眼中的美丽清晨

Stable Diffusion AI绘画系列【10】:AI眼中的美丽清晨

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
阅读更多...
【数电笔记】卡诺图绘制（逻辑函数的卡诺图化简）

【数电笔记】卡诺图绘制（逻辑函数的卡诺图化简）

目录 说明&#xff1a; 最小项卡诺图的组成 1. 相邻最小项 2. 卡诺图的组成 2.1 二变量卡诺图 2.2 三表变量卡诺图 2.3 四变量卡诺图 3. 卡诺图中的相邻项&#xff08;几何相邻&#xff09; 说明&#xff1a; 笔记配套视频来源&#xff1a;B站 最小项卡诺图的组成 1. …
阅读更多...
算法通关村第十四关-青铜挑战认识堆

算法通关村第十四关-青铜挑战认识堆

大家好我是苏麟 , 今天带大家认识认识堆 . 堆 堆是将一组数据按照完全二叉树的存储顺序&#xff0c;将数据存储在一个一维数组中的结构。 堆有两种结构&#xff0c;一种称为大顶堆&#xff0c;一种称为小顶堆 : 大顶堆 大顶堆的任何一个父节点的值&#xff0c;都大于或等于…
阅读更多...
nginx设置用户密码

nginx设置用户密码

1.官网 https://nginx.org/en/docs/http/ngx_http_auth_basic_module.html2.语法 3.创建密码 [rootlocalhost ~]# yum install httpd-tools -y4.创建密码文件 完毕&#xff01; [rootlocalhost ~]# htpasswd -b -c /etc/nginx/auth-passwd xp xp666-c 创建passwdfile &#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023