分类 css 下的文章

2024-08-20




/* 设置滚动容器 */
.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory; /* 启用垂直滚动切换，并且每一个子元素都必须对齐 */
  scroll-padding-top: 50px; /* 在滚动容器顶部添加额外的空间 */
}
 
/* 设置滚动子元素 */
.scroll-item {
  scroll-snap-align: start; /* 每个子元素在滚动时对齐其顶部到其父容器的顶部 */
  height: 100vh; /* 每个子元素的高度等于视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20vw; /* 使用视口宽度的20倍来调整文本大小，保持良好的缩放效果 */
}
 
/* 示例代码中的第一个子元素 */
.scroll-item:nth-child(1) {
  background: #f6a5c0; /* 设置第一个子元素的背景颜色 */
}
 
/* 示例代码中的第二个子元素 */
.scroll-item:nth-child(2) {
  background: #f8bd88; /* 设置第二个子元素的背景颜色 */
}
 
/* 示例代码中的第三个子元素 */
.scroll-item:nth-child(3) {
  background: #c7ecee; /* 设置第三个子元素的背景颜色 */
}

这段代码为一个包含三个子元素的滚动容器设置了CSS Scroll Snap。每个子元素在垂直滚动时都会对齐到其父容器的顶部，并且在滚动容器顶部有额外的空间。同时，每个子元素的高度被设置为视口的高度，确保了即使在移动设备上也能提供良好的用户体验。最后，通过flex布局的font-size属性使得文本大小适应不同屏幕尺寸，保持良好的缩放效果。

- 阅读更多 -

CSS中动画与过渡效果的实现技巧与性能优化建议

System

2024-08-20

所有,css




/* 定义一个简单的动画 */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}
 
/* 应用动画到一个元素上 */
.element {
  width: 100px;
  height: 100px;
  animation-name: example; /* 引用动画名称 */
  animation-duration: 4s; /* 动画周期 */
  animation-iteration-count: infinite; /* 动画无限次数播放 */
  /* 添加性能优化，避免不必要的硬件合成 */
  transform: translateZ(0);
}

这段代码定义了一个名为example的关键帧动画，并将其应用于.element类。动画从红色背景开始，在4秒内过渡到黄色背景，并无限循环。transform: translateZ(0);的使用是为了在不影响动画流畅性的前提下，提示浏览器使用硬件加速渲染，从而提升性能。

- 阅读更多 -

最新 H5 HTML CSS记录新手入门，前端敏捷开发

System

2024-08-20

所有,css

HTML、CSS 和 JavaScript 是前端开发的三大支柱。HTML 用于定义网页的结构，CSS 用于控制网页的样式，而 JavaScript 用于使网页具有交互性。

基本的HTML结构：

HTML 文档由一系列的元素构成，这些元素可以是如 div, span, a, img 等等。




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

基本的CSS样式：

CSS 可以通过内联方式、内部方式和外部方式添加到HTML中。




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

基本的JavaScript交互：

JavaScript 可以用来添加交互性到HTML页面。




<!DOCTYPE html>
<html>
<body>
 
<h2>JavaScript in HTML</h2>
 
<button type="button" onclick="alert('Welcome to my website')">Click Me!</button>
 
</body>
</html>

以上是一个非常基础的入门示例，实际的网页开发会涉及更多复杂的技术和概念，例如：

响应式设计（Responsive Design）
语义化标签（Semantic HTML）
CSS框架（CSS Frameworks）
模块化设计（Modular Design）
前端构建工具（Build Tools）如 Webpack, Gulp
JavaScript框架（JavaScript Frameworks）如 Angular, React, Vue
设计模式（Design Patterns）
性能优化（Performance Optimization）
可访问性（Accessibility）
可维护性（Maintainability）
测试（Testing）

这些都是前端开发中的重要主题，对于任何一个现代的网站或Web应用来说都至关重要。

- 阅读更多 -

Web前端笔记1.0【Html详解，CSS详解】

System

2024-08-20

所有,css

HTML详解:

HTML是用来描述网页的一种语言。

HTML元素:

HTML元素以开始标签起始，以结束标签终止。

元素的内容是开始标签与结束标签之间的内容。

某些HTML元素具有空内容，这些元素称为空元素，并且没有结束标签。

HTML属性:

属性提供了有关HTML元素的更多信息。

属性总是以名称/值对的形式出现，比如：name="value"。

HTML注释:




<!-- 这是一个HTML注释，注释中的内容不会显示在网页中 -->

CSS详解:

CSS是用来控制网页样式的一种语言。

CSS规则:

CSS规则由选择器和声明块组成。

声明块包含一条或多条用分号分隔的声明。

CSS注释:




/* 这是一个CSS注释，注释中的内容不会被CSS解析器执行 */

JavaScript待完善...

- 阅读更多 -

CSS基础(盒子模型、浮动、定位)

System

2024-08-20

所有,css

CSS盒子模型：




.box {
  width: 300px; /* 内容区域的宽度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
  box-sizing: border-box; /* 宽度和高度包含内边距和边框 */
}

CSS浮动：




.float-left {
  float: left; /* 元素向左浮动 */
  clear: left; /* 清除左侧浮动影响 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
  clear: right; /* 清除右侧浮动影响 */
}

CSS定位：




.relative {
  position: relative; /* 相对定位 */
  top: 10px; /* 相对于原位置向下移动10px */
  left: 20px; /* 相对于原位置向右移动20px */
}
 
.absolute {
  position: absolute; /* 绝对定位 */
  top: 50px; /* 相对于最近的已定位父元素向下移动50px */
  right: 30px; /* 相对于最近的已定位父元素向右移动30px */
}
 
.fixed {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 相对于视口向上移动0px，即固定在底部 */
  left: 0; /* 相对于视口向左移动0px */
}
 
.static {
  position: static; /* 静态定位，这是默认值 */
}

这些是CSS盒子模型、浮动和定位的基本概念和用法示例。在实际开发中，还会涉及更复杂的布局技巧，如flexbox和grid布局系统，但这些是基础，是必须掌握的。

- 阅读更多 -

Vite之对CSS的处理方式及使用

System

2024-08-20

所有,css

Vite是一种新型前端构建工具，它采用了基于ES模块的方式来处理资源，包括CSS。

在Vite中，对CSS的处理主要有以下几种方式：

全局CSS：在Vite中，你可以在项目的入口文件（通常是main.js或index.js）中直接导入CSS文件。Vite会处理这些CSS，并在构建时将其注入到入口的JavaScript chunk中。




import './style.css';

CSS模块：如果你希望将CSS作为一个模块，仅在需要的组件中使用，你可以在JavaScript文件中使用import语句来导入CSS模块。




// 导入CSS模块
import './style.module.css';

预处理器：Vite支持多种CSS预处理器，如Sass/SCSS、Less等。你只需要安装相应的预处理器依赖，并使用它们编写你的样式文件。




npm install -D sass




// 使用Sass编写的样式
<style lang="scss">
  $color: red;
  body {
    color: $color;
  }
</style>

样式绑定：Vue等框架支持样式绑定，你可以在组件中直接使用样式绑定。




<template>
  <div :class="{ active: isActive }"></div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>
 
<style>
.active {
  color: red;
}
</style>

插件支持：Vite允许使用插件来扩展其功能，你可以使用插件来集成其他CSS处理工具，如PostCSS。

以上是Vite处理CSS的一些基本方式，具体使用时需要根据项目需求和环境配置进行调整。

- 阅读更多 -

Vue3+vite引入Tailwind CSS

System

2024-08-20

所有,css

在Vue 3项目中引入Tailwind CSS，你需要按照以下步骤操作：

安装Tailwind CSS和postcss:




npm install -D tailwindcss postcss autoprefixer

使用Tailwind CSS CLI创建配置文件：




npx tailwindcss init -p

在tailwind.config.js中配置Tailwind CSS（如果没有自定义配置，通常不需要编辑这个文件）。
在项目的根目录下创建一个CSS文件（例如styles.css），并使用Tailwind directives来引入Tailwind CSS:




/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在vite.config.js中配置Vite以处理Tailwind CSS（如果你使用的是Vite作为构建工具）：




// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 如果需要处理CSS，则可能需要其他插件，例如postcss
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
})

在main.js或main.ts中引入Tailwind CSS:




// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './styles.css' // 引入样式文件
 
createApp(App).mount('#app')

最后，在index.html或你的Vue模板中使用Tailwind CSS类：




<div class="text-blue-500">Hello Tailwind!</div>

确保你的package.json中的scripts部分包含了Tailwind CSS需要的构建命令，例如：




"scripts": {
  "build": "vite build",
  "dev": "vite",
  "watch": "vite build --watch",
  "preview": "vite preview"
}

现在，你应该能够运行npm run dev启动开发服务器，并且在浏览器中看到使用Tailwind CSS样式的Vue 3应用。

- 阅读更多 -

一篇文章轻松拿下CSS常用定位方式，前端开发大型网站

System

2024-08-20

所有,css

CSS定位机制是前端开发中的核心技能之一。以下是几种常用的定位方式及其代码示例：

静态定位（Static Positioning）：
HTML元素默认的定位方式，不需要特别设置。




/* 无需额外设置定位，默认即为静态定位 */

相对定位（Relative Positioning）：
相对于其正常位置进行定位。




/* 相对定位 */
.relative-element {
  position: relative;
  top: 20px; /* 向下移动20px */
  left: 40px; /* 向右移动40px */
}

绝对定位（Absolute Positioning）：
相对于最近的非静态定位的父元素进行定位。




/* 绝对定位 */
.absolute-element {
  position: absolute;
  top: 10px; /* 相对于父元素向下移动10px */
  right: 30px; /* 相对于父元素向右移动30px */
}

固定定位（Fixed Positioning）：
相对于视口（浏览器窗口）进行定位，无论滚动条如何滚动。




/* 固定定位 */
.fixed-element {
  position: fixed;
  bottom: 0; /* 固定在底部 */
  left: 0; /* 固定在左边 */
}

粘性定位（Sticky Positioning）：
根据用户的滚动位置在相对和固定定位之间切换。




/* 粘性定位 */
.sticky-element {
  position: -webkit-sticky; /* 针对Safari的兼容性 */
  position: sticky;
  top: 0; /* 当向下滚动超过此元素时，它将固定在顶部 */
}

以上代码示例展示了如何在CSS中应用不同的定位方式。在实际开发中，可以根据设计需求和布局选择合适的定位方法。

- 阅读更多 -

(掌握)webpack的css处理和loader的使用

System

2024-08-20

所有,css




const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
 
module.exports = {
  // 省略其他配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 创建一个 CSS 文件，并且将 JS 中的样式通过 style-loader 添加到网页中
          // 'style-loader',
 
          // 替换为 MiniCssExtractPlugin.loader 以提取样式到CSS文件
          MiniCssExtractPlugin.loader,
 
          // 将 CSS 转化成 CommonJS 模块来 import 到 JS 中，并进行处理
          'css-loader',
 
          // 可选的，使用 PostCSS 自动添加浏览器前缀
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    // 实例化插件对象
    new MiniCssExtractPlugin({
      // 定义输出样式文件的名称
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[id].[contenthash].css'
    })
  ]
};

这个配置文件展示了如何使用 MiniCssExtractPlugin 替换 style-loader，从而提取 CSS 到单独的文件，而不是直接将其添加到网页中。同时，它也演示了如何添加 'css-loader' 和 'postcss-loader' 来处理 CSS 文件。这是一个更加现代和推荐的处理 CSS 的方法，特别是在生产环境中。

- 阅读更多 -

CSS中设置( 单行、多行 )超出显示省略号

System

2024-08-20

所有,css

在CSS中，可以使用text-overflow属性来设置超出容器部分显示为省略号。对于单行文本，可以使用white-space和overflow属性来实现。对于多行文本，可以使用display属性和-webkit-line-clamp属性来实现。

单行文本省略号显示：




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

多行文本省略号显示：




.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在3行内 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

注意：-webkit-line-clamp属性是一个不是标准的属性，它仅在基于WebKit内核的浏览器中有效，比如Chrome、Safari等，但是并不在所有浏览器中被支持。

- 阅读更多 -