分类 css 下的文章

CSS的三种引入方式：外部样式、内部样式和行内样式

2024-08-17

CSS有三种引入方式：外部样式、内部样式和行内样式。

外部样式：
通过 <link> 标签引入外部的 CSS 文件。创建一个单独的 CSS 文件，然后在 HTML 文件中通过 <link> 标签引入。

HTML 文件：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="example">这是一个外部样式的例子。</div>
</body>
</html>

CSS 文件（style.css）：




.example {
    color: blue;
    font-size: 20px;
}

内部样式：
通过 <style> 标签在 HTML 文件内部定义 CSS 代码。

HTML 文件：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        .example {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="example">这是一个内部样式的例子。</div>
</body>
</html>

行内样式：
通过 HTML 元素的 style 属性直接定义 CSS 代码。

HTML 文件：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
    <div style="color: red; font-size: 20px;" class="example">这是一个行内样式的例子。</div>
</body>
</html>

以上三种方式是 CSS 的基础使用方式，实际项目中会根据需要选择合适的方式来引入 CSS。

【CSS】解决上层盒子遮挡下层图片点击事件的三种方法

2024-08-17

在CSS中，如果一个盒子位于另一个盒子之上，且两个盒子都包含点击事件，可能会发生上层盒子遮挡下层盒子的点击事件。以下是解决这一问题的三种方法：

使用pointer-events属性：




.upper-box {
  pointer-events: none;
}

这将禁止上层盒子接收鼠标事件。

使用CSS层叠上下文（stacking context）：




.lower-box {
  position: relative;
}

通过为下层盒子设置相对定位，可以创建一个新的层叠上下文，使得上层盒子在渲染时位于其下。

使用z-index属性：




.lower-box {
  z-index: -1;
}

通过设置z-index值，可以控制盒子在垂直于屏幕的Z轴方向上的堆叠顺序。

注意：pointer-events属性需要小心使用，因为它会影响所有鼠标交互，包括点击、悬停等。而z-index和CSS层叠上下文可能需要调整其他布局属性以确保两个盒子按预期工作。

检测 CSS 中的 JavaScript 支持

2024-08-17




// 检测CSS中的JavaScript支持
function detectCSSJavaScriptSupport() {
  const testElement = document.createElement('div');
  const testValue = 'url("java" + "script:void(0)");';
 
  testElement.style.cssText = 'background-image:' + testValue;
 
  try {
    // 如果CSS属性不为空，则支持CSS中的JavaScript
    return testElement.style.backgroundImage.length !== 0;
  } catch (e) {
    // 如果抛出异常，则不支持CSS中的JavaScript
    return false;
  }
}
 
// 使用示例
if (detectCSSJavaScriptSupport()) {
  console.log('CSS中的JavaScript支持被检测到！');
} else {
  console.log('CSS中的JavaScript不被支持。');
}

这段代码定义了一个函数detectCSSJavaScriptSupport，它通过尝试在元素的style属性中设置一个包含JavaScript URL的背景图像来检测当前环境是否支持CSS中的JavaScript。如果设置成功且属性不为空，则说明支持；如果抛出异常，则说明不支持。最后，给出了如何使用这个函数的例子。

div实现可以滚动但不显示滚动条（纯CSS实现）

2024-08-17

要实现一个可滚动但不显示滚动条的div，可以使用CSS的overflow属性来隐藏滚动条，同时通过其他方式保证内容的滚动功能。以下是一个实现的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无滚动条的可滚动div</title>
<style>
  .scrollable {
    width: 200px;
    height: 100px;
    overflow: auto; /* 开启滚动 */
    scrollbar-width: none; /* 对于现代浏览器来说，隐藏滚动条 */
  }
 
  /* 针对IE和老版本浏览器的隐藏 */
  .scrollable::-webkit-scrollbar {
    display: none;
  }
</style>
</head>
<body>
 
<div class="scrollable">
  这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
  这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
  这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
  这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
</div>
 
</body>
</html>

在这个例子中，.scrollable 类定义了一个宽度为200px、高度为100px的div，并通过overflow: auto;属性开启了滚动功能。同时，使用了scrollbar-width: none;属性来告诉浏览器默认不显示滚动条。最后，使用了::-webkit-scrollbar伪元素来针对使用Webkit内核的浏览器（如Chrome和Safari）隐藏滚动条。

html css js 开发一个猜数字游戏

2024-08-17

以下是一个简单的猜数字游戏的HTML、CSS和JavaScript代码示例。游戏会随机生成一个1到100之间的数字，玩家需要猜测这个数字。




<!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;
  }
  #game {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
  }
  #message {
    margin: 10px 0;
    color: red;
  }
</style>
</head>
<body>
 
<div id="game">
  <p>猜测一个1到100之间的数字。</p>
  <input type="text" id="guess" placeholder="输入你的猜测">
  <button onclick="checkNumber()">提交</button>
  <p id="message"></p>
</div>
 
<script>
  // 生成随机数字
  var randomNumber = Math.floor(Math.random() * 100) + 1;
 
  function checkNumber() {
    var guess = document.getElementById('guess').value;
    var message = document.getElementById('message');
 
    // 检查输入是否是数字
    if (isNaN(guess) || guess < 1 || guess > 100) {
      message.textContent = '请输入一个1到100之间的整数。';
    } else {
      // 检查猜测是否正确
      if (guess == randomNumber) {
        message.textContent = '恭喜，你猜对了！';
      } else if (guess > randomNumber) {
        message.textContent = '猜测太大了。';
      } else {
        message.textContent = '猜测太小了。';
      }
    }
  }
</script>
 
</body>
</html>

这段代码提供了一个简单的猜数字游戏界面，玩家可以输入他们的猜测，并且点击按钮后，页面会给出提示信息告诉玩家他们猜测是否正确。游戏会在玩家猜中数字时结束。

使用 PostCSS 来为 CSS 代码自动添加适应不同浏览器的 CSS 前缀

2024-08-17




// 引入 postcss 和 autoprefixer 插件
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
 
// 假设 CSS 代码已经存储在 css 变量中
const css = 'a { transition: color 1s; }';
 
// 使用 PostCSS 和 Autoprefixer 处理 CSS 代码
postcss([autoprefixer])
    .process(css)
    .then(result => {
        // 输出处理后的 CSS 代码
        console.log(result.css);
    })
    .catch(error => {
        // 处理错误
        console.error(error);
    });

这段代码演示了如何使用 PostCSS 和 Autoprefixer 插件来为 CSS 代码自动添加浏览器前缀。首先引入必要的模块，然后定义一段 CSS 代码，并使用 PostCSS 的 process 方法处理它。处理成功后，输出添加了前缀的 CSS 代码。如果有错误，则捕获并输出错误信息。这是一个简单的示例，实际使用时可能需要根据具体情况进行配置。

2024-08-17




# 安装Node.js和npm
# 安装Vue CLI
npm install -g @vue/cli
 
# 创建一个新的Vue 3项目
vue create my-project
 
# 进入项目目录
cd my-project
 
# 添加并修改package.json中的信息
# 例如，添加repository字段
 
# 安装SASS依赖
npm install -D sass sass-loader
 
# 创建一个清除默认浏览器样式的文件
# src/styles/reset.scss
/* src/styles/reset.scss */
 
/* 清除浏览器默认样式 */
html, body, h1, h2, h3, h4, h5, h6,
p, ol, ul, li, figure,
blockquote, dl, dt, dd,
form, fieldset, legend, button,
input, textarea, pre,
hr, address, caption,
menu, header, footer, section,
article, aside, nav, canvas,
progress, meter, details, summary {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  text-align: left;
  vertical-align: baseline;
  background: transparent;
}
 
/* 其他样式规则... */
 
 
# 在main.js或其他组件文件中引入reset.scss
/* src/main.js */
import { createApp } from 'vue'
import App from './App.vue'
import './styles/reset.scss'  // 引入清除默认样式的SCSS文件
 
createApp(App).mount('#app')
 
# 提交代码到远程仓库
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/my-project.git  # 替换为你的远程仓库URL
git push -u origin main

这个代码实例展示了如何创建一个新的Vue 3项目，如何安装SASS以及如何创建一个SCSS文件来清除浏览器默认的样式。最后，代码实例展示了如何将项目初始化为Git仓库，提交代码到远程仓库。这个过程对于学习Vue.js开发以及版本控制的新手来说是一次很好的实战练习。

css标签样式，火箭，梯形

2024-08-17

要创建一个火箭并使用CSS来创建梯形，我们可以使用基本的CSS技巧，例如使用边框、伪元素和旋转。以下是一个简单的示例，展示了如何创建一个简单的梯形火箭：

HTML:




<div class="rocket">
  <div class="flame"></div>
</div>

CSS:




.rocket {
  position: relative;
  width: 100px;
  height: 200px;
  background: #333;
  border-radius: 40px 40px 20px 20px; /* 创建梯形 */
  perspective: 100px;
}
 
.flame {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 20px;
  height: 100px;
  background: #ff6;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  transform-origin: bottom;
  animation: flame-animation 2s linear infinite;
}
 
@keyframes flame-animation {
  0% {
    transform: translateX(-50%) rotateX(0deg);
  }
  100% {
    transform: translateX(-50%) rotateX(360deg);
  }
}

这段代码创建了一个梯形的火箭模型，并给火焰加上了旋转的动画效果。通过调整.rocket和.flame的尺寸和颜色，你可以进一步自定义火箭和火焰的外观。

CSS第八天----2D和3D

2024-08-17

在CSS中，我们可以使用2D转换和3D转换来创建动态和交互式的网页。

2D转换：

translate()：元素从其当前位置移动。
rotate()：元素旋转给定的角度。
scale()：元素的尺寸会增加或减少。
skew()：元素倾斜给定的角度。

3D转换：

translate3d()：定义3D转换，通过z轴的值进行位置变换。
rotate3d()：定义3D旋转。
scale3d()：定义3D缩放。
perspective()：为3D转换元素定义透视视图。

以下是一些示例代码：

2D转换示例：




div {
  transform: translate(50px, 100px); /* 向右移动50px，向下移动100px */
}
 
div {
  transform: rotate(30deg); /* 顺时针旋转30度 */
}
 
div {
  transform: scale(1.5, 2); /* 水平方向放大1.5倍，垂直方向放大2倍 */
}
 
div {
  transform: skew(30deg, 20deg); /* 沿X轴倾斜30度，沿Y轴倾斜20度 */
}

3D转换示例：




div {
  transform: translate3d(100px, 200px, 50px); /* 向前移动50px，向右移动100px，向下移动200px */
}
 
div {
  transform: rotate3d(1, 1, 0, 30deg); /* 沿右手定则的方向旋转一个30度的角 */
}
 
div {
  transform: scale3d(1.5, 2, 1.2); /* 水平方向放大1.5倍，垂直方向放大2倍，Z轴放大1.2倍 */
}
 
div {
  perspective: 500px; /* 定义3D元素的透视视图，距离视图的距离为500px */
}

注意：为了使3D转换生效，你需要在父元素上设置transform-style: preserve-3d;，使得子元素在3D空间中呈现。