1. 首页
  2. 分类
  3. css3
[HTML]HTML5新增标签
System
2024-08-24
所有,css3

HTML5 引入了许多新的语义化标签，这些标签旨在改善网页的可访问性和搜索引擎优化（SEO）。以下是一些常用的 HTML5 新增标签：

  1. <header> - 定义页面或区段的头部；
  2. <nav> - 定义导航链接；
  3. <section> - 定义文档中的一个区段；
  4. <article> - 定义独立的、完整的相关内容；
  5. <aside> - 定义与页面主内容少关的内容；
  6. <footer> - 定义页面或区段的底部；
  7. <main> - 定义页面的主要内容区域；
  8. <time> - 定义日期或时间；
  9. <mark> - 定义有标记的文本（通常是高亮显示）；
  10. <details> - 定义展开或折叠的详情；
  11. <summary> - <details> 元素的标题；
  12. <dialog> - 定义对话框或窗口（如: 用于聊天信息或用户输入）。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 New Tags Example</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section>
        <article>
            <header>
                <h2>Article Title</h2>
                <time datetime="2023-01-01">January 1, 2023</time>
            </header>
            <p>This is an example of an article content...</p>
            <footer>
                <mark>Tags:</mark> HTML, CSS, JavaScript
            </footer>
        </article>
    </section>
    
    <aside>
        <details>
            <summary>Click to show details</summary>
            <p>This is some additional information...</p>
        </details>
    </aside>
    
    <dialog open>
        <dt>User</dt>
        <dd>Hello, how can I help you?</dd>
        <dt>Visitor</dt>
        <dd>I'm looking for information about your products.</dd>
    </dialog>
    
    <footer>
        <p>Copyright &copy; 2023 My Website</p>
    </footer>
</body>
</html>

这个示例展示了如何在一个典型的网站页面中使用这些新标签。请注意，虽然这些标签提供了语义化的好处，但也应确保它们在不支持 HTML5 的旧浏览器中有良好的回退机制。

- 阅读更多 -
html摩天轮小案例
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>Carousel Example</title>
<style>
  .carousel {
    position: relative;
    width: 100%;
    height: 230px;
    margin: auto;
    overflow: hidden;
  }
  .carousel-inner {
    position: absolute;
    width: 300%;
    transition: all .5s ease;
  }
  .carousel-inner div {
    float: left;
    width: 33.33%;
    height: 230px;
  }
  .carousel-control {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 60px;
    margin-top: -30px;
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 60px;
    color: white;
    font-size: 30px;
    cursor: pointer;
  }
  .carousel-control.left {
    left: 0;
  }
  .carousel-control.right {
    right: 0;
  }
</style>
</head>
<body>
 
<div class="carousel">
  <div class="carousel-inner" style="left: -33.33%;">
    <div><img src="image1.jpg" alt="Image 1"></div>
    <div><img src="image2.jpg" alt="Image 2"></div>
    <div><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <div class="carousel-control left">&#10094;</div>
  <div class="carousel-control right">&#10095;</div>
</div>
 
<script>
  const carousel = document.querySelector('.carousel');
  const inner = document.querySelector('.carousel-inner');
  const leftControl = document.querySelector('.carousel-control.left');
  const rightControl = document.querySelector('.carousel-control.right');
 
  let slideCount = Math.floor(inner.offsetWidth / carousel.offsetWidth);
  let slidePosition = 0;
 
  rightControl.addEventListener('click', function() {
    if (slidePosition > -slideCount + 1) {
      slidePosition -= 1;
      inner.style.left = slidePosition * 100 + '%';
    }
  });
 
  leftControl.addEventListener('click', function() {
    if (slidePosition < 0) {
      slidePosition += 1;
      inner.style.left = slidePosition * 100 + '%';
    }
  });
</script>
 
</body>
</html>

这段代码实现了一个简单的摩天轮效果，用户可以通过点击左右控制按钮来切换图片。这个例子使用了基本的HTML结构，内联CSS样式来控制布局和视觉效果，以及JavaScript来处理切换逻辑。这个示例可以作为学习如何创建简单动画轮播图的起点。

- 阅读更多 -
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的大小来改变三角形的高度。

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