随笔分类 -  Css小技巧

1 2 3 4 下一页
HTML标签的全局属性title--->当鼠标移到节点上时，会以“工具提示”（tool tip）弹出形式显示该属性的属性值文本。写法：<HTMLElement_HTML标签 title="鼠标悬浮移入显示的文本xxx" ></HTMLElement_HTML标签> 常见应用场景：文本过长以省略号...展示，鼠标悬浮移入展示全部 or UI框架库中的Tooltip(文字提示)组件也可解决这类问题。
该文被密码保护。
posted @ 2021-09-14 13:23 _various 阅读(0) 评论(0) 推荐(0)
1.Swiper结合Animate使用-可实现H5/CSS3酷炫动画效果/移动端上下/左右翻页及动画效果，每次slide/页面切换结束都会运行当前slide/页面动画2.Swiper强大触摸滑动插件/轮播插件(PC和移动端)和animete.css动画库 3.H5 CSS3动画transition过渡动画和关键帧keyframes结合animation属性动画及动画性能transform要更为出色
该文被密码保护。
posted @ 2020-06-13 17:08 _various 阅读(0) 评论(0) 推荐(0)
项目开发中全局设置滚动条样式参考（全局设置滚动条样式一般应用在PC端项目，移动端通常不需要滚动条样式默认即可）--》浏览器默认的滚动条不是很美观，因此可以自定义全局设置更美观的滚动条 及 全局 设置 input placeholder 各个样式兼容浏览器参考
该文被密码保护。
posted @ 2020-05-20 15:06 _various 阅读(0) 评论(0) 推荐(0)
1. HTML <lable></lable>标签的使用--->将文本于表单关联起来，提高用户体验 2.JavaScript中的label语句，及应用---》主要是用来终止不必要的循环，提升性能(使用情况一般是多重循环嵌套)---注意！！不建议过度使用，会给调试带来麻烦，建议如果使用lable语句，一定要使用描述性的标签，同时不要嵌套过多的循环
该文被密码保护。
posted @ 2020-03-26 10:50 _various 阅读(0) 评论(0) 推荐(0)
注意： 在组件属性 或者 DOM 只写属性名，省略属性值的写法--------》其实就相当于 该属性的值为true----->(通常用于属性值为布尔值的属性)
该文被密码保护。
posted @ 2020-01-14 21:06 _various 阅读(1) 评论(0) 推荐(0)
react中使用图片资源注意点和Vue中区别补充：由于图片资源有两种展现-img标签和background背景图片.因此在项目开发中（任何框架）也可以把img标签改成background背景图片的形式,可以使用相对或绝对路径，不需要import/require形式,图片放非public等静态文件夹下，也会经过webpack处理进行base64转化及webpack打包小图片进行Base64转码优缺点
该文被密码保护。
posted @ 2020-01-13 10:52 _various 阅读(2) 评论(0) 推荐(0)
前端开发代码规范优化—还体现在html/css/js/函数方法/组件等…(通用性)封装和复用上及面向对象类的封装(通用行为)或面向对象思维编程，即使不考虑复用性，重要的是面向对象编程思维思想。尽量写出高效，可复用，可读性强，可维护等高质量代码！还比如常见需求：新增/编辑功能合二为一等… 及 重用的编程开发思维 及添加必要的注释和注释规范详细参考 (JSDoc)
该文被密码保护。
posted @ 2020-01-10 22:15 _various 阅读(0) 评论(0) 推荐(0)
1web前端开发中，网页鼠标默认形状是“箭头样式”2当鼠标碰到文字、文本会变成“Ⅰ形光标”（选中文字的样式）-》这是正常现象，默认的行为样式3可用css属性cursor改变鼠标样式4. 通常情况下按钮、链接等可以点击的会让其显示为手状（1. cursor: pointer; 2.或者使用<a>标签来代替其他标签或包裹3.按钮标签鼠标移入默认样式为“箭头样式”，需配合cursor: pointer）
该文被密码保护。
posted @ 2020-01-09 14:04 _various 阅读(1) 评论(0) 推荐(0)
个人对line-height的研究-line-height: 1或者 line-height: 1.5的意义 及开发中通常给<body>标签全局设置line-height:1/1.2/1.5...等可以一路继承给下面的元素 (个人更喜欢给body标签全局设置line-height: 1使高度和字体一致 ) 及对行内元素的特殊情况注意点 及处理方式 等等知识点... 及深入理解line-height
该文被密码保护。
posted @ 2020-01-07 11:26 _various 阅读(1) 评论(0) 推荐(0)
css reset重置浏览器默认样式 及 项目初始化CSS请参考以前CQKJ做过的项目（保险H5,萧山暴雨H5等...），目录：common/style/下，一般需要reset/base/variable/animate/common/border/mixin.css等...
该文被密码保护。
posted @ 2020-01-07 11:08 _various 阅读(0) 评论(0) 推荐(0)
1. 给一个DOM标签的属性赋值undefined/null和""(空的区别) 2. 有关<a>标签的使用的各种特性及注意点 及 用<a>标签也可以像<button>按钮标签来做事件的禁用和非禁用切换的使用注意点 3. 阻止a标签默认行为的几种简单方法
该文被密码保护。
posted @ 2020-01-06 17:46 _various 阅读(3) 评论(0) 推荐(0)
cursor CSS属性定义鼠标指针悬浮在元素上方显示的鼠标光标（各种手状样式）MDN web官方参考----css属性cursor-- 添加各种手状样式（鼠标移上去变小手等等各种形状...） 及 css添加无效禁用样式，鼠标移动上去禁用(cursor: 'not-allowed';)
该文被密码保护。
posted @ 2020-01-03 16:16 _various 阅读(2) 评论(0) 推荐(0)
<button>xx<button>标签等价于<input type="button" value="xx" />的disabled属性（disabled为true）可以用来禁止用户的点击事件（点击无效）》达到阻止点击事件的目的-及（可以自定义按钮的样式达到我们的效果》看上去不是按钮也可以使用按钮标签来实现，可以配合css属性cursor来自定义手型）如--<a>链接标签没有disabled属性
该文被密码保护。
posted @ 2020-01-03 15:58 _various 阅读(1) 评论(0) 推荐(0)
关于行内元素<span>等display:inline/inline-block的因换行或者空格会造成空白间隙的解决方案—注意：在React/Vue中webpack工程化脚手架中并不会出现行内元素空白间隙问题
该文被密码保护。
posted @ 2019-12-29 18:14 _various 阅读(4) 评论(0) 推荐(0)
CSS3阴影之边框阴影box-shadow属性详解 及各种阴影效果（立体感）---内/外阴影，单边/多边阴影等等..... 及CSS3文本阴影text-shadow属性
该文被密码保护。
posted @ 2019-12-26 14:29 _various 阅读(3) 评论(0) 推荐(0)
谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset 、revert 和 css样式关键字(initial,inherit,unset,revert,all) 参考
该文被密码保护。
posted @ 2019-12-25 17:55 _various 阅读(0) 评论(0) 推荐(0)
CSS浮动float属性详解 （作用：CSS浮动主要应用于布局，可以让垂直排序的方式通过浮动变成水平排列方式）及其他效果和注意点（浮动元素脱离文档流，且浮动元素会变成块级元素等等......） 及 浮动带来的副作用（负影响） 及 css清除浮动的方案（清除浮动带来的副作用（负影响））
该文被密码保护。
posted @ 2019-12-21 21:39 _various 阅读(0) 评论(0) 推荐(0)
CSS属性 overflow（常用的设置内容超出盒子 ---》 显示 / 隐藏 / 滚动条等效果）详解 及 知识点补充：设置overflow 为 hidden / 或者 auto / 或者scroll--》可以触发BFC, 可以用来清除浮动
该文被密码保护。
posted @ 2019-12-21 21:01 _various 阅读(3) 评论(0) 推荐(0)
1. 深入理解CSS属性z-index 2. z-index Javascript语法注意点：dom.style.zIndex="1"（"-"连接符需要改成驼峰形式: 小大写结合）--> js语法设置css样式注意点同理及验证方式 3. Javascript语法设置css calss类名注意（class改成className） 4. 用CSS开启硬件加速来提高网站性能（3D动画硬件加速）
该文被密码保护。
posted @ 2019-12-21 19:31 _various 阅读(1) 评论(0) 推荐(0)
CSS 选择器详解 和 CSS选择器参考手册 及 CSS选择器 id选择器和 calss类选择器的区别 及 CSS 选择器容易忽略的类选择器中 的多类选择器用法 和同理的 标签和类结合的用法 及 在CSS预处理器中，&符号代表的就是元素自身（在嵌套的CSS代码，&也可以看作的父元素，主要是用来引用父元素）
该文被密码保护。
posted @ 2019-12-19 17:35 _various 阅读(2) 评论(0) 推荐(0)

1 2 3 4 下一页