System 发布的文章

CSS 实现文本省略显示【单行，2行，多行】

2024-08-17

CSS可以通过设置text-overflow, white-space, 和 overflow 属性来实现文本的省略显示。

单行文本省略显示：




.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 添加省略符号 */
}

两行文本省略显示（部分浏览器不支持）：




.multi-line-ellipsis {
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 添加省略符号 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 2; /* 限制在两行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
}

多行文本省略显示（兼容性较好）：




.multi-line-ellipsis {
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 添加省略符号 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 3; /* 根据需求设置行数 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
}

在HTML中使用：




<div class="single-line-ellipsis">这是单行文本省略显示的例子</div>
<div class="multi-line-ellipsis">这是两行文本省略显示的例子，需要更多行时可以扩展类名或者修改CSS属性</div>

注意：多行文本省略显示的-webkit-line-clamp属性需要一个整数来指定显示的行数。这种方法主要是针对WebKit内核的浏览器，对于大多数现代浏览器都有效，但不适用于IE。

前端入门（认识HTML，CSS，JavaScript三件套）

2024-08-17

HTML、CSS和JavaScript是网页前端开发的三个主要技术。以下是每种技术的简单介绍和示例代码。

HTML:

Hypertext Markup Language，超文本标记语言。用于构建网页的结构。




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

CSS:

Cascading Style Sheets，层叠样式表。用于控制网页的样式和布局。




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
p {
    color: green;
}

JavaScript:

一种编程语言。用于添加交互性和动态效果。




function showAlert() {
    alert('你好，世界！');
}
 
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myButton').addEventListener('click', showAlert);
});

HTML定义了网页的结构，CSS用于装饰页面，而JavaScript添加了行为。这三者结合使用，可以创建一个富有交互性的网页或网站。

Tailwind CSS - 无需离开HTML即可快速构建美观的网站

2024-08-17

Tailwind CSS 是一个实用的 CSS 框架，旨在提高开发者的效率。它提供了一系列的类，开发者可以直接在HTML元素上使用这些类，来实现一些常见的CSS样式，而无需手写大量的CSS代码。

以下是一个使用Tailwind CSS构建的简单HTML示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Example</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-blue-500">
        <nav class="p-6 flex justify-between text-white"">
            <a class="text-xl font-bold" href="#">Brand</a>
            <ul class="flex">
                <li><a href="#" class="p-3">Home</a></li>
                <li><a href="#" class="p-3">About</a></li>
                <li><a href="#" class="p-3">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main class="p-10">
        <h1 class="text-3xl font-bold text-gray-900">Welcome to Tailwind CSS</h1>
        <p class="text-gray-600">This is a simple example to demonstrate how to use Tailwind CSS.</p>
    </main>
</body>
</html>

在这个例子中，我们使用了Tailwind CSS提供的一些基本类来构建一个带有导航栏的简单页面头部和一个包含欢迎信息的主体区域。通过这种方式，开发者可以快速搭建出一个响应式的网页，而无需编写大量的CSS代码。

css预处理器scss的使用&&如何全局引入

2024-08-17

SCSS 是 Sassy CSS 的缩写，它是 Sass 的一个语言超集，它遵循相同的编译规则，并且可以直接替换 CSS 来使用 SCSS。

要在项目中使用 SCSS 预处理器，你需要安装一个能够编译 SCSS 到 CSS 的工具，比如 Dart Sass 或者 Node Sass。以下是如何全局引入 SCSS 文件的步骤：

安装 Sass 编译器。




npm install -g sass

创建你的 SCSS 文件，例如 styles.scss。




// styles.scss
$font-color: #333;
 
body {
  color: $font-color;
}

使用 sass 命令行工具将 SCSS 编译成 CSS。




sass styles.scss styles.css

在 HTML 文件中引入生成的 CSS 文件。




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello, SCSS!</p>
</body>
</html>

如果你想要在项目中自动编译 SCSS 文件，你可以使用构建工具如 Webpack 或 Gulp，并配置相应的任务来监视 SCSS 文件的变化并自动编译。

以下是一个使用 Webpack 配置的例子：

安装必要的依赖。




npm install --save-dev sass-loader sass webpack

在 webpack.config.js 中添加 SCSS 处理规则。




// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
  // ...
};

在你的 JS 文件中引入 SCSS 文件。




// main.js
import './styles.scss';
 
// 应用逻辑...

这样，当你运行 Webpack 构建命令时，SCSS 文件将会被编译成 CSS，并且通过 style-loader 自动添加到你的 HTML 文档中。

复制即用！纯html&css写的炫酷input输入框

2024-08-17

以下是一个使用纯HTML和CSS创建的炫酷输入框的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷输入框</title>
<style>
  .cool-input {
    position: relative;
    width: 300px;
    margin: 50px;
  }
  .cool-input input {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background: #f2f2f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    color: #333;
    outline: none;
  }
  .cool-input input::placeholder {
    color: #999;
    opacity: 0.8;
  }
  .cool-input .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3399ff;
    transition: all 0.3s ease;
  }
  .cool-input input:focus + .underline {
    height: 100%;
  }
</style>
</head>
<body>
 
<div class="cool-input">
  <input type="text" placeholder="输入内容...">
  <div class="underline"></div>
</div>
 
</body>
</html>

这段代码展示了如何创建一个带有下划线动画的输入框，在用户聚焦输入框时，下划线会扩展到完整的高度，提供了良好的视觉反馈。这是一个简单的例子，可以根据需要添加更多的样式和交互效果。

前端基础篇-深入了解用 HTML 与 CSS 实现标题排版

2024-08-17




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题排版示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .title {
            color: #333333;
            font-size: 24px;
            font-weight: bold;
        }
        .subtitle {
            color: #666666;
            font-size: 18px;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <h1 class="title">这是一个关于前端基础的标题</h1>
    <h2 class="subtitle">这是对上述标题的补充说明</h2>
</body>
</html>

这段代码展示了如何使用HTML和CSS定义标题，并通过CSS为它们设置样式。.title类用于大标题，而.subtitle类用于次级说明文字。通过这个例子，学习者可以理解如何使用CSS对网页文本进行样式化，为后续的学习和开发奠定基础。

css 将div固定在页面顶部不随页面滑动

2024-08-17

要使用CSS将div固定在页面顶部并且不随着页面滑动，可以使用position: fixed;属性。这样设置后，div将相对于视口固定，而不是文档可滚动区域。

下面是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Div Example</title>
<style>
  .fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="fixed-top">
  我在顶部固定不动！
</div>
 
<!-- 页面的其他内容 -->
 
</body>
</html>

在这个例子中，.fixed-top 类应用于一个div，使其固定在页面的顶部。无论页面如何滚动，这个div都会保持在视口的顶部。

2024-08-17

所有,ajax

原生AJAX请求示例：




var xhr = new XMLHttpRequest();
xhr.open("POST", "your_url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send("param1=value1&param2=value2");

JQuery $.ajax 请求示例：




$.ajax({
  type: "POST",
  url: "your_url",
  data: { param1: "value1", param2: "value2" },
  success: function(response){
    console.log(response);
  },
  error: function(xhr, status, error){
    console.error("An error occurred: " + status + "\nError: " + error);
  }
});

自定义AJAX POST请求示例：




function postRequest(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(data);
}
 
postRequest("your_url", "param1=value1&param2=value2", function(response){
  console.log(response);
});

自定义AJAX GET请求示例：




function getRequest(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}
 
getRequest("your_url", function(response){
  console.log(response);
});

[vue] ajax post form表单提交 json提交

2024-08-17

所有,ajax

在Vue中，可以使用axios库来发送POST请求，并将表单数据作为JSON提交。以下是一个简单的例子：

首先，确保安装axios：




npm install axios

然后，在Vue组件中使用axios发送POST请求：




<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.name" placeholder="Name">
    <input type="email" v-model="formData.email" placeholder="Email">
    <button type="submit">Submit</button>
  </form>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      axios.post('YOUR_API_ENDPOINT', this.formData)
        .then(response => {
          // 处理响应
          console.log(response.data);
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    }
  }
};
</script>

在这个例子中，当表单被提交时，submitForm 方法会被触发。axios.post 方法会向指定的API端点发送一个POST请求，并将formData对象作为请求体发送（JSON格式）。成功提交后，你可以在.then 回调中处理响应数据，错误则在.catch 回调中处理。