分类前端技术下的文章

2024-08-24

以下是一个简单的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;
    }
    .timeline {
        list-style-type: none;
        padding: 0;
        position: relative;
    }
    .timeline-item {
        position: relative;
        margin-bottom: 20px;
    }
    .timeline-item-content {
        background: #f9f9f9;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }
    .timeline-item-year {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: #17a2b8;
        top: -20px;
        font-weight: 600;
        font-size: 16px;
    }
    .timeline-item-circle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: #17a2b8;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        top: 0;
        z-index: 1;
    }
    .timeline-item-circle::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        background: #f9f9f9;
        border-radius: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .timeline-item-line {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        top: 16px; /* Account for the height of the circle */
        left: 50%;
        transform: translateX(-50%);
    }
    .timeline-item-line::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 100%;
        background: #17a2b8;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }
</style>
</head>
<body>
 
<ul class="timeline">
    <li class="timeline-item">
        <div class="timeline-item-circle"></div>
        <div class="timeline-item-line"></div>
        <div class="timeline-item-content">
            <span class="timeline-item-year">2023</span>
            <p>开始学习编程。</p>
        </div>
    </li>
    <li class="timeline-item">
        <div class="timeline-item-circle"></div>
        <div class="timeline-item-line"></div>
        <div class="timeline-item-content">
            <span class="timel

- 阅读更多 -

css单行文本溢出显示省略号

System

2024-08-24

所有,css3

CSS可以使用text-overflow属性来实现单行文本溢出显示省略号。同时，需要设置white-space属性为nowrap防止文本换行，以及设置overflow属性为hidden来隐藏超出容器的文本。

下面是实现这个效果的CSS代码示例：




.ellipsis {
  white-space: nowrap;      /* 防止文本换行 */
  overflow: hidden;         /* 隐藏超出容器的文本 */
  text-overflow: ellipsis;  /* 文本溢出显示省略号 */
  width: 200px;             /* 定义容器宽度 */
}

接下来是HTML代码示例：




<div class="ellipsis">这是一段很长的文本，需要在单行溢出时显示省略号...</div>

当这段文本在一个宽度为200px的容器中显示时，超出容器宽度的部分将会被省略号代替。

- 阅读更多 -

CSS知识梳理

System

2024-08-24

所有,css3

CSS（层叠样式表）是一种用来为网页添加样式的语言，可以控制网页的布局、颜色、字体大小等一系列视觉效果。以下是一些关于CSS的常见问题和解答：

如何在HTML中引入CSS？

CSS可以通过多种方式被HTML引入，主要有以下三种方式：

内联样式：直接在HTML标签中使用style属性来添加样式。
内部样式表：在HTML的<head>部分使用<style>标签来添加样式。
外部样式表：创建一个单独的CSS文件，并通过HTML的<link>标签引入。

示例代码：




<!-- 内联样式 -->
<p style="color: blue;">这是一个蓝色的文本。</p>
 
<!-- 内部样式表 -->
<head>
    <style>
        p { color: red; }
    </style>
</head>
 
<!-- 外部样式表 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

如何使用CSS选择器？

CSS选择器用于选择需要添加样式的HTML元素。常见的选择器有：

类选择器：以.开头，可以被多个元素使用。
ID选择器：以#开头，在整个文档中必须是唯一的。
元素选择器：直接使用元素名称。
伪类选择器：用于向某些选择器添加特殊的效果，比如:hover。

示例代码：




/* 类选择器 */
.my-class { color: green; }
 
/* ID选择器 */
#my-id { font-size: 14px; }
 
/* 元素选择器 */
p { margin: 0; }
 
/* 伪类选择器 */
a:hover { text-decoration: underline; }

如何使用CSS创建布局？

CSS提供了多种布局方式，常见的有：

浮动（float）：使元素向左或向右浮动。
绝对定位（position: absolute）：相对于最近的已定位（非static）父元素定位。
相对定位（position: relative）：相对于正常位置进行定位。
固定定位（position: fixed）：相对于视口（浏览器窗口）定位。
表格布局：使用display: table和相关属性。
Flexbox布局：使用display: flex和相关属性。
Grid布局：使用display: grid和相关属性。

示例代码：




/* 浮动布局 */
.float-left { float: left; }
 
/* 绝对定位 */
.absolute-div { position: absolute; top: 10px; left: 10px; }
 
/* Flexbox布局 */
.flex-container { display: flex; }
 
/* Grid布局 */
.grid-container { display: grid; grid-template-columns: 100px 200px; }

如何使用CSS实现响应式设计？

CSS提供了媒体查询（Media Queries），可以根据设备屏幕的大小和特性来改变样式。

示例代码：




/* 媒体查询：当屏幕宽度小于768px时 */
@media screen and (max-width: 768px) {
    .my-class {
        /* 更改样式以适应小屏幕 */
    }
}

如何优化

- 阅读更多 -

踩坑(css3+h5)_background-size属性

System

2024-08-24

所有,css3

background-size 属性在 CSS3 中被引入，用于调整背景图片的大小。在 CSS3 之前，背景图片通常会被缩放以适应元素的整个背景区域。然而，从 CSS3 开始，我们可以指定背景图片的尺寸，而不会影响其原始尺寸。

background-size 属性可以有以下值：

auto：背景图片的真实大小。
length：可以定义宽度和高度，如像素 (px)、百分比 (%) 等。
percentage：相对于元素的大小。
cover：背景图片被缩放以完全覆盖背景区域，可能某些部分会被裁剪。
contain：背景图片被缩放以最大限度地填充背景区域，但不会被裁剪。

示例代码：




/* 使用百分比来定义背景图片的大小 */
div {
  background-image: url('image.jpg');
  background-size: 50% 75%;
}
 
/* 使用长度单位定义背景图片的大小 */
div {
  background-image: url('image.jpg');
  background-size: 200px 150px;
}
 
/* 使背景图片完全覆盖元素 */
div {
  background-image: url('image.jpg');
  background-size: cover;
}
 
/* 使背景图片最大限度地填充元素，不裁剪 */
div {
  background-image: url('image.jpg');
  background-size: contain;
}

在使用 cover 和 contain 值时，背景图片会自动调整大小以满足这些要求，而不需要指定具体的宽度和高度。

- 阅读更多 -

flex 弹性盒子布局多行最后一行左对齐的两种解决办法

System

2024-08-24

所有,css3

在Flex布局中，如果要实现多行布局并且最后一行的项目左对齐，可以使用以下两种方法：

使用justify-content: space-between和margin-right: auto：




.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.item {
  /* 定义项目样式 */
}

使用justify-content: flex-start和伪元素：




.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
 
.item {
  /* 定义项目样式 */
}
 
/* 添加伪元素在最后一行之前填充空间 */
.container::after {
  content: "";
  flex: 1 0 auto;
}

两种方法均可以实现多行布局的最后一行左对齐，但具体使用哪种取决于具体布局需求和上下文环境。

- 阅读更多 -

使用html+CSS绘制三角形

System

2024-08-24

所有,css3

要使用HTML和CSS绘制一个三角形，可以创建一个宽度和高度都为0的元素，并使用CSS的边框属性来制作三角形。这里是一个例子：

HTML:




<div class="triangle"></div>

CSS:




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}

在这个例子中，.triangle 是一个空的div，它的底部边框（border-bottom）被设置为实色black，而左右边框（border-left 和 border-right）被设置为透明，从而形成一个向下指的三角形。你可以通过调整border-left和border-right的大小来改变三角形的宽度，调整border-bottom的大小来改变三角形的高度。

- 阅读更多 -

AE圣诞树html代码里面能加名字的

System

2024-08-24

所有,css3

要在AE (After Effects) 制作的圣诞树动画中添加名字，通常需要使用AE的脚本或者插件来实现。因为After Effects本身并不支持直接在动画中添加文字层。但是，你可以导出每一帧作为图片，然后使用HTML和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>Christmas Tree with Name</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
  }
  .tree-container {
    position: relative;
    perspective: 1000px;
  }
  .tree-img {
    width: 500px;
    height: 500px;
    position: absolute;
    animation: rotate 10s infinite linear;
  }
  @keyframes rotate {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }
  .name-container {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #333;
    text-align: center;
  }
</style>
</head>
<body>
<div class="container">
  <div class="tree-container">
    <img class="tree-img" src="christmas-tree.png" alt="Christmas Tree">
    <div class="name-container">
      John Doe
    </div>
  </div>
</div>
</body>
</html>

在这个例子中，christmas-tree.png 是你导出的圣诞树的每一帧图片。你需要将这个图片文件替换为你从AE导出的图片。.tree-container 使用CSS3的 perspective 属性来创建3D旋转效果，而 .tree-img 的 animation 属性使得图片旋转。.name-container 则是用来在图片上方显示名字的文本容器。

请注意，这个示例是一个简化的版本，并且假设你已经有了分离的每一帧图片。在实际使用中，你可能需要编写JavaScript代码来自动化切换图片，或者使用WebGL和shader来创建更复杂和真实的动画效果。

- 阅读更多 -

Web前端开发技术实验11 HTMLCSS3与JavaScript基础

System

2024-08-24

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5, CSS3 和 JavaScript 基础示例</title>
    <style>
        body { font-family: Arial, sans-serif; }
        header, nav, section, footer {
            border: 1px solid #000;
            margin-bottom: 10px;
            padding: 5px;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li { display: inline; }
        section {
            width: 500px;
            margin: 0 auto;
            padding: 10px;
        }
        time {
            color: #888;
            font-size: 0.8em;
        }
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <section>
        <h2>最新文章</h2>
        <article>
            <h3><a href="#">文章标题</a></h3>
            <p>这里是文章的摘要...</p>
            <time datetime="2023-04-01">2023年4月1日</time>
        </article>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
        // 这里可以编写JavaScript代码来增强网页功能
    </script>
</body>
</html>

这个代码实例展示了如何使用HTML5、CSS3和JavaScript为一个简单的网站创建基础的结构和样式，同时提供了一个<script>标签用于插入JavaScript代码。这个示例旨在教学如何搭建一个基本的网站架构，并提供了一个学习HTML、CSS和JavaScript的起点。

- 阅读更多 -

如何在qss内固定QPushButton的宽高

System

2024-08-24

所有,css3

在QSS（Qt样式表）中，你可以通过设置min-width、max-width、min-height和max-height属性来固定QPushButton的宽度和高度。以下是一个简单的例子，展示如何通过QSS固定一个按钮的宽度和高度：




QPushButton {
    min-width: 100px;  /* 最小宽度100像素 */
    max-width: 100px;  /* 最大宽度100像素 */
    min-height: 30px;  /* 最小高度30像素 */
    max-height: 30px;  /* 最大高度30像素 */
    /* 其他样式 */
}

将上述QSS代码应用到你的应用程序中，可以通过调用QWidget::setStyleSheet方法：




QPushButton *button = new QPushButton("Button");
button->setStyleSheet("QPushButton {"
                      "    min-width: 100px;"
                      "    max-width: 100px;"
                      "    min-height: 30px;"
                      "    max-height: 30px;"
                      "    /* 其他样式 */"
                      "}");

这样，你创建的QPushButton将具有固定的宽度和高度。如果你想要在QSS中为所有QPushButton设置统一的固定尺寸，可以省略选择器：




QPushButton {
    width: 100px;   /* 宽度设置为100像素 */
    height: 30px;   /* 高度设置为30像素 */
    /* 其他样式 */
}

这样，所有QPushButton实例将自动应用这些固定的宽度和高度。

- 阅读更多 -

【CSS卡片翻转特效】CSS3实现3D旋转动画卡片翻转效果

System

2024-08-24

所有,css3




/* 定义基本的卡片样式 */
.card {
  width: 300px;
  height: 400px;
  perspective: 1000px;
}
 
/* 定义卡片容器的样式 */
.card-container {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 开启3D空间 */
  transition: transform 1s; /* 定义过渡动画 */
}
 
/* 定义卡片背面的样式 */
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面不可见 */
  background: url('back.jpg') no-repeat center center;
  background-size: cover;
}
 
/* 定义卡片正面的样式 */
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('front.jpg') no-repeat center center;
  background-size: cover;
  backface-visibility: hidden; /* 正面不可见 */
}
 
/* 当卡片容器应用旋转时，正面和背面都旋转显示 */
.card-container.flip .card-front {
  transform: rotateY(180deg);
}
 
.card-container.flip .card-back {
  transform: rotateY(0deg);
}
 
/* HTML结构 */
<div class="card">
  <div class="card-container">
    <div class="card-front"></div>
    <div class="card-back"></div>
  </div>
</div>
 
<!-- 使用JavaScript触发卡片翻转 -->
<script>
  const container = document.querySelector('.card-container');
  container.addEventListener('click', function() {
    container.classList.toggle('flip');
  });
</script>

这段代码展示了如何使用CSS3创建一个点击后可以翻转的卡片动画。当用户点击卡片容器时，.flip 类被添加到容器上，导致卡片翻转并展示背面。背景图片和样式已简化，实际应用中需要替换为实际的图片路径和样式。

- 阅读更多 -