【前端】CSS技巧与样式优化

news2024/12/26 0:03:29

目录

  • 一、前言
  • 二、精灵图
    • 1、什么是精灵图
    • 2、为什么需要精灵图
    • 3、精灵图的使用
      • ①、创建CSS精灵图的步骤
        • 1)、选择合适的图标
        • 2)、合并图片
        • 3)、设置背景定位
      • ②、优化CSS精灵图的技巧
        • 1)、维护方便
        • 2)、考虑Retina屏幕
        • 3)、使用CSS预处理器
      • ③、使用精灵图核心
    • 3、精灵图案例
  • 三、CSS三角
    • 1、实现四个三角
    • 2、实现一个三角
    • 3、实现直角三角形
    • 4、案例实现
  • 四、CSS用户界面样式
    • 1、更改用户的鼠标样式cursor
      • ①、属性样式
    • 2、表单轮廓outline
    • 3、防止表单域拖拽resize
  • 五、vertical-align属性
    • 1、语法
    • 2、什么是顶线、中线、基线、底线
    • 3、代码示例
    • 4、文字于图片垂直居中案例
    • 5、图片、表单和文字对齐
    • 6、解决图片底部默认空白缝隙问题
      • ①、出现图片底部默认空白缝隙问题的原因
      • ②、如何解决图片底部默认空白缝隙问题
        • 1)、给图片添加vertical-align: middle | top | bottom
        • 2)、把图片转换为块元素display:block
  • 六、溢出的文字省略号显示
    • 1、单行文本溢出显示省略号
      • ①、单行文本溢出显示省略号-三个必要条件
      • ②、代码示例
    • 2、多行文本溢出显示省略号
  • 七、常见布局技巧
    • 1、margin负值的运用
    • 2、文字围绕浮动元素
    • 3、 行内块的巧妙运用
      • ①、如何实现以下图片的效果
      • ②、代码实现
    • 4、css三角强化
      • ①、如何实现以下图片中紫色框出的效果
      • ②、代码实现
  • 八、总结

一、前言

CSS作为前端开发的重要组成部分,不仅赋予网页美观的外观,还能为用户提供良好的交互体验。本文将深入探讨CSS中的精灵图、三角效果、用户界面样式、溢出省略号以及常见布局技巧,帮助你更好地运用CSS,打造出更加吸引人的网页界面。

二、精灵图

1、什么是精灵图

CSS精灵图是将多个小图标或图片合并成一张大图,然后通过CSS的背景定位来显示需要的部分。这样做的好处是减少了HTTP请求的数量,从而加快了页面加载速度。

2、为什么需要精灵图

我们写的网页是需要放到服务器中的,这样任何人打开浏览器输入我们的网址就可以访问我们的网页。

在这里插入图片描述

当我们在浏览器中点击某个图片时,这时会往服务器中发送请求,然后服务器接受请求后,会把相应的图片返给页面

在这里插入图片描述
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面地加载速度。因此,为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites)

CSS精灵技术核心原理:将网页中的一些小背景图片整合到一张大图中,这样服务器只需要一次请求即可。

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

当我想要大图中的某一个图像时,服务器会直接把大图返回给页面,这样当再次想要某个图像时,就不需要再次进行发送请求了。

3、精灵图的使用

①、创建CSS精灵图的步骤

1)、选择合适的图标

选择需要合并的小图标或图片

2)、合并图片

使用工具将小图标合并成一张大图,保留透明区域

3)、设置背景定位

在CSS中使用“background-position”属性来定位需要显示的部分

②、优化CSS精灵图的技巧

1)、维护方便

精灵图的管理可能会变得复杂,需要有良好的命名和维护策略

2)、考虑Retina屏幕

为高分辨率屏幕提供2倍大小的图标,使用“background-size”来使用Retina屏幕

3)、使用CSS预处理器

使用Less、Sass等预处理器可以更方便地生成精灵图地样式代码

③、使用精灵图核心

  • 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中
  • 移动背景图片位置,可以使用background-position
  • 一般情况下精灵图都是负值(x轴右边走是正值,左边走是负值,y轴同理)

3、精灵图案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图使用</title>
    <style>
        .box1 {
            width: 260px;
            height: 430px;
            background: url(../02/image/0001.png) no-repeat -185px 0;
            margin: 100px auto;
        }
        .box2{
            width: 40px;
            height: 40px;
            margin: 200px;
            background: url(../02/image/0002.png) no-repeat -185px -199px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

在这里插入图片描述

三、CSS三角

网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标
避免浏览器不兼容的问题,可以加上这两个属性
line-height: 0;
font-size: 0;

1、实现四个三角

定义一个盒子,宽度和高度均为0,然后定义该盒子的四个边框即可。

<!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>
        .box1 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top: 30px solid palevioletred;
            border-bottom: 30px solid pink;
            border-left: 30px solid orange;
            border-right: 30px solid palegreen;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

在这里插入图片描述

2、实现一个三角

定义其中一个边框的样式即可

<!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>
        .box2 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            margin-top: 40px;
            border: 100px solid transparent;
            border-top-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="box2"></div>
</body>

</html>

在这里插入图片描述

3、实现直角三角形

<!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>
        .box1 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top: 70px solid transparent;
            border-bottom: 0 solid transparent;
            border-left: 0 solid transparent;
            border-right: 30px solid purple;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

在这里插入图片描述

4、案例实现

在这里插入图片描述

<!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>
        .box3 {
            width: 120px;
            height: 240px;
            position: relative;
            background-color: palevioletred;
        }

        .box3 span {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            position: absolute;
            right: 30px;
            top: -17px;
            border: 10px solid transparent;
            border-bottom-color: palevioletred;
        }
    </style>
</head>

<body>
    <div class="box3">
        <span></span>
    </div>
</body>

</html>

在这里插入图片描述

四、CSS用户界面样式

1、更改用户的鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

//语句
li{
	cursor: pointer;
}

①、属性样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标样式</title>
    <style>
        .li1 {
            cursor: default;
        }

        .li2 {
            cursor: pointer;
        }

        .li3 {
            cursor: move;
        }

        .li4 {
            cursor: text;
        }

        .li5 {
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <ul>
        <li class="li1">默认小白鼠标样式</li><br>
        <li class="li2">鼠标小手样式</li><br>
        <li class="li3">鼠标移动样式</li><br>
        <li class="li4">鼠标文本样式</li><br>
        <li class="li5">鼠标禁止样式</li>
    </ul>
</body>

</html>

2、表单轮廓outline

给表单添加outline:0,或者outline:none样式之后,就可以去掉默认的蓝色边框

//语法
outline:none
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓线和防止拖移</title>
    <style>
        input{
            width: 200px;
            height: 100px;
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

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

3、防止表单域拖拽resize

实例开发中,文本域右下角是不可以拖拽的

//语法
textarea{
	resize: none
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓线和防止拖移</title>
    <style>
        textarea{
            resize: none;
            outline: none;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

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

五、vertical-align属性

1、CSS的vertical-align属性使用场景:用于设置图片或者表单(行内块元素)和文字垂直对齐
2、用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效

1、语法

vertical-align: baseline  top middle bottom

2、什么是顶线、中线、基线、底线

在这里插入图片描述

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../02/images/taobao.webp">pink
</body>
</html>

在这里插入图片描述

4、文字于图片垂直居中案例

<!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{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="../02/images/taobao.webp">pink
</body>
</html>

在这里插入图片描述

5、图片、表单和文字对齐

图片、表单都属于行内块元素,默认的vertical-align是基线对齐
在这里插入图片描述

那么如何给图片文字实现垂直居中呢?

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了

6、解决图片底部默认空白缝隙问题

当在盒子中添加一张图片时,运行页面后,发现图片的底部有空白缝隙的问题。而这个盒子没有设置高度和宽度。

<!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{
            border: 2px solid palegreen;
        }
    </style>
</head>
<body>
    <div>
        <img src="../02/images/taobao.webp">
    </div>
</body>
</html>

在这里插入图片描述

①、出现图片底部默认空白缝隙问题的原因

行内块元素会和文字的基线对齐

在这里插入图片描述

②、如何解决图片底部默认空白缝隙问题

1)、给图片添加vertical-align: middle | 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{
            border: 2px solid palegreen;
        }
        img{
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <img src="../02/images/taobao.webp">哈哈哈
    </div>
</body>
</html>

在这里插入图片描述

2)、把图片转换为块元素display:block

<!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{
            border: 2px solid palegreen;
        }
        img{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="../02/images/taobao.webp">
    </div>
</body>
</html>

在这里插入图片描述

六、溢出的文字省略号显示

1、单行文本溢出显示省略号

①、单行文本溢出显示省略号-三个必要条件

/* 1. 先强制一行内显示文本 (默认normal自动换行) */
white-space: nowrap; 
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

②、代码示例

<!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: 180px;
            height: 200px;
            /* 1. 先强制一行内显示文本 (默认normal自动换行) */
            white-space: nowrap;
            /* 2. 超出的部分隐藏 */
            overflow: hidden;
            /* 3. 文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        如果你设计的软件猪不能使你就是猪
    </div>
</body>
</html>

在这里插入图片描述

2、多行文本溢出显示省略号

多行文本溢出显示省略号,有较大的兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核)

<!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: 180px;
            height: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块级元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        如果你设计的软件猪不能使你就是猪;让每一个软件使用者都成为我们软件的设计者
    </div>
</body>
</html>

在这里插入图片描述

七、常见布局技巧

1、margin负值的运用

  • 让每个盒子margin往走测移动-1px正好压住相邻盒子边框
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙运用</title>
    <style>
        ul li{
            width: 150px;
            height: 200px;
            border: 1px solid red;
            list-style: none;
            float: left;
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

在这里插入图片描述

  • 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
    没有定位,则加相对定位
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙运用</title>
    <style>
        ul li{
            width: 150px;
            height: 200px;
            border: 1px solid red;
            list-style: none;
            float: left;
            margin-left: -1px;
        }
        ul li:hover{
            border: 2px solid purple;
            position: relative;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

在这里插入图片描述
有定位,则加z-index

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙运用</title>
    <style>
        ul li{
            position: relative;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            list-style: none;
            float: left;
            margin-left: -1px;
        }
        ul li:hover{
            border: 2px solid purple;
            z-index: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

在这里插入图片描述

2、文字围绕浮动元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素</title>
    <style>
        .box{
            width: 300px;
            height: 145px;
            background-color: rgb(150, 180, 114);
            margin: 100px auto;
            padding: 5px;
        }
        .image{
            float: left;
            width: 128px;
            height: 145px;
            margin-right: 5px;
        }
        .image img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="image">
            <img src="../02/image/0001.png" alt="">
        </div>
        <p>如果你设计的软件猪不能使你就是猪;让每一个软件使用者都成为我们软件的设计者</p>
    </div>
</body>

在这里插入图片描述

3、 行内块的巧妙运用

①、如何实现以下图片的效果

在这里插入图片描述

②、代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块巧妙运用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }

        .box a {
            width: 36px;
            height: 36px;
            display: inline-block;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            line-height: 36px;
            text-align: center;
            /* 取消下划线 */
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .btn1,
        .box .btn2 {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            /* 取消点击时的蓝色/黑色边框 */
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="btn1">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="btn2">&gt;&gt;下一页</a>
        到第
        <input type="text"><button>确定</button>
    </div>
</body>

</html>

在这里插入图片描述

4、css三角强化

①、如何实现以下图片中紫色框出的效果

在这里插入图片描述

②、代码实现

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top: 70px solid transparent;
            border-bottom: 0 solid transparent;
            border-left: 0 solid transparent;
            border-right: 30px solid purple;

        }
        .price{
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
        }
        .one{
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .one i{
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .two{
            font-size: 13px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="one">$1234
            <i></i>
        </span>
        <span class="two">$2345</span>
    </div>
</body>

在这里插入图片描述

八、总结

通过精灵图、CSS三角、用户界面样式、垂直对齐、溢出省略号以及常见布局技巧的运用,我们可以更加灵活地控制网页的样式和布局,为用户呈现出更美观、交互性更强的网页界面。

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

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

相关文章

开学哪款电容笔值得买?ipad2023手写笔推荐

开学有哪些电容笔值得买呢&#xff1f;比起之前的传统电容笔&#xff0c;现在的电容笔有了更多的特点&#xff0c;例如具有防误触&#xff0c;能避免手指不小心触碰到屏幕而造成书写失灵&#xff0c;还能任意调整线条的粗细。苹果的原装Pencil现在售价很贵。所以&#xff0c;在…

HarmonyOS ArkUI 属性动画入门详解

HarmonyOS ArkUI 属性动画入门详解 前言属性动画是什么&#xff1f;我们借助官方的话来说&#xff0c;我们自己简单归纳下 参数解释举个例子旋转动画 位移动画组合动画总结 前言 鸿蒙OS最近吹的很凶&#xff0c;赶紧卷一下。学习过程中发现很多人吐槽官方属性动画这一章比较敷…

【面试】一文讲清组合逻辑中的竞争与冒险

竞争的定义&#xff1a;组合逻辑电路中&#xff0c;输入信号的变化传输到电路的各级逻辑门&#xff0c;到达的时间有先后&#xff0c;也就是存在时差&#xff0c;称为竞争。 冒险的定义&#xff1a;当输入信号变化时&#xff0c;由于存在时差&#xff0c;在输出端产生错误&…

5G终端视频客服需求及实现方式

5G视频客服的适老化需求聚焦“远程辅助”和“触屏交互”两项功能。 需要UI、AP framework和Modem共同实现完成需求。 UI需要终端自行按需求开发实现。 芯片商提供AP framework层和modem的修改方案。 终端厂商要自行和CMCC客服端进行功能上的调试验证&#xff0c;完成功能认…

RTSP/Onvif视频服务器EasyNVR安防视频云服务平台出现崩溃并重启的情况解决方案

EasyNVR安防视频云服务平台的特点是基于RTSP/Onvif协议将前端设备统一接入&#xff0c;在平台进行转码、直播、处理及分发&#xff0c;在安防监控场景中&#xff0c;EasyNVR可实现实时监控、云端录像、云存储、告警、级联等视频能力&#xff0c;极大满足行业的视频监控需求。 有…

HBP人脑计划结果如何:欧洲投入6亿欧元利用计算机重建人脑?

为期十年的人脑计划将在九月份结束。《Nature》杂志审视了它的成就和动荡的过去。 来自人脑颞叶神经元回路的数字重建。来源&#xff1a;Nicolas Antille 人脑计划&#xff08;Human Brain Project&#xff0c;HBP&#xff09;历时长达10年&#xff0c;即将迎来圆满结束。这一庞…

薪火传承 | 天空卫士致敬原三线企业核工业部525厂老同志

上世纪60年代&#xff0c;几百万建设者开创了我国历史上一次规模空前的工业大迁移和工业大开发。创造出“艰苦创业、勇于创新、团结协作、无私奉献”的三线建设精神永为后世所敬仰和学习。 三线企业的前辈们用自己的青春和智慧为中国的科技事业作出了巨大的贡献。时光斗转&…

宠物赛道,用AI定制宠物头像搞钱项目教程

今天给大家介绍一个非常有趣&#xff0c;而粉丝价值又极高&#xff0c;用AI去定制宠物头像或合照的AI项目。 接触过宠物行业应该知道&#xff0c;获取1位铲屎官到私域&#xff0c;这类用户的价值是极高的&#xff0c;一个宠物粉&#xff0c;是连铲个屎都要花钱的&#xff0c;每…

排水管网水位监测方案助力城市“排忧解涝”

城市排水管网是城市地下生命线之一&#xff0c;事关城市安全、健康运行和高质量发展。然而由于排水管网内部自身的复杂性、多样性、隐蔽性等因素的存在&#xff0c;致使城市排水管网存在雨污混接、管网淤堵、入渗入流、运行负荷等现象&#xff0c;导致城市出现内涝、溢流污染等…

实力突出!安全狗云原生安全整体解决方案获优胜奖

近日&#xff0c;经过层层筛选&#xff0c;“2023年网络安全优秀创新成果大赛暨四川省‘熊猫杯’网络安全优秀作品大赛”得出获奖名单。 作为国内云原生安全领导厂商&#xff0c;安全狗旗下解决方案获优胜奖。 厦门服云信息科技有限公司&#xff08;品牌名&#xff1a;安全狗&a…

创建web应用程序,React和Vue怎么选?

React和Vue都是创建web应用程序的绝佳选择。React得到了科技巨头和庞大的开源社区的支持&#xff0c;代码库可以很大程度地扩展&#xff0c;允许你创建企业级web应用程序。React拥有大量合格甚至优秀的开发人员粉丝&#xff0c;可以解决你在开发阶段可能遇到的任何问题。 毫无疑…

C语言:选择+编程(每日一练Day7)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;图片整理 思路一&#xff1a; 思路二&#xff1a; 题二&#xff1a;寻找数组的中心下标 思路一&#xff1…

软考A计划-系统集成项目管理工程师-项目风险管理-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

csdn冷知识:如何在csdn里输入公式或矩阵

目录 1 输入公式 2 输入矩阵 3 如何输入复杂公式 4 如何修改&#xff0c;已经生成的公式 1 输入公式 进入编辑模式点击右边的菜单&#xff1a;公式然后进入公式编辑器&#xff0c;选择右边的 ... 可以选择大括号等&#xff0c;右边还有矩阵符号选择后你需要创建几行几列的…

Python“牵手”唯品会商品详情API接口运用场景及功能介绍,唯品会API接口申请指南

唯品会是一家专门做特卖的网站&#xff0c;成立于2008年。唯品会网站以比零售大幅优惠的折扣价&#xff0c;向中国消费者提供优质、受欢迎的品牌正品&#xff0c;商品囊括时装、护肤品、箱包、皮具、配饰、香水等2。唯品会在中国领创"名牌折扣限时抢购正品保障"的独特…

【VS_C++基础知识】

很高兴在雪易的CSDN遇见你 &#xff0c;给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文分享VS_C的基础知识&#xff0c;希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易会继续努力分享&#xff0c;一起进步&#xff01; 你的点赞就…

三星申请新商标:未来将应用于智能戒指,作为XR头显延伸设备

三星最近向英国知识产权局提交了名为“Samsung Curio”的新商标&#xff0c;这预示着三星正积极扩展可穿戴设备生态。该商标被分类为“Class 9”&#xff0c;这表明它有可能被用于未来的智能戒指。 据报道&#xff0c;三星计划将智能戒指作为XR头显设备的延伸&#xff0c;与苹果…

Qt应用开发(基础篇)——进度条 QProgressBar

一、前言 QProgressBar类继承于QWidget&#xff0c;是一个提供了横向或者纵向进度条的小部件。 QProgressBar进度条一般用来显示用户某操作的进度&#xff0c;比如烧录、导入、导出、下发、上传、加载等这些需要耗时和分包的概念&#xff0c;让用户知道程序还在正常的执行中。 …

tomcat更改端口号和隐藏端口号

因为默认端口:8080不会自动隐藏&#xff0c;因此为了更显格调需要将其改为:80 进入tomcat的server文件 将其改为80&#xff0c;之后将tomcat重新启动即可 tomcat启动流程 [rootshang ~]# cd /usr/local/tomcat/apache-tomcat-8.5.92 [rootshang apache-tomcat-8.5.92]# cd b…

框架分析(4)-Spring

框架分析&#xff08;4&#xff09;-Spring 专栏介绍Spring核心特点控制反转&#xff08;IoC&#xff09;面向切面编程&#xff08;AOP&#xff09;组件化集成简化开发总结 优缺点优点高度可扩展控制反转&#xff08;IoC&#xff09;面向切面编程&#xff08;AOP&#xff09;集…