分类前端技术下的文章

2024-08-21

在HTML中，您可以通过内联样式或外部CSS文件来设置背景和文字颜色。以下是两种方法的示例：

内联样式方法：




<!DOCTYPE html>
<html>
<head>
<title>黑色背景白色文字示例</title>
</head>
<body style="background-color: black; color: white;">
  <h1>欢迎来到我的网页</h1>
  <p>这个页面的背景是黑色，文字是白色。</p>
</body>
</html>

外部CSS文件方法：

首先，创建一个CSS文件（例如styles.css）：




/* styles.css */
body {
  background-color: black;
  color: white;
}

然后，在HTML文件中链接这个CSS文件：




<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>黑色背景白色文字示例</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这个页面的背景是黑色，文字是白色。</p>
</body>
</html>

以上两种方法都可以将页面的背景设置为黑色，文本颜色设置为白色。通常推荐使用外部CSS文件，因为这样可以更好地管理样式并减少代码的重复和冗余。

- 阅读更多 -

css实现九宫格布局的几种方案

System

2024-08-21

所有,css3

CSS实现九宫格布局的方法有很多种，以下是几种常见的解决方案：

使用CSS Flexbox布局：




.container {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  flex: 1;
  width: 33.333%;
}




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

使用CSS Grid布局：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px; /* 格子间隔 */
}
 
.item {
  background-color: #f0f0f0; /* 格子背景色 */
  border: 1px solid #ccc; /* 格子边框 */
}




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

使用CSS Column布局：




.container {
  column-count: 3;
  column-gap: 0;
}
 
.item {
  break-inside: avoid;
  width: 100%;
  height: 100px; /* 格子高度 */
  background-color: #f0f0f0; /* 格子背景色 */
  border: 1px solid #ccc; /* 格子边框 */
  box-sizing: border-box;
}




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

以上三种方法都可以实现一个简单的九宫格布局，你可以根据实际情况和需求选择最适合的一种。

- 阅读更多 -

css3-旋转中心点案例

System

2024-08-21

所有,css3

CSS3中，可以使用transform-origin属性来设置元素的旋转中心点。下面是一个使用transform-origin和transform: rotate()的例子，它将一个元素围绕其左上角进行旋转：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 50px;
    /* 设置旋转中心点在左上角 */
    transform-origin: left top;
    /* 绕左上角旋转45度 */
    transform: rotate(45deg);
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box元素设置了transform-origin属性为left top，这意味着它的旋转中心点位于其左上角。然后应用了transform: rotate(45deg)，使其绕这个点旋转45度。

- 阅读更多 -

前端理论总结（css3）——css优化的方法

System

2024-08-21

所有,css3

CSS 优化方法主要包括减少选择器的复杂性、使用 CSS 工具、合理使用缓存、优化图片资源、减少 HTTP 请求等。

减少选择器的复杂性：避免使用过度嵌套的选择器，尽可能简洁明了。




/* 不好的实践 */
div#container > ul.list > li.item > a.link { color: blue; }
 
/* 好的实践 */
#container ul.list li.item a.link { color: blue; }

使用 CSS 工具：利用预处理器（如 Sass、LESS）或后处理器（如 PostCSS）提高效率。




// Sass 示例
$link-color: blue;
 
#container ul.list li.item a.link {
  color: $link-color;
}

合理使用缓存：利用 HTTP 头信息或 HTML 标签实现缓存控制。




<!-- 添加缓存控制头 -->
<meta http-equiv="Cache-Control" content="max-age=3600">

优化图片资源：使用工具优化图片大小，如 tinypng 或 guetzli。
减少 HTTP 请求：合并 CSS 文件，使用字体图标代替图片图标，使用 CSS 数据 URI 优化小图片。




/* 合并 CSS 文件 */
/* 主样式 */
/* 布局样式 */

使用 CSS 性能监控和分析工具：如 WebPageTest、PageSpeed Insights 分析页面性能，找到优化点。
代码组织：将 CSS 分为基础样式、布局样式、主题样式等，便于维护。




/* 基础样式 base.css */
/* 布局样式 layout.css */
/* 主题样式 themes.css */

注释：适当添加有意义的注释描述代码结构。




/* 导航栏样式 */
.nav {
  /* 定义导航栏的基本样式 */
}

以上是 CSS 优化的一些基本方法，实际应用时可能需要根据具体项目需求和条件进行调整。

- 阅读更多 -

H5+CSS3+JS逆向前置——DIV+CSS绘制旗帜练习

System

2024-08-21

所有,css3

以下是使用HTML和CSS绘制中国国旗的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国旗绘制</title>
<style>
  .china-flag {
    width: 150px;
    height: 90px;
    background-color: #EB0000;
    position: relative;
    overflow: hidden;
  }
  .china-flag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    background-color: white;
    transform: rotate(-45deg);
  }
  .china-flag::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 90px;
    background-color: #EB0000;
    transform: rotate(45deg);
  }
</style>
</head>
<body>
<div class="china-flag"></div>
</body>
</html>

这段代码使用了CSS伪元素 ::before 和 ::after 来创建国旗的红色矩形和白色菱形，并通过 transform 属性的旋转来构造国旗的形状。

- 阅读更多 -

css图片放大功能，且不溢出包裹盒子

System

2024-08-21

所有,css3

要实现CSS图片放大功能，同时不溢出包裹盒子，可以使用object-fit属性。object-fit属性指定了元素内容应该如何填充容器的尺寸。

例如，如果你有一个图片并且希望它完全填充盒子，但不溢出，你可以这样做：

HTML:




<div class="image-container">
  <img src="path/to/image.jpg" alt="Description">
</div>

CSS:




.image-container {
  width: 300px; /* 设置盒子宽度 */
  height: 200px; /* 设置盒子高度 */
  overflow: hidden; /* 超出盒子的图片部分将被隐藏 */
}
 
.image-container img {
  width: 100%; /* 图片宽度填满盒子 */
  height: 100%; /* 图片高度填满盒子 */
  object-fit: cover; /* 图片将被缩放来填充容器，可能被裁剪 */
}

在这个例子中，.image-container 是图片的包裹盒子，.image-container img 是图片本身。object-fit: cover; 确保图片会被缩放并居中裁剪，以填满盒子，不管图片的原始比例如何。如果盒子比图片小，图片会被缩放以填满盒子。如果图片比盒子大，图片会被居中裁剪。

- 阅读更多 -

div布局——简单视频播放的页面

System

2024-08-21

所有,css3

以下是一个使用HTML和CSS创建简单视频播放页面的示例代码：




<!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 {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000;
    }
    .video-container {
        position: relative;
        width: 800px;
        height: 450px;
    }
    video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 确保视频填充整个容器 */
    }
    .controls {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px 0;
        background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
        color: #fff;
    }
    .controls button {
        padding: 10px;
        margin: 0 5px;
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
        cursor: pointer;
    }
</style>
</head>
<body>
 
<div class="video-container">
    <video id="myVideo" controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    <div class="controls">
        <button onclick="playOrPause()">播放/暂停</button>
        <button onclick="skip(-10)">后退 10 秒</button>
        <button onclick="skip(10)">前进 10 秒</button>
    </div>
</div>
 
<script>
function playOrPause() {
    var video = document.getElementById('myVideo');
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}
 
function skip(seconds) {
    var video = document.getElementById('myVideo');
    video.currentTime += seconds;
}
</script>
 
</body>
</html>

这段代码创建了一个简单的视频播放页面，包含视频播放器和用于控制播放（播放/暂停、前进和后退）的按钮。视频播放器位于.video-container类中，并且使用了CSS样式使其在页面中水平垂直居中，并具有半透明的控制条。JavaScript函数playOrPause和skip用于控制视频的播放和跳过部分。

System

2024-08-21

所有,css3

在Three.js中，CSS3DRenderer可以用来渲染三维的CSS元素，但它不能直接渲染HTML标签。要渲染HTML标签，你需要使用CSS2DRenderer或者CSS3DRenderer来创建一个与3D场景对应的2D平面，然后在这个平面上渲染HTML元素。

以下是一个简单的例子，展示如何使用CSS3DRenderer渲染一个HTML标签作为3D物体的一部分：




import * as THREE from 'three';
import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
// 设置场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.body.style.margin = 0;
 
// 创建一个HTML元素作为3D场景中的标签
const labelElement = document.createElement('div');
labelElement.style.width = '100px';
labelElement.style.height = '100px';
labelElement.style.background = 'red';
labelElement.innerHTML = 'HTML';
 
// 创建CSS3DSprite对象
const labelObject = new CSS3DSprite(labelElement);
labelObject.scale.set(0.5, 0.5, 1); // 设置一个合适的比例
 
// 将CSS3DSprite对象添加到场景中
scene.add(labelObject);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们创建了一个CSS3DSprite对象，并将一个HTML<div>元素作为它的参数。然后我们将这个CSS3DSprite对象添加到Three.js的场景中。在渲染循环中，我们调用renderer.render()来更新渲染。

请注意，这个例子需要Three.js的CSS3DRenderer.js文件，它不包含在Three.js的核心库中，因此你可能需要从Three.js的例子中或者其他资源里引入它。

这个例子只是一个基本的展示如何使用CSS3DRenderer渲染HTML标签的示例。在实际应用中，你可能需要根据自己的需求进行更复杂的设置和处理。

- 阅读更多 -

使用CSS制作流动线效果

System

2024-08-21

所有,css3

要使用CSS制作流动线效果，可以使用@keyframes规则创建动画，并使用background-position属性使背景图像产生流动的效果。以下是一个简单的例子：

HTML:




<div class="flowing-line"></div>

CSS:




.flowing-line {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(to right, #ff7e5f 0%, #feb47b 100%);
  background-size: 2000px 200px;
  animation: flow 10s linear infinite;
}
 
@keyframes flow {
  from { 
    background-position-x: 0;
  }
  to { 
    background-position-x: 2000px;
  }
}

在这个例子中，.flowing-line 类创建了一个具有流动线效果的<div>。background-image 属性定义了一个渐变背景，background-size 设置了背景的大小，使背景看起来像是在流动。animation 属性定义了名为 flow 的动画，它将背景位置从左向右移动，产生流动的效果。动画持续时间为10秒，使用线性函数进行加速，并无限循环。

- 阅读更多 -

CSS常见布局方式

System

2024-08-21

所有,css

CSS 常见的布局方式包括以下几种：

浮动布局（Float）
Flex 布局（Flexible Box）
Grid 布局（Grid）
相对定位布局（Position: Relative）
绝对定位布局（Position: Absolute）

以下是每种布局方式的简单示例：

浮动布局（Float）




.float-container {
  overflow: auto; /* 清除浮动 */
}
.float-item {
  float: left; /* 左浮动或右浮动 */
  margin-right: 10px; /* 间隔 */
}




<div class="float-container">
  <div class="float-item">Item 1</div>
  <div class="float-item">Item 2</div>
  <div class="float-item">Item 3</div>
</div>

Flex 布局（Flexible Box）




.flex-container {
  display: flex; /* 开启 Flex 布局 */
  justify-content: flex-start; /* 水平对齐方式 */
  align-items: center; /* 垂直对齐方式 */
}
.flex-item {
  margin: 5px; /* 间隔 */
}




<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Grid 布局（Grid）




.grid-container {
  display: grid; /* 开启 Grid 布局 */
  grid-template-columns: auto auto auto; /* 3 列等宽 */
  gap: 10px; /* 行间距和列间距 */
}
.grid-item {
  /* 内容 */
}




<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

相对定位布局（Position: Relative）




.relative-container {
  position: relative; /* 开启相对定位 */
}
.relative-item {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部的距离 */
  left: 10px; /* 距离左侧的距离 */
}




<div class="relative-container">
  <div class="relative-item">Item 1</div>
</div>

绝对定位布局（Position: Absolute）




.absolute-container {
  position: absolute; /* 开启绝对定位 */
}
.absolute-item {
  /* 内容 */
}




<div class="absolute-container">
  <div class="absolute-item">Item 1</div>
</div>

这些布局方式可以根据具体需求进行组合和调整，以实现复杂的页面布局。

- 阅读更多 -