HTML+CSS基础用法介绍五

news2024/11/23 3:53:03

目录：

  • 结构伪类选择器
  • 盒子模型-边框线
  • 盒子模型-内边距
  • 盒子模型-解决盒子被撑大
  • 盒子模型-外边距与版心居中
  • 小知识：清除浏览器中所有标签的默认样式
  • 内容溢出控制显示方式
  • 盒子模型-圆角

🐎正片开始

结构伪类选择器

什么是结构伪类选择器：‌结构伪类选择器是CSS中的一种选择器，用于基于文档结构选择元素。‌ 这些选择器通常用于模仿或替代JavaScript中的事件处理器，使得可以通过CSS样式对文档中的某些结构位置或状态进行样式设计。结构伪类选择器能够选择元素在其生命周期中的特定时刻的状态，比如当用户悬停在链接上时，或者当元素是其父元素的第一个子元素时‌

结构伪类选择器的作用主要体现在以下几个方面：

  1. 减少对HTML属性的依赖‌
  2. 动态样式设计
  3. 文档结构选择‌

一些常见的结构伪类选择器包括：

  • hover‌：选择鼠标悬停在上面的元素。
  • focus‌：选择拥有焦点的元素。
  • active‌：选择被激活的元素（例如，被点击的链接）。
  • visited‌ 和 ‌link‌：分别选择已访问和未访问的链接。
  • first-child‌ 和 ‌last-child‌：选择某个元素的第一个或最后一个子元素。
  • nth-child()‌：选择某个元素的特定索引的子元素‌。

接下来主要介绍 first-child ,last-child, nth-child()

通过以下表格介绍着三个的用法和作用

结构伪类选择器作用
选择器:first-child查找第一个元素对其赋予属性值
选择器:last-child查找最后一个元素对其赋予属性值
选择器:nth-child(N)查找第N个元素(第一个元素N值为1)
  1. 选择器:first-child的使用

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
        <li>我是第四个</li>
        <li>我是第五个</li>
        <li>我是第六个</li>
        <li>我是第七个</li>
        <li>我是第八个</li>
        <li>我是第九个</li>
    </ul>
</body>
</html>

可能有朋友好奇这么写结构伪类选择器是啥意思？

 <style>
        li:first-child{
            background-color: red;
        }
 </style>

其实就是在选中<li>标签中进行查找，first-child 单词意思就是说第一个孩子，其实也就是找到所有<li>标签中的第一个<li>标签 然后让其伪类结构选择器的属性，这里的属性就是让其背景变为红色

看看效果
在这里插入图片描述

  1. 选择器:last-child的使用

使用代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li:last-child{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
        </ul>
    </body>
</html>

对以下代码进行解释

 <style>
      li:last-child{
          background-color: blue;
      }
</style>

last-child 单词的意思是最后一个孩子，也就是说在所有<li>标签中选择最后一个<li>标签对其背景色赋值为蓝色

效果图如下
在这里插入图片描述

  1. 选择器:nth-child(N)的使用

这里的N从1开始取正整数。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li:nth-child(1){
                background-color: red;
            }
            li:nth-child(2){
                background-color: blue;
            }
            li:nth-child(3){
                background-color: green;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
        </ul>
    </body>
</html>

结构伪类选择器代码如下

 <style>
       li:nth-child(1){
           background-color: red;
       }
       li:nth-child(2){
           background-color: blue;
       }
       li:nth-child(3){
           background-color: green;
       }
 </style>

当N取几时就选中所有<li> 标签中的第几个标签，上述代码分别是选中了第1，2，3个<li>分别背景色会变为红绿蓝。

效果图
在这里插入图片描述
选择器：nth-child（公式）

公式作用
2n选中偶数
2n+1；2n-1选中奇数标签
5n选中5的倍数的标签
n+5选中(5,6,7…)一系列标签
-n+5选中(5,4,3,2,1…)一系列标签

这里的n从0开始取正整数

公式(2n)和(2n+1；2n-1)的用法

代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        		/*选中偶数标签*/
            li:nth-child(2n){
                background-color: red;
            }
              /*选中奇数标签*/
            li:nth-child(2n+1){
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
        </ul>
    </body>
</html>

效果图如下偶数标签背景色为红色，奇数标签背景色为蓝色
在这里插入图片描述
其他公式用法和上面用法相同，依葫芦画瓢即可。

盒子模型-边框线

  1. 这是同时设置四个方向的边框线

属性名：border
属性值：边框线粗细 线条样式 颜色 (不区分顺序)

常用线条样式

属性值线条样式
solid实线
dashed虚线
dotted点线

代码用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .solid{
            width: 200px;
            height: 200px;
            background-color: green;
            border: 4px solid blue;
        }
        .dashed{
            width: 200px;
            height: 200px;
            background-color: green;
            border: 6px dashed red;
        }
        .dotted{
            width: 200px;
            height: 200px;
            background-color: green;
            border: 8px dotted #000;
        }
    </style>
</head>

<body>
   这是实线： <div class="solid"></div>
   这是虚线：<div class="dashed"></div>
   这是点线：<div class="dotted"></div>
</body>
</html>

效果图
在这里插入图片描述

  1. 设置指定方向的边框线

属性名：border-方位(left,right,top,bottom)
属性值：边框线粗细 线条样式 线条颜色(不区分顺序)

用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
     <style>
            div{
                width: 200px;
                height: 200px;
                background-color:pink;
                /* 这是设置上边框线  */
                border-top: 2px solid red;
                 /* 这是设置下边框线  */
                 border-bottom: 3px dashed green;
                  /* 这是设置左边框线  */
                 border-left: 4px dotted blue; 
                 /* 这是设置右边框线 */
                 border-right: 5px solid orange;
            }
     </style>
</head>
<body>
    指定方向设置边框线测试如下：<div></div>
</body>
</html>

效果展示
在这里插入图片描述

盒子模型-内边距

  1. 设置某个方向的内边距

作用：设置内容与盒子边缘之间的距离
属性名：padding-方向(top, bottom,left,right)

代码用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 设置指定方向内边距 */
            padding-top: 10px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图如下

在这里插入图片描述

  1. 同时设置多个方向的内边距

padding多值写法

取值个数实例含义
一个值padding：10px;四个方向内边距均为10px
两个值padding：10px 80px;上下：10px，左右：80px
三个值padding：10px 40px 90px;上：10px，左右：40px，下：90px
四个值padding：10px 20px 30px 40px;上：10 px，下：30px，左：40px，右：20px
  1. 测试padding一个值的情况

代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: orange;
                /* 设置指定方向内边距 */
                padding: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果图如下
在这里插入图片描述
当为padding设置一个像素值时则四个方向内边距都是这个像素值

  1. 测试padding两个值的情况

代码如下

<!-- 1. 测试padding两个值的情况 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
                /* 设置指定方向内边距 */
                padding: 40px 80px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果图
在这里插入图片描述
当为padding设置两个值时，第一个值为上内边距设置40px,第二个值对应的就是右内边距的像素值80px,因为左，下内边距没有被设置，则浏览器会把下内边距设置为和上内边距一样的像素值40px，同理，左内边距也被设置为和右内边距相同的值80px

盒子模型-解决盒子被撑大

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            
        }
    </style>

可以看见在代码中我设置div尺寸为200px200px，但是实际变成了239.99239.99,我们就当初240*240来看这是为什么呢？
在这里插入图片描述

那是因为我们加了padding:20px;这个属性，导致<div> 尺寸被撑大了，那为什么宽高各加40px呢？因为上下左右内边距是20px。

最终<div>标签的宽高计算如下
宽=左内边距+右内边距+里面框的宽度=20px+20px+200px=240px；
高=上内边距+下内边距+里面框的高度= 20px+20px+200px=240px;

盒子不被撑大解决方法如下
加上：box-sizing:border-box;

接下来在试试，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            box-sizing: border-box;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示
在这里插入图片描述
此时就解决了被撑大问题。

盒子模型-外边距与版心居中

作用：拉开两盒子之间的距离
属性名：margin
用法与padding用法相同，都可以设置某个单独方向，以及同时设置全部方向，只是这两个属性作用不同

指定某个方向设置外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height: 200px;
            background-color: orange;
            /* 设置指定方向外边距 */
            margin-top: 100px;
            margin-bottom: 60px;
            margin-left: 30px;
            margin-right: 40px;
        
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示
在这里插入图片描述
版心居中小知识
只需要在margin属性的第二值用上auto即可版心居中

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height: 200px;
            background-color: orange;
            /* 设置版心居中 */
            margin: 60px auto;
        
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

居中效果图
在这里插入图片描述

清除默认样式

在没有清除之前会有默认样式如下图所示

在这里插入图片描述

清除默认样式代码如下

    <style>
        *{
            margin: 0; /*清除外边距*/
            padding: 0; /*清除内边距*/
            list-style: none;/*清除无序序列前面的小点点*/
            box-sizing: border-box; /*将来设置内边距时，防止盒子被内容撑大*/
        }
    </style>

清除后效果图
在这里插入图片描述

内容溢出控制显示方式

属性名：overflow

属性值

属性值效果
hidden溢出隐藏
scroll溢出滚动(无论是否溢出，都显示滚动条位置)
auto溢出滚动(溢出才显示滚动条位置)

接下来对这三种属性值的使用情况如下
代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hldden{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden; 
        }
        .scroll{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: scroll;
        }
        .auto{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
   1. 测试hidden属性值，此时已经溢出，但溢出部分被隐藏
    <div class="hldden">
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>

    </div>
    <br><br>
    2.测试scroll属性值,此时未溢出情况，但也显示滚动条
    <div class="scroll">       
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
    <br>
    2.1 测试scroll属性值,此时有溢出情况，显示滚动条
    <div class="scroll">
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
    <br>
   3.测试auto属性值,此时未溢出情况，没显示滚动条
    <div class="auto">       
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
    <br>
    3.1 测试auto属性值,此时有溢出情况，显示滚动条
    <div class="auto">
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
</body>
</html>

效果图
在这里插入图片描述

盒子模型-圆角

作用：为元素外边框设置为圆角

属性名： border-radius

属性值：数字+px/百分比

注意：属性值是圆角半径

<!--用法如下-->
border-radius:10px(左上角)  20px(右上角)  30px(左下角)  40px(右下角);
  1. 当只给属性border-radius赋值一个值时的情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color:cadetblue;
            border-radius: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述
可以看见所有角都是一样的，都是30px。

  1. 当只给属性border-radius赋值两个值时的情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color:cadetblue;
            border-radius: 10px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述

可以看见左上角的弧度和右下角的弧度一致，右上角的和左下角的一致。因为我只给border-radius属性赋了两个值，按照赋值规则，第一个值是给左上角的，第二个则是给右上角的，如果没有被主动赋值的角，会和对角的弧度效果一致。

正圆形状：给正方形的盒子设置圆角属性值为宽或高的一半即可或者写50%
胶囊形状：给长方形 盒子设置圆角属性值为盒子高度的一半即可。

  1. 圆形状(制作头像)
<!-- 头像制作 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         img{
              border-radius:50%;
      }
        div{
            padding-top: 30px;
            box-sizing: border-box;
            height: 300px;
            font-size: 30px;
            line-height: 0px;
            background-color:darkgray;
        }

    </style>
    
</head>
<body>
    <div>
        <img src="1.png" width="200">
        <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;头像</p>
    </div>
    
</body>
</html>

效果图
在这里插入图片描述

  1. 胶囊形状

代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 100px;
                background-color:burlywood;
                border-radius:50px;
            }
    
        </style>   
    </head>

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

效果图展示
在这里插入图片描述

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

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

相关文章

18.安卓逆向-frida基础-调试实战2

18.安卓逆向-frida基础-调试实战2

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;图灵Python学院 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要盲目相信。 工…
阅读更多...
Windows UAC权限详解以及因为权限不对等引发软件工具无法正常使用的实例分析

Windows UAC权限详解以及因为权限不对等引发软件工具无法正常使用的实例分析

目录 ​1、什么是UAC&#xff1f; 2、微软为什么要设计UAC&#xff1f; 3、标准用户权限与管理员权限 4、程序到底以哪种权限运行&#xff1f;与哪些因素有关&#xff1f; 4.1、给程序设置以管理员权限运行的属性 4.2、当前登录用户的类型 4.3、如何通过代码判断某个进程…
阅读更多...
智能 AI 写作软件：开启创作新纪元

智能 AI 写作软件：开启创作新纪元

不论你在哪行哪业应该都躲不开写作这件事被。写作已经成为了我们生活和工作中不可或缺的一部分。随着人工智能技术的飞速发展&#xff0c;AI 智能写作工具应运而生。接下来&#xff0c;让我们一起揭开智能ai写作工具的神秘面纱。 1.笔灵AI写作 直通车&#xff1a;https://ibi…
阅读更多...
②EtherCAT转ModbusTCP， EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

②EtherCAT转ModbusTCP， EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 协议转换通信网关 EtherCAT 转 Modbus TCP (接上一章&#xff09; GW系列型号 配置说明 上载 网线连接电脑到模块上的 WEB 网页设置网口&#…
阅读更多...
论文笔记：Online Class-Incremental Continual Learning with Adversarial Shapley Value

论文笔记：Online Class-Incremental Continual Learning with Adversarial Shapley Value

这篇工作的focus 是 memory-based approach 1. 挑战/问题&#xff1a; 灾难性遗忘&#xff1a;深度神经网络在学习新任务时往往会忘记先前任务的知识。内存和计算效率&#xff1a;在个人设备上执行深度学习任务时&#xff0c;需要最小化内存占用和计算成本。数据流增量学习&am…
阅读更多...
系统安全 - 大数据组件的安全及防护

系统安全 - 大数据组件的安全及防护

文章目录 导图1. Hadoop的安全风险2. 常见攻击方式3. Hadoop的自带安全功能4. Apache Knox和Apache Ranger等安全框架5. 安全策略建议 导图 1. Hadoop的安全风险 Hadoop最初设计为在可信网络中运行&#xff0c;因此默认安全性较低。常见的安全风险包括&#xff1a; 未经授权的…
阅读更多...
探索未来：揭秘pymqtt，AI与物联网的新桥梁

探索未来：揭秘pymqtt，AI与物联网的新桥梁

文章目录 探索未来&#xff1a;揭秘pymqtt&#xff0c;AI与物联网的新桥梁背景&#xff1a;为什么选择pymqtt&#xff1f;什么是pymqtt&#xff1f;如何安装pymqtt&#xff1f;简单的库函数使用方法1. 配置MQTT连接2. 创建Mqtt对象3. 发布消息4. 订阅主题5. 运行MQTT客户端 场景…
阅读更多...
Java项目实战II基于Java+Spring Boot+MySQL的小徐影城管理系统设计与实现(源码+数据库+文档)

Java项目实战II基于Java+Spring Boot+MySQL的小徐影城管理系统设计与实现(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者 一、前言 随着文化娱乐产业的快速发展&#xff0c;影城管理面临着日益复杂的挑战&#xff0c;包括票务管理、座…
阅读更多...
Redis操作常用API

Redis操作常用API

说明&#xff1a;Redis应用于java项目中&#xff0c;操作Redis数据可以使用API&#xff0c;相较于命令行更方便。使用前&#xff0c;需先添加依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-re…
阅读更多...
HIKVISION 海康威视对讲服务配置平台弱口令

HIKVISION 海康威视对讲服务配置平台弱口令

漏洞描述 杭州海康威视系统技术有限公司对讲服务配置平台存在弱口令 漏洞复现 FOFA "document.write(TITLE_SYSTEM);" POC admin #账号 12345 #密码 登录成功
阅读更多...
利用Spring Boot打造新闻推荐解决方案

利用Spring Boot打造新闻推荐解决方案

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…
阅读更多...
Kotlin基本知识

Kotlin基本知识

Kotlin是一种现代的静态类型编程语言&#xff0c;由JetBrains公司在2010年推出&#xff0c;并被Google在2019年宣布为Android开发的首选语言。 超过 50% 的专业 Android 开发者使用 Kotlin 作为主要语言&#xff0c;而只有 30% 使用 Java 作为主要语言。 70% 以 Kotlin 为主要语…
阅读更多...
Redis数据库与GO（二）：list,set

Redis数据库与GO（二）：list,set

一、list&#xff08;列表&#xff09; list&#xff08;列表&#xff09;是简单的字符串列表&#xff0c;按照插入顺序排序。你可以添加一个元素到列表的头部(左边)或者尾部(右边)。List本质是个链表&#xff0c; list是一个双向链表&#xff0c;其元素是有序的&#xff0c;元…
阅读更多...
【含文档】基于Springboot+Vue的护肤品推荐系统（含源码+数据库+lw）

【含文档】基于Springboot+Vue的护肤品推荐系统（含源码+数据库+lw）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…
阅读更多...
ctfshow-web入门（信息收集，持续更新中。。）

ctfshow-web入门（信息收集，持续更新中。。）

写在之前：近期打了个比赛，备受打击，入手了vip账号进修，加油！ 文章目录 ctfshow-web1查看源代码ctfshow-web2burp抓包ctfshow-web3burp抓包ctfshow-web4访问robots.txtctfshow-web5dirscarch扫描PHPS文件泄露ctfshow-web6dirscarch扫描ctfshow-web7dirscarch扫描ctfshow-w…
阅读更多...
力扣 简单 101.对称二叉树

力扣 简单 101.对称二叉树

文章目录 题目介绍解题思路 题目介绍 解题思路 在上题【100. 相同的树】的基础上稍加改动,将根节点的左右子树看成左右两个树 递归判断左边的右子树和右边的左子树以及左边的左子树和右边的右子树是否都相同 class Solution {public boolean isSymmetric(TreeNode root) {re…
阅读更多...
1.2.2 计算机网络的分层结构（下）

1.2.2 计算机网络的分层结构（下）

水平视角 YSCS协议&#xff08;压缩传输协议&#xff09; 发送方先压缩然后接收方再解压。 为什么要分层&#xff1f;为什么要制定协议&#xff1f; 计算机网路功能负责->采用分层结构&#xff0c;将诸多功能合理地划分在不同层次->对等层之间制定协议&#xff0c;以…
阅读更多...
10.4今日错题解析（软考）

10.4今日错题解析（软考）

目录 前言系统开发基础——概要设计与详细设计系统开发基础——开发模型 前言 这是用来记录我备考软考设计师的错题的&#xff0c;今天知识点为概要设计与详细设计、开发模型&#xff0c;大部分错题摘自希赛中的题目&#xff0c;但相关解析是原创&#xff0c;有自己的思考&…
阅读更多...
SpringBoot3+Vue3开发后台管理系统脚手架

SpringBoot3+Vue3开发后台管理系统脚手架

后台管理系统脚手架 介绍 在快速迭代的软件开发世界里&#xff0c;时间就是生产力&#xff0c;效率决定成败。对于构建复杂而庞大的后台系统而言&#xff0c;一个高效、可定制的后台脚手架&#xff08;Backend Scaffold&#xff09;无疑是开发者的得力助手。 脚手架 后台脚…
阅读更多...
CSS计数器

CSS计数器

CSS 中的计数器类似于变量&#xff0c;可以实现简单的计数功能&#xff0c;并将结果显示在页面上&#xff0c;在早期的网站上应用比较广泛。要实现计数器需要用到以下几个属性&#xff1a; counter-reset&#xff1a;创建或者重置计数器&#xff1b;counter-increment&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023