css3
2024/9/12 18:27:07
CSS基础：position定位的5个类型详解！
你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合…
最新CSS3纵向菜单的实现
纵向菜单
通过下面例子，你会知道把列表转换成菜单的关键技术
a中的#是URL的占位符可以点击，真正用途中写实际URL
<nav class"list1"><ul><li><a href"#">Alternative</a></li><li><…
CSS优惠券、卡券样式绘制
实现左右凹陷中间有虚线效果
效果图 实现思路
从效果图可以看到这个优惠券是左右两边凹陷，中间还有一条虚线，为了封装后插槽使用方便，把优惠券以虚线为准分了两部分。这样布局的好处是上部分内容和下部分都可以自定义，不受内容限…
Javascript：Web APIs（一）
Javascript基础（一）
Javascript基础（二）
Javascript基础（三） Javascript基础已经结束，接下来我们将进入到整个Web API学习中，在此，我们将学习DOM操作，基本的…
CSS3中的字体详解
字体
网页字体的三个来源：
用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字体，可以用font-face规则随网页一起发送到浏览器。 字体相…
HTML5+CSS3笔记（Xmind格式）：第三天
Xmind鸟瞰图： 简单文字总结：
过渡 transition: 过渡属性 过渡时间 运动曲线 何时开始
2D变形transform ： 1.平移：translate(单位px) 2.缩放：scale(默认1，大于1放大，小于1缩小) 3…
HTML5+CSS3小实例：菜单按钮的三种切换动画
实例：菜单按钮的三种切换动画
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initia…
SFC CSS 功能：深层选择/插槽选择器/动态绑定
深层选择器
如果您希望样式中的选择器scoped“深入”，即影响子组件，则可以使用:deep()伪类： <style scoped>
.a :deep(.b) {/* ... */
}
</style> 以上内容将被编译为： .a[data-v-f3f3eg9] .b {/* ... */
}提示 创…
CSS 平面转换 渐变
目录 1. 平面转换 - transform1.1 平面转换 - 平移1.2 平面转换 - 旋转1.3 平面转换 - 改变转换原点1.4 平面转换 - 多重转换1.5 平面转换 - 缩放1.6 平面转换 - 倾斜 2. 渐变2.1 线性渐变2.2 径向渐变 正文开始
1. 平面转换 - transform
作用：为元素添加动态效果…
link和@import的区别
Link 和 import 是 CSS 中的两种样式表引入方式。在网页设计中，样式表（CSS）是控制网页外观和布局的重要工具。
在引入样式表时，常见的方法包括使用 <link> 标签和 import 关键字。虽然它们都能实现相同的目标，但…
特别的时钟特别的倒计时
念念不忘的歌曲：Thats Why You Go Away <!DOCTYPE html>
<html lang"zh-CN">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&…
「前端+鸿蒙」核心技术HTML5+CSS3（十）
1、H5简介
H5是HTML5的简称，是构建现代网站和网络应用的标准标记语言。HTML5新增了许多功能，包括更好的多媒体支持、新的表单控件、绘图功能以及对响应式设计的改进。
2、H5产品布局
移动端H5网站布局通常使用流体布局或弹性盒模型（Flexbox），以适应不同屏幕尺寸。
示例…
css样式，点击 箭头方向上下转换
实现效果：
点击切换箭头方向 实现代码 <divclass"modelPart"click"showClick"><div class"modelPart_left"><img:srcaidefalutIconclass"sNodeIcon"><div>{{ selectModel }}</div><div …
CSS——高级选择器
层次的选择器： <1> 后代选择器： 格式： 标签1 标签2{} 解释： 标签1 不生效，被标签1 嵌套中的 标签2才生效 举例： <!DOCTYPE html>
<html lang"en"><head><meta charse…