1. 首页
  2. 分类
  3. 前端技术
uniapp小程序实现上下固定中间滑动布局
System
2024-08-24
所有,css3



<template>
  <view class="container">
    <view class="top-fixed">顶部固定区域</view>
    <scroll-view scroll-y="true" class="middle-scrollable">
      <view v-for="(item, index) in 30" :key="index">{{ item }}条数据</view>
    </scroll-view>
    <view class="bottom-fixed">底部固定区域</view>
  </view>
</template>
 
<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.top-fixed {
  height: 50px; /* 根据实际需求设置固定区域的高度 */
  background-color: #f0f0f0;
}
.middle-scrollable {
  flex: 1;
  background-color: #f8f8f8;
}
.bottom-fixed {
  height: 50px; /* 根据实际需求设置固定区域的高度 */
  background-color: #f0f0f0;
}
</style>

这段代码实现了一个简单的上下固定中间滑动的布局。顶部是一个固定高度的区域，底部也是一个固定高度的区域，中间是可以滚动的区域。通过使用Flexbox布局，并将scroll-view的scroll-y属性设置为true，实现了垂直滚动。这是一个常用的页面布局技巧，适用于多数需要固定头部和底部，并且中间内容区域可以滚动的场景。

- 阅读更多 -
H5新增、CSS3以及ESES6新增特性
System
2024-08-24
所有,css3

HTML5 新特性:

  • 语义化标签（如 <header>, <nav>, <section>, <article>, <footer> 等）
  • 新的表单控件（如日期、时间、数量、颜色选择器等）
  • 画布（<canvas>）和视频（<video>）/ 音频（<audio>）
  • 地理位置（Geolocation）API
  • 离线应用（Offline Web Applications）
  • 存储（LocalStorage 和 SessionStorage）
  • 索引数据库（Web SQL）
  • Web Workers

CSS3 新特性:

  • 边框和背景
  • 文字效果
  • 阴影和反射
  • 转换和动画
  • 多列布局
  • 多媒体查询
  • 选择器（伪类选择器、属性选择器、结构伪类选择器）

ES5 新特性:

  • 严格模式（use strict）
  • 内置 Object.create(), Object.freeze(), Object.defineProperty() 等
  • JSON 对象
  • 原生日期处理
  • 新的数组方法（.forEach(), .map(), .filter(), .reduce(), .indexOf() 等）
  • 新的函数特性（名称参数、默认参数值）

ES6 新特性:

  • 类和构造函数
  • 模块（import/export）
  • 箭头函数
  • 模板字符串
  • 解构赋值
  • 默认参数值
  • 扩展运算符（...）
  • Iterator和生成器
  • Promise
  • Set和Map数据结构
  • Symbol类型
  • 可计算属性名
  • 装饰器
  • 静态类型（TypeScript）
- 阅读更多 -
HTML+CSS实现时间轴效果
System
2024-08-24
所有,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 {
        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的常见问题和解答：

  1. 如何在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>
  1. 如何使用CSS选择器？

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

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

示例代码：




/* 类选择器 */
.my-class { color: green; }
 
/* ID选择器 */
#my-id { font-size: 14px; }
 
/* 元素选择器 */
p { margin: 0; }
 
/* 伪类选择器 */
a:hover { text-decoration: underline; }
  1. 如何使用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; }
  1. 如何使用CSS实现响应式设计？

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

示例代码：




/* 媒体查询：当屏幕宽度小于768px时 */
@media screen and (max-width: 768px) {
    .my-class {
        /* 更改样式以适应小屏幕 */
    }
}
  1. 如何优化
- 阅读更多 -
踩坑(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布局中，如果要实现多行布局并且最后一行的项目左对齐，可以使用以下两种方法：

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



.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.item {
  /* 定义项目样式 */
}
  1. 使用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的起点。

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