分类 css 下的文章

【HTML CSS JS 实现QQ2009界面——附源代码】

2024-08-21

由于原始代码已经非常接近实现QQ2009界面的效果，我们可以直接使用原始代码作为解决方案。以下是核心的HTML和CSS代码示例：

HTML:




<!DOCTYPE html>
<html>
<head>
    <title>QQ2009</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="qq2009">
        <div class="header">
            <div class="logo">
                QQ2009
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                    <li><a href="#">菜单3</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <!-- 这里放置QQ的主要内容 -->
        </div>
    </div>
</body>
</html>

CSS (style.css):




/* 引入了原始代码中的style.css文件 */

请注意，你需要将CSS文件包含进来，以便获得完整的样式效果。这个示例仅展示了HTML结构和如何引入CSS文件，实际的样式和布局需要参考原始的style.css文件。

- 阅读更多 -

css动态传参，attr的妙用

System

2024-08-21

所有,css

CSS 动态传参主要是通过 CSS 的自定义属性（CSS Variables）或者是通过 attr() 函数来实现。

使用 CSS 自定义属性 (CSS Variables)：

CSS 自定义属性可以在不同的选择器中定义相同的变量，并在文档的不同部分重复使用。




:root {
  --primary-color: #333;
}
 
div {
  color: var(--primary-color);
}

在这个例子中，我们定义了一个名为 --primary-color 的变量，并在 div 选择器中使用它。然后，我们可以在 JavaScript 中动态地改变这个变量的值：




document.documentElement.style.setProperty('--primary-color', 'red');

使用 attr() 函数：

CSS attr() 函数可以获取 HTML 元素的属性值，并将其用作 CSS 的属性值。




div::before {
  content: attr(data-before);
}

在这个例子中，我们使用 attr() 函数获取 div 元素的 data-before 属性的值，并将其作为 ::before 伪元素的 content 属性的值。然后，我们可以在 JavaScript 中动态地改变这个属性的值：




document.querySelector('div').setAttribute('data-before', 'Hello, World!');

以上就是 CSS 动态传参的两种方法。

- 阅读更多 -

＜CSS＞一级导航栏和二级导航栏

System

2024-08-21

所有,css

为了创建一级导航栏和二级导航栏，你可以使用HTML和CSS来实现。以下是一个简单的例子：

HTML:




<nav>
  <ul class="navbar">
    <li><a href="#">一级导航项 1</a>
      <ul class="subnavbar">
        <li><a href="#">二级导航项 1.1</a></li>
        <li><a href="#">二级导航项 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">一级导航项 2</a></li>
    <li><a href="#">一级导航项 3</a></li>
  </ul>
</nav>

CSS:




.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
.navbar li {
  float: left;
}
 
.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.navbar li a:hover {
  background-color: #111;
}
 
.subnavbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  display: none;
  background-color: #f9f9f9;
}
 
.navbar li:hover .subnavbar {
  display: block;
}
 
.subnavbar li a:hover {
  background-color: #555;
}

这个例子中，一级导航栏由 <ul> 和 <li> 组成，二级导航栏嵌套在 <ul> 里面。当鼠标悬停在一级导航项上时，相应的二级导航项就会显示出来。这个例子使用了CSS来控制样式，并通过HTML结构来组织导航栏。

- 阅读更多 -

使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面

System

2024-08-21

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gaming Tools Showcase</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Gaming Tools Showcase</h1>
        <input type="text" id="search" placeholder="Search for a game or tool..." />
    </header>
    <section>
        <ul id="games">
            <!-- Game and tool cards will be added dynamically using JavaScript -->
        </ul>
    </section>
    <script src="script.js"></script>
</body>
</html>




/* styles.css */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
 
header {
    background-color: #333;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
header h1 {
    margin: 0;
}
 
header input {
    padding: 8px;
    font-size: 16px;
}
 
section {
    flex: 1;
    padding: 10px;
}
 
#games {
    list-style-type: none;
    padding: 0;
}
 
/* Card styles */
.card {
    margin-bottom: 10px;
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
 
.card img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
 
.card h2 {
    margin: 0;
    font-size: 16px;
}
 
.card p {
    margin: 0;
    color: #666;
}




// script.js
document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.getElementById('search');
    var gameCards = document.getElementById('games').getElementsByClassName('card');
 
    searchInput.addEventListener('input', function() {
        var searchQuery = searchInput.value.toLowerCase();
        Array.from(gameCards).forEach(function(card) {
            var title = card.querySelector('h2').textContent.toLowerCase();
            if (title.indexOf(searchQuery) !== -1) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

这个示例展示了如何创建一个简单的响应式搜索界面，用户可以在其中输入以搜索游戏或工具名称。JavaScript 监听输入框的变化，并使用数组的 filter 方法来过滤结果，从而实现本地

- 阅读更多 -

Unity实战问题-WebGL问题集锦第二发，教你用CSS清除样式

System

2024-08-21

所有,css

在Unity WebGL项目中，有时候需要用CSS来清除或覆盖默认的样式。以下是一些常见的CSS样式清除和覆盖的方法：

清除默认的边距和样式：




body, html {
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止滚动条 */
}

清除按钮和输入框的默认样式：




button, input[type="button"], input[type="submit"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

清除列表的默认样式：




ul, ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

覆盖超链接的默认样式：




a {
    color: inherit;
    text-decoration: none;
}

清除图片的边框样式：




img {
    border: none;
}

清除canvas元素的默认样式（如果使用了canvas）：




canvas {
    image-rendering: optimizeSpeed; /* 提高渲染性能 */
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -webkit-optimize-contrast; /* Webkit */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE */
}

将这些CSS样式添加到你的项目中的一个单独的CSS文件中，并在Unity中引入这个CSS文件。你可以在Unity编辑器中通过修改PlayerSettings来指定CSS文件，或者在WebGL模板中添加一个<link>标签来引入CSS。

例如，在HTML文件中引入CSS：




<!DOCTYPE html>
<html>
<head>
    <title>My WebGL Game</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="gameContainer"></div>
    <script src="UnityLoader.js"></script>
    <script>
        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/mygame.json");
    </script>
</body>
</html>

在这个例子中，styles.css是你的CSS文件，其中包含了所有的样式规则。这样做可以确保你的WebGL游戏在各种浏览器中都有一致的表现。

- 阅读更多 -

JS + CSS 实现高亮关键词(不侵入DOM)

System

2024-08-21

所有,css




// 高亮关键词的函数
function highlightKeyword(text, keyword) {
  if (!keyword) return text;
  const regex = new RegExp(keyword, 'gi');
  const matches = text.match(regex);
  if (!matches) return text;
  const highlightedText = text.replace(regex, match => `<span class="highlight">${match}</span>`);
  return highlightedText;
}
 
// 使用示例
const text = '这是一段包含JavaScript关键词的文本。';
const keyword = 'JavaScript';
const highlightedText = highlightKeyword(text, keyword);
 
// 假设已经将CSS样式 .highlight { color: red; } 添加到页面中
// 现在可以将highlightedText插入到DOM中，例如:
// document.getElementById('content').innerHTML = highlightedText;

在这个例子中，我们定义了一个highlightKeyword函数，它接受文本和关键词作为参数，并返回一个被高亮的HTML字符串。这个函数使用正则表达式来找到所有的关键词匹配项，并用一个带有highlight类的<span>标签包裹它们，这个类需要在CSS中定义样式。这个函数不直接操作DOM，而是返回可以直接插入DOM中的HTML字符串。这样做可以保持函数的通用性和灵活性，并允许你决定何时和如何将生成的HTML字符串插入到页面中。

- 阅读更多 -

浅谈vue3 CSS Modules的使用

System

2024-08-21

所有,css

CSS Modules 是一种使得 CSS 类名和动画名称只在其它模块中有效的方法，它可以帮助你避免在不同的组件之间产生样式冲突。在 Vue 3 中，你可以通过 <style module> 标签来使用 CSS Modules。

下面是一个简单的 Vue 3 组件示例，展示了如何使用 CSS Modules：




<template>
  <div :class="$style.red">
    This is a red box with CSS Modules.
  </div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style module>
.red {
  color: red;
  border: 1px solid red;
}
</style>

在这个例子中，<div> 的 class 绑定了 $style.red，这表示它将使用由 <style module> 定义的 .red 类。通过这种方式，.red 类只会在这个组件内部有效，不会影响其他组件中可能也使用 .red 类名的样式。

- 阅读更多 -

纯CSS画浮动卡通蓝天白云草坪动画效果

System

2024-08-21

所有,css

以下是一个简化的代码示例，展示了如何使用CSS创建一个基本的浮动卡通蓝天白云的动画效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card-like Sky Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
 
  .sky {
    position: relative;
    width: 100%;
    height: 100%;
    background: #add8e6; /* Light blue */
    overflow: hidden;
  }
 
  .cloud {
    position: absolute;
    bottom: -100px;
    width: 200px;
    height: 100px;
    background: #fff;
    border-radius: 200px / 100px;
    box-shadow: 0 0 10px #fff;
    animation: float 5s infinite ease-in-out;
  }
 
  @keyframes float {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(100px);
    }
    100% {
      transform: translateX(-100px);
    }
  }
</style>
</head>
<body>
<div class="sky">
  <div class="cloud"></div>
</div>
</body>
</html>

这段代码创建了一个蓝天和一个白云的基本动画效果。.sky 类用来创建一个背景，.cloud 类用来创建云朵形状和动画。@keyframes float 定义了云朵的浮动动画。

- 阅读更多 -

css知识总结

System

2024-08-21

所有,css

CSS（层叠样式表）是一种用来为网页添加样式的语言，能够控制网页的布局、颜色、字体大小等一系列视觉效果。以下是一些常见的CSS知识点和使用示例：

选择器：用于选定需要添加样式的元素。




/* 标签选择器 */
p { color: red; }
 
/* 类选择器，一个元素可以有多个类 */
.my-class { font-size: 16px; }
 
/* ID选择器，应用于唯一元素 */
#my-id { background-color: blue; }
 
/* 子选择器，直接后代 */
div > p { margin-bottom: 20px; }
 
/* 后代选择器，所有后代 */
div p { color: green; }
 
/* 相邻兄弟选择器，紧接在另一个元素后的元素 */
p + div { border-top: 1px solid black; }
 
/* 通用兄弟选择器，同一父元素下的所有兄弟元素 */
p ~ div { border-bottom: 2px dotted grey; }
 
/* 属性选择器，具有特定属性的元素 */
input[type="text"] { border: 1px solid #ccc; }

属性：用于控制元素的外观和行为。




/* 背景属性 */
div { background-color: #f0f0f0; }
 
/* 边框属性 */
p { border: 1px solid black; }
 
/* 文本属性 */
p { color: blue; text-align: center; }
 
/* 字体属性 */
h1 { font-family: Arial, sans-serif; font-size: 24px; }
 
/* 布局属性 */
div { width: 100px; height: 100px; }
 
/* 盒模型属性 */
div { margin: 10px; padding: 20px; }
 
/* 显示属性 */
span { display: inline-block; }

伪类：用于控制元素的特殊状态。




/* 链接伪类 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }
 
/* 输入伪类 */
input:focus { border-color: yellow; }
 
/* 目标伪类，应用于被浏览器滚动定位的元素 */
p:target { background-color: yellow; }

伪元素：用于控制元素的特殊部分。




/* 第一字母伪元素 */
p::first-letter { font-size: 200%; }
 
/* 前置伪元素 */
span::before { content: "$"; }
 
/* 后置伪元素 */
span::after { content: "per month"; }

继承：某些属性会自动应用于子元素。




/* body字体属性会被大部分继承，除非被重写 */
body { font-family: Arial, sans-serif; }

优先级：当多个选择器选中同一元素时，根据规则确定应用哪个样式。




/* ID选择器优先级高于类选择器 */
#my-id { color: red; }
.my-class { color: blue; }

盒模型：控制元素的尺寸和布局。




/* 内容宽度可以通过box-sizing: border-box保持不变 */
div { width: 300px; border: 10px solid black; box-sizing: border-box; }

布局方式：流式布局

- 阅读更多 -

前端游戏巨制! CSS居然可以做3D游戏了，高效web开发

System

2024-08-21

所有,css

这是一个使用CSS和JavaScript创建简单3D游戏的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D游戏示例</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  .scene {
    perspective: 1000px;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }
  .box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translateZ(50px);
  }
</style>
</head>
<body>
<div class="scene">
  <div class="box"></div>
</div>
 
<script>
  let box = document.querySelector('.box');
  let step = 0;
 
  function animate() {
    box.style.transform = 'rotateY(' + step++ + 'deg) translateZ(50px)';
    requestAnimationFrame(animate);
  }
 
  animate();
</script>
</body>
</html>

这段代码创建了一个简单的3D场景，其中有一个立方体，它会不停旋转。这个示例展示了如何使用CSS的transform和perspective属性来创建3D效果，以及如何使用JavaScript的requestAnimationFrame来实现动画。这是一个入门级的3D游戏开发示例，适合对CSS和JavaScript有基本了解的开发者学习和实践。

- 阅读更多 -