![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 67
懂懂kkw
持续精进
展开
-
CSS世界笔记(三)
1. css的层叠规则z-index 属性只有和定位元素(position 不为 static 的元素)在一起的时候才有作用,可以是正数也可以是负数。CSS 2.1 的年代,在 CSS3 新世界还没有到来的时候(注意这里的前提),层叠顺序规则层叠准则(1)谁大谁上:当具有明显的层叠水平标识的时候,如生效的 z-index 属性值,在同一 个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。 (2)后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在 ...原创 2020-05-20 17:44:40 · 179 阅读 · 0 评论 -
css世界学习笔记(二)
1.内联元素图片与文字居中对齐 使用ex单位// htmlzhangxinxu<i class="icon-arrow"></i>// css.icon-arrow { display: inline-block; width: 20px; height: 1ex; background: url(/images/5/a...原创 2020-05-10 22:43:54 · 288 阅读 · 0 评论 -
年终h5项目总结
## 1. 项目 年终h5产品描述文档原型地址蓝湖地址产品主题思想, 通过一种形式, 展示公司文化, 交流互动, 体现公司对鱼爪同事的关爱.## 2. 项目主线1. 前期确定主题思想 (产品)2. 然后确定内容 (产品)3. 确定展现形式 (UI 灵感来源:天府通APP的年终H5, 源于生活,观察力)4. 实现效原创 2021-03-10 09:25:49 · 1347 阅读 · 1 评论 -
谷歌字体最小12px的解决方案
1. transform: scale 定义10px字体 : .font10 { font-size: 12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.84); font-size: 10px; // 兼容ie }原创 2020-05-21 12:20:54 · 409 阅读 · 0 评论 -
jquery获取短信验证码倒计时
// 获取短信验证码 $('.get_code').click(function () { var $code = $(this); if (!$(this).hasClass('disabled')) { // 如果调了短信发送接口, 短信发送判断 var time = 60; $code.addClass("disabled"); // 禁止重复...原创 2020-04-30 00:12:10 · 333 阅读 · 0 评论 -
css世界学习笔记(一)
1.清除浮动.clear:after { content: ''; display: table; // 也可以是 block,或者是 list-item clear: both; }2.除了 inline-block 元素,浮动元素以及绝对定位元素都具有包裹性3.平顺的滚动效果用iScroll4.三无 => 无宽度,无图片, 无浮动...原创 2020-04-28 01:15:40 · 188 阅读 · 0 评论 -
文字少的时候居中显示,文字超过一行的时候居左显示
html<div class="box"> <p>这是一段文字</p></div>css.box { margin: 20px auto; padding: 10px; background-color: #cd0000; text-align: center; width: 200px;}.box ...原创 2020-04-24 01:05:31 · 380 阅读 · 0 评论 -
CSS3 animation属性
timing-function 是用来描述 CSS3 animation 动画曲线的函数,通常称之为缓动函数.div { animation: mv 3s ease;}这里的ease就是一个 timing-function。那么 ease 真的就是函数吗?还可以定义其它的缓动过程吗?通常我们用到的动画都是连续的,那么有不连续的动画吗?这些问题都和 timing-functi...转载 2019-04-16 11:05:52 · 188 阅读 · 0 评论 -
jq用on给动态添加的dom节点绑定hover事件
1. 测试用 hover 是不行的, 语法不支持$(selector).on(event,childSelector,data,function,map) 2. 使用下面的方法可以实现同样的效果$('#table .th-inner').on({ mouseenter: function (e) { console.log(1) }, ...原创 2019-04-01 17:05:14 · 3319 阅读 · 0 评论 -
css伪类实现光标效果
// html<div id="demo"></div>// css#demo{ position: relative;}#demo:after { position: absolute; content: ''; display: inline-block; width: 2px; height: 18px; top: 50%;...原创 2019-02-27 15:10:46 · 1970 阅读 · 2 评论 -
div自适应高度, 超出部分出现滚动条
1. 问题通过 height 设置百分比的方式, 可以自适应高度, 但是不会出现滚动条. 固定值 height 会出现滚动条, 但是各种屏幕的高度不能自适应.2. 解决先拿到屏幕高度 let screenHeight = window.innerHeight; 自定义高度 需求1: 超出屏幕高度出现滚动条: 元素高度 = 屏幕高度即可 需求2: ...原创 2019-01-29 11:52:15 · 11472 阅读 · 0 评论 -
css 使用伪类在div底部画一条线
<div class="div></div>.div { position: relative; }.div::after { content: ''; // 必须 position: absolute; left: 30px; bottom: 0; right: 0; width: 720px...原创 2019-01-11 14:46:35 · 14438 阅读 · 1 评论 -
登录注册页面(移动端)
1. 目的 : 提高开发效率, 复用页面2. 内容 : 登录注册, 带验证码倒计时3. 下载地址, 戳下面提取码: d589原创 2018-12-06 10:13:04 · 7255 阅读 · 0 评论 -
Some basics
CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题。通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本是css3----------------------------------------------------------------一 CSS的放置位置1 嵌入式css里面原创 2017-08-18 15:24:23 · 225 阅读 · 0 评论 -
IE兼容性问题
兼容性问题-->一 css hack:目的是是你的css代码兼容不同的浏览器(书写顺序:一般将使用范围广,被识别能力强的css的前面)1)只有IE下生效(IE10以下)中间写html代码2)只有在IE8下生效html代码3)只在IE8不生效html代码4) 只在IE8以上版本生效html代码二 属性前缀法在css属性名前加上一些只有特定浏览器才能识别的ha原创 2017-10-27 11:00:32 · 293 阅读 · 0 评论 -
css2
CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题。 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本是css3----------------------------------------------------------------一 CSS的放置位置1 嵌入式css里面...原创 2017-10-27 11:07:48 · 356 阅读 · 0 评论 -
css3
选择器简单选择器关系选择器组合选择器属性选择器伪类选择器伪元素选择器...css2选择器:属性选择器:1 E[att]:E泛指所有元素,选择具有att属性的E元素---IE72 E[att="val"]:选择具有att属性且属性值为val的E元素---IE73 E[att~="val"]:选择具有att属性且属性值为用空格分隔的字词列表,其中一个等于val的E元素---IE...原创 2017-10-27 11:10:14 · 385 阅读 · 0 评论 -
清除浮动
清除浮动原创 2017-10-30 16:26:29 · 200 阅读 · 0 评论 -
less
预处理器就是在代码交给编译器处理前,预先进行一些处理less要点:变量,混合,嵌套,函数&运算,扩展1.链接<link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="less.js" type="text/javascript"&g原创 2018-08-24 18:15:18 · 233 阅读 · 0 评论 -
css 一个div既设置背景图又设置背景颜色
1. 需求 : 设置一个背景上面为 背景图 下面 为颜色background: url('../images/invite_friends.png') 0 0 no-repeat #c70001;background-size: 100% 970px;background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:规定要使用的背景颜色。 1 b...原创 2018-12-04 11:46:51 · 11531 阅读 · 0 评论 -
遮罩层代码
1. 目的 : 直接复制来用, 加快工作效率<div class="cover"></div>.cover{ position:fixed; /*注意使用fixed , absolute如果页面超出屏幕下面的遮不住, 害羞 */ left:0px; top:0px; background:rgb...原创 2018-12-05 11:07:51 · 416 阅读 · 0 评论 -
css 文本超出部分省略号
1. 单行文本overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2. 多行文本 display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; // 设置几行后省略overflow: hidden; ...原创 2018-12-05 15:08:40 · 124 阅读 · 0 评论 -
css溢出文本处理的几种方法
html>html lang="en">head> meta charset="UTF-8"> title>title>head>style> .div1 { height: 100px; width: 100px; border: 1px solid gray; overflow: hidden;原创 2017-10-27 09:19:49 · 521 阅读 · 0 评论