1. 首页
  2. 分类
  3. 前端技术
【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效
System
2024-08-11
所有,css3

在CSS中，当你使用position: absolute进行绝对定位时，设置top属性为百分比值，是相对于其最近的已定位（即position属性不是static）祖先元素的宽度。如果没有这样的祖先元素，则相对于初始包含块（initial containing block）。

如果你发现设置top的百分比值不生效，可能的原因是：

  1. 没有找到已定位的祖先元素，导致参照错误。
  2. 已定位的祖先元素的宽度不是你预期的值，比如是0或者auto。

解决方法：

  1. 确保有一个已定位（即position属性为relative、absolute、fixed或sticky）的祖先元素。
  2. 如果已定位的祖先元素宽度不符合预期，需要为其设置一个明确的宽度。

示例代码：




/* 已定位的祖先元素 */
.parent {
  position: relative; /* 或 absolute, fixed, sticky */
  width: 100%; /* 确保宽度为100% */
}
 
/* 绝对定位的子元素 */
.child {
  position: absolute;
  top: 10%; /* 现在相对于宽度为100%的父元素设置顶部距离 */
}

HTML结构：




<div class="parent">
  <div class="child">我是绝对定位的元素</div>
</div>

确保父元素.parent具有position: relative;或者其他position值，并且有一个明确的宽度（如果需要）。这样top: 10%;才会根据.parent的宽度来计算。

- 阅读更多 -
CSS3弧形曲线循环菜单导航
System
2024-08-11
所有,css3



/* 设置圆弧的基本样式 */
.arc-menu {
  position: relative;
  width: 200px;
  height: 200px;
  transform: rotate(-90deg) translateY(-100px);
}
 
/* 设置圆弧上的每个项目的基本样式 */
.arc-menu li {
  position: absolute;
  top: 100px;
  transform-origin: 50% -100px;
  list-style: none;
}
 
/* 设置第一个项目的起始角度和旋转角度 */
.arc-menu li:first-child {
  transform: rotate(0deg) translateX(-100px);
}
 
/* 设置后续项目的起始角度和旋转角度 */
.arc-menu li:nth-child(n+2) {
  transform: rotate(72deg) translateX(-100px);
}
 
/* 这里省略了具体的动画实现细节 */

这个示例展示了如何使用CSS3的transform属性来创建一个弧形曲线布局的菜单导航。通过调整每个项目的transform属性，包括旋转角度和位置，我们可以创建出一个圆弧形状的菜单。这个例子省略了具体的动画实现细节，主要是为了展示如何布局这样的一个圆弧形菜单。

- 阅读更多 -
使用HTML实现一个不一样的圣诞树
System
2024-08-11
所有,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>
  .tree-container {
    position: relative;
    width: 300px;
    height: 400px;
    margin: 50px auto;
  }
  .tree {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 200px;
    background-color: green;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .tree::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
  }
  .presents {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 50px;
    background-color: red;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: slide 2s infinite alternate;
  }
  @keyframes slide {
    0% {
      transform: translateX(-50%) translateY(0);
    }
    100% {
      transform: translateX(-50%) translateY(-10px);
    }
  }
</style>
</head>
<body>
<div class="tree-container">
  <div class="tree">
    <div class="presents"></div>
  </div>
</div>
</body>
</html>

这段代码使用了CSS动画来实现礼物在树林间上下飘飘的效果，为网页添加了一些基本的交互和视觉元素。这个简单的例子可以作为开发更复杂圣诞树布局的基础。

- 阅读更多 -
h5 视频全屏-横屏实现，遇到问题以及解决方案
System
2024-08-11
所有,css3

在H5中实现视频全屏或横屏，可以通过监听视频元素的resize事件来检测方向变化，并适当调整样式以实现全屏或横屏。以下是一个简单的示例代码：

HTML:




<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

CSS:




#myVideo {
  width: 100%;
  height: auto;
}
 
/* 横屏样式 */
.landscape {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

JavaScript:




const video = document.getElementById('myVideo');
 
function checkOrientation() {
  if (window.innerWidth > window.innerHeight) {
    video.classList.add('landscape');
  } else {
    video.classList.remove('landscape');
  }
}
 
// 初始检查
checkOrientation();
 
// 监听方向变化
window.addEventListener('resize', checkOrientation);

这段代码会在用户旋转设备时，检测窗口的宽高比例，并根据比例给视频元素添加或移除一个.landscape类。当类存在时，视频会以横屏全屏的方式显示，否则保持正常的纵屏模式。

- 阅读更多 -
小程序（原生）更多弹框，点击取消关闭弹框，点击确定写事件
System
2024-08-11
所有,css3

在小程序中，如果你想要实现一个更多操作的弹框，并且点击取消按钮关闭弹框，点击确定触发一个事件，你可以使用wx.showActionSheet API。以下是一个简单的示例代码：




// 在页面的 .js 文件中
Page({
  // 显示操作菜单
  showActionSheet: function() {
    wx.showActionSheet({
      itemList: ['确定操作', '取消'],  // 菜单项
      success: function(res) {
        // 判断用户点击了哪一个菜单项
        if (!res.cancel) {
          if (res.tapIndex === 0) {
            // 点击了确定操作
            console.log('点击了确定操作');
            // 在这里写你的确定操作逻辑
          }
        }
      },
      fail: function(res) {
        console.log(res.errMsg);
      }
    });
  }
});

在页面的 .wxml 文件中，你可以添加一个按钮来触发这个弹框：




<!-- 在页面的 .wxml 文件中 -->
<button bindtap="showActionSheet">点击我显示更多操作</button>

这样，当用户点击按钮时，会显示一个包含“确定操作”和“取消”的弹框。如果用户点击“取消”，弹框会关闭；如果用户点击“确定操作”，会触发相应的事件处理函数。

- 阅读更多 -
CSS3渐变属性详解
System
2024-08-11
所有,css3

CSS3 渐变属性主要包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。

  1. linear-gradient() 创建一个线性渐变背景。



/* 基本语法 */
background: linear-gradient(direction, color-stop1, color-stop2, ...);
 
/* 示例：创建一个从左(左上角)到右(右下角)的线性渐变，从蓝色过渡到红色 */
div {
  background: linear-gradient(to right, blue, red);
}
  1. radial-gradient() 创建一个径向渐变背景。



/* 基本语法 */
background: radial-gradient(shape size at position, start-color, ..., last-color);
 
/* 示例：创建一个圆形渐变，从绿色过渡到透明 */
div {
  background: radial-gradient(circle, green, transparent);
}
  1. repeating-linear-gradient() 创建一个重复的线性渐变背景。



/* 基本语法 */
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
 
/* 示例：创建一个重复的线性渐变，从浅蓝色到深蓝色 */
div {
  background: repeating-linear-gradient(to right, lightblue, darkblue 10%);
}
  1. repeating-radial-gradient() 创建一个重复的径向渐变背景。



/* 基本语法 */
background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
 
/* 示例：创建一个重复的径向渐变，从红色过渡到蓝色 */
div {
  background: repeating-radial-gradient(circle, red, blue 10%);
}

这些属性可以用来创建各种视觉效果，提升网页设计的视觉吸引力。

- 阅读更多 -
使用css及动画实现按钮的动态效果
System
2024-08-11
所有,css3

要使用CSS和动画实现按钮的动态效果，你可以创建一个带有边框动画的按钮，使其在用户悬停时显示动态的边框效果。以下是一个简单的例子：

HTML:




<button class="dynamic-button">Hover Over Me!</button>

CSS:




.dynamic-button {
  background-color: #4CAF50; /* Green background */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.5s; /* Transition background color */
  overflow: hidden; /* Required for the border animation */
}
 
.dynamic-button:hover {
  background-color: #3e8e41; /* Darker green on hover */
}
 
.dynamic-button:hover:after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent, #fff, transparent);
  animation: animate 2s linear infinite; /* Animation */
}
 
@keyframes animate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

这段代码定义了一个按钮，当用户将鼠标悬停在按钮上时，会有一个从左至右的动画边框效果。按钮背景色在悬停时会有变化，增加了交互的视觉反馈。

- 阅读更多 -
【html/html5/css/css3知识点】
System
2024-08-11
所有,css3

HTML5 引入了一些新的语义元素，例如 <header>, <nav>, <section>, <article>, <aside> 和 <footer>，它们有助于改善代码的可读性和可维护性。

CSS3 引入了许多新特性，例如边框、阴影、圆角、渐变、变换等，以及选择器的增强，这些使得页面的样式更加丰富多样。

下面是一个简单的HTML和CSS3的示例代码，展示如何使用HTML5元素和CSS3特性：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 and HTML5 Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border-radius: 10px; /* 圆角 */
    box-shadow: 5px 5px 10px #888; /* 阴影 */
    transition: transform 0.3s ease; /* 变换动画 */
  }
  .box:hover {
    transform: rotate(360deg); /* 鼠标悬停时旋转 */
  }
</style>
</head>
<body>
<header>
  <h1>Welcome to My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<section>
  <div class="box"></div>
</section>
<footer>
  <p>Copyright &copy; 2023 My Website</p>
</footer>
</body>
</html>

这个示例中，我们使用了HTML5的<header>, <nav>, <section>, 和 <footer>元素，以及CSS3的border-radius属性来制作圆角，box-shadow属性来添加盒子阴影，以及transition属性和:hover伪类来实现鼠标悬停时的变换动画效果。

- 阅读更多 -
js实现鼠标滚轮放大缩小页面指定区域(css3 scale)
System
2024-08-11
所有,css3

在网页中使用鼠标滚轮来放大缩小页面的特定区域，可以通过监听元素的wheel事件来实现。以下是一个使用JavaScript和CSS实现的示例：

HTML:




<div id="zoomable-area">
  <!-- 这里是你需要放大缩小的内容 -->
</div>

CSS:




#zoomable-area {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  overflow: hidden; /* 确保放大后的内容不超出div边界 */
  transition: transform 0.1s; /* 平滑的变换效果 */
  transform-origin: center center; /* 变换的基点设为中心 */
}

JavaScript:




const zoomableArea = document.getElementById('zoomable-area');
let scale = 1; // 初始缩放比例为1
 
zoomableArea.addEventListener('wheel', function(event) {
  event.preventDefault(); // 阻止默认的滚轮行为
  const delta = event.deltaY > 0 ? 1.1 : 0.9; // 根据滚轮方向调整缩放比例
  scale *= delta; // 更新缩放比例
  this.style.transform = `scale(${scale})`; // 应用缩放变换
}, { passive: false }); // passive: false 防止移动设备上的默认行为

这段代码会为ID为zoomable-area的元素添加一个事件监听器，当用户在该元素上使用鼠标滚轮时，会根据滚轮的滚动方向放大或缩小该区域。transform属性被用来应用缩放效果，而transition属性确保缩放有平滑的过渡效果。

- 阅读更多 -
CSS布局之使用Flex布局画骰子（5点）
System
2024-08-11
所有,css3



/* 基础HTML结构 */
<div class="dice">
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
</div>
 
/* CSS样式 */
.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #bbada0;
  border-radius: 10px;
  border: 3px solid #efdfd5;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
 
.side {
  width: 50%;
  height: 50%;
  background-color: #fcfdf5;
  border: 2px solid #efdfd5;
  border-radius: 10px;
  position: relative;
}
 
.side::before {
  content: '';
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: #efdfd5;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
/* 随机应用于一个side类以模拟骰子的点 */
.side:nth-child(1) {
  background-color: #efdfd5;
}
 
.side:nth-child(2) {
  transform: rotate(60deg);
}
 
.side:nth-child(3) {
  transform: rotate(120deg);
}
 
.side:nth-child(4) {
  transform: rotate(180deg);
}
 
.side:nth-child(5) {
  transform: rotate(240deg);
}
 
.side:nth-child(6) {
  transform: rotate(300deg);
}

这段代码使用了Flexbox布局来创建一个简单的五点骰子模型。每个.side类代表骰子的一面，通过CSS的transform属性旋转不同的角度来模拟骰子的点分布。通过随机应用.side类，可以模拟骰子的随机点投射效果。

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