1. 首页
  2. 作者
  3. System
Web前端最全前端入门篇练习8：3d动画（照片旋转展示），CSS外边距塌陷问题
System
2024-08-15
所有,css



<!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;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #222;
            overflow: hidden;
        }
 
        .container {
            perspective: 1500px;
        }
 
        .box {
            width: 300px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 10s infinite ease-in-out;
        }
 
        .box img {
            width: 300px;
            height: 300px;
            position: absolute;
            backface-visibility: hidden;
        }
 
        .box img:first-child {
            transform: rotateY(0deg) translateZ(300px);
        }
 
        .box img:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
 
        .box img:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
 
        .box img:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
 
        .box img:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
 
        .box img:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
 
        @keyframes rotate {
            from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="photo-1.jpg" alt="Photo 1">
            <img src="photo-2.jpg" alt="Photo 2">
            <img src="photo-3.jpg" alt="Photo 3">
- 阅读更多 -
css:阴影效果box-shadow
System
2024-08-15
所有,css

CSS的box-shadow属性用于给元素添加阴影效果。该属性可以设置水平阴影的位置、垂直阴影的位置、模糊距离、阴影的扩散范围和阴影颜色。

基本语法如下：




box-shadow: offsetX offsetY blurRadius spreadRadius color inset;
  • offsetX 和 offsetY 分别设置阴影在水平和垂直方向上的偏移量。
  • blurRadius 设置阴影的模糊程度。
  • spreadRadius 设定阴影的大小。
  • color 定义阴影的颜色。
  • inset 关键字（如果提供）表示内阴影（即内凹阴影）。如果不设置，阴影默认为外阴影。

例子：




/* 添加一个向下及向右偏移10px，模糊半径为15px的阴影 */
.box {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
 
/* 添加一个向上及向左偏移5px，模糊半径为10px，扩散半径为20px的阴影 */
.box {
  box-shadow: -5px -5px 10px 20px rgba(255, 0, 0, 0.5);
}
 
/* 添加一个内阴影，向内偏移5px，模糊半径为10px的阴影 */
.box {
  box-shadow: inset 5px 5px 10px rgba(0, 255, 0, 0.5);
}

在实际应用中，根据需要调整这些值以创建所需的阴影效果。

- 阅读更多 -
CSS3移动端(介绍、Chrome DevTools、视口、倍图、backgroud-size、开发方案、CSS初始化、特殊样式)
System
2024-08-15
所有,css

在移动端使用CSS3时，可以通过视口、倍图、backgroud-size等方法来实现更好的用户体验。

  1. 视口设置：



<meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. 倍图：使用Retina屏幕的双倍图。
  2. background-size：可以使背景图片完全覆盖元素。



div {
  background-image: url('image.jpg');
  background-size: cover;
}
  1. 使用媒体查询为不同的屏幕宽度设置不同的样式。



@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
  1. 使用flexbox布局来实现响应式设计。



.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 使用CSS3的动画和变换提升用户体验。



.box {
  transition: transform 0.5s ease;
}
 
.box:hover {
  transform: scale(1.1);
}
  1. 优化CSS文件大小，使用CSS压缩工具。
  2. 使用CSS预处理器（如Sass、LESS）来提高CSS的可维护性和生产力。
  3. 使用CSS自定义属性（也称为CSS变量）。



:root {
  --main-bg-color: coral;
}
 
body {
  background-color: var(--main-bg-color);
}
  1. 图片懒加载，只有当图片滚动到视图中时才加载。
  2. 使用CSS Grid布局创建更复杂的响应式布局。
  3. 使用CSS Shapes对布局进行更复杂的控制。

以上是一些基本的移动端CSS3应用方法，具体应用时需要根据项目需求和浏览器兼容性进行选择和应用。

- 阅读更多 -
【CSS】新闻页面制作 案例一
System
2024-08-15
所有,css

以下是一个简单的新闻页面示例，使用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 {
    font-family: Arial, sans-serif;
  }
  .news-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
  }
  .news-header {
    text-align: center;
    padding: 20px 0;
  }
  .news-title {
    font-size: 24px;
  }
  .news-date {
    color: #888;
  }
  .news-content {
    padding: 20px 0;
    line-height: 1.5;
  }
</style>
</head>
<body>
<div class="news-page">
  <div class="news-header">
    <h1 class="news-title">这是一个重要新闻的标题</h1>
    <div class="news-date">2023年6月15日</div>
  </div>
  <div class="news-content">
    <p>这里是新闻的内容部分，可以包含图片、视频和文字。</p>
    <!-- 新闻内容 -->
  </div>
</div>
</body>
</html>

这个示例展示了如何使用HTML和CSS创建一个简单的新闻页面。.news-page类用于设置页面的最大宽度、居中以及内边距。.news-header类用于设置新闻标题和日期的样式，.news-title和.news-date分别用于设置标题和日期的字体和颜色。.news-content类用于设置新闻内容的样式，比如内边距和行高。这个示例提供了一个基本框架，可以根据实际需求进行扩展和设计。

- 阅读更多 -
CSS之定位
System
2024-08-15
所有,css

CSS定位机制允许你对元素进行定位，这里有几种方法：

  1. 静态定位（static）
  2. 相对定位（relative）
  3. 绝对定位（absolute）
  4. 固定定位（fixed）
  5. 粘性定位（sticky）

下面是每种定位方法的示例代码：

  1. 静态定位（static）：这是所有元素的默认定位方式，即没有定位。



div {
  position: static;
  left: 0;
  top: 0;
}
  1. 相对定位（relative）：相对于其正常位置进行定位。



div {
  position: relative;
  left: 50px;
  top: 20px;
}
  1. 绝对定位（absolute）：相对于最近的非static定位的祖先元素进行定位。



div {
  position: absolute;
  left: 100px;
  top: 50px;
}
  1. 固定定位（fixed）：相对于浏览器窗口进行定位。



div {
  position: fixed;
  right: 0;
  bottom: 0;
}
  1. 粘性定位（sticky）：基于用户的滚动位置相对定位。



div {
  position: sticky;
  top: 0;
}

注意：定位的使用需要谨慎，因为它可能会影响页面的其他部分，尤其是在使用绝对定位时。

- 阅读更多 -
Vue3 关于scss预编译中:deep 其中的deep如何理解
System
2024-08-15
所有,css

在Vue 3中，当你想要在组件内部深度选择一个嵌套组件的CSS样式时，你可以使用:deep选择器。:deep选择器允许你穿透组件边界，选择并修改子组件的样式。

:deep选择器的使用方法如下：




/* 在父组件的style标签中 */
:deep(.child-component-selector) {
  /* 样式规则 */
}

这里.child-component-selector是子组件的一个选择器，:deep(.child-component-selector)选择器会选中子组件内所有匹配.child-component-selector的元素，并应用里面的样式规则。

举个例子，如果你有一个子组件<BaseButton>，并且想要在父组件中覆盖其样式：




<template>
  <BaseButton class="my-button" />
</template>
 
<style>
:deep(.base-button) {
  color: red;
}
</style>

在这个例子中，:deep(.base-button)选择器会选中<BaseButton>组件内所有.base-button的元素，并将文字颜色设置为红色。

请注意，:deep选择器在单文件组件（.vue文件）的<style>标签中使用，并且它只能用于单个组件的样式中，不能在全局样式文件中使用。

- 阅读更多 -
CSS入门基础（样式，css文件，精心整理
System
2024-08-15
所有,css

CSS是一种用于描述网页样式的语言，可以使网页的内容更加美观。以下是一些关于CSS的基本概念和使用方法：

  1. 内联样式：

    内联样式是在HTML元素的style属性中直接写CSS代码。这种方法直接且简单，但是不利于后期的维护和修改。




<p style="color:blue;">这是一个蓝色的段落。</p>

  1. 内部样式表：

    内部样式表是在HTML文档的<head>标签中使用<style>标签来写CSS代码。这种方法可以使样式和HTML分开，但是只对所在的HTML页面有效。




<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>这是一个红色的段落。</p>
</body>

  1. 外部样式表：

    外部样式表是将CSS代码写在单独的.css文件中，然后在HTML文档的<head>标签中使用<link>标签来引用这个CSS文件。这种方法可以使样式和HTML分开，并且可以在多个HTML页面中共享，是最推荐的使用方式。




<!-- 在<head>中链接外部CSS文件 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>



/* styles.css文件 */
p {
    color: green;
}

  1. CSS选择器：

    CSS选择器用于选择需要应用样式的HTML元素。常用的选择器有标签选择器、类选择器、ID选择器和属性选择器等。




/* 标签选择器 */
p {
    color: orange;
}
 
/* 类选择器，使用.开头 */
.center {
    text-align: center;
}
 
/* ID选择器，使用#开头 */
#title {
    font-size: 24px;
}
 
/* 属性选择器 */
input[type="text"] {
    background-color: yellow;
}

  1. CSS的层叠性和优先级：

    当多个选择器选中同一个元素，并且都指定了相同的属性时，CSS的层叠性会决定哪个选择器的样式会被应用。优先级高的选择器会覆盖优先级低的选择器。

优先级顺序：内联样式 > 内部样式表和外部样式表（就近原则）。ID选择器 > 类选择器 > 标签选择器。

  1. CSS的盒模型：

    CSS的盒模型包括内容区域（content）、填充区域（padding）、边框区域（border）、和外边距区域（margin）。




div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

  1. CSS的Flexbox布局：

    Flexbox布局提供了一种更灵活的方式来布置容器内的项目，适用于移动端开发。




.container {
    display: flex; /* 使用Flex布局 */
    flex-direction: row; /* 设置主轴方向 */
}
 
.item {
    flex: 1; /* 使所有子项等分父容器 */
}

  1. CSS的Grid布局：

    Grid布局是一个基于网格的二维布局系统，非常适合创建复杂的布局。




.container {
    display: grid; /* 使
- 阅读更多 -
HTML_CSS学习：CSS的编写位置
System
2024-08-15
所有,css

CSS可以通过以下几种方式编写：

  1. 内联样式：直接在HTML元素的style属性中编写CSS代码。
  2. 内部样式表：在HTML文档的<head>部分，使用<style>标签包含CSS代码。
  3. 外部样式表：创建一个单独的CSS文件，并通过HTML的<link>标签引入。

示例代码：

内联样式：




<p style="color: red;">这是一个红色文本。</p>

内部样式表：




<head>
  <style>
    p { color: blue; }
  </style>
</head>
<body>
  <p>这是一个蓝色文本。</p>
</body>

外部样式表：




<!-- 在<head>部分引入外部CSS文件 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

styles.css 文件内容：




p {
  color: green;
}

在实际开发中，为了维护方便和分离关注点，通常推荐使用外部样式表。

- 阅读更多 -
CSS淘宝轮播图
System
2024-08-15
所有,css

要实现一个类似淘宝的轮播图效果，你可以使用HTML、CSS和JavaScript。以下是一个简单的例子，使用了基本的CSS和JavaScript来创建一个轮播图。

HTML:




<div class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="carousel-button-left">←</button>
  <button class="carousel-button-right">→</button>
</div>

CSS:




.carousel {
  position: relative;
  width: 300px; /* 设置轮播图的宽度 */
  height: 200px; /* 设置轮播图的高度 */
  overflow: hidden;
}
 
.carousel-images {
  width: 300%; /* 图片容器宽度是轮播图宽度的3倍 */
  height: 200px;
  display: flex;
}
 
.carousel-images img {
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
}
 
.carousel-button-left, .carousel-button-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
}
 
.carousel-button-left {
  left: 10px; /* 按钮距离左侧的距离 */
}
 
.carousel-button-right {
  right: 10px; /* 按钮距离右侧的距离 */
}

JavaScript:




document.addEventListener('DOMContentLoaded', function() {
  var currentIndex = 0;
  var images = document.querySelectorAll('.carousel-images img');
  var buttonLeft = document.querySelector('.carousel-button-left');
  var buttonRight = document.querySelector('.carousel-button-right');
 
  function showImage(index) {
    images.forEach(img => img.style.opacity = 0);
    images[index].style.opacity = 1;
  }
 
  buttonRight.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  });
 
  buttonLeft.addEventListener('click', function() {
    currentIndex = (currentIndex + images.length - 1) % images.length;
    showImage(currentIndex);
  });
 
  showImage(currentIndex); // 初始显示第一张图片
});

这个例子中的轮播图具有基本的左右切换功能。你可以根据需要添加自动播放、指示点等功能和样式。

- 阅读更多 -
CSS 选择器知识点总结
System
2024-08-15
所有,css

CSS 选择器是用来选择你想要样式化的元素的模式。下面是一些常见的 CSS 选择器：

  1. 类选择器（Class Selector）: 用于选择具有指定类的元素。



.my-class {
  color: red;
}
  1. ID 选择器（ID Selector）: 用于选择具有指定 ID 的单个元素。



#my-id {
  color: blue;
}
  1. 元素选择器（Element Selector）: 用于选择指定类型的元素。



p {
  font-size: 16px;
}
  1. 属性选择器（Attribute Selector）: 用于选择包含指定属性的元素。



input[type="text"] {
  background-color: yellow;
}
  1. 伪类选择器（Pseudo-class Selector）: 用于选择处于特定状态的元素。



a:hover {
  text-decoration: underline;
}
  1. 伪元素选择器（Pseudo-element Selector）: 用于选择元素的一部分（如第一个字母或元素内容的开始/结束）。



p::first-letter {
  font-size: 200%;
}
  1. 子代选择器（Child Selector）: 用于选择指定父元素的直接子元素。



div > p {
  color: green;
}
  1. 相邻选择器（Adjacent Sibling Selector）: 用于选择紧跟在另一个元素后的元素。



h1 + p {
  margin-top: 0;
}
  1. 后代选择器（Descendant Selector）: 用于选择指定父元素的后代（不仅限于直接子元素）。



div p {
  color: purple;
}
  1. 通配选择器（Universal Selector）: 选择页面上的所有元素。



* {
  margin: 0;
  padding: 0;
}
  1. 群组选择器（Grouping Selector）: 将选择器组合在一起，选择匹配任一选择器的元素。



h1, h2, h3 {
  font-family: Arial, sans-serif;
}

这些是 CSS 选择器的基础知识。CSS 还有更高级的选择器，如伪元素选择器、标签选择器、伪类函数选择器等。

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