2024-08-23



<!DOCTYPE html>
<html>
<head>
    <title>基础标签示例</title>
</head>
<body>
    <!-- 超链接标签 -->
    <a href="https://www.example.com">访问Example网站</a>
 
    <!-- 表格标签 -->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>28</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>32</td>
        </tr>
    </table>
 
    <!-- 表单标签 -->
    <form action="/submit">
        <!-- 文本输入框 -->
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <!-- 密码输入框 -->
        <label for="password">密码:</label>
        <input type="password" id="password" name="password">
        <!-- 提交按钮 -->
        <input type="submit" value="登录">
    </form>
</body>
</html>

这段代码展示了如何在HTML中使用超链接、表格和表单以及input标签。其中,<a> 标签用于创建超链接,<table><tr><th><td> 标签用于创建表格,<form> 标签包含了输入框和提交按钮。

2024-08-23

在HTML中实现拖拽功能,可以使用JavaScript监听鼠标事件来完成。以下是一个简单的实现示例:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<style>
#draggable {
  width: 150px;
  height: 150px;
  background: skyblue;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed #333;
  cursor: move;
}
 
#dropzone {
  width: 300px;
  height: 150px;
  background: orange;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed #333;
  margin-top: 10px;
  position: relative;
}
</style>
</head>
<body>
 
<div id="draggable">Drag me!</div>
<div id="dropzone">Drop here!</div>
 
<script>
// 获取可拖拽元素和放置区域元素
var dragItem = document.getElementById('draggable');
var dropZone = document.getElementById('dropzone');
 
var dragging = false;
var mouseOffset;
 
// 鼠标按下时记录鼠标位置
dragItem.addEventListener('mousedown', function(e) {
  dragging = true;
  mouseOffset = {x: e.clientX - dragItem.offsetLeft, y: e.clientY - dragItem.offsetTop};
  dragItem.style.position = 'relative';
  dragItem.style.zIndex = 1000;
});
 
// 鼠标移动时更新元素位置
document.addEventListener('mousemove', function(e) {
  if (dragging) {
    var x = e.clientX - mouseOffset.x;
    var y = e.clientY - mouseOffset.y;
    dragItem.style.left = x + 'px';
    dragItem.style.top = y + 'px';
  }
});
 
// 鼠标抬起时结束拖拽
document.addEventListener('mouseup', function(e) {
  if (dragging) {
    dragging = false;
    // 检查拖拽结束位置是否在放置区域内
    if (checkWithin(dropZone, dragItem)) {
      dragItem.style.left = dropZone.offsetLeft + 'px';
      dragItem.style.top = dropZone.offsetTop + 'px';
      // 处理放置逻辑
      alert('Dropped!');
    } else {
      // 处理未放置逻辑
    }
  }
});
 
// 检查元素是否在另一个元素的范围内
function checkWithin(outerElement, innerElement) {
  var outerRect = outerElement.getBoundingClientRect();
  var innerRect = innerElement.getBoundingClientRect();
  return (
    innerRect.top >= outerRect.top &&
    innerRect.left >= outerRect.left &&
    innerRect.bottom <= outerRect.bottom &&
    innerRect.right <= outerRect.right
  );
}
</script>
 
</body>
</html>

在这个例子中,我们创建了一个可拖拽的元素#draggable和一个放置区域#dropzone。通过监听鼠标事件,我们可以移动#draggable元素,并且在鼠标抬起时检查它是否在#dropzone内部,如果是,则执行相关的放置逻辑(在这个例子中是弹出一个警告框)。如果不在放置区域内,则可以执行其他逻辑。

2024-08-23

CSS3可以通过关键帧(keyframes)和动画(animations)来实现边框不断跑动的效果。以下是一个简单的例子,展示了如何使用CSS3来创建这种效果:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Running Border</title>
<style>
  @keyframes run-border {
    0% {
      border-color: #3498db;
    }
    100% {
      border-color: #e74c3c;
    }
  }
 
  .running-border {
    width: 200px;
    height: 50px;
    border: 3px solid #3498db;
    border-radius: 5px;
    animation: run-border 2s linear infinite;
  }
</style>
</head>
<body>
 
<div class="running-border"></div>
 
</body>
</html>

在这个例子中,.running-border 类定义了一个有着蓝色边框的方块,并且通过CSS3的@keyframes规则定义了一个名为run-border的动画,使得边框颜色从#3498db渐变到#e74c3c。动画的持续时间是2秒,且通过linear时间函数保持速度不变,infinite关键字使得动画无限次数循环播放。

2024-08-23



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫彩发光字特效</title>
<style>
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #000;
    font-family: 'Roboto', sans-serif;
    text-align: center;
  }
  .glow {
    color: #fff;
    font-size: 6rem;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    font-weight: 800;
    margin: 0;
  }
</style>
</head>
<body>
<h1 class="glow">发光字特效</h1>
</body>
</html>

这段代码展示了如何使用CSS的text-shadow属性创建一个炫酷的发光效果的文字。通过调整text-shadow属性中颜色、大小和模糊半径的值,开发者可以创造出各种不同的发光效果。这个例子中使用了一系列的白色“光”来模拟发光效果,并且通过调整光的数量和大小,可以创建出不同的视觉效果。

2024-08-23



/* 定义动画序列 */
@keyframes example {
  from {
    background-color: red;
    transform: translateX(0);
  }
  to {
    background-color: yellow;
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这段代码定义了一个名为 example 的关键帧动画,它从红色背景开始,然后平移到100像素的位置。然后,在 div 元素上应用这个动画,设置动画持续时间为4秒,并且设置动画无限次数循环。这样,div 元素的背景颜色会从红色渐变到黄色,并且不断地从初始位置向右移动100像素。

2024-08-23

CSS3多媒体查询是一种能够根据设备特性(如屏幕宽度、分辨率、设备方向等)来应用不同样式规则的方法。

以下是一个简单的CSS3多媒体查询示例,它根据屏幕宽度来改变背景颜色:




/* 默认样式 */
body {
  background-color: lightblue;
}
 
/* 当屏幕宽度小于或等于768像素时,应用以下样式 */
@media (max-width: 768px) {
  body {
    background-color: pink;
  }
}
 
/* 当屏幕宽度在600像素到768像素之间时,应用以下样式 */
@media (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: orange;
  }
}

在这个例子中,默认背景颜色为lightblue。当屏幕宽度减少到768像素或更小时,背景颜色变为pink。在600像素到768像素之间的屏幕宽度范围内,背景颜色变为orange

2024-08-23

CSS实现透明效果主要有以下三种方式:

  1. 使用opacity属性:这个属性会影响元素及其所有子元素的透明度。



.transparent-element {
  opacity: 0.5; /* 50% 透明度 */
}
  1. 使用RGBA颜色:在CSS中为颜色指定透明度,RGBA是指Red、Green、Blue和Alpha通道(透明度)。



.transparent-element {
  background-color: rgba(255, 0, 0, 0.3); /* 30% 透明度的红色 */
}
  1. 使用HSLA颜色:HSLA是指Hue(色调)、Saturation(饱和度)、Lightness(亮度)和Alpha通道。



.transparent-element {
  background-color: hsla(120, 100%, 50%, 0.3); /* 30% 透明度的绿色 */
}

每种方法都有其特点,opacity会使元素及其子元素一起变透明,而RGBA和HSLA可以单独对颜色设置透明度,而不影响其他属性。

2024-08-23

在uView UI框架中,uview actionSheet组件用于创建操作表单,但是如果内容过多,可能会超出屏幕高度,导致显示不全。要解决这个问题,可以通过设置max-height属性来限制actionSheet的最大高度,确保内容能够全部显示。

以下是一个示例代码,展示如何在uView中设置actionSheet的最大高度:




<template>
  <view>
    <u-action-sheet :list="list" max-height="600"></u-action-sheet>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        list: [
          // 填充你的操作列表
        ]
      };
    }
  };
</script>
 
<style>
  /* 你的全局样式 */
</style>

在上面的代码中,:list属性是传递给u-action-sheet组件的数据,包含了你要显示的所有操作项。max-height="600"是设置actionSheet最大高度为600px,你可以根据实际需求调整这个值。

请注意,这个解决方案假设你使用的是uView的最新版本,且你的项目基于uni-app框架。如果你的项目环境有所不同,可能需要调整代码以适应你的环境。

2024-08-23

以下是一个简单的悬浮球菜单CSS动画示例:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮球菜单CSS动画</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
  }
 
  .menu-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #555;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
 
  .menu-button:hover {
    box-shadow: 0 0 0 3px #000;
  }
 
  .menu {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 200px;
    background-color: #333;
    border-radius: 50px 50px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
 
  .menu-button.active ~ .menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
 
  .menu-item {
    width: 50px;
    height: 50px;
    background-color: #555;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
  }
 
  .menu-item:hover {
    transform: scale(1.1);
  }
 
  .menu-item:not(:last-child) {
    margin-bottom: 10px;
  }
</style>
</head>
<body>
 
<div class="menu-button"></div>
<div class="menu">
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
</div>
 
<script>
  const menuButton = document.querySelector('.menu-button');
  const menu = document.querySelector('.menu');
 
  menuButton.addEventListener('click', () => {
    menuButton.classList.toggle('active');
  });
</script>
 
</body>
</html>

这段代码创建了一个悬浮球菜单,当点击悬浮球时,会展开显示三个带有三个图标的菜单项,悬浮球菜单可以通过CSS过渡动画显示或隐藏。这个示例简单易懂,适合作为初学者学习CSS动画的入门项目。

2024-08-23

以下是一个使用原生JavaScript实现的简单下拉框,支持多选和搜索的示例代码:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Select Dropdown with Search</title>
<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content label {
    display: block;
  }
  .dropdown-content label:hover {
    background-color: #f1f1f1;
  }
  .show {display: block;}
</style>
</head>
<body>
 
<div class="dropdown">
  <input type="text" id="myInput" onkeyup="filterFunction()" placeholder="Search.." title="Type in a name">
  <div id="myDropdown" class="dropdown-content">
    <label><input type="checkbox" name="vehicle" value="Bike"> Bike</label>
    <label><input type="checkbox" name="vehicle" value="Car"> Car</label>
    <label><input type="checkbox" name="vehicle" value="Boat"> Boat</label>
    <label><input type="checkbox" name="vehicle" value="Airplane"> Airplane</label>
  </div>
</div>
 
<script>
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("label");
 
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>
 
</body>
</html>

这段代码实现了一个简单的下拉框,用户可以通过输入来搜索和筛选选项。当用户在搜索框中输入时,下拉内容会根据用户的输入实时更新显示。选中的选项(复选框)会被提交,以便在表单提交时使用。