1. 首页
  2. 标签
  3. css
CSS弹性布局
System
2024-08-14
所有,css

CSS弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地创建复杂的布局结构。

以下是一个简单的弹性布局示例，创建一个水平居中的容器，其中包含三个子元素，每个子元素都会自动伸缩以填满可用空间：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 指定为弹性布局 */
  justify-content: center; /* 水平居中子元素 */
}
 
.flex-item {
  flex: 1; /* 子元素均匀伸缩 */
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">子元素 1</div>
  <div class="flex-item">子元素 2</div>
  <div class="flex-item">子元素 3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex 属性将容器指定为弹性布局。.flex-item 类使用 flex: 1 属性使得每个子元素可以自动伸缩，平分容器的水平空间。justify-content: center 属性确保子元素水平居中。

- 阅读更多 -
CSS进阶之移动端适配 ：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
System
2024-08-14
所有,css

在移动端适配中，我们通常使用媒体查询和相关CSS单位来实现响应式布局。以下是一些关键点和示例代码：

  1. 媒体查询：



/* 针对不同屏幕宽度的样式 */
@media screen and (max-width: 320px) {
    body {
        background-color: blue;
    }
}
 
@media screen and (min-width: 321px) and (max-width: 768px) {
    body {
        background-color: green;
    }
}
 
@media screen and (min-width: 769px) {
    body {
        background-color: red;
    }
}

  1. CSS单位：

    • px：像素，是固定单位，不适应不同的设备。
    • em：相对于父元素的字体大小，容易造成层级复杂度。
    • rem：相对于根元素的字体大小，是现代响应式布局的首选单位。
    • %：百分比，相对于父元素，适合宽度设置。
    • vw/vh：视口宽度/高度的百分比，适合宽度和高度设置。
    • vmin/vmax：视口宽度和高度中较小/较大的那个百分比，适合图片和背景。

  2. 设备像素比(Device Pixel Ratio, DPR)：

    • CSS中可以用1px等同于1dp(设备像素)，在高分辨率设备上会出现问题。
    • 可以用window.devicePixelRatio获取DPR，进行适配。

  3. 像素密度(Pixels Per Inch, PPI)：

    • 用于衡量屏幕的密度，可以通过window.screen.width / window.screen.height和屏幕物理尺寸结合使用。

  4. 视口(Viewport)：

    • 为了使网站在移动端上正常显示，需要设置<meta name="viewport"标签。
    • 例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. 使用calc()函数结合媒体查询进行布局调整：



.container {
    width: calc(100% - 20px); /* 计算宽度 */
    font-size: 16px; /* 默认字体大小 */
}
 
@media screen and (min-width: 321px) {
    .container {
        width: calc(100% - 25px); /* 根据屏幕宽度调整 */
        font-size: 18px; /* 增加字体大小 */
    }
}
 
@media screen and (min-width: 769px) {
    .container {
        width: calc(100% - 30px); /* 更大屏幕宽度调整 */
        font-size: 20px; /* 进一步增加字体大小 */
    }
}

综上，移动端适配主要是通过媒体查询、CSS单位、设备像素比和视口管理来实现不同屏幕大小的适配。通过这些技术，开发者可以创建出在各种移动设备上都能保持良好用户体验的网页。

- 阅读更多 -
css实现向下的小箭头
System
2024-08-14
所有,css

在CSS中，可以使用伪元素和边框来创建向下的小箭头。以下是一个示例代码：




.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black; /* 改变颜色可以改变箭头颜色 */
}
 
/* 可选：为小箭头添加阴影效果 */
.arrow-down::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, transparent, black, transparent);
}

HTML部分：




<div class="arrow-down"></div>

这段代码会创建一个向下的小箭头，你可以通过调整border-left和border-right的大小来改变小箭头的宽度，调整border-top的大小来改变小箭头的高度。如果需要阴影效果，可以使用伪元素添加一个线性渐变背景。

- 阅读更多 -
Next.js Tailwind CSS UI组件
System
2024-08-14
所有,javascript



import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
 
const Header = () => {
  return (
    <header className="bg-white border-b border-gray-100">
      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-gray-900">
          <Link href="/">
            <a className="flex items-center gap-2">
              <Image src="/logo.png" alt="Logo" width={40} height={40} />
              {/* 这里的title是必要的，以便在没有图像时显示文本 */}
              <span className="sr-only">Home</span>
            </a>
          </Link>
        </h1>
      </div>
    </header>
  );
};
 
export default Header;

这个代码实例展示了如何在Next.js应用中使用Tailwind CSS创建一个带有Logo和品牌名称的页头组件。它使用了Next.js的Link组件来实现导航，并且使用了Image组件来处理图片的加载和显示。同时，它还使用了Tailwind CSS的实用程序类来创建页面布局和样式。

- 阅读更多 -
three.js给模型添加CSS3DSprite精灵标签
System
2024-08-14
所有,javascript

在Three.js中，要给模型添加CSS3DSprite精灵标签，你需要使用CSS3DRenderer和CSS3DSprite。以下是一个简单的例子，展示如何实现：




// 假设已经有了Three.js的scene和camera
 
// 创建一个新的CSS3DRenderer
const renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建一个新的CSS3DSprite
const sprite = new THREE.CSS3DSprite(document.createElement('div'));
sprite.scale.set(0.1, 0.1, 0.1); // 设置精灵标签的大小
sprite.position.set(0, 0, 0); // 设置精灵标签在3D空间中的位置
 
// 将CSS3DSprite添加到场景中
scene.add(sprite);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

在这个例子中，我们首先创建了一个CSS3DRenderer，然后创建了一个CSS3DSprite，并设置了它的位置和大小。最后，我们将它添加到Three.js的场景中，并启动了渲染循环。这样，当场景渲染时，CSS3DSprite会作为3D对象显示在屏幕上，并且可以通过CSS来定制其外观。

- 阅读更多 -
CSS3中::after伪元素的content属性可以放置各种类型的内容，包括文本、图像和特定的Unicode字符
System
2024-08-14
所有,css3

CSS3中的::after伪元素（pseudo-element）的content属性可以用来在选择器选中的元素内部的末尾插入内容。content属性可以放置各种类型的内容，包括文本、图像和特殊的值attr()，该值可以用来插入元素的属性值。

以下是一些示例：

  1. 插入文本内容：



selector::after {
  content: '这是插入的文本内容';
}
  1. 插入图像：



selector::after {
  content: url('image.jpg');
}
  1. 插入元素的属性值，例如插入<a>标签的href属性值：



a::after {
  content: ' (' attr(href) ')';
}
  1. 插入为空（不显示任何内容）：



selector::after {
  content: '';
}
  1. 使用counter()函数插入序号：



li::after {
  content: counter(list-item);
}
  1. 插入ICON字体：



a::after {
  content: '\f0c1'; /* Unicode for a FontAwesome star icon */
  font-family: FontAwesome;
}

请注意，为了使content属性生效，必须至少设置display: inline或display: block属性。此外，::after伪元素是一个行内元素，如果需要它表现得像块级元素，可以设置display: block。

- 阅读更多 -
css封装
System
2024-08-14
所有,css

CSS封装是指将CSS样式组织在一起，形成可重用的单元，以减少代码冗余和提高样式代码的可维护性。CSS封装可以通过几种方式实现，包括Mixins, 函数库（如Sass、LESS），或者CSS模块。

以下是一个使用Sass函数进行CSS封装的例子：




// 定义一个颜色封装
@function color($name) {
  $colors: (
    'primary': #ff6347,
    'secondary': #3498db,
    'tertiary': #1565c0
  );
 
  @return map-get($colors, $name);
}
 
// 使用封装
body {
  background-color: color(primary);
  color: color(secondary);
}

在这个例子中，color函数接受一个名称作为参数，并返回一个颜色值。通过这种方式，我们可以在多个地方重复使用这个颜色封装，而不是在多个地方重复写颜色值，从而减少代码冗余并提高可维护性。

另一个例子是使用Sass混合(Mixins)来封装一组样式：




// 定义一个混合封装
@mixin button-style($color, $background) {
  color: $color;
  background-color: $background;
  border: 1px solid darken($background, 10%);
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
 
// 使用混合封装
button {
  @include button-style(color(primary), color(secondary));
}

在这个例子中，button-style混合封装定义了一组按钮样式。通过@include指令，我们可以在button选择器上应用这个混合封装，传入颜色值。这样，按钮将具有统一的样式，而不需要在每个按钮中重复定义这些样式。

- 阅读更多 -
【CSS】SVG图片属性及修改颜色
System
2024-08-14
所有,css

在CSS中，我们可以使用SVG图片作为背景，并通过CSS的fill属性来修改颜色。以下是一些方法：

方法一：直接在SVG图片上修改颜色

如果你有直接访问SVG文件的权限，你可以直接在SVG文件中修改颜色。

例如，你有一个SVG文件，内容如下：




<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#000000"/></svg>

你可以直接修改fill属性的值来改变颜色。




<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#FFFFFF"/></svg>

方法二：在CSS中使用SVG作为背景，并修改颜色

如果你不能直接修改SVG文件，你可以将SVG作为背景图片，并使用CSS的fill属性来修改颜色。

例如，你有一个SVG文件，内容如下：




<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#000000"/></svg>

你可以在CSS中这样使用：




.icon {
  background-image: url('path/to/your/svg');
  background-size: cover;
  fill: #FFFFFF; /* 修改颜色 */
  width: 50px;
- 阅读更多 -
css3横向无限公告消息滚动功能
System
2024-08-14
所有,css3

为了实现CSS3横向无限公告消息滚动的功能，你可以使用@keyframes规则来创建动画，并通过animation属性应用无限滚动效果。以下是一个简单的例子：

HTML:




<div class="marquee">
  <p>这是一条无限滚动的公告信息...</p>
</div>

CSS:




.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
 
.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 10s linear infinite;
}
 
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

在这个例子中，.marquee p元素被设置了一个动画，名为scroll，它会在10秒内从初始位置平滑地移动到完全离开视图的位置。通过设置animation属性的infinite关键字，这个动画会无限次数地重复。这样就实现了一个简单的横向无限滚动公告消息。

- 阅读更多 -
简单的CSS在页面中点击超链接跳转新的页面
System
2024-08-14
所有,html5

在HTML中创建超链接，并使用CSS为其设置样式，使得点击超链接时会在新窗口打开目标页面。以下是实现这一功能的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接跳转示例</title>
<style>
  /* 添加一些样式来突出超链接 */
  a.new-window-link:link, a.new-window-link:visited {
    color: #0366d6;
    text-decoration: none;
  }
 
  a.new-window-link:hover {
    text-decoration: underline;
  }
 
  a.new-window-link:active {
    color: #0366d6;
  }
</style>
</head>
<body>
 
<a class="new-window-link" href="https://www.example.com" target="_blank">访问Example.com</a>
 
</body>
</html>

在上述代码中，target="_blank"属性确保了链接的目标页面会在新窗口打开。CSS样式仅为超链接添加了一些基本样式，并没有涉及到实现点击后跳转的功能，因为这是HTML提供的标准行为。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号