分类前端技术下的文章

2024-08-19

CSS3 分页通常指的是使用 CSS3 创建分页效果，这可以通过变换或过渡来实现。以下是一个简单的例子，使用 CSS3 制作一个简单的分页效果：

HTML:




<div class="pagination">
  <a href="#" class="page active">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
</div>

CSS:




.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.page {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease-in-out;
}
 
.page.active {
  font-weight: bold;
}
 
.page:hover {
  transform: scale(1.1);
}

在这个例子中，.pagination 是一个包含分页链接的容器。.page 类定义了分页的基本样式，并且使用了 transition 属性来制作平滑的过渡效果。.page.active 是当前激活页的样式，.page:hover 是鼠标悬停时分页的变换样式。

- 阅读更多 -

CSS3属性之text-overflow:ellipsis

System

2024-08-19

所有,css3

text-overflow: ellipsis 是CSS3的一个属性，它用来说明当文本溢出包含它的元素时，应该如何显示文本的溢出部分。这个属性通常与 white-space: nowrap; 和 overflow: hidden; 一起使用，以确保文本在一行内显示，并且溢出的部分被省略号(…)替换。

解决方案：

直接在HTML元素中使用CSS样式：




<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
 
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

在CSS文件中定义样式：




/* CSS文件 */
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}




<!-- HTML文件 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

使用内联样式：




<!DOCTYPE html>
<html>
<body>
 
<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

以上三种方法都可以实现相同的效果，你可以根据你的项目需求和个人喜好选择使用哪种方法。

- 阅读更多 -

原生js实现图片预览,旋转,放大,缩小,拖拽

System

2024-08-19

所有,css3

以下是一个使用原生JavaScript实现的简单图片预览、旋转、放大、缩小和拖拽功能的示例代码。

HTML部分:




<div id="image-container">
  <img id="preview-image" src="path_to_your_image.jpg" alt="Image to preview" />
</div>

CSS部分:




#image-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  cursor: move;
}
 
#preview-image {
  width: 100%;
  height: auto;
  transform-origin: center center; /* necessary for rotating the image */
  transition: transform 0.3s ease; /* for smooth transformations */
  position: absolute; /* necessary for drag and drop */
}

JavaScript部分:




const container = document.getElementById('image-container');
const img = document.getElementById('preview-image');
let isDragging = false;
let startX, startY, x, y;
 
// 拖拽功能
container.addEventListener('mousedown', function(e) {
  isDragging = true;
  startX = e.clientX - parseInt(img.style.left);
  startY = e.clientY - parseInt(img.style.top);
});
 
document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    x = e.clientX - startX;
    y = e.clientY - startY;
    img.style.left = x + 'px';
    img.style.top = y + 'px';
  }
});
 
document.addEventListener('mouseup', function() {
  isDragging = false;
});
 
// 缩放功能
const scale = (ratio) => {
  img.style.width = (img.width * ratio / 100) + 'px';
  img.style.height = (img.height * ratio / 100) + 'px';
};
 
// 放大
const zoomIn = () => scale(120);
// 缩小
const zoomOut = () => scale(80);
 
// 旋转功能
const rotate = (angle) => {
  img.style.transform = `rotate(${angle}deg)`;
};
// 顺时针旋转
const rotateClockwise = () => rotate(img.getAttribute('data-angle') + 90);
// 逆时针旋转
const rotateCounterClockwise = () => rotate(img.getAttribute('data-angle') - 90);
 
// 绑定按钮事件
document.getElementById('zoom-in').addEventListener('click', zoomIn);
document.getElementById('zoom-out').addEventListener('click', zoomOut);
document.getElementById('rotate-cw').addEventListener('click', rotateClockwise);
document.getElementById('rotate-ccw').addEventListener('click', rotateCounterClockwise);

确保在HTML中添加对应的按钮以绑定这些事件：




<button id="zoom-in">放大</button>
<button id="zoom-out">缩小</button>
<button id="rotate-cw">顺时针旋转</button>
<button id="rotate-ccw">逆时针旋转</button>

这段代码提供了图片的基本预览功能，并添加了拖拽、缩放、旋转的按钮，以及相应的JavaScript函数来处理这些操作。记得将图片的src属性替换为你要预览的图片路径。

- 阅读更多 -

三种让DIV标签中的P标签水平和垂直都居中方法

System

2024-08-19

所有,css3

要使DIV中的P标签水平和垂直居中，可以使用不同的CSS技术。以下是三种方法：

使用Flexbox布局：




div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 设置高度 */
}

使用Grid布局：




div {
  display: grid;
  place-items: center; /* 水平垂直居中的简写 */
  height: 200px; /* 设置高度 */
}

使用绝对定位和transform：




div {
  position: relative;
  height: 200px; /* 设置高度 */
}
 
p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向上、向左移动自身高度/宽度的一半 */
}

以下是HTML结构和CSS样式的结合示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered P Tag in Div</title>
<style>
  /* 方法1：Flexbox */
  .container-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 1px solid #000;
  }
 
  /* 方法2：Grid */
  .container-grid {
    display: grid;
    place-items: center;
    height: 200px;
    border: 1px solid #000;
  }
 
  /* 方法3：绝对定位和transform */
  .container-absolute {
    position: relative;
    height: 200px;
    border: 1px solid #000;
  }
  .container-absolute p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
</head>
<body>
 
<div class="container-flex">
  <p>Flexbox Method</p>
</div>
 
<div class="container-grid">
  <p>Grid Method</p>
</div>
 
<div class="container-absolute">
  <p>Absolute Positioning with Transform</p>
</div>
 
</body>
</html>

以上代码展示了三种不同的方法来使得DIV中的P标签水平和垂直居中，你可以根据自己的需求选择合适的方法。

- 阅读更多 -

多行文字text-overflow: ellipsis省略号失效问题

System

2024-08-19

所有,css3

text-overflow: ellipsis 主要用于单行文本的溢出显示省略号。如果你在多行文本上使用这个属性，它可能不会工作，因为 text-overflow: ellipsis 仅适用于一行文本的末尾。

对于多行文本溢出显示省略号的需求，可以使用其他方法。以下是一些可能的解决方案：

CSS Line Clamp

CSS Line Clamp 是一个提议中的特性，可以指定元素显示的最大行数。然后，超出指定行数的文本会显示省略号。不过，这个特性目前并不是所有浏览器都支持。




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Number of lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

使用JavaScript

如果你需要在多行文本上显示省略号，并且需要兼容所有浏览器，你可能需要使用JavaScript来动态地截断文本并添加省略号。以下是一个简单的JavaScript函数，用于实现这个功能：




function clampText(element, maxLines) {
  const context = element.getBoundingClientRect();
  const style = getComputedStyle(element);
  const lineHeight = parseInt(style.lineHeight);
  const maxHeight = maxLines * lineHeight;
 
  element.innerHTML = element.textContent.slice(0, (function() {
    const text = 0;
    const tempEl = document.createElement('div');
    tempEl.style.font = style.font;
    tempEl.style.lineHeight = style.lineHeight;
    tempEl.style.height = '0px';
    tempEl.style.overflow = 'hidden';
    tempEl.textContent = element.textContent;
    document.body.appendChild(tempEl);
    let count = 0;
    while (tempEl.offsetHeight < maxHeight) {
      text += tempEl.textContent.length;
      count += 1;
      tempEl.textContent += '...';
    }
    document.body.removeChild(tempEl);
    return text - 3;
  })());
}
 
const multilineText = document.getElementById('multiline-text');
clampText(multilineText, 3); // 3 is the maximum number of lines

在这个例子中，clampText 函数通过创建一个临时的DOM元素，动态地计算文本的高度，直到它超过了所需的最大行高。然后，函数截断文本，并在末尾添加省略号。

- 阅读更多 -

10Rust前端技术：HTMLCSS3与ES6+新特性解析与应用

System

2024-08-19

所有,css3




// 假设我们有一个Rust函数，用于将字符串转换为大写
fn to_uppercase(input: &str) -> String {
    input.to_uppercase()
}
 
// 在Rust中，我们可以使用一个宏来导出函数到JavaScript
#[wasm_bindgen]
pub fn export_to_uppercase(input: &str) -> String {
    to_uppercase(input)
}
 
// 以下是JavaScript代码，用于加载和使用Rust生成的WebAssembly模块
import("./your_rust_module_path").then(module => {
    const uppercased = module.export_to_uppercase('hello world');
    console.log(uppercased); // 输出: 'HELLO WORLD'
});

这个例子展示了如何在Rust中定义一个简单的函数，并使用wasm_bindgen宏来导出它，以便它可以在WebAssembly模块中被JavaScript代码调用。然后，在JavaScript中，我们通过动态导入Rust模块并调用该函数来演示如何使用Rust代码生成的WebAssembly。

- 阅读更多 -

css笔记：（背景相关的属性）

System

2024-08-19

所有,css

背景相关的CSS属性包括：

background-color: 设置元素的背景颜色。
background-image: 将图像设置为背景。
background-position: 设置背景图像的起始位置。
background-size: 设置背景图片的尺寸。
background-repeat: 设置是否及如何重复背景图像。
background-clip: 设置背景的绘制区域。
background-origin: 设置背景图片的定位区域。
background-attachment: 设置背景图像是否固定或与页面滚动。
background: 简写属性，可以同时设置以上所有背景属性。

示例代码：




/* 设置背景颜色为灰色 */
.element {
  background-color: #808080;
}
 
/* 设置背景图片，不重复，居中 */
.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置背景图片，覆盖整个元素，不重复，居中，固定到视口 */
.element {
  background: url('image.jpg') no-repeat center / cover fixed;
}

以上代码展示了如何使用这些属性来设置元素的背景样式。简写的background属性可以包括颜色，图像，位置，大小，重复，剪切和附着的值，并且它是设置背景最简洁的方法。

- 阅读更多 -

【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

System

2024-08-19

所有,css

在Vue 3 + Vite项目中引入并使用SCSS，首先需要确保你的项目支持SCSS。Vite通过插件自动处理这部分。

安装依赖：




npm install -D sass

在Vue组件中使用SCSS：

在.vue文件中，可以在<style>标签中指定lang="scss"来使用SCSS：




<template>
  <div class="example">Hello, SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
.example {
  color: blue;
  font-size: 16px;
  &:hover {
    color: red;
  }
}
</style>

创建并使用全局SCSS变量：

首先，在项目根目录下创建一个SCSS文件（例如styles/variables.scss），定义变量：




// styles/variables.scss
$primary-color: blue;
$font-size: 16px;

然后，在vite.config.js中配置SCSS全局变量：




// vite.config.js
import { defineConfig } from 'vite';
import scssConfig from './styles/variables.scss';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$shared-styles: ${JSON.stringify(scssConfig)};`
      }
    }
  }
});

最后，在组件的<style>中使用这些全局变量：




<template>
  <div class="global-example">Hello, Global SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
@import '~@/styles/variables.scss'; // 导入SCSS变量文件
 
.global-example {
  color: $primary-color;
  font-size: $font-size;
  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

确保vite.config.js中的路径是正确的，并且additionalData选项用于将SCSS变量导入到每个<style>标签中。在组件的<style>标签中，可以直接使用这些全局变量。

- 阅读更多 -

css常见问题总结，阿里、百度、美团、携程、蚂蚁面经分享

System

2024-08-19

所有,css

由于提问中包含了很多不同公司的面试题，每个公司可能会有不同的面试题，因此我无法一一列举。但我可以提供一些通用的CSS问题，这些问题在各大公司的面试中可能会被问到。

CSS盒模型
- 标准盒模型（W3C标准）：元素的宽度 = 内容宽度 + padding + border + margin
- IE盒模型（怪异模式）：元素的宽度 = 内容宽度 + margin
CSS选择器
- 标签选择器（元素选择器）
- 类选择器
- ID选择器
- 通配选择器
- 子选择器
- 后代选择器
- 相邻选择器
- 伪类选择器
- 属性选择器
CSS的优先级
- 内联样式 > 内部样式表 > 外部样式表
- ID选择器 > 类选择器 > 标签选择器
- 相邻选择器（+）> 子选择器（>）> 后代选择器（空格）
- 伪类选择器（如:hover）> 标签选择器
CSS布局
- 静态布局（标准流）
- 浮动布局（float）
- 定位布局（position）
- 弹性布局（Flexbox）
- 网格布局（Grid）
CSS盒子模型、BFC、IFC
- 盒子模型：content、padding、border、margin
- BFC（Block Formatting Context）：解决外边距塌陷问题
- IFC（Inline Formatting Context）：解决行内元素的布局问题
CSS的Hack
- 浏览器特定的样式
- 条件注释Hack（只适用于IE）
CSS的Filter效果
- 模糊效果（blur()）
- 灰度效果（grayscale()）
- sepia效果（sepia()）
- 饱和度效果（saturate()）
- 对比度效果（contrast()）
- 亮度效果（brightness()）
- 反色效果（invert()）
- 饱和度效果（hue-rotate()）
CSS动画和变换
- 使用transition实现平滑的过渡效果
- 使用animation实现复杂的动画序列
- 使用transform实现2D或3D变换
CSS清除浮动
- 使用额外标签法（在最后一个浮动元素后添加一个空的标签，设置样式为clear: both）
- 使用伪元素清除法（在父元素上添加一个伪元素，设置样式为clear: both）
- 使用父元素的overflow属性为auto或hidden（不推荐，可能会造成不需要的滚动条出现）
CSS优化
- 减少HTTP请求数（合并文件、图片 sprites）
- 使用内容分发网络（CDN）
- 添加缓存控制（如Cache-Control、Expires）
- 代码压缩（去除空格、换行、注释）
- 使用CSS预处理器（如Sass、Less）
- 优化CSS选择器

每个问题都可以展开讨论很多，以上只是一些基本的概览。在实际面试中，可能还会问到更具体的技术问题，如响应式布局、CSS3新特性、跨浏览器兼容性等。

System

2024-08-19

所有,css

这个错误信息表明你正在尝试构建一个项目，而该项目依赖于viewerjs这个npm包。构建过程中，系统提示你需要安装这个依赖。

解决方法：

打开命令行工具（例如终端、命令提示符或PowerShell）。
切换到你的项目目录。
执行npm install --save viewerjs命令。这将会把viewerjs添加到你项目的package.json文件中的dependencies部分，并下载安装它。

如果viewerjs包是一个特定的git仓库或分支，你可以使用以下格式来安装：




npm install --save git+https://git@github.com/user/viewerjs.git#branch_name

确保你在项目的根目录下执行这个命令，这样npm才能正确地更新package.json文件。

如果你在执行上述命令后仍然遇到问题，请检查你的npm配置和网络连接，以确保npm能够从npm仓库下载包。如果问题依旧，可以尝试清除npm缓存或检查是否有任何网络防火墙或代理设置阻止了npm的访问。

- 阅读更多 -