标签 css 下的文章

2024-08-14

CSS可以通过多种方式实现九宫格布局，以下是一种使用CSS Grid的方法：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 每行三个等宽的列 */
    grid-template-rows: repeat(3, 1fr); /* 每列三个等高的行 */
    gap: 10px; /* 格子之间的间隙 */
  }
  .grid-item {
    background-color: #f0f0f0; /* 格子的背景色 */
    border: 1px solid #ccc; /* 格子的边框 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
</head>
<body>
 
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
 
</body>
</html>

这段代码使用了CSS Grid布局来创建一个3x3九宫格。.grid-container 类定义了一个3列3行的网格布局，每个格子都是等宽等高的。.grid-item 类则定义了格子的样式，包括背景色、边框以及居中显示内容的flex布局。

- 阅读更多 -

Threejs 中使用HTML融合、交互CSS2DObject对象

System

2024-08-14

所有,css




import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
let camera, scene, renderer, labelRenderer, controls;
let mesh;
 
init();
animate();
 
function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.set(0.5, 0.5, 0.5);
 
    scene = new THREE.Scene();
 
    // 创建一个立方体
    let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
    mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
    scene.add(mesh);
 
    // 创建CSS2DRenderer
    labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    document.body.appendChild(labelRenderer.domElement);
 
    // 创建2D标签对象
    let label = document.createElement('div');
    label.style.color = 'white';
    label.innerHTML = 'Hello Three.js!';
    let labelObject = new CSS2DObject(label);
    labelObject.position.set(0.5, 0.5, 0);
    scene.add(labelObject);
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    // 添加轨道控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
 
    // 监听窗口大小变化
    window.addEventListener('resize', onWindowResize, false);
}
 
function animate() {
    requestAnimationFrame(animate);
    render();
}
 
function render() {
    controls.update();
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.005;
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}
 
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.inn

- 阅读更多 -

css如何将border线加到元素内部，占内边距，不占外边距

System

2024-08-14

所有,css

在CSS中，要将border线加到元素的内部，即元素的border占据内边距，可以使用box-sizing属性。将box-sizing设置为border-box可以确保元素的实际内容区域大小不变，border和padding都被包含在元素的宽度和高度之内。

以下是实现这一效果的CSS代码示例：




.element {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box; /* 关键点：border-box */
}

这段代码将创建一个100px×100px的正方形元素，其内容区域大小为100px - 2pxBorder - 2*10pxPadding = 68px，border和padding都从内容区域大小中减去。此外，border线不占外边距。

- 阅读更多 -

CSS原子化

System

2024-08-14

所有,css

CSS原子化是一种CSS设计方法，它将CSS的功能拆分到最小级别，每个小级别都是不可再分的。这种方法的主要目的是减少样式的复杂性，使得样式重用更加简单和高效。

原子化CSS的一种实现方式是使用类似BEM（Block Element Modifier）的命名方法，它强调模块化和功能化的设计。

以下是一个简单的CSS原子化样式实例：




/* 布局原子 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
 
.row {
  display: flex;
  flex-wrap: wrap;
}
 
.col-1of3 {
  flex: 1;
  flex-basis: 33.3333%;
}
 
/* 文本原子 */
.text-left {
  text-align: left;
}
 
.text-center {
  text-align: center;
}
 
.text-right {
  text-align: right;
}
 
/* 颜色原子 */
.color-white {
  color: #fff;
}
 
.color-black {
  color: #000;
}
 
/* 字体大小原子 */
.font-size-12 {
  font-size: 12px;
}
 
.font-size-14 {
  font-size: 14px;
}
 
/* 其他样式原子 */
.bg-color-primary {
  background-color: #333;
}
 
.border-radius-50 {
  border-radius: 50%;
}

在这个例子中，每个CSS类都是一个原子，它们不依赖于其他类，可以独立应用于HTML元素。这样的设计使得样式可复用性提高，减少了样式冲突，并提升了项目的可维护性。

- 阅读更多 -

CSS常用动画网站(纯css echarts等建议经常阅读积累素材)

System

2024-08-14

所有,css

CSS动画和ECharts的结合可以创建丰富的数据可视化效果。以下是一些使用纯CSS和ECharts创建的动画网站示例：

ECharts 的 CSS 动画示例:




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts CSS 动画示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .echart-animation {
            /* 定义动画 */
            animation: rotate 5s infinite linear;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 准备一个用于显示图表的容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            series: [{
                type: 'pie',
                radius: '55%',
                data: [
                    {value: 235, name: '视频广告'},
                    {value: 274, name: '联盟广告'},
                    {value: 310, name: '邮件营销'}
                ],
                animationType: 'scale', // 动画类型
                animationEasing: 'elasticOut', // 动画缓动函数
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

ECharts 和 CSS 实现的动画图表:




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 和 CSS 动画示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .chart-animation {
            animation: fadeIn 3s infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            series: [
                {
                    type: 'bar',
                    data: [220, 182, 191, 234, 290, 330, 310],

- 阅读更多 -

HTML5+CSS3+JS小实例：图片九宫格

System

2024-08-14

所有,javascript

以下是一个简单的HTML5、CSS3和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>
  .container {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    margin: 50px auto;
    position: relative;
  }
  .container .cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .container .face {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px #000;
    line-height: 100px;
    text-align: center;
    font-size: 3em;
    color: #fff;
  }
  .face1 {
    background: url('img/1.jpg');
    background-size: cover;
  }
  .face2 {
    background: url('img/2.jpg');
    background-size: cover;
    transform: rotateY(90deg) translateZ(100px);
  }
  .face3 {
    background: url('img/3.jpg');
    background-size: cover;
    transform: rotateY(-90deg) translateZ(100px);
  }
  .face4 {
    background: url('img/4.jpg');
    background-size: cover;
    transform: rotateX(90deg) translateZ(100px);
  }
  .face5 {
    background: url('img/5.jpg');
    background-size: cover;
    transform: rotateX(-90deg) translateZ(100px);
  }
  .face6 {
    background: url('img/6.jpg');
    background-size: cover;
    transform: rotateY(180deg) translateZ(100px);
  }
  .face7 {
    background: url('img/7.jpg');
    background-size: cover;
    transform: translateZ(-100px);
  }
  .face8 {
    background: url('img/8.jpg');
    background-size: cover;
    transform: rotateY(90deg) translateZ(-100px);
  }
  .face9 {
    background: url('img/9.jpg');
    background-size: cover;
    transform: rotateY(-90deg) translateZ(-100px);
  }
</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="face face1">1</div>
    <div class="face face2">2</div>
    <div class="face face3">3</div>
    <div class="face face4">4</div>
    <div class="face face5">5</div>
    <div class="face face6">6</div>
    <div class="face face7">7</div>
    <div class="face face8">8</div>
    <div class="face face9">9</div>
  </div>
</div>
<script>
  const cube = document.querySel

- 阅读更多 -

CSS结构伪类选择器详解

System

2024-08-14

所有,css

CSS结构伪类选择器是基于元素在文档的结构来选择元素的方式。以下是几个常用的结构伪类选择器及其示例：

:first-child：选择父元素的第一个子元素。




p:first-child {
  color: red;
}

:last-child：选择父元素的最后一个子元素。




p:last-child {
  color: red;
}

:nth-child(n)：选择父元素的第 n 个子元素。




p:nth-child(2) {
  color: red;
}

:nth-of-type(n)：选择同类型的父元素下的第 n 个 <p> 元素。




p:nth-of-type(2) {
  color: red;
}

:first-of-type：选择同类型的父元素下的第一个 <p> 元素。




p:first-of-type {
  color: red;
}

:last-of-type：选择同类型的父元素下的最后一个 <p> 元素。




p:last-of-type {
  color: red;
}

:only-child：选择是唯一子元素的元素。




p:only-child {
  color: red;
}

:only-of-type：选择父元素下唯一的 <p> 元素。




p:only-of-type {
  color: red;
}

:empty：选择没有子元素（包括文本）的元素。




p:empty {
  display: none;
}

这些选择器可以用来定制元素之间的关系样式，使得文档结构更加清晰和可维护。

System

2024-08-14

所有,css3

在HTML5、CSS3和JavaScript的环境中，div和span是两个基本的行内元素和块级元素。它们之间的主要区别在于它们的默认显示行为和用途。

div元素被用来组合一块内容，它是一个块级元素，可以用来创建文档的结构，是一个容器级元素。

span元素被用来组合文档中的小块内容，它是一个行内元素，通常用来组合行内元素。

盒模型是CSS的一个基本概念，它定义了元素如何显示以及如何与其他元素交互。每个元素都可以看作一个盒子，它包括：内容区域（content area）、内边距（padding）、边框（border）和外边距（margin）。

overflow属性是CSS中的一个属性，用来处理当内容溢出元素框时发生的情况。它有几个值：

visible：默认值，溢出内容会显示在元素框之外。
hidden：溢出的内容会被裁剪，且不可见。
scroll：溢出的内容会被裁剪，但会提供滚动条来查看所有内容。
auto：如果有溢出的内容，会提供滚动条或者根据需要自动产生滚动条。

示例代码：

HTML:




<div class="box">这是一个div元素</div>
<span class="box">这是一个span元素</span>

CSS:




.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  background-color: lightblue;
  overflow: auto;
}

在这个例子中，我们创建了一个类名为.box的CSS规则，并将其应用于两个元素。这个.box规则定义了盒模型的各个属性，并设置了overflow属性为auto，这意味着如果内容超出了盒子的尺寸，将会显示滚动条。

- 阅读更多 -

Python网络爬虫：HTML/CSS/JavaScript介绍

System

2024-08-14

所有,css




import requests
from bs4 import BeautifulSoup
 
# 发送HTTP请求获取网页内容
url = 'https://www.example.com'
response = requests.get(url)
 
# 解析网页内容
soup = BeautifulSoup(response.text, 'html.parser')
 
# 提取HTML内容
html_content = soup.prettify()
 
# 提取CSS内容
css_content = ''
for style in soup('style'):
    css_content += style.get_text()
 
# 提取JavaScript内容
javascript_content = ''
for script in soup('script'):
    javascript_content += script.get_text()
 
# 打印结果
print("HTML 内容:")
print(html_content)
print("\nCSS 内容:")
print(css_content)
print("\nJavaScript 内容:")
print(javascript_content)

这段代码使用了requests库来发送HTTP请求获取网页内容，使用BeautifulSoup库来解析HTML，提取出HTML、CSS和JavaScript的内容，并打印输出。这是一个简单的网络爬虫示例，展示了如何处理和分析网页中的这些重要元素。

- 阅读更多 -

教你CSS Grid布局实现响应式设计

System

2024-08-14

所有,css




.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
 
.item {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

这段代码定义了一个容器 .container，它使用了 CSS Grid 布局。grid-template-columns 属性设置了列的数量和大小，使用 repeat(auto-fit, minmax(150px, 1fr)) 自动填充列，每列的最小宽度为 150px，并且会占据剩余空间的一部分。gap 属性在网格项之间添加了间隙。.item 类定义了网格项的样式，包括背景色、边框和内边距。这个布局方法使得容器内的项可以响应屏幕大小的变化，方便实现响应式设计。

- 阅读更多 -