1. 首页
  2. 标签
  3. css3
HTML5+CSS3学习笔记前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
System
2024-08-22
所有,css3

在HTML5+CSS3中，实现页面布局的方法主要有以下六种：

  1. 文档流布局（Normal Flow）
  2. 浮动布局（Floats）
  3. 绝对定位布局（Absolute Positioning）
  4. 表格布局（Tables）
  5. Flex布局（Flexbox）
  6. Grid布局（Grid）

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

  1. 文档流布局（Normal Flow）：

    这是默认的布局方式，元素按照它们在HTML中的顺序排列，块级元素从上到下，行内元素或内联元素从左到右。




<div>Block Element 1</div>
<div>Block Element 2</div>
<span>Inline Element 1</span>
<span>Inline Element 2</span>

  1. 浮动布局（Floats）：

    使元素向左或向右浮动，使其旁边的内容环绕。




<div style="float: left;">Floated Element 1</div>
<div>Normal Content</div>

  1. 绝对定位布局（Absolute Positioning）：

    使用position: absolute将元素从文档流中移除，然后使用top、right、bottom、left属性相对于最近的已定位祖先元素定位。




<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 10px;">Absolutely Positioned Element</div>
</div>

  1. 表格布局（Tables）：

    使用<table>元素进行布局。虽然不推荐用于布局，因为表格不是用来布局的，但在表格数据展示方面仍然使用广泛。




<table>
    <tr>
        <td>Table Cell 1</td>
        <td>Table Cell 2</td>
    </tr>
</table>

  1. Flex布局（Flexbox）：

    Flexbox布局提供了更灵活的方式来对子元素进行排列、对齐和分配空间。




<div style="display: flex;">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
</div>

  1. Grid布局（Grid）：

    Grid布局是一个二维的基于网格的布局系统，可以实现更复杂的布局。




<div style="display: grid; grid-template-columns: 100px 100px;">
    <div>Grid Item 1</div>
    <div>Grid Item 2</div>
</div>

每种布局都有其优点和适用场景，开发者应该根据具体需求选择合适的布局方式。

- 阅读更多 -
css基础知识十一：CSS3新增了哪些新特性？
System
2024-08-22
所有,css3

CSS3 在布局、背景、文本、边框、 word-wrap、透明度、动画等方面增加了很多新特性。

  1. 选择器：E:last-child 匹配父元素的最后一个子元素 E。
  2. 边框：border-radius 创建圆角。
  3. 背景：background-size 背景图片的尺寸。
  4. 文本效果：text-shadow 文本阴影。
  5. 字体：@font-face 在 CSS 中嵌入字体。
  6. 阴影：box-shadow 盒子阴影。
  7. 渐变：linear-gradient 线性渐变。
  8. 动画：animation 创建动画。
  9. 2D/3D转换：transform 应用2D和3D转换。
  10. 多列布局：column-count 列数。
  11. 用户界面：resize 控制元素的大小调整。

示例代码：




/* 圆角 */
div {
  border-radius: 10px;
}
 
/* 阴影 */
div {
  box-shadow: 10px 10px 5px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red , yellow);
}
 
/* 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
div {
  column-count: 3;
}
- 阅读更多 -
css3 hover效果
System
2024-08-22
所有,css3

CSS3的:hover伪类可以用来创建鼠标悬停时的效果。以下是一个简单的例子，演示了如何使用CSS3的transform属性和:hover伪类来创建一个鼠标悬停时放大的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 30px;
    transition: transform 0.3s ease-in-out;
  }
 
  .box:hover {
    transform: scale(1.1);
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box类定义了一个方框，并设置了一个过渡效果，使得transform属性的改变在0.3秒内平滑进行。当鼠标悬停在这个方框上时，:hover伪类将会被激活，方框将会通过transform: scale(1.1);放大10%。

- 阅读更多 -
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册，超赞回答：前端如何进阶
System
2024-08-22
所有,css3

以下是实现3D旋转相册的核心HTML和CSS代码。这个示例展示了如何使用HTML和CSS创建一个简单的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>
  .carousel {
    perspective: 600px;
    width: 300px;
    height: 200px;
    margin: 50px auto;
  }
  .carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  .carousel-inner > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    backface-visibility: hidden;
  }
  .carousel-inner > div:nth-child(1) {
    transform: translateZ(285px);
  }
  .carousel-inner > div:nth-child(2) {
    transform: rotateY(60deg) translateZ(285px);
  }
  .carousel-inner > div:nth-child(3) {
    transform: rotateY(120deg) translateZ(285px);
  }
  .carousel-inner > div:nth-child(4) {
    transform: rotateY(180deg) translateZ(285px);
  }
  .carousel-inner > div:nth-child(5) {
    transform: rotateY(240deg) translateZ(285px);
  }
  .carousel-inner > div:nth-child(6) {
    transform: rotateY(300deg) translateZ(285px);
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="carousel">
  <div class="carousel-inner">
    <div style="background-image: url('image1.jpg');"></div>
    <div style="background-image: url('image2.jpg');"></div>
    <div style="background-image: url('image3.jpg');"></div>
    <div style="background-image: url('image4.jpg');"></div>
    <div style="background-image: url('image5.jpg');"></div>
    <div style="background-image: url('image6.jpg');"></div>
  </div>
</div>
</body>
</html>

这段代码展示了如何使用CSS3的transform和animation属性来创建3D旋转木马效果。每个图片div元素被放置在不同的位置，并通过rotateY进行旋转，translateZ进行深入。动画rotate则控制整个木马的旋转。这个例子简单易懂，适合用于教学目的。

- 阅读更多 -
CSS3 多列，华为架构师深入讲解前端开发
System
2024-08-22
所有,css3

CSS3 的多列特性可以让你轻松地创建自动分列的文本布局。以下是一个简单的例子，演示如何使用 CSS3 的多列属性：




.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
 
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
}



<div class="multi-column">
  这里是一些需要分列显示的文本内容，比如说一篇文章或者是其他的可以自动换行的文本。这个特性可以让你创建出类似报纸那样的多列布局，非常适合阅读内容较多的页面。
</div>

在这个例子中，.multi-column 类定义了文本应该分成3列，并且列与列之间的间隔是20像素。这个类可以被任何元素使用，只要你想要应用这种多列的布局。

- 阅读更多 -
HTML5+CSS3+JS小实例：暗紫色Tabbar
System
2024-08-22
所有,javascript



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>暗紫色Tabbar示例</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    background-color: #28004d;
  }
  .tabbar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    background-color: #28004d;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    color: #666;
    font-size: 1.5rem;
  }
  .tabbar-item.active {
    color: #ff4d94;
  }
  .tabbar-item.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #ff4d94;
  }
</style>
</head>
<body>
<div class="tabbar-container">
  <div class="tabbar-item active">
    首页
  </div>
  <div class="tabbar-item">
    发现
  </div>
  <div class="tabbar-item">
    我的
  </div>
</div>
</body>
</html>

这段代码提供了一个暗紫色调的底部导航栏示例，其中包含了一个激活状态的tab，并使用CSS伪元素::before来展示激活状态下的下划线。这个示例简单直观，方便理解和学习。

- 阅读更多 -
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 请求等。

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



/* 不好的实践 */
div#container > ul.list > li.item > a.link { color: blue; }
 
/* 好的实践 */
#container ul.list li.item a.link { color: blue; }
  1. 使用 CSS 工具：利用预处理器（如 Sass、LESS）或后处理器（如 PostCSS）提高效率。



// Sass 示例
$link-color: blue;
 
#container ul.list li.item a.link {
  color: $link-color;
}
  1. 合理使用缓存：利用 HTTP 头信息或 HTML 标签实现缓存控制。



<!-- 添加缓存控制头 -->
<meta http-equiv="Cache-Control" content="max-age=3600">
  1. 优化图片资源：使用工具优化图片大小，如 tinypng 或 guetzli。
  2. 减少 HTTP 请求：合并 CSS 文件，使用字体图标代替图片图标，使用 CSS 数据 URI 优化小图片。



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



/* 基础样式 base.css */
/* 布局样式 layout.css */
/* 主题样式 themes.css */
  1. 注释：适当添加有意义的注释描述代码结构。



/* 导航栏样式 */
.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 属性的旋转来构造国旗的形状。

- 阅读更多 -
three.js CSS3DRenderer、CSS3DSprite渲染HTML标签
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标签的示例。在实际应用中，你可能需要根据自己的需求进行更复杂的设置和处理。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号