黄彪博客

黄彪学习笔记

bootstrap3 全局控制总结

代码整理 html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } /*所有控件全部采用 border-box ...

2018-11-29 11:01:31

阅读数:15

评论数:0

a标签下划线的坑

问题来源描述 在使用Vux的tabbar组件,发现底部导航文字会有下划线,用chrome的开发者工具去找到该标签,发现就是一个span,利用各种CSS手段去删除下划线,都不起作用,但是删除这个span标签文字就消失了,span的样式里面也没有出现让其产生下划线的样式,绞尽脑汁去想各种CSS或者是J...

2018-11-29 09:43:11

阅读数:169

评论数:0

css2 table-layout学习

参考文档 CSS table-layout 属性 表格中的table-layout属性讲解 问题来源 在做移动app的时候想用表格显示内容,每列的宽度非常的有限,因此想用单行省略的效果来显示内容,我发现无论我怎么调整样式,界面都是全部显示每行的内容,查询了一些成功的案例,知道要给table添加...

2018-11-26 12:02:23

阅读数:34

评论数:0

CSSModules引入CSS文件所有class

文章参考 问题场景描述 用react写项目的时候,从阿里妈妈icon中引入了字体文件,想通过CSS引入相关字体。在根目录中直接import './assets/fonts/iconfont.css';,发现字体没有引入进来,调试发现相关的class也没有引入进来,有如下两个问题需要解决: ...

2018-10-31 12:05:33

阅读数:72

评论数:0

jsx事件获取event对象

文章参考 React学习–JSX与react事件 下面我根据使用难易的顺序做了下面三个例子 使用bind函数获取event对象 react事件参数的传递通过绑定来实现,在传递时,绑定的this在前,参数在后,在定义函数时,事件对象e要放在最后 /** * 删除列表中选中的行 * @...

2018-10-31 11:57:46

阅读数:68

评论数:0

chrome浏览器CSS字体大小小于12px不起作用解决方法

由于rem的大小为16px,因此,设置为如下代码,rem单位长度就为10px: html{font-size: 62.5% !important;}     由于chrome浏览器最小文字大小不能小于12px,因此这样设置,实际上rem不是真实的10px;   在网上找了很多办法,让1rem位10...

2016-09-07 18:14:53

阅读数:998

评论数:0

less 学习笔记入门

CSS预处理器中Less的语法最接近原生CSS,学习成本比较低,语法比较简单,并且能够在浏览器客户端中预览,我这里只是简单的作为搭建less开发环境,可以在工作中熟练less相关的API和属性方法。     @border_color:#eee; @item_height:45px; @item_...

2016-09-07 18:14:11

阅读数:171

评论数:0

css3 target伪类学习

所有主流浏览器均支持 :target 选择器,除了 IE8 及更早的版本。   定义和用法 URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。   ...

2016-09-07 18:14:04

阅读数:246

评论数:0

自定义进度条(兼容IE)

原因: 由于在CSS3之前是没有办法做到“圆角的”,所以两端的圆角要使用图片,然后中间部分使用div的百分比背景作为进度。   解决办法: 自己写了一个小的demo,方便自己在做PCweb的时候使用。   代码如下

2016-09-07 18:12:59

阅读数:363

评论数:0

弹出遮罩层,阻止背景滚动

弹出一个遮罩层,发现背景会随着“鼠标滚轮”滚动,解决办法如下:   设置body的CSS样式为overflow:hidden 。

2016-09-07 18:12:08

阅读数:403

评论数:0

-webkit-line-clamp 实现限制文字显示多行省略(CSS 多行省略)

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。   overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webk...

2016-09-07 18:11:11

阅读数:1072

评论数:0

页面不出现滚动条,局部有滚动条

需求: 页面header 固定在头部,footer固定在尾部,中间为内容。 中间内容可以无限添加内容,那么滚动条就是在中间的容器中,不管怎么滑动内容,顶部和尾部都是固定不动   解决办法:  周定 ... ... ...

2016-09-07 18:06:52

阅读数:960

评论数:0

CSS3 CSS3 box-sizing 属性

文章参考 http://www.w3chtml.com/css3/properties/user-interface/box-sizing.html     语法: box-sizing:content-box | border-box 默认值:content-box 适用于:所有接受width和...

2016-09-07 18:04:21

阅读数:151

评论数:0

CSS3 px em rem 单位说明

文章摘抄 http://zhidao.baidu.com/link?url=ufpcw_27Ec9E-dMH7nkXB3Mkzr-NT7_u4OvlG7VmPzxG-kOwmUMKj2icxNb-kRlmMCfWOcGnJrZb4CZG3c5DC5FoTFKTlCPLH9k6jieIC2C   p...

2016-09-07 18:03:59

阅读数:165

评论数:0

CSS3 animation 动画效果

使用CSS3 的animation属性做动态效果,减少JS代码的开发,例子如下:   div { width:100px; height:100px; background:red; position:relative; /* 使用myfirst效果,持续时间是5秒,按照infinite...

2016-09-07 18:03:52

阅读数:219

评论数:0

display:table-cell 学习笔

文章参考 http://blog.163.com/hongshaoguoguo@126/blog/static/180469812013671133230/   说明:display:table-cell只支持IE8+的浏览器,不支持IE6、IE7。   用下面这个例子说明这个样式的妙用: one...

2016-09-07 18:02:25

阅读数:166

评论数:0

css important 属性学习

文章参考 http://zhidao.baidu.com/link?url=ODXapzNtDAK9Osq-fPBRbgItdMFrj1TtBPMGF96jxGP-ihCi-nMNDggTg4KxaU9Q4ceFSTgXJWEMl-syzJpDsq     假如我要对一个div在IE7中宽为200...

2016-09-07 18:01:50

阅读数:162

评论数:0

图文混排

在工作中经常碰到图片和文字排版的问题,这里自己学习总结一下:   先看看例子 我 时间的流失,转眼冬季就到了。我在班里的冯佑璋的鼓励下,去二池(当时夏天可游泳,冬天开冰场)学习滑冰。只能 在晚场7:30-9:00练习;当时我又时间的流失,转眼冬季就到了。我在班里的冯佑璋的鼓...

2016-09-07 18:00:16

阅读数:365

评论数:0

margin值为负数——bootstrap row container-fluid样式学习

1、在使用bootstrap的过程中发现只要是使用row这个class,则div每次都是都是超过100%,出现滚动条   2、如果是在控件下面,则不会出现滚动条   查看了row 和 container-fluid的class样式说明   //让div控件显示为100%,然后外边距左右各添加15p...

2016-09-07 18:00:02

阅读数:331

评论数:0

CSS 优先机制学习

文章摘抄  http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html   一般情况下,优先级如下: (外部样式)External style sheet (内部样式)Internal style sheet (内联样式)Inline...

2016-09-07 17:59:19

阅读数:153

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭