1. 首页
  2. 分类
  3. 前端技术
有趣的css - 音频小动效
System
2024-08-24
所有,css



/* 定义一个音频播放时的小动效 */
.audio-effect {
    animation: pulse 1s infinite alternate;
    transform-origin: 50% 50%;
}
 
/* 定义动效关键帧 */
@keyframes pulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

这段代码定义了一个简单的动效，当音频文件正在播放时，元素将以中心点为轴进行缩放，不断地从原始大小缩放到1.1倍大小，然后再缩回原大小，这个动效可以表示音频正在播放的状态。

- 阅读更多 -
CSS弹性盒子（详细版，建议收藏）
System
2024-08-24
所有,css

弹性盒子（Flexible Box，Flexbox）是CSS3的一种新布局模式，主要是用来提供一种更灵活的方式来对容器中的条目进行排列、对齐和分配空间。

弹性盒子由弹性容器和弹性子项组成。弹性容器是通过设置 display 属性为 flex 或 inline-flex 创建的。弹性子项是其直接子元素。

以下是创建一个基本的弹性盒子的示例代码：




.container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 容器内条目的排列方向 */
  justify-content: flex-start; /* 水平方向上的对齐方式 */
  align-items: center; /* 垂直方向上的对齐方式 */
}
 
.item {
  /* 子项样式 */
}



<div class="container">
  <div class="item">条目 1</div>
  <div class="item">条目 2</div>
  <div class="item">条目 3</div>
</div>

弹性盒子模型具有以下特性：

  1. 弹性布局是一个灵活的二维布局模型。
  2. 弹性容器内的子项可以在任何方向排列。
  3. 子项可以设置为弹性宽度或弹性高度，以便它们可以根据容器大小自动调整。
  4. 子项可以自动填充剩余空间，或者通过特定的属性设置为固定大小或比例。
  5. 子项可以很容易地在容器内沿任何方向排列。

弹性盒子是创建复杂响应式布局的强大工具，并且得到了所有现代浏览器的支持。

- 阅读更多 -
Java Web基础Web前端简介之html+javascript+css
System
2024-08-24
所有,css

HTML、JavaScript 和 CSS 是构建 Web 前端的三种核心技术。

  1. HTML：

    HTML 是用来制作网页的标准标记语言。它被用来结构化信息（包括文字、图片、链接等），并提供网页的内容。




<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问我的主页</a>
</body>
</html>

  1. CSS：

    CSS 是用来描述网页样式的语言。通过 CSS，开发者可以控制网页的布局、颜色、字体等外观。




body {
    background-color: lightblue;
}
 
h1 {
    color: navy;
    margin-left: 20px;
}
 
p {
    font-size: 16px;
}

  1. JavaScript：

    JavaScript 是一种编程语言，可以用来增强网页的交互性。比如，你可以使用 JavaScript 来创建动态的网页，用户可以与之互动（例如：表单验证、动画、等等）。




function showTime() {
    const d = new Date();
    const h = d.getHours();
    const m = d.getMinutes();
    const s = d.getSeconds();
    document.getElementById('myClock').innerHTML = `${h}:${m}:${s}`;
}
 
setInterval(showTime, 1000);

以上代码展示了如何使用 JavaScript 创建一个简单的时钟。这段代码每秒更新一次页面上 id 为 'myClock' 的元素的内容，显示当前时间。

- 阅读更多 -
css怎么设置鼠标样式
System
2024-08-24
所有,css

在CSS中，可以使用cursor属性来设置鼠标样式。该属性允许你定义当鼠标指针移动到元素上时应该显示的光标类型。

以下是一些常用的cursor值：

  • default：默认光标（通常是一个箭头）
  • pointer：指针（通常表示链接）
  • crosshair：十字线
  • text：文本模式
  • wait：等待光标（通常是一个沙漏或圆形加载符号）
  • move：移动图标
  • not-allowed：操作不允许时的光标（通常是一个禁止标志）

你可以这样设置元素的鼠标样式：




.element {
  cursor: pointer;
}

或者使用不同的值来改变鼠标样式：




.element-text {
  cursor: text;
}
 
.element-move {
  cursor: move;
}
 
.element-wait {
  cursor: wait;
}

将上述类应用到相应的HTML元素上即可改变鼠标的显示样式。

- 阅读更多 -
css通过子元素选择父元素
System
2024-08-24
所有,css

在CSS中，直接通过子元素选择父元素是不可行的，因为CSS的选择器是从父元素向子元素的方向工作的，而不支持子元素向父元素的反向选择。

如果你需要通过子元素的状态来改变父元素的样式，你可以使用一些间接的方法来实现这个需求。以下是一些常用的方法：

  1. 使用后代选择器（Descendant combinator）:



.parent .child {
    /* 样式 */
}
  1. 使用类（Class）或者属性（Attribute）选择器，在父元素上添加特定的类或属性，然后通过这个类或属性选择父元素：



.parent.active {
    /* 样式 */
}
 
/* 或者 */
 
.parent[data-active="true"] {
    /* 样式 */
}
  1. 使用JavaScript来动态改变父元素的类或样式：



document.querySelector('.child').addEventListener('event', function() {
    this.closest('.parent').classList.add('active');
    // 或者直接修改样式
    this.closest('.parent').style.color = 'red';
});

请注意，虽然CSS本身不支持直接通过子元素选择父元素，但是在未来的CSS选择器中可能会引入子元组选择器（:has()），该选择器可以实现通过子元素选择父元素的功能，但是这个选择器目前还没有标准化，并且在现代浏览器中还不被支持。

- 阅读更多 -
使用html和css实现个人简历表单的制作
System
2024-08-24
所有,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>简历</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    margin-bottom: 20px;
  }
  .section {
    margin-bottom: 20px;
  }
  .section-title {
    text-align: center;
    margin-bottom: 10px;
  }
  .info-item {
    margin-bottom: 5px;
  }
  .info-label {
    width: 100px;
    display: inline-block;
  }
  .info-content {
    display: inline-block;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>个人简历</h1>
</div>
 
<div class="section">
  <h2 class="section-title">基本信息</h2>
  <div class="info-item">
    <span class="info-label">姓名:</span>
    <span class="info-content">张三</span>
  </div>
  <div class="info-item">
    <span class="info-label">联系电话:</span>
    <span class="info-content">1234567890</span>
  </div>
  <div class="info-item">
    <span class="info-label">电子邮件:</span>
    <span class="info-content">zhangsan@example.com</span>
  </div>
  <div class="info-item">
    <span class="info-label">居住地址:</span>
    <span class="info-content">123 广州路, 上海市</span>
  </div>
</div>
 
<div class="section">
  <h2 class="section-title">教育背景</h2>
  <div class="info-item">
    <span class="info-content">硕士，计算机科学，某大学，2010 - 2013</span>
  </div>
  <div class="info-item">
    <span class="info-content">本科，数学，某大学，2005 - 2008</span>
  </div>
</div>
 
<div class="section">
  <h2 class="section-title">工作经验</h2>
  <div class="info-item">
    <span class="info-content">技术主管，某公司，2015 - 至今</span>
  </div>
  <div class="info-item">
    <span class="info-content">软件工程师，某公司，2013 - 2015</span>
  </div>
</div>
 
<div class="section">
  <h2 class="section-title">技能</h2>
  <div class="info-item">
    <span class="info-content">Python</span>
  </div>
  <div class="info-item">
    <span class="info-content">JavaScript</span>
  </div>
  <div class="info-item">
    <span class="info-content">HTML/CSS</span>
  </div>
</div>
 
</body>
</html>

这个简历使用了基本的HTML结构和CSS样式来展示个人信息和教育背景、工作经验和技能。这个示例可以作为创建个人简历的起点，开发者可以根据自己的需求添加更多的细节和样式。

- 阅读更多 -
【CSS预处理语言】less快速入门
System
2024-08-24
所有,css



// 定义变量
@font-size-base: 16px;
@link-color: #428bca; // 蓝色链接
 
// 定义混合（函数）
.border-radius(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
 
// 使用变量和混合
button {
  color: @link-color;
  .border-radius(3px); // 调用混合
}
 
// 嵌套规则
nav {
  ul {
    list-style-type: none;
    padding-left: 0;
    
    li {
      display: inline;
      
      a {
        text-decoration: none;
        padding: 5px 10px;
        margin-right: 10px;
        
        &:hover {
          color: darken(@link-color, 10%); // 使用less函数
          text-decoration: underline;
        }
      }
    }
  }
}

这个例子展示了如何在LESS中定义变量、混合（函数）、嵌套规则，并使用一些内置的函数，如darken来计算颜色的深色变体。这样的代码可以提高CSS的可维护性和生产力。

- 阅读更多 -
Ajax 天气预报API案例
System
2024-08-24
所有,ajax

以下是一个简化的JavaScript代码示例，用于通过Ajax调用OpenWeatherMap天气预报API，并在网页上显示结果。




// 设置API的URL和你的API密钥
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric";
 
// 创建一个新的XMLHttpRequest对象
const request = new XMLHttpRequest();
 
// 配置请求
request.open('GET', apiUrl, true);
 
// 设置请求完成的处理函数
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // 请求成功，处理响应
    const response = JSON.parse(this.response);
    // 假设响应格式中包含了天气状况描述和温度信息
    const weatherDescription = response.weather[0].description;
    const temperature = response.main.temp;
 
    // 更新页面上的信息
    document.getElementById("weather-description").textContent = weatherDescription;
    document.getElementById("temperature").textContent = temperature + "°C";
  } else {
    // 请求失败，处理错误
    console.error('Error occurred:', this.statusText);
  }
};
 
// 发送请求
request.send();

在这个示例中，我们首先定义了一个API URL，其中包含了城市名称（这里是伦敦—London）、你的API密钥以及所需的温度单位（这里是公制单位—metric）。然后，我们创建了一个新的XMLHttpRequest对象，并设置了请求方法为GET以及请求的URL。我们还设置了一个onload事件处理函数，它会在请求完成时被调用，并根据响应结果更新页面上的信息。最后，我们调用send方法发送请求。

请注意，你需要替换YOUR_API_KEY为你自己的OpenWeatherMap API密钥，并确保相应的HTML元素存在于页面上，例如：




<p id="weather-description">天气状况描述</p>
<p id="temperature">温度</p>
- 阅读更多 -
layui下ajax一次请求回调两次的解决办法【个人向】
System
2024-08-24
所有,ajax

在使用Layui框架进行Ajax请求时，遇到回调函数被执行两次的问题，可能的原因和解决方法如下：

  1. 原因：可能是因为你的回调函数被绑定了两次，或者是因为你使用了Layui的内置方法进行请求，同时又使用了原生的$.ajax，这两种方式会导致回调函数被执行两次。

  2. 解决方法：

    • 确保你没有重复绑定回调函数。
    • 如果你在使用Layui的同时也使用了$.ajax，请只使用其中一种方式。推荐只使用Layui的方法，因为Layui封装了更多的功能，例如自动处理JSON数据等。
    • 如果你使用的是Layui的$.ajax方法，请确保没有同时使用success和done回调。
    • 如果使用的是Layui的layui.use方法加载模块，确保你没有多次调用加载方法。

示例代码：




// 错误的使用方式，可能导致回调执行两次
layui.use(['layer', 'jquery'], function(){
  var layer = layui.layer, $ = layui.jquery;
  
  $.ajax({
    url: 'your-url',
    type: 'GET',
    success: function(data) {
      console.log('Callback executed!');
    }
  });
  
  $.ajax({
    url: 'your-url',
    type: 'GET',
    success: function(data) {
      console.log('Callback executed again!');
    }
  });
});
 
// 正确的使用方式
layui.use(['layer'], function(){
  var layer = layui.layer;
  
  $.ajax({
    url: 'your-url',
    type: 'GET',
    success: function(data) {
      console.log('Callback executed only once!');
    }
  });
});

确保不要重复调用layui.use，或者不要混合使用Layui的方法和$.ajax，这样可以避免回调函数被重复执行。

- 阅读更多 -
vue3封装ajax
System
2024-08-24
所有,ajax

在Vue 3中，可以使用Axios库作为HTTP客户端来封装AJAX请求。以下是一个简单的封装示例：

首先，安装Axios：




npm install axios

然后，创建一个用于封装AJAX请求的文件，例如http.js：




import axios from 'axios';
 
const http = axios.create({
  baseURL: 'http://your-api-url/', // 替换为你的API基地址
  timeout: 10000, // 请求超时时间
});
 
// 请求拦截器
http.interceptors.request.use(
  config => {
    // 可以在这里添加例如token等请求头
    // if (store.getters.token) {
    //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    // }
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
 
export default http;

使用封装后的AJAX进行请求：




import http from './http.js';
 
// 获取用户信息
http.get('/user/info')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });
 
// 发送数据
http.post('/user/login', { username: 'example', password: '123456' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

这样，你就可以在Vue 3项目中方便地使用封装后的AJAX进行数据请求了。

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