1. 首页
  2. 标签
  3. css
【Vue3】PostCss 适配
System
2024-08-13
所有,css

在Vue 3项目中，如果你需要配置PostCSS，你可以通过以下步骤进行：

  1. 安装PostCSS插件：

    使用npm或yarn安装你需要的PostCSS插件。例如，如果你想使用Autoprefixer和PostCSS的Import插件，你可以安装它们：

    


npm install postcss-import autoprefixer --save-dev

    或者使用yarn：

    


yarn add postcss-import autoprefixer --dev

  2. 配置PostCSS：

    在Vue 3项目中，PostCSS的配置通常在postcss.config.js文件中设置。如果项目中没有这个文件，你可以手动创建它。

  3. 编辑postcss.config.js：

    


module.exports = {
  plugins: {
    // 引入postcss-import插件
    'postcss-import': {},
    // 自动添加浏览器厂商前缀
    autoprefixer: {},
    // 其他PostCSS插件...
  }
};

  4. 确保Vue项目中的vue.config.js文件配置正确，以便于Vue CLI可以找到并使用这个PostCSS配置。

    


// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-import'),
          require('autoprefixer'),
          // 其他PostCSS插件...
        ]
      }
    }
  }
};

以上步骤提供了一个基本的PostCSS配置示例。根据你的具体需求，你可能需要添加或调整插件和选项。

- 阅读更多 -
CSS实现文字上下滚动、间歇滚动和无限滚动
System
2024-08-13
所有,css

要实现文字的上下滚动、间歇滚动和无限滚动，可以使用CSS的动画（animations）特性。以下是实现这些效果的CSS代码示例：

  1. 文字上下滚动：



@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
 
.scrolling-text {
  animation: scroll 5s linear infinite;
}
  1. 文字间歇滚动：



@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
 
.paused-scrolling-text {
  animation: scroll 5s linear infinite;
  animation-play-state: paused;
}
  1. 无限滚动：



@keyframes loopScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
 
.infinite-scrolling-text {
  animation: loopScroll 5s linear infinite;
}

在HTML中，你可以这样使用这些类：




<div class="scrolling-text">这里是连续滚动的文字。</div>
<div class="paused-scrolling-text">这里是暂停滚动的文字。</div>
<div class="infinite-scrolling-text">这里是无限滚动的文字。</div>

这些CSS规则定义了一个关键帧动画scroll，它使文本从其初始位置向上移动到不可见的地方，然后返回初始位置。根据需求，可以调整动画的持续时间（例如，将5s更改为你想要的时间长度）和其他属性（如动画的效果）。

- 阅读更多 -
css-页面布局
System
2024-08-13
所有,css

要使用CSS进行页面布局，你可以使用多种技术，如浮动、定位、Flexbox或Grid。以下是使用Flexbox进行简单页面布局的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout Example</title>
<style>
  .container {
    display: flex; /* 指定为Flexbox布局 */
    height: 100vh; /* 使用视口高度 */
  }
 
  .sidebar {
    flex: 0 0 200px; /* 不伸缩，固定宽度200px */
    background-color: #f2f2f2; /* 侧边栏背景色 */
  }
 
  .main-content {
    flex: 1; /* 伸缩区域，占据剩余空间 */
    background-color: #ffffff; /* 主内容区背景色 */
    overflow: auto; /* 长内容时自动出现滚动条 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
</div>
</body>
</html>

这个例子创建了一个具有侧边栏和主内容区的页面布局。侧边栏宽度固定为200px，主内容区自动占据剩余空间，并在内容超出时显示滚动条。这是一个简洁而有效的Flexbox布局示例。

- 阅读更多 -
HTML5+CSS3+移动web——CSS进阶
System
2024-08-13
所有,css

在HTML5和CSS3的基础上，创建一个简单的移动端兼容的网页，并使用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>
        /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
 
        .container {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
 
        /* 进阶样式 */
        input[type="text"],
        input[type="email"],
        textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
 
        input[type="text"]:focus,
        input[type="email"]:focus,
        textarea:focus {
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        }
 
        button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
 
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="">
            <label for="name">姓名:</label>
            <input type="text" id="name" required>
 
            <label for="email">邮箱:</label>
            <input type="email" id="email" required>
 
            <label for="message">消息:</label>
            <textarea id="message" required></textarea>
 
            <button type="submit">提交</button>
        </form>
    </div>
</body>
</html>

这个简单的HTML和CSS示例展示了如何创建一个响应式的表单，使用了CSS3的边框圆角和阴影效果，以及输入框聚焦时的样式变化。同时，使用了视口元标签确保在移动设备上正确显示。这个示例教学了如何使用HTML5和CSS3创建现代化的移动友好表单，并展示了如何使用CSS进

- 阅读更多 -
HTML + CSS 连载 | 36 - select 下拉列表
System
2024-08-13
所有,css

在HTML中，我们可以使用<select>元素来创建下拉列表，并使用<option>元素来定义下拉列表中的选项。在CSS中，我们可以使用样式来美化这些元素。

以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表示例</title>
<style>
    select {
        padding: 5px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }
    option {
        padding: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
 
<select>
    <option value="option1" selected>选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
</select>
 
</body>
</html>

在这个例子中，我们创建了一个简单的下拉列表，其中包含四个选项。我们还使用CSS为<select>和<option>元素添加了一些基本样式。当用户点击下拉列表时，可以看到四个选项，并且可以选择其中一个。

- 阅读更多 -
CSS弹性盒子知识点
System
2024-08-13
所有,css

CSS弹性盒子（Flexible Box，Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单，主要应对一维布局。

下面是一些常用的CSS弹性盒子知识点和相应的代码示例：

  1. 使用display: flex;来定义一个弹性容器。



.container {
  display: flex;
}
  1. 使用flex-direction属性来定义项目的方向。



.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  1. 使用justify-content属性来定义项目在主轴上的对齐方式。



.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
  1. 使用align-items属性来定义项目在交叉轴上的对齐方式。



.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  1. 使用flex-wrap属性来定义如何换行。



.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  1. 使用flex-flow属性是flex-direction和flex-wrap的简写。



.container {
  flex-flow: <flex-direction> <flex-wrap>;
}
  1. 使用flex属性来定义项目的放大、缩小和优先级。



.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
  1. 使用align-self属性来对单个项目在交叉轴上进行对齐。



.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

这些是CSS弹性盒子布局的基本知识点和相应的代码示例，能够帮助开发者快速理解并应用弹性盒子布局模型。

- 阅读更多 -
使用 HTML、CSS 和 JavaScript 实现滚动触发的小球弹出和切换 Banner 动画
System
2024-08-13
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner 弹出小球动画</title>
<style>
  .banner {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('banner-bg.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
  }
  .ball {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    transition: 1s ease-in-out;
  }
</style>
</head>
<body>
<div class="banner">
  <div class="ball"></div>
</div>
<script>
window.addEventListener('scroll', function() {
  var banner = document.querySelector('.banner');
  var ball = document.querySelector('.ball');
  var bannerTop = banner.getBoundingClientRect().top;
  var scrollPercent = 100 - (Math.abs(bannerTop) / (window.innerHeight - banner.offsetHeight) * 100);
  if (scrollPercent >= 0 && scrollPercent <= 100) {
    ball.style.transform = 'translateY(' + (scrollPercent - 100) * 1.5 + 'px) translateX(-50%)';
  }
});
</script>
</body>
</html>

这段代码实现了滚动时小球上移的效果，并且根据滚动位置计算小球的移动距离。当用户滚动到 Banner 区域时，小球会根据滚动的进度上移，创造出滚动触发的动画效果。

- 阅读更多 -
CSS|文本溢出隐藏效果（单行&&多行）
System
2024-08-13
所有,css



/* 单行文本溢出隐藏 */
.single-line-truncate {
  width: 250px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
 
/* 多行文本溢出隐藏 */
.multi-line-truncate {
  width: 250px; /* 定义容器宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

这段代码定义了两个类，.single-line-truncate用于单行文本溢出隐藏，.multi-line-truncate用于多行文本溢出隐藏。在多行文本隐藏中，-webkit-line-clamp属性定义了文本的最大行数，超出这个数量的文本会被隐藏。这种方法主要使用了WebKit浏览器的私有属性，因此可能不是所有浏览器都支持，但对于大多数现代浏览器（如Chrome、Safari和Edge）来说，这是一个很好的方案。

- 阅读更多 -
CSS 三大特性、盒子模型、浮动
System
2024-08-13
所有,css

在CSS中，三大特性指的是层叠性、继承性和优先级。盒子模型包括内容区域（content）、填充区域（padding）、边框区域（border）、外边距区域（margin）。浮动是CSS中的一个属性，用于创建多列布局。

层叠性：当多个样式作用于同一个元素时，会根据样式的优先级来决定哪个样式最终生效。

继承性：某些CSS属性是可以被继承的，比如字体和颜色。

优先级：当多个选择器选中同一个元素，并且每个选择器都有自己的样式声明时，会根据选择器的权重来决定哪个样式最终生效。

盒子模型：




.box {
  content: 200px; /* 内容区域 */
  padding: 20px; /* 填充区域 */
  border: 1px solid black; /* 边框区域 */
  margin: 10px; /* 外边距区域 */
}

浮动：




.float-left {
  float: left; /* 元素向左浮动 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
}
 
.clearfix::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动 */
}

使用时：




<div class="box float-left clearfix">内容</div>

以上代码展示了如何使用这些概念来创建一个左浮动的盒子，并使用clearfix来清除浮动，避免影响其他元素的布局。

- 阅读更多 -
Html + Css 核心知识 - flex （超详细）
System
2024-08-13
所有,css

CSS的Flexbox布局模块提供了在一维轴上布置内容的灵活方式。Flexbox可以使容器内的子元素能够改变其尺寸以适应可用空间，并以最佳方式进行排列。

以下是Flexbox的一些核心概念：

  1. Flex Container: 使用display属性设置为flex或inline-flex的元素。
  2. Flex Items: Flex container的直接子元素。
  3. Axis: Flex布局中的主轴和交叉轴，默认主轴为水平方向，交叉轴为垂直方向。
  4. Main-Axis Alignment: 项目沿主轴排列的方式。
  5. Cross-Axis Alignment: 项目沿交叉轴排列的方式。

基本属性：

  • flex-direction: 主轴方向，可以是row(水平，默认), row-reverse(水平反向), column(垂直), column-reverse(垂直反向)。
  • flex-wrap: 如果项目无法一次性放置在一条轴线上时是否换行，可以是nowrap(不换行，会压缩), wrap(换行), wrap-reverse(换行反向)。
  • flex-flow: 是flex-direction和flex-wrap的简写，默认为row nowrap。
  • justify-content: 主轴上的对齐方式，可以是flex-start(起始端对齐), flex-end(末尾端对齐), center(居中), space-between(两端对齐，空间间隔相等), space-around(每个项目两侧的空间相等), space-evenly(所有空间间隔相等)。
  • align-items: 交叉轴上的对齐方式，可以是stretch(默认值，如果项目未设置高度或设为auto，将占满整个容器高度), flex-start(交叉轴起点对齐), flex-end(交叉轴终点对齐), center(交叉轴中点对齐), baseline(项目第一行文字的基线对齐)。
  • align-content: 定义了多根轴线的对齐方式，如果只有一根轴线则不起作用，可以是stretch(默认值，轴线占满整个交叉轴), flex-start(轴线起点对齐), flex-end(轴线终点对齐), center(轴线中点对齐), space-between(轴线两端对齐，轴线间间隔相等), space-around(每条轴线两侧的空间相等), space-evenly(轴线间的空间相等)。

项目属性：

  • order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。
  • flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。
  • flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足将等比缩小。
  • flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目本来大小。
  • flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值0 1 auto。
  • align-self: 允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性，可以是auto(继承父元素), flex-start, flex-end, center, baseline, stretch。

实例代码：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</
- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号