System 发布的文章

2024-08-26

在CSS中，有两种方式可以引入样式表：

使用<link>标签直接引入外部样式表。
使用@import规则在CSS文件中引入其他CSS文件。

<link>标签用于HTML文档中，而@import规则用于CSS文件内。

<link>标签




<link rel="stylesheet" type="text/css" href="styles.css">

<link>标签是XHTML标准的一部分，用于定义文档与外部资源（如CSS、图片等）的关系。浏览器会在解析HTML结构的同时下载<link>引用的资源。

@import规则




@import url("styles.css");

@import规则用于CSS文件中，它允许在一个CSS文件中引入另一个CSS文件。

区别

加载顺序：使用<link>的样式表会同时加载，而使用@import的样式表会等到页面全部加载完毕后再加载。
兼容性：@import可能不被一些老旧浏览器支持。
控制能力：@import可以在CSS文件中根据条件引入不同的样式表，而<link>不具备这种灵活性。

综上所述，通常推荐使用<link>标签来引入CSS，因为它更加直接、简单，并且是所有现代浏览器都支持的标准方法。

- 阅读更多 -

前端三剑客 —— CSS （坐标问题、定位问题和图片居中）

System

2024-08-26

所有,css

在CSS中，解决坐标问题、定位问题和图片居中可以使用不同的技术。以下是一些常用的方法：

坐标问题：使用position属性结合top、right、bottom、left属性来控制元素的位置。




.element {
  position: absolute;
  top: 100px;
  left: 200px;
}

定位问题：使用flexbox或grid布局系统来对子元素进行排版。




.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

图片居中：可以使用margin属性设置为auto来实现水平居中。




img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 根据需要设置宽度 */
}

或者使用flexbox来居中图片：




.container {
  display: flex;
  justify-content: center;
}
 
.container img {
  max-width: 100%; /* 根据需要设置最大宽度 */
}

这些是解决坐标问题、定位问题和图片居中的常见方法，具体使用哪种方法取决于具体的布局需求和上下文环境。

- 阅读更多 -

CSS-自适应导航栏（flex | grid）

System

2024-08-26

所有,css

以下是一个使用CSS Flexbox创建自适应导航栏的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应导航栏</title>
<style>
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #333;
  }
 
  .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
 
  .nav ul li {
    margin-left: 10px;
    margin-right: 10px;
  }
 
  .nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: block;
  }
 
  .nav ul li a:hover {
    background-color: #555;
  }
</style>
</head>
<body>
 
<div class="nav">
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</div>
 
</body>
</html>

这段代码创建了一个水平的导航栏，使用Flexbox布局进行对齐和空间分配。导航链接是一个无序列表，每个链接被包裹在一个列表项<li>中，并且使用了a元素的display: block属性来允许为链接指定宽度和填充。

- 阅读更多 -

Vite 中怎么添加全局 scss 文件

System

2024-08-26

所有,css

在Vite项目中添加全局SCSS文件，你需要做以下几步：

安装SCSS加载器：
确保你已经安装了sass或scss相关的包，例如sass或sass-loader。如果还没有安装，可以通过npm或yarn来安装：




npm install sass -D
# 或者
yarn add sass -D

创建全局SCSS文件：
在项目中创建一个全局的SCSS文件，比如styles/global.scss。
配置Vite配置文件：
在Vite配置文件中（通常是vite.config.js或vite.config.ts），使用Vite提供的插件API或配置选项来引入全局SCSS文件。

例如，你可以使用Vite提供的css.preprocessorOptions配置来指定全局样式文件：




// vite.config.js
import { defineConfig } from 'vite';
import scss from 'sass';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
});

在这个配置中，@import "@/styles/global.scss";指令会被加入到每个被Vite处理的SCSS文件中，使得global.scss中的样式规则会被全局应用。

注意：@ 符号通常在Vite配置中代表项目的src目录。

确保你的全局SCSS文件中的样式规则是全局作用域的，或者使用Vite提供的additionalData选项来避免局部样式意外地污染全局命名空间。

- 阅读更多 -

常见需求：CSS 实现弧形卡片的 3 种方式

System

2024-08-26

所有,css




/* 方法 1: 使用 border-radius 创建弧形 */
.arc-card-1 {
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
 
/* 方法 2: 使用伪元素和 transform 创建弧形 */
.arc-card-2 {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  overflow: hidden;
}
.arc-card-2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: inherit;
  border-top-right-radius: 50%;
}
 
/* 方法 3: 使用 SVG 创建弧形 */
.arc-card-3 {
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  mask: url(#arc-mask); /* 引用 SVG 中定义的遮罩 */
}




<!-- 在 HTML 中的 <head> 或 <body> 里定义 SVG 遮罩 -->
<svg width="0" height="0">
  <defs>
    <clipPath id="arc-mask">
      <path d="M0,0 L200,0 A50,50 0 0 1 200,100 L0,100 Z" fill="white"></path>
    </clipPath>
  </defs>
</svg>

以上 CSS 代码展示了创建弧形卡片的三种不同方法：使用 border-radius、伪元素和 transform，以及 SVG 遮罩。每种方法都有各自的优点和适用场景，可以根据实际需求选择合适的方法实现弧形卡片效果。

- 阅读更多 -

【前端基础系列】CSS篇-带你了解position:sticky

System

2024-08-26

所有,css

position: sticky; 是CSS中的一个位置值，它使元素在达到某个滚动位置时变为固定定位。这种行为类似于position: relative;和position: fixed;的结合体，但是它只在达到某个阈值时变为固定，这个阈值由用户设置。

解决方案：

使用position: sticky;




.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 离顶部的距离 */
  background-color: green; /* 背景颜色 */
  border: 2px solid #fff; /* 边框 */
}

使用场景：




<div>
  <h2>我是一个普通的标题</h2>
  <div class="sticky">我是一个粘性定位的元素</div>
  <!-- 更多的内容 -->
</div>

在这个例子中，.sticky元素在滚动时会“粘”在顶部，直到其父元素的顶部与视窗顶部对齐时，它才会变为固定定位。

注意：position: sticky; 的兼容性较好，但是在使用时需要设置top、right、bottom、left其中之一的值，这个值决定了当滚动到何种程度时元素变为固定定位。此外，position: sticky; 在移动端的表现可能不同于在桌面端，因为移动端的滚动行为不同。

- 阅读更多 -

CSS图片对齐方式以及定义div边框最后多出一行div边框的解决方法

System

2024-08-26

所有,css

问题1：CSS图片对齐方式

CSS中可以通过设置vertical-align属性来控制图片或其他行内元素（inline element）相对于其父元素的对齐方式。常用的对齐方式有：

baseline：默认值，元素放置在父元素的基线上。
top：使元素与父元素的顶部对齐。
middle：使元素的中部与父元素的中部对齐。
bottom：使元素与父元素的底部对齐。
text-top：使元素的顶部与父元素字体的顶部对齐。
text-bottom：使元素的底部与父元素字体的底部对齐。

示例代码：




img {
  vertical-align: middle; /* 将图片垂直居中对齐 */
}

问题2：解决div边框多出一行的问题

这个问题通常是由于块级元素（如div）之间的空白间隔引起的。解决方法有：

去除div之间的空格：将div的结束标签和下一个div的开始标签紧密放置在一起，避免在它们之间产生空格或换行。




<div>Content 1</div><div>Content 2</div>

使用CSS的font-size: 0;技巧：在父元素上设置font-size为0，然后在子元素上重新设置正确的字体大小。




.parent {
  font-size: 0;
}
 
.child {
  font-size: 16px; /* 或其他需要的字体大小 */
}

使用CSS的margin属性：设置div的margin为负值，或者使用overflow: hidden属性来防止边框的扩展。




.div-container {
  overflow: hidden;
}

使用CSS的display: flex;或者display: grid;属性：这样可以避免块级元素的空白引起的边框问题。




.div-container {
  display: flex;
}

选择合适的方法应用到具体的HTML结构中即可解决多出的div边框问题。

- 阅读更多 -

http实时刷新数据Ajax，stm32单片机

System

2024-08-26

所有,ajax

问题描述不是很清晰，但我猜你可能想要实现一个通过Ajax实时从服务器获取数据，并在前端实时更新的功能。同时，你提到了STM32单片机，可能你想要将实时数据发送到STM32单片机并在其上显示。

以下是一个简单的示例，展示了如何使用JavaScript和Ajax从服务器获取数据，并在网页上实时更新。

前端JavaScript代码（使用jQuery）:




$(document).ready(function() {
    setInterval(function() {
        $.ajax({
            url: '/get_data',  // 假设这是你的服务器端路由
            type: 'GET',
            success: function(data) {
                // 假设服务器返回的是JSON数据
                // 更新页面上的元素
                $('#data_display').text(data.message);
            },
            error: function(error) {
                console.error('Error fetching data: ', error);
            }
        });
    }, 1000); // 每秒钟发送一次请求
});

服务器端代码（假设使用Node.js和Express）:




const express = require('express');
const app = express();
const port = 3000;
 
app.get('/get_data', (req, res) => {
    // 假设这是你想要发送到STM32的数据
    const data = { message: 'Hello from STM32' };
    res.json(data);
});
 
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

在这个例子中，前端每秒钟通过Ajax请求从服务器获取数据，服务器端每次收到请求后都会返回相同的数据。

如果你想要将数据发送到STM32，你需要在STM32上运行一个服务来监听来自外部的连接，并解析接收到的数据。这通常涉及到使用TCP/IP或者UDP协议，并在STM32上实现相应的网络栈。

由于你没有提到具体的STM32单片机型号和使用的操作系统，这里不能提供更详细的STM32相关代码。如果你具体到了型号和操作系统，我可以提供更针对性的帮助。

- 阅读更多 -

jquery+ajax前后端交互验证用户名是否唯一

System

2024-08-26

所有,ajax

前端代码（jQuery+AJAX）：




$(document).ready(function() {
    $('#username').on('blur', function() {
        var username = $(this).val();
        if (username != '') {
            $.ajax({
                url: '/check-username', // 后端接口地址
                type: 'POST',
                data: { username: username },
                success: function(response) {
                    if (response.status === 'success') {
                        $('#username-message').text(response.message).css('color', 'green');
                    } else {
                        $('#username-message').text(response.message).css('color', 'red');
                    }
                },
                error: function() {
                    alert('Error occurred while checking username. Please try again later.');
                }
            });
        }
    });
});

后端代码（Node.js示例）：




const express = require('express');
const app = express();
const bodyParser = require('body-parser');
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
 
app.post('/check-username', (req, res) => {
    const username = req.body.username;
    // 假设检查用户名的逻辑
    const isUsernameTaken = false; // 假设用户名不重复
 
    if (isUsernameTaken) {
        res.json({ status: 'error', message: 'Username is already taken.' });
    } else {
        res.json({ status: 'success', message: 'Username is available.' });
    }
});
 
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

确保后端运行在3000端口，前端代码可以

- 阅读更多 -

jQuery Ajax 设置请求头

System

2024-08-26

所有,ajax

在jQuery中，您可以使用$.ajax函数的beforeSend选项来设置Ajax请求头。以下是一个示例代码，展示了如何设置请求头：




$.ajax({
    url: 'your-endpoint-url',
    type: 'GET', // 或者 'POST', 'PUT' 等
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Your-Header-Name', 'Your-Value');
        // 可以设置多个请求头
        // xhr.setRequestHeader('Another-Header-Name', 'Another-Value');
    },
    success: function (data) {
        // 请求成功时的回调函数
    },
    error: function (jqXHR, textStatus, errorThrown) {
        // 请求失败时的回调函数
    }
});

在这个例子中，beforeSend 函数接收一个XMLHttpRequest对象作为参数，然后您可以使用setRequestHeader方法来添加或修改请求头。您需要替换 'Your-Header-Name' 和 'Your-Value' 为您想要设置的头部名称和值。

- 阅读更多 -