标签 css 下的文章

2024-08-11

在uni-app中使用定义在SCSS文件中的变量，你需要首先定义这些变量，然后在需要使用这些变量的组件中引入SCSS文件。

定义SCSS变量：在项目中创建一个SCSS文件（例如：variables.scss），然后在文件中定义你的变量：




// variables.scss
$primary-color: #f00;
$secondary-color: #0f0;

在组件中引入SCSS文件并使用变量：在你的组件的<style>标签中使用lang="scss"来指定你想使用SCSS，然后使用@import引入你的变量文件，并在样式中使用这些变量：




<template>
  <view class="container">
    <!-- 你的组件内容 -->
  </view>
</template>
 
<script>
export default {
  // 你的组件数据和方法
}
</script>
 
<style lang="scss">
// 引入SCSS变量文件
@import "./variables.scss";
 
.container {
  color: $primary-color;
  background-color: $secondary-color;
}
</style>

确保你的SCSS文件路径是正确的，并且你的构建工具（如webpack）配置正确，以便能够处理SCSS文件并导入变量。

- 阅读更多 -

通过js修改css样式

System

2024-08-11

所有,javascript

在JavaScript中，可以通过多种方式修改CSS样式。以下是一些常用的方法：

通过DOM元素的style属性直接设置样式：




document.getElementById("myElement").style.color = "blue";
document.getElementById("myElement").style.backgroundColor = "yellow";

使用classList添加、删除或切换CSS类：




// 添加一个类
document.getElementById("myElement").classList.add("myClass");
 
// 删除一个类
document.getElementById("myElement").classList.remove("myClass");
 
// 切换一个类
document.getElementById("myElement").classList.toggle("myClass");

使用setAttribute设置style属性：




document.getElementById("myElement").setAttribute("style", "color: blue; background-color: yellow;");

使用CSSOM（CSS Object Model）接口修改样式：




// 获取或创建一个样式表
var style = document.styleSheets[0];
 
// 在样式表中插入新的规则
style.insertRule('#myElement { color: blue; background-color: yellow; }', style.cssRules.length);

使用cssText一次性设置多个样式：




document.getElementById("myElement").style.cssText = "color: blue; background-color: yellow;";

选择哪种方法取决于具体需求和场景。直接修改style属性适合临时样式改变，而使用CSS类或样式表更适合结构、样式分离，并且有助于代码的维护。

System

2024-08-11

所有,javascript




<!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: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f7f7f7;
        }
        .box {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>特惠</h1>
        <img src="coupon.png" alt="特惠券" />
        <p>
            购买任意金额商品<br>
            立即得 into 现金<br>
            <strong>立即领取</strong>
        </p>
        <button onclick="claimCoupon()">领取</button>
    </div>
    <script>
        function claimCoupon() {
            alert('特惠券已发送至您的账户，请查收！');
            // 这里可以添加发送特惠券到用户账户的逻辑
        }
    </script>
</body>
</html>

这个简易的HTML页面包含了一个模拟的特惠券领取页面，点击领取按钮会触发一个简单的 alert 弹窗提示用户特惠券已发送。在实际应用中，你需要替换样式和图片资源，并且添加后端逻辑来处理特惠券的发放。

- 阅读更多 -

使用 HTML、CSS 和 JS 的简单倒数计时器

System

2024-08-11

所有,javascript

以下是一个使用HTML、CSS和JavaScript创建的简单倒数计时器的示例代码：




<!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; }
  .timer { font-size: 3em; font-weight: bold; }
  .end-time { font-size: 2em; }
</style>
</head>
<body>
 
<div class="timer">
  倒计时: <span id="countdown">00:00:10</span>
</div>
 
<script>
// 设置倒计时时间（单位：毫秒）
const endTime = new Date().getTime() + 10000;
 
function updateCountdown() {
  const now = new Date().getTime();
  const distance = endTime - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.getElementById("countdown").innerHTML = "倒计时结束";
    return;
  }
 
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById("countdown").innerHTML = hours + ":" + minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');
}
 
const intervalId = setInterval(updateCountdown, 1000);
</script>
 
</body>
</html>

这段代码会创建一个简单的倒计时计时器，显示剩余的时、分、秒。倒计时时间设置为10秒，你可以通过修改endTime的值来设置不同的倒计时时长。计时器会在时间结束时自动停止，并显示"倒计时结束"。

- 阅读更多 -

vue的css深度选择器 deep /deep/

System

2024-08-11

所有,vue.js

在Vue中，如果你想要在组件内部应用深度作用域的CSS样式，可以使用>>>、/deep/或者::v-deep这些特殊的深度选择器。

>>> 是在Sass/SCSS中使用的，而 /deep/ 和 ::v-deep 是标准的或者说是推荐的方式，它们在所有CSS预处理器中都可以使用。

以下是一个简单的例子：




<style scoped>
.parent >>> .child {
  /* 这会应用于.child类，无论它在组件的DOM中的深度如何 */
  color: red;
}
 
/* 或者使用/deep/方式 */
 
.parent /deep/ .child {
  /* 这同样会应用于.child类，无论它在组件的DOM中的深度如何 */
  color: red;
}
 
/* 在新版本的Vue中，建议使用::v-deep方式 */
 
.parent::v-deep .child {
  /* 这同样会应用于.child类，无论它在组件的DOM中的深度如何 */
  color: red;
}
</style>
 
<template>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</template>

在上面的例子中，无论.child类所在的DOM层级有多深，上述CSS规则都会应用样式。

注意：在Vue 1.x中，使用了>>>和/deep/，而在Vue 2.x及以上版本中，推荐使用::v-deep。

- 阅读更多 -

HTML中引入CSS样式的第三种方式：链入外部样式表文件

System

2024-08-10

所有,html5

链入外部样式表是HTML中引入CSS样式的第三种方式，也是最常用的一种方式。

在HTML文档中，通过<link>标签将外部的CSS文件链接到HTML文档中。这种方式的优点是，可以将HTML文档和CSS样式分离开，使得HTML文档的结构更清晰，便于维护和管理。

以下是一个简单的实例代码：




<!DOCTYPE html>
<html>
<head>
    <title>链入外部样式表示例</title>
    <!-- 链入外部CSS样式表 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个例子中，<link>标签的rel属性值为stylesheet，表示这是一个样式表链接。type属性值为text/css，表示链接的资源类型是CSS。href属性值为style.css，表示CSS文件的路径。

在实际的开发中，你需要创建一个CSS文件，例如style.css，并将CSS样式写入该文件中：




/* style.css文件内容 */
h1 {
    color: blue;
}
 
p {
    color: red;
}

当HTML文件被加载时，浏览器会解析<link>标签，并加载指定的CSS文件，应用其中的样式规则，最终呈现出有样式的网页。

System

2024-08-10

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popup Example</title>
<style>
  #overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
  }
  .popup {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: #fff;
    z-index: 1001;
    padding: 20px;
  }
</style>
</head>
<body>
 
<button id="openBtn">打开弹窗</button>
<div id="overlay">
  <div class="popup">
    <h2>弹窗标题</h2>
    <p>这是一个简单的弹窗示例。</p>
    <button id="closeBtn">关闭弹窗</button>
  </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function(){
    $("#openBtn").click(function(){
      $("#overlay").fadeIn();
    });
    $("#closeBtn, #overlay").click(function(event){
      if(event.target === this) {
        $("#overlay").fadeOut();
      }
    });
  });
</script>
 
</body>
</html>

这段代码实现了一个简单的弹窗功能，当点击按钮时弹窗会显示，点击弹窗内的关闭按钮或者点击弹窗外的任何地方都会关闭弹窗。这个例子使用了jQuery来处理事件绑定和淡出效果。

- 阅读更多 -

css 实现轮播图效果

System

2024-08-10

所有,css3

要使用CSS实现轮播图效果，你可以使用以下的基本步骤和代码示例：

创建一个包含图片列表的HTML结构。
使用CSS为图片列表设置样式，使其只显示一张图片。
使用CSS动画或过渡效果来切换显示的图片。

HTML 示例:




<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS 示例:




.slider {
  position: relative;
  overflow: hidden;
  height: 400px; /* 设置轮播图容器的高度 */
}
 
.slides {
  width: 300%; /* 图片总宽度 */
  height: 100%;
  display: flex;
  animation: slide 9s infinite; /* 动画名称和持续时间 */
}
 
.slides img {
  width: 33.333%; /* 每张图片的宽度 */
  height: 100%;
  display: block;
}
 
/* 动画定义 */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33.333% {
    transform: translateX(0);
  }
  33.334% {
    transform: translateX(-100%);
  }
  66.667% {
    transform: translateX(-100%);
  }
  66.668% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}

这个简单的例子使用了CSS @keyframes 来创建一个无限循环的动画，自动切换到下一张图片。你可以根据需要调整动画的时长和其他属性，以达到所需的轮播图效果。

- 阅读更多 -

CSS 布局案例：不会还有人不会布局吧

System

2024-08-10

所有,css3

以下是一个简单的使用CSS进行布局的示例，使用了flexbox布局模型：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Layout Example</title>
<style>
  .container {
    display: flex; /* 指定为flex布局 */
    flex-direction: row; /* 主轴方向为水平 */
    justify-content: space-between; /* 子元素分散对齐 */
  }
  .item {
    width: 100px; /* 设置每个子元素的宽度 */
    height: 100px; /* 设置每个子元素的高度 */
    margin: 10px; /* 设置外边距 */
    background-color: #f0f0f0; /* 设置背景颜色 */
    text-align: center; /* 设置文本居中对齐 */
    line-height: 100px; /* 设置行高以垂直居中文本 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</body>
</html>

这个例子中，.container 类使用了flexbox布局，其中的 .item 类表示三个盒子，它们会被均匀分布在页面上。这是CSS布局中一个非常基础且常用的技术。

System

2024-08-10

所有,css3

在Three.js中，CSS3DObject、CSS2DObject、CSS3DSprite和Sprite都用于在3D场景中添加HTML元素，但它们有不同的用途和表现方式：

CSS3DObject：这是一个3D对象，它将HTML元素作为3D场景的一部分。元素会受到3D场景的旋转和缩放影响，就像其他3D对象一样。
CSS2DObject：这与CSS3DObject类似，但其中的HTML元素不会受到3D旋转的影响，即它总是在2D平面上。
CSS3DSprite：这是一个用于在3D空间中以3D方式渲染HTML元素的类。它可以用来创建如文字和小图标这样的2D元素的3D效果。
Sprite：这是一个2D精灵，它可以用来在3D场景中添加2D图像。与CSS3DSprite不同，Sprite不能渲染HTML元素，只能渲染2D图像。

以下是创建这些对象的简单示例代码：




// 创建一个CSS3DObject
var element = document.createElement( 'div' );
element.style.width = '100px';
element.style.height = '100px';
var object = new THREE.CSS3DObject( element );
scene.add( object );
 
// 创建一个CSS2DObject
var element2 = document.createElement( 'div' );
element2.style.width = '100px';
element2.style.height = '100px';
var object2 = new THREE.CSS2DObject( element2 );
object2.position.set( 0, 0, 100 ); // 2D对象的位置
scene.add( object2 );
 
// 创建一个CSS3DSprite
var sprite = new THREE.CSS3DSprite();
sprite.scale.set( 100, 100, 1 );
sprite.position.set( 0, 0, 100 );
scene.add( sprite );
 
// 创建一个Sprite
var texture = new THREE.TextureLoader().load( 'path/to/image.png' );
var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set( 100, 100, 1 );
scene.add( sprite );

在使用时，你需要根据你的需求选择合适的类。CSS3DObject和CSS3DSprite可以用来添加可以与3D场景中的其他对象交互（如旋转和缩放）的HTML元素。而Sprite用于添加2D图像，CSS2DObject则是一种简化版的CSS3DObject，不受部分3D效果的影响。

- 阅读更多 -