- 2024-11-11CSS3过渡
CSS过渡能够做出一些好看动画效果，无需使用Flash动画或JavaScript使用语法： transition: property time speedChange delayTime, ...属性： ①property：过渡的属性 ②time：过渡的时间
- 2024-10-31HTML基本类型
HTML基本类型1.结构类型标签ULolli UL:是无序列表type="none"可以消除前面的黑点 OL:是有序列表 LI:可以包含流内容，如文本、图片或其他元素。 2.文本类型标签bisup p:段落标签只能放文本 b:加粗标签加粗文本 i:斜体标签
- 2024-10-31html的常用标签与实例
常用标签<!DOCTYPEhtml><htmllang="en"><!--不在浏览器显示--><head><!-- 编码格式--> <metacharset="UTF-8"><!-- 标题--> <title>Title</title> <style> div {
- 2024-10-23css常用布局之圣杯布局和双飞翼布局
圣杯布局（HolyGrailLayout）和双飞翼布局（DoubleWingLayout）都是用来实现三列布局的常见技术，其中两侧列宽度固定，中间列宽度自适应，并且中间列在文档流中优先渲染。以下是两种布局的详细介绍和代码示例：圣杯布局（HolyGrailLayout）特点：使用相对定位和负边距来实现侧边栏的定位。HT
- 2024-10-14盒子模型的属性
盒子属性包括4部分，分别为内容区，边框，内边距，外边距。目录一.内容区（盒子中呈现的是实际内容，比如文字，图片等）二.边框 三.内边距四.外边距 一.内容区（盒子中呈现的是实际内容，比如文字，图片等）宽：width高：height块级元素可直接通过CSS设置宽高，但是行内元素默认情况下不可以。
- 2024-10-12HTML+CSS 核心笔记 （四）
选择器结构伪类选择器作用：根据元素的结构关系查找元素:nth-child(公式) 作用：根据元素的结构关系查找多个元素提示：公式中的n取值从0开始伪元素选择器作用：创建虚拟元素（伪元素），用来摆放装饰性的内容必须设置content:””属性，用来设置伪元素的
- 2024-10-12网页文档流的概念和缺陷
目录一、概念1、块元素的文档流（自上而下流水线摆放），如下：2、 行内元素的文档流（从左到右流水线摆放），如下： 二、缺陷1、元素摆放布局非常不灵活，出现元素间高低不平，元素间底边对齐。如下： 2、文本空格折叠3、元素间间隙过小的现象,如下： 一、概念HTML网页默认的元素摆放
- 2024-09-24万象更新 Html5 - css: float 布局: 通过 float 布局实现 3 栏式布局
源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:float布局:通过float布局实现3栏式布局示例如下:css\src\layout\float\demo2.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">&
- 2024-09-12自适应多列布局
关于多列布局，我们平时开发中，可能会遇到如下需求：一个父元素中包含n个子元素，每一行显示m个子元素，并且根据设备宽度实现自适应布局。针对这种布局方式，可以使用CSSGrid或CSSFlexbox来实现：方案一：使用CSSGrid实现自适应列布局CSSGrid通过设置grid-template-columns为
- 2024-09-10jQurey
一、概念及使用1.概念jQuery提供了强大的选择器函数，可以快速获取页面的标签，jQuery提供了大量的DOM操作的API(封装了许多可以直接操作DOM的方法)、jQuery提供了比较丰富的动画函数、让实现业务的编码写的更快。2.使用方法进入https://jquery.com/官网下载3.使用步
- 2024-09-01前端css网格布局----行列属性
固定值方式尽量撑满宽和高三行三列grid-template-rows:200px200px200px;grid-template-columns:200px200px200px;百分比方式四行四列 grid-template-rows:25%25%25%25%;grid-template-columns:25%25%25%25%;repeat(重复几次，数值) 3行3列 g
- 2024-08-31CSS 高级区块效果——WEB开发系列25
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。一、盒子阴影（BoxShadow）对于盒子元素，存在一个类似的属性——box-shadow，用于在实际的元
- 2024-08-21前端3d动画-----平移 transform: translate3d（）
必须加这个属性：transform-style:preserve-3d; perspective:900px; 设置了景深才能感到近大远小的感觉 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible&quo
- 2024-08-17【html】颜色随机产生器（补充包）
上一篇文章我们讲了如何制作一个通过滑动产色纯色背景的网页，今天，我们对那个网页进行一个补充，（）因为很多人在设计网页的时候没有颜色的灵感这个时候我们我们就可以考虑通过随机产生一种颜色并且能够实时看到效果的网页 我们来看看上次的代码：<!DOCTYPEhtml><htmllang="en">
- 2024-08-05css手撕奥运五环
巴黎奥运会正如火如荼地进行，本文来使用CSS来画一个奥运五环。奥运五环是相互连接的，因此在视觉上会产生重叠效果，这也是实现五环最有挑战性的部分。接下来，将利用CSS的伪元素，巧妙地实现环环相扣的效果！ 根据五环的位置特点，可以将中间的黑色环设置为HTML的父元素，而将其他颜色
- 2024-08-02神奇的进度条！水缸进度动画效果怎么实现的？
最近看到一个非常有趣的动画效果：水波进度动画，想了一下实现思路，分享给大家~效果如下图片图片基本组件代码先把最基础的组件代码样式写出来，其实无非就是四个部分：1、圆形水缸2、水波2、百分比数字3、进度条我们先把圆形水缸、百分比数字、进度条画出来，水波待会再
- 2024-07-2104 CSS 轮播图无缝滚动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=
- 2024-07-13前端HTML+CSS实现3D炫酷相册（附源码）
前言 利用基础的html和css实现3D相册（可自我添加照片） 本人初衷是为了验证所学的知识，顺便想逗女朋友开心
- 2024-07-06前端位置布局汇总
1、位置：绝对位置和相对位置绝对位置style="position:absolute;left:218px;top:0%;"style="position:absolute;bottom:5px;right:5px;"相对位置:margin外边距 padding内边距style="border:1pxsolidblack;width:200px;text-align:left;margin-left:1200px;pa
- 2024-07-01让一个元素水平垂直居中的方式
1.定位+margin<style>*{margin:0;padding:0;}.father{width:400px;height:400px;border:1pxsolid;position:relative;}.son{position:absolute;width:200px;height:200px;background-color:red;top:0;right:0;
- 2024-06-2114-vertical-aligin
01行盒的理解作用:将当前行里的所有内容包裹起来<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docu
- 2024-06-19css面试题
文章目录CSS部分1.IE盒模型和标准盒模型2.px、em、rem区别3.实现左、中、右三列布局CSS部分1.IE盒模型和标准盒模型可使用CSS属性来切换IE盒模型和标准盒模型：box-sizing:border-box||content-box||inherit当使用content-box时：页面将采用标准模式来解析
- 2024-06-14HTML的学习总结#4
这篇是对今天的学习进行总结，今天的学习内容不是很多，但是含金量很大，所以我会认真的总结介绍，也希望大家跟我一起学习认识。文字阴影 主要是给文字添加阴影效果，使得文字更加着重和增强显示效果。<style>/*水平位置垂直位
- 2024-06-1242.CSS之盒子模型和浮动
CSS之盒子模型和浮动【一】盒子模型1.概念是指网页设计中，用于描述和布局元素的一种模型2.组成部分内容区域盒子的实际内容，如文本、图像内边距内容区域与边框之间的空间，用于控制内容与边框之间的距离边框围绕内容区域与内边距的线条，用于给元素添加外观和样式
- 2024-05-27自定义CSS属性（@property）解决自定义CSS变量无法实现过渡效果的问题
且看下面的代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>demot</t