标签 css 下的文章

2024-08-11

HTML5 引入了许多新的 input 类型，以及一些新的表单属性，以改善表单的功能和可访问性。

新的 input 类型包括：

email：要求输入格式为电子邮件的文本。
url：要求输入格式为URL的文本。
number：要求输入格式为数字的文本。
range：要求输入一定范围内的数字。
date：允许输入日期。
time：允许输入时间。
week：允许输入周。
month：允许输入月份。
search：用于搜索框，可以包含清除按钮。
color：允许输入颜色值。

新的表单属性包括：

placeholder：提供输入字段的提示信息（例如，“请输入您的姓名”）。
autofocus：页面加载时自动聚焦到该表单元素。
required：要求在提交表单之前填写该字段。
pattern：定义输入数据需要匹配的正则表达式。
min 和 max：设置 number 或 range 类型输入的最小值和最大值。
step：设置 number 或 range 类型输入的合法数字间隔。
list：与 datalist 配合使用，为输入框提供预定义值的下拉列表。
multiple：允许输入字段接受多个值（多文件上传等）。

示例代码：




<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
 
  <label for="website">URL:</label>
  <input type="url" id="website" name="website">
 
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="100">
 
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100">
 
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
 
  <label for="time">Next Train:</label>
  <input type="time" id="time" name="time">
 
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" autocomplete="off">
 
  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color">
 
  <input type="submit" value="Submit">
</form>

在这个示例中，我们创建了一个包含各种新 input 类型的表单。每个 input 元素都有一个标签与其关联，以提高表单的可访问性。其中一些 input 元素使用了新的属性，例如，通过 required 属性，我们可以确保字段在提交前必须填写。

2024-08-11

以下是一个简单的HTML5页面示例，用于创建一个表白网页，包含3D旋转的雪花和展开相册的效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白</title>
<style>
  /* 雪花样式 */
  .snow {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 1000;
  }
  .flake {
    position: absolute;
    top: 0;
    color: #FFD700;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    overflow: hidden;
  }
  /* 相册展开样式 */
  .album {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    transform-style: preserve-3d;
    transform: translateZ(-100px) rotateX(90deg);
    transition: transform 1s ease-in-out;
    pointer-events: none;
  }
  .album.open {
    transform: translateZ(-100px) rotateX(0);
  }
  .album img {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s ease-in-out;
  }
  .album img:first-child {
    transform: rotateY(0deg) translateZ(100px);
  }
  .album.open img:first-child {
    transform: rotateY(180deg) translateZ(100px);
  }
  /* 其他样式 */
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #FFD700;
    font-size: 20px;
    text-shadow: 0 0 10px #FFD700;
  }
</style>
</head>
<body>
<div class="snow">
  <div class="flake">❤</div>
</div>
<div class="album">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
<script>
  // 雪花动画
  function snowFall() {
    const snow = document.querySelector('.snow');
    const flake = document.querySelector('.flake');
    let x = Math.random() * window.innerWidth;
    let y = Math.random() * window.innerHeight;
    let size = Math.random() * 10;
    flake.style.left = x + 'px';
    flake.style.top = y + 'px';
    flake.style.fontSize = size + 'px';
    snow.appendChild(flake.cloneNode(true));
  }
 
  setInterval(snowFall, 500);
 
  // 相册展开动画
  const album = document.querySelector('.album');
  album.addEventListener('click', () => {
    album.classList.add('open');
  });
</script>
</body>
</html>

这段代码包含了一个简单的3D旋转雪花效果和点击相册触发的展开动画。你需要替换image1.jpg, \`image2.jpg

编程笔记 html5&css&js 086 JavaScript 内置对象

2024-08-11

在JavaScript中，有许多内置（内建）对象供我们使用。这些对象提供了很多方便的方法和属性，可以帮助我们快速完成开发。

Array对象：

Array对象在JavaScript中是用来创建数组的。数组可以存储一系列的值，并且可以改变大小。




var arr = new Array();  //创建一个新的数组
arr[0] = "John";        //在数组中存储一个值
arr[1] = "Doe";
arr[2] = 30;
console.log(arr);       //输出数组

Date对象：

Date对象在JavaScript中用来创建和操作日期。




var date = new Date(); //创建一个新的日期对象
console.log(date);     //输出当前日期和时间

Math对象：

Math对象在JavaScript中用来执行数学任务。




console.log(Math.random()); //输出一个0到1之间的随机数
console.log(Math.max(2, 3, 4)); //输出最大值
console.log(Math.min(2, 3, 4)); //输出最小值

String对象：

String对象在JavaScript中用来创建和操作字符串。




var str = new String("Hello, world!"); //创建一个新的字符串对象
console.log(str.length);               //输出字符串的长度

Global对象：

Global对象在JavaScript中是最特殊的一个对象，因为它并没有一个明确的构造函数。Global对象提供了一些不需要任何对象就可以使用的方法和属性，例如isNaN()，parseInt()，parseFloat()等。




console.log(isNaN(123)); //检查是否为非数字，这里返回false

以上就是JavaScript内置的一些常用对象及其使用方法。

编程笔记 html5&css&js 077 Javascript 关键字

2024-08-11

在JavaScript中，关键字是用于特定目的的预定义保留字。你不能将关键字用作变量名、函数名或任何其他标识符名称。以下是一些JavaScript的关键字：

break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
false
finally
for
function
if
import
in
instanceof
new
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with
yield

这些关键字不能作为变量名、函数名或任何其他标识符的名称。

例如，以下代码会导致语法错误：




var for = 5; // 错误：'for' 是一个关键字

但是，以下代码是正确的，因为我们没有使用关键字作为变量名：




var myFor = 5; // 正确：变量名不是关键字

总结：在编写JavaScript代码时，应避免使用关键字作为变量名、函数名或其他标识符的名称。

CSS3 新增伪类详解

2024-08-11

所有,css3

CSS3 中新增了很多伪类选择器，以下是一些常用的伪类选择器及其解释和示例代码：

:first-child：选择父元素的第一个子元素。




p:first-child {
  color: red;
}

:last-child：选择父元素的最后一个子元素。




p:last-child {
  color: red;
}

:nth-child(n)：选择父元素的第 n 个子元素。




p:nth-child(2) {
  color: red;
}

:nth-last-child(n)：选择父元素的倒数第 n 个子元素。




p:nth-last-child(2) {
  color: red;
}

:only-child：选择没有兄弟元素的元素。




p:only-child {
  color: red;
}

:empty：选择没有子元素（包括文本）的元素。




p:empty {
  display: none;
}

:target：选择当前活动的锚点元素。




#section1:target {
  background-color: yellow;
}

:enabled 和 :disabled：选择可用或不可用的表单元素。




input:enabled {
  border-color: blue;
}
 
input:disabled {
  border-color: grey;
}

:checked：选择被选中的表单元素（如复选框或单选按钮）。




input:checked {
  background-color: green;
}

:not(selector)：选择不符合制定选择器的元素。




p:not(.exclude) {
  color: blue;
}

:nth-of-type(n) 和 :nth-last-of-type(n)：与 :nth-child(n) 和 :nth-last-child(n) 类似，但是基于元素类型进行计数。




p:nth-of-type(2) {
  color: red;
}

:only-of-type：选择仅有一个同类型兄弟的元素。




p:only-of-type {
  color: red;
}

:in-range 和 :out-of-range：选择其值在指定范围内和范围外的 input 元素。




input:in-range {
  border-color: green;
}
 
input:out-of-range {
  border-color: red;
}

:invalid 和 :valid：选择无效或有效的 form 元素。




input:invalid {
  border-color: red;
}
 
input:valid {
  border-color: green;
}

:read-only 和 :read-write：选择只读或可读写的 input 元素。




input:read-only {
  background-color: lightgrey;
}

:root：选择文档的根元素。




:root {
  background-color: white;
}

:lange(language)：选择具有指定语言的元素。




p:lang(it) {
  font-style: italic;
}

:dir(direction)：选择指定文本方向的元素。




p:dir(rtl) {
  text-align: right;
}

:scope：选择当前作用域的元素。




td:scope {

2024-08-11

所有,jquery

在JMeter中，CSS/JQuery提取器（CSS Selector Extractor）用于从服务器响应中提取数据。这个提取器使用CSS选择器语法来定位和提取HTML文档中的数据。

以下是一个简单的例子，演示如何使用CSS Selector Extractor来提取HTML页面中的链接。

添加一个HTTP请求到你的测试计划。
添加一个CSS Selector Extractor到你的HTTP请求之后。
配置CSS Selector Extractor：
- Reference Name: 你将在后续组件中使用的变量名称。
- CSS Selector Expression: 用于匹配你想提取的内容的CSS选择器。例如，a将匹配所有的链接。
- Template: $1$ 表示第一个匹配的组。如果有多个匹配组，可以使用$2$等。
- Match No.: 0 表示提取所有匹配项，1 表示只提取第一个匹配项。

以下是一个具体的实例：




// 假设我们想提取所有的链接并保存到变量 ${links}
 
CSS Selector Extractor:
  Reference Name: links
  CSS Selector Expression: a
  Template: $1$
  Match No.: 0

在HTTP请求之后，你可以使用${links}变量来引用所有提取的链接。例如，你可以将这些链接作为参数传递给另一个HTTP请求。

【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）

2024-08-11

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图示例</title>
<style>
    .carousel {
        position: relative;
        width: 300px;
        height: 200px;
        margin: auto;
    }
    .carousel-inner {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }
    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 40px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
    .carousel-control.left {
        left: 10px;
    }
    .carousel-control.right {
        right: 10px;
    }
    .carousel-indicators {
        list-style: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin: 1px;
        cursor: pointer;
    }
    .carousel-indicators .active {
        background-color: #007bff;
    }
</style>
</head>
<body>
 
<div class="carousel">
    <div class="carousel-inner">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <a class="carousel-control left" href="#">&lsaquo;</a>
    <a class="carousel-control right" href="#">&rsaquo;</a>
    <ul class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#"></li>
        <li data-slide-to="1" data-target="#"></li>
        <li data-slide-to="2" data-target="#"></li>
    </ul>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.carousel-control.left').click(function(){
            var activeIndex = $('img.active').index();
            var nextIndex = (activeIndex - 1 >= 0) ? activeIndex - 1 : $('img').length - 1;
            $('img').eq(nextIndex).trigger('click');
        });
        $('.carousel-control.right').click(function(){
            var activeIndex = $('img.active').index();
            var

vue3+ts+vant4+pinia+axios+scss创建项目基本流程

2024-08-11

所有,typescript

以下是使用Vue3、TypeScript、Vant 4、Pinia、Axios和SCSS创建项目的基本步骤：

初始化项目：




npm init vue@latest

选择需要的选项，例如：




Vue 3
TypeScript
Vant 4

安装依赖：




npm install

在main.ts中引入Vant组件库和样式：




import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'
 
const app = createApp(App)
app.use(Vant)
app.mount('#app')

配置Axios和Pinia：




// axios.ts
import axios from 'axios'
 
export default axios.create({
  baseURL: 'http://your-api-url',
  // 其他配置...
})
 
// pinia.ts
import { createPinia } from 'pinia'
 
export const pinia = createPinia()
 
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from './axios'
import pinia from './pinia'
 
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(pinia)
app.mount('#app')

使用SCSS：




// 在组件中使用
<style lang="scss">
.example {
  color: red;
}
</style>

这些步骤提供了一个基本框架，您可以根据项目需求进行扩展和定制。

2024-08-11

所有,typescript

这个错误信息表明在使用 Vue 3 和 TypeScript 开发时，系统无法找到 "path" 模块的类型声明文件，或者在处理样式文件 @fs/src/style.css 时发生了网络错误 net::ERR_ABOR。

解释：

对于 "path" 模块，通常是因为 Node.js 的 path 模块在 TypeScript 中已有内置定义，但如果你需要特定的类型声明，可能是因为没有安装类型声明文件。你可以通过运行 npm install @types/node --save-dev 来安装 Node.js 类型声明文件。
对于 net::ERR_ABOR 错误，这通常表示浏览器尝试加载资源，但操作被中止。这可能是由于网络问题、资源不存在或者资源被重定向到一个无效的URL。

解决方法：

对于 "path" 模块的问题，确保已经安装了 @types/node 包。
对于样式文件加载错误，检查文件路径是否正确，确保 @fs/src/style.css 文件确实存在于指定位置。
如果是网络问题导致的资源加载失败，检查网络连接，确保服务器正常运行，资源可访问。
如果是重定向问题，检查服务器配置，确保重定向设置正确。

请根据实际情况检查和解决这两个问题。

八个解决你80%需求的CSS动画库

2024-08-11

所有,css3

CSS动画是提高网页视觉吸引力的强大工具。以下是八个CSS动画库，它们可以帮助你创建80%的常见需求。

Animate.css
Animate.css 是一个用CSS编写的动画库，非常受欢迎。它提供了一系列预定义的动画，可以通过简单的类添加到HTML元素上。




<link rel="stylesheet" href="animate.min.css">
<div class="animate__animated animate__bounce">我会跳动!</div>

Magic.css
Magic.css 是一个轻量级的CSS库，提供了一系列的动画效果。




<link rel="stylesheet" href="magic.min.css">
<div class="m-bounce">我会跳动!</div>

Hover.css
Hover.css 提供了一系列的CSS动画，可以应用在链接、按钮、图片等元素上。




<link rel="stylesheet" href="hover.min.css">
<button class="hover-pulse">按我!</button>

Move.js
Move.js 是一个轻量级的JavaScript库，用于创建平滑的CSS动画。




<link rel="stylesheet" href="move.min.css">
<script src="move.min.js"></script>
<div id="box"></div>
<script>
  new Move(document.getElementById('box'))
    .rotate(45)
    .execute();
</script>

WOW.js
WOW.js 是一个轻量级的JavaScript库，用于创建滚动时的动画效果。




<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
<script>
  new WOW().init();
</script>
<div class="wow slideInLeft">我会滚动进入!</div>

Aos.js
Aos.js 是一个轻量级的JavaScript库，用于创建滚动动画。




<link rel="stylesheet" href="aos.css">
<script src="aos.js"></script>
<script>
  AOS.init();
</script>
<div class="aos-animate">我会有动画!</div>

Velocity.js
Velocity.js 是一个功能强大的JavaScript动画库，类似于jQuery的$.animate()方法。




<script src="velocity.min.js"></script>
<div id="box"></div>
<script>
  $("#box").velocity({ width: 100 }, 1000);
</script>

Typed.js
Typed.js 是一个简单的JavaScript库，用于创建打字机效果。




<script src="typed.min.js"></script>
<script>
  var typed = new Typed('#typed', {
    strings: ['这是打字机效果!'],
    typeSpeed: 100
  });
</script>
<span id="typed"></span>

这些库提供了各种各样的动画效果，可以满足大部分的网页设计需求。你可以根据自己的需求选择合适的库，并且可以在它们的官方文档中找到更多的使用方法和定制动画。