css常用属性

最新推荐文章于 2024-05-21 21:13:29 发布
最新推荐文章于 2024-05-21 21:13:29 发布
阅读量48 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42673485/article/details/118117401
版权

在这里插入图片描述

荒年1010
关注
专栏目录
CSS常用属性大全
08-31
CSS是层叠样式表(英文全称：Cascading Style Sheets)的简称，简单来说，就是网页布局的样式元素，网页界面的视觉效果，就是CSS做出来的。 目前，网页架构的标准版本是html5+CSS3，CSS的最新版也是CSS3，任何网页都...
深拷贝与浅拷贝及如何实现深拷贝
qq_42673485的博客
06-24 667
先记住两句话,帮助你简单理解一下深拷贝和浅拷贝的区别: 1 深拷贝拷贝后,产生数据是两条数据 2 浅拷贝拷贝后,多个变量共用一条数据 下面,我们来看个例子: var a = [1,2,3]; var a1 = a; a1[0] = 2; console.log(a); // ==>Array(3) [ 2, 2, 3 ] 是不是很奇怪,明明改变的是数组a1中的值,为什么数组a中的值也跟着改变了，这就不得不让人深思了。 那么这里，就需要引入基本数据类型和引用数据类型的概念了。
数组对象api汇总
qq_42673485的博客
01-08 540
数组对象常用api 1.concat(连接两个或多个数组，并返回结果) var a = [1,2,3]; var b = a.concat(6,7); console.log(b); //[1,2,3,6,7] 2.join(把数组的所有元素用str分隔，默认逗号分隔) var a = [1,2,3] var b = a.join('|'); console.log(a); //[1,2,3] console.log(b); //"1|2|3" 3.pop(删除并返回数组的最后
本地储存及权限验证
qq_42673485的博客
06-28 436
本地储存 <body> <a href="./url.html?test:qwe&name:dd=clx">跳转到b页面</a> <button id="btn">点击sessionstorage</button> </body> <script> /* 1.存在一条需要多个html共享的数据 这里是有数据的界面 1.将数据存到localStorage中
js实现轮播图效果
qq_42673485的博客
06-22 294
动画效果js部分: function animate(obj, target,callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.o
css实现导航栏下划线向两边展开效果
qq_42673485的博客
06-22 272
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css实现导航栏下划线向两边展开效果</title> <style> ul { height: 80px; line-height: 80px;
async函数
qq_42673485的博客
07-17 211
1.什么是async函数 <script> async function foo() { return 123 } let res = foo() console.log(res); // promise res.then(res => { console.log(res); // 123 }) let foo1 = async
webpack
qq_42673485的博客
07-22 155
初始化WebPack 一、为什么会有webpack？ 因为开发者编写的代码是模块化开发，.less .scss .vue .js等文件 开发者编写的代码是工程化 因为浏览器不能解析vue、react 、less 、scss 等工程化，模块化的代码，所以需要webpack 工具，将编写的模块化代码，进行编译/打包,然后在浏览器中运行的编译后或者打包后的代码。 二、webpack是什么？ webpack是自动化构建工具 三、怎么搭建使用webpack的环境 依赖node.js npm 下载
正则表达式
qq_42673485的博客
07-17 114
正则入门 正则表达式:验证字符串是否满足某个规则 // 创建正则表达式 var reg = new RegExp(/'123'/); console.log(reg); //===>/'123'/ var reg1 = /clx/ // replace(regwx,''/function) var str = '一半,两半,三半'; // 找到str中所有的'半' 并替换成'个'
Es6入门
qq_42673485的博客
07-13 103
1 声明 // es5 var function 可以提升变量 // es6 let count 没有变量提升 // import class 模块化开发 类 var a; if (true) { var b = 123; } for (var i = 0; i < 12; i++) { var data = 123; } function foo() { var bar
Es6新特性
qq_42673485的博客
07-19 87
let const 与 var 的区别 1: var声明的变量有变量提升let const没有 2: let 声明为变量const 为常量 3:const赋值对象或者数组，对象与数组可以被改变，因为const保证的指针不变 4: let const变量为块级作用域 5: let const变量不能重复 6: let const会形成暂时性死区 详细介绍promise 1：因为传统异步是通过回到函数方式结果的，为了解决回调地狱导致代码可读性差，可维护成本，所以有了promise 2: promise 三种状态
this指向
qq_42673485的博客
06-23 66
如何判断this 指向哪一个对象? 一.首先得看this在哪？ 若是在全局中，this则指向window 在function函数中（谁触发指向谁） ① 普通对象调用（this指向触发它的对象） var a = 'hello' function foo() { var a = 'world' console.log(this.a) console.log(this) } foo()// 相当于执行 window.foo() // "hello" // Window 对象
2021-07-13
qq_42673485的博客
07-13 61
1：你学会了什么 ? 在开始写项目之前，先要对项目所要涉及到的内容进行分类部署。如分为：css、img、js、、view、index.html等文件。 在部署好文件分类后，需要对各个页面的整体框架简单分析，在脑海中有一个大致的框架图，如何进行页面布局等。 学会了自定义打印，可以设置颜色与背景等。可以更加清晰的查看打印的信息。 console.log(`\n%c ${msg} ↓ `, 'background:#67c23a;color:#fff;padding:1px;border-radiu
promise
qq_42673485的博客
07-17 60
首先,为什么会有promise ? 下面,我们来看一段代码: function foo(callback) { //函数1 console.log('111'); callback(function (callback) { console.log('222'); callback('你好') }) } foo(function (call) { //函数3 console
jQuery实现轮播图
qq_42673485的博客
06-22 53
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播
javascript学习
qq_42673485的博客
06-22 53
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 139
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 206
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
CSS常用属性与动画特效 (可以完成旋转照片墙，或者其他相关CSS效果)
05-25
CSS是一种用于网页设计的样式表语言，它可以控制网页的布局、字体、颜色、大小、背景、边框、动画等方面。下面是一些常用的CSS属性和动画特效： 1. 属性 - background-color：设置元素的背景色。 - color：设置元素的文字颜色。 - font-size：设置元素的文字大小。 - border：设置元素的边框。 - padding：设置元素的内边距。 - margin：设置元素的外边距。 - display：设置元素的显示方式，如block、inline、inline-block等。 - position：设置元素的定位方式，如relative、absolute等。 - z-index：设置元素的堆叠顺序。 - transform：设置元素的变换效果，如旋转、缩放、平移等。 2. 动画特效 - transition：设置元素的过渡效果，如颜色、大小、位置等属性的变化过渡。 - animation：设置元素的动画效果，如旋转、移动、闪烁等。 - keyframes：定义动画的关键帧，即动画从哪个状态到哪个状态。 例如，实现旋转照片墙可以使用以下CSS代码： ```css .photo-wall { display: flex; flex-wrap: wrap; justify-content: center; } .photo { width: 200px; height: 200px; margin: 10px; border: 1px solid #ccc; transition: transform .5s ease-in-out; } .photo:hover { transform: rotateY(180deg); } ``` 其中，.photo-wall是照片墙的容器，.photo是每张照片的样式，当鼠标悬停在照片上时，会触发transform属性的变化，从而实现照片的旋转效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值