- 2024-11-13css2D变换用法
文章目录CSS2D变换详解与代码案例一、CSS2D变换的基本属性二、transform属性的使用三、变换原点的设置四、代码案例1.移动元素2.旋转元素3.缩放元素4.倾斜元素5.多重变换五、CSS2D变换的应用场景CSS2D变换详解与代码案例CSS2D变换是CSS3引入的一组功能
- 2024-11-12css3D变换用法
文章目录CSS3D变换详解及代码案例一、CSS3D变换的基本概念二、3D变换的开启与景深设置三、代码案例CSS3D变换详解及代码案例CSS3D变换是CSS3中引入的一种强大功能，它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换，你可以实现元素的3D位移、旋转
- 2024-11-09微信小程序scroll-view详解及案例
需求：实现类似美团外卖。1.点击左侧菜单右侧滚动到对应内容。2.滚动右侧内容左侧对应菜单高亮。一、首先介绍下scroll-view可滚动视图区域。案例用到如下属性（如需了解更多请访问官网https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html）：以下属性1.0.0版
- 2024-11-08带你用HTML+CSS+JS实现动态滚动骰子投掷效果！
今天带大家用HTML+CSS+JS实现动态骰子投掷效果，下面来看看实现的效果：点击开始投掷，骰子开始滚动。点击停止投掷，骰子面会随机定在一个点数 那么如何实现呢？请听我细细讲解：一、骰子面的样式与布局1、样式：1、其中每一面大量的运用了flex布局来实现了骰面上圆点的位置。2
- 2024-10-30JS实现图片放大镜效果
代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
- 2024-10-30Learn-前端-笔记-day05
浮动div是块状元素，一个div都是独占一行,此时很多div元素在一排排列，就可以用到浮动，让竖着的盒子横着排列。浮动属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"
- 2024-10-24CSS应用
CSS应用CSS传统布局标准流(普通流,文档流):按书写顺序排列浮动定位Flexbox和Grid(自适应布局)浮动选择器{float:left/right;}:创建浮动框,将其移动到一边,直到边缘碰到块或另一个浮动框的边缘.只会在父元素的内部移动特性脱标:脱离标准流,不再占用原来的位
- 2024-10-24第七章作业1
利用CSS技术，结合表格和列表，制作并美化“翡翠阁”页面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>翡翠阁</title> <styletype="text/css"> .wz{ height:100px; line-height:100px; text-a
- 2024-10-20CSS--如何用清除浮动来解决父盒高度塌陷及文字环绕的影响
一.父盒的高度塌陷概念在CSS中，当父元素的高度没有明确指定时，其高度由子盒撑开。若子盒全部浮走，则高度塌陷为0。实验一父盒高度为0的初始排列<style>article{/*给父盒设置宽度和背景*/width:1000px;/*height:600px;*/
- 2024-10-17CSS的学习（二）
本篇呢，我们接着学习CSS，浮动和定位是两者常用的布局方式，可以实现更加丰富和灵活的网页效果。 有实操代码和效果方便理解一、浮动CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布
- 2024-10-16盒子绝对定位开启视觉新纪元（脱离文档流）
目录一、概念二、语法结构三、特点四、绝对定位的使用五、浮层效果六、总结七、练习一、概念绝对定位会脱离文档流，相对于已经定位的上层元素（position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直到根元素。二、语法结构<style>选择器{/*
- 2024-10-14css盒子的定位（相对定位）
如何给定位盒子 想给盒子定位，必须提供三个要素，锚点、方向和距离。而盒子的相对定位，就是以元素本身的位置作为锚点。盒子定位的属性名和属性值 position：relative relative值代表的定位是以元素本身的位置作为锚点，元素本体的位置并
- 2024-10-13CSS基础知识四（盒子绝对定位）
目录1.绝对定位概念（absolute）2、绝对定位语法2.1代码添加 position:absolute;2.2创建一个HTNL结构2.3添加CSS属性2.3给div1加入绝对定位4.绝对定位练习4.1做出以下效果图1.绝对定位概念（absolute） -当元素的position属性值设置为absolute时，就开启
- 2024-10-12网页文档流-概念、缺陷
文档流的概念： 文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。 运行代码如下：<style>div{width:100px;height:100px;
- 2024-10-12盒子的相对定位
想要了解盒子的相对定位，首先要清楚盒子的定位是怎样的：盒子的定位是使用position属性来实现不同的定位方式，其参数为static（静态定位）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）；元素的位置通过left、top、right以及bottom属性进行规定。相对定位的概念
- 2024-10-11CSS居中方法总结
一、行内元素（1）水平居中 1.通过text-align:center<divclass="parent"><spanclass="child">我是行内元素</span></div>.parent{background-color:red;text-align:center;} 2.通过fit-content给父元素的宽度加上width:fit-cont
- 2024-10-10第五章作业
1.用盒模型技术，制作一个“走进内心的文学”页面。<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>走进内心的文字</title> <styletype="text/css"> .all{ width:700px; height:850px; } .top{
- 2024-09-06css中的响应式单位rpx，vue3中@import的导入
尺寸单位，px和rpx对比px单位像素是图像的基本采样单位，它不是一个确定的物理量，不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素rpx单位可以根据屏幕宽度进行自适应。rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕
- 2024-09-06CSS学习14[重点]--定位、边偏移、定位模式
定位前言一、定位二、定位模式1.静态定位static2.相对定位relative3.绝对定位absolute4.子绝父相5.绝对定位的盒子水平居中6.固定定位（fixed）7.叠放次序（z）三、四种定位总结四、定位模式转换前言为什么学习定位？应用场景：图片上移动的物体、突出的部分、导航栏
- 2024-09-04CSS学习8[重点]
盒子模型一、网页布局二、盒子边框(box-border)三、内边距(padding)四、外边距(margin)五、外边距合并一、网页布局CSS三大模块：盒子，浮动，定位。盒子模型是把html中每个元素看成一个矩形的盒子。每个矩形由元素内容、边距、边框组成。二、盒子边框(box-border)常用
- 2024-09-04CSS学习12
清除浮动前言一、清除浮动的本质二、清除浮动的方法前言为什么要清除浮动？浮动不占用原文档流的位置，可能会对后面的元素排版产生影响。因此需要在该元素中清除浮动，清除浮动后造成的影响。一、清除浮动的本质为了解决父级元素<html> <head> <style> *{ pa
- 2024-09-04css常见布局
两列布局1、flex2、float3、position:absolute三列布局1、flex2、float(圣杯布局，双飞翼布局)3、position:absolute圣杯布局1、注意html结构是main->left->right把重要的内容放在前面，有利于seo2、父级padding3、三个元素都是float<divclass="container"> <div
- 2024-09-01前端css定位
一、定位position位置：top：距离上面的位置bottom：距离下面的位置left：距离左边的位置right:距离右边的位置1.相对定位relative当前位置也是自身位置进行移动(参照物)css代码html代码<style>#box{width:500
- 2024-08-28CSS（样式-定位） 笔记 06
position:;定位1.static代表静态模式，常态模式2.fixed 代表固定模式特点：不随浏览器的滚动而滚动，释放掉自己原来的空间,参照物是整个浏览器3.absolute代表绝对模式特点：随浏览器的滚动而滚动，释放掉自己原来的空间,参照物是整个浏览器4.relative代表相对位置特点：随浏
- 2024-08-25vue3的天气组件vue3-mini-weather为何安装会报错？
参考于：https://gitee.com/maocaoying_admin/vue3-mini-weather安装上述地址的组件报错：实现的效果图：实现步骤：1将vue3-mini-weather的lib直接拿到自己的项目中来：2将lib中的组件引入到自己项目中使用点击查看代码<template><divclass="section-income"><div