CSS
文章平均质量分 85
Miya_Ye
这个作者很懒,什么都没留下…
展开
-
浮动总结学习
学习了张鑫旭老师的浮动课程,这里总结下1 浮动的包裹性,实验了下,没有浮动的div,宽度不设置的情况下就是浏览器的宽(或者说父层的宽),一旦设置,就包裹起来了,为包裹元素的宽,和inline-block,以及absolute一样2 浮动的破坏性,说到这一点,要谈到浮动出现的目的就是为了实现文字环绕,浮动破坏了line-boxes,要明白这一点,要清楚的了解盒子模型还有line-box模型,原创 2016-11-03 14:23:52 · 328 阅读 · 0 评论 -
学习了一篇文章,css实现Tab
http://blog.csdn.net/jvid_sky/article/details/53260616http://blog.csdn.net/proud2005/article/details/48708433 收藏下,话说周六加班真不想干活啊,只想学习会儿~学习到了nth-of-type还有lable和input的关联(只要指定label的"for"属性到radi转载 2016-12-17 16:20:48 · 243 阅读 · 0 评论 -
bootstrap-table 导出 excel,pdf,txt等
1 npm 安装bootstap-table 我们的版本看是 1.11.0 ,这个里面有自带的extension中有export文件,路径是这个bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js2 npm安装 tableExport npm官网(https://www.npmjs.com/)搜这个 tab原创 2016-12-26 15:34:36 · 11865 阅读 · 3 评论 -
巧用ngStyle改变样式
过来了一个需求,要求我之前写的搜索框的控件,要能适用不同的界面布局,刚好看到了一篇文章~官网里面的模板语法点击打开链接 再把官网中的例子改改,这样使用者可以通过传入一组字符串动态的修改样式,适应UX的各种不同要求setStyle() { if (this.customStyle === '') { return; } else { r原创 2016-12-27 10:38:43 · 4618 阅读 · 0 评论 -
bootstrap-table 表格中增加下拉菜单末行出现滚动条解决方法
bootstrap-table下表格中增加操作的btn,如果是下拉菜单,那么在每一页最后一行点击下拉菜单,会出现滚动条,解决方法:修改这个类,但是这个类改了会有点影响toolbar的显示,不过问题不大,加个margin就可以了 .fixed-table-body{ overflow:visible !important; }原创 2017-01-05 11:39:09 · 7795 阅读 · 2 评论 -
本地存储LocalStorage
学习了张鑫旭老师的一篇博客点击打开链接 讲本地存储,自己也试了下,感觉还能发挥更大用途啊~好好研究下,HTML main sub test() { this.warning = !this.warning; var storage = window.localStorage; storage.原创 2016-12-29 14:38:48 · 306 阅读 · 1 评论 -
HTML+CSS实现圆圈里面有个数字
12原创 2017-01-01 14:22:37 · 26771 阅读 · 3 评论 -
小图标和文字对齐
图标大小20px,文字font-size有14px,有12px,发现文字的font-size变化,图标也跟着动来动去,想了个办法,把图片设置成绝对定位,这样字体再怎么变化,图标也是居中的但是觉得很啰嗦的实现 <img style=" margin-top: 9px; position: absolute; display: inline-block; width原创 2017-01-01 16:57:13 · 1839 阅读 · 0 评论 -
首页学习--返回顶部js及html
goBack: function(){ //返回顶部 $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop > 0){ $("#go-back").slid原创 2017-06-30 01:30:10 · 408 阅读 · 0 评论 -
滚动条锚点自动定位
如图:点击海运出口,滚动条自动滚动到海运出口标题处CSS部分:.slider-box { width:145px; float:left; overflow:hidden; font-size:13px;}.slider-box ul { list-style-type:none; overflow:hidden;}.slid原创 2017-06-21 15:35:55 · 1621 阅读 · 0 评论 -
首页学习-导航定位
例子来源于我们刚上线的项目 http://3zang.tech/ ,看效果可以看到导航定位点击菜单栏,比如行业方案,页面会直接跳到对应的位置、方式1 使用datahash属性,js代码见内navPosition: function(){ //导航定位 $('.menu-list a.list-link').click原创 2017-07-03 09:50:39 · 367 阅读 · 1 评论 -
首页学习--3D轮播
效果参见 http://www.3zang.tech/ 我们的产品服务思路:定义posArr和indexArr来记录位置和顺序,这部分还要再重构下,重复的有点多举个例子最开始所有图片的位置是[0, 310, 620, 1760, 2140, 2520, 2900, 3280, 3660, 4040, -380]图片位置是(肉眼看到的)[1, 2, 3, 4,原创 2017-07-03 14:29:03 · 240 阅读 · 0 评论 -
首页学习--banner的动画及轮播
效果请见 http://www.3zang.tech/html原创 2017-07-03 15:22:25 · 462 阅读 · 2 评论 -
首页学习--一些比较杂的小点
1 fixed 还是做的东西太少了,这次看到首页上有固定位置的留言版,看到了用到的地方,百度也有说明的,记录下点击打开链接2 居中 首页图下的链接,之前是用line-height居中,后来不知道改什么样式了,用table-cell的方式也居中不了, 急的我,后来用了css3的属性transform解决了问题.m-partner-content a img { positio原创 2017-07-03 15:54:24 · 166 阅读 · 0 评论 -
一个很有意思的题,条纹边框
http://www.cnblogs.com/coco1s/p/5895764.html顺便复习了下CSS3 下的background 还有盒子三维立体图转载 2016-11-26 11:31:09 · 306 阅读 · 2 评论 -
checkbox实现
http://www.cnblogs.com/chaoyuehedy/p/5586735.html 一个很好的设计checkbox的,之前我们按UX要求实现的,还是有差距,还要继续学习啊~~~input[type="checkbox"]{ -webkit-appearance: none; -moz-appearance:checkbox; vertical-a原创 2016-11-26 09:27:00 · 350 阅读 · 0 评论 -
遇到的下拉菜单兼容性问题~firefox和chrome
写代码遇到兼容性问题,chrome和firefox下的下拉菜单表现的不一样,前者刷出来会显示空白,然后下拉才会有选项,后者直接把第一个选项显示,这就来了一个问题,我要做的一个页面是要通过ngModelChange触发不同的页面显示,如果已经有值,而且是用户期望,用户不选择,就不会触发,换句话说,我就是希望一刷出来就是空白,用户下拉才出来选项~ 邮件发出来了也没有人理我,项目太忙了吧~连测试都原创 2016-11-25 15:33:01 · 4744 阅读 · 1 评论 -
title失效问题(select 中option过长)
写告警过滤这个功能,哎呀,告警描述太长了,导致select里面的option显示过长,其实这个问题的本质就是告警描述不应该过长。。。。但是推动改成个中文真是困难重重,时间又来不及,只能是在select中用style="word-break: break-word断句,但是又发现火狐不支持。。。。再改,加个title属性?发现之前就遇到的一个问题,title总是显示空格前的第一个单词,网上说原创 2016-10-24 10:02:45 · 1999 阅读 · 0 评论 -
absolute元素
看张鑫旭老师的课,尽量少用relative和absolute联合,absolute元素定位不依赖relative,应该尽量的避免使用relativerelative对absolute的限制作用1 overflow:hidden 对absolute是无效的,但是如果父元素加上relative,就可以2 z-index层级:只以父元素的(relative)的层级为主(容易出现层级覆盖的bu原创 2016-10-24 14:01:42 · 317 阅读 · 0 评论 -
非常好的讲布局的习题
非常好的讲各种布局的习题 点击打开链接转载 2016-10-24 19:29:47 · 210 阅读 · 0 评论 -
几种断词用到的属性 white-space word-wrap word-break记录下
记录下,这几天弄断词整的快疯了,FF的兼容性比较差,试了几种属性都不行,但是chrome都支持的很好其中有white-space:用init normal pre-line pre-wrap 效果相同,没有在单词处截断我要处理的段落是这样的:Storage System fan status change. The agent has detected a change i原创 2016-10-25 14:29:51 · 406 阅读 · 0 评论 -
title显示不全的处理方法
最开始比如字符串是 you are so ,直接title的话,是只显示you,遇到空格不显示,网上查说是半角空格和全角空格的问题,要替换,因为想把title的内容取下来传递给后端,所以不想替换来替换去,所以没有尝试直接在字符串两端再加双引号,如'/"'+tmp+'/"',这样就可以显示出全部了,相当于又包裹一层~注意是双引号,不是单引号,如果是单引号,如果遇到缩写又卡住了,比如 yo原创 2016-10-26 13:38:36 · 12701 阅读 · 1 评论 -
相对定位和绝对定位总结
1 通常情况下,默认position为static,也就是没有定位2 相对定位,占着文档流,相对原来的位置3 绝对定位,不占文档流,以父元素为参照物(父元素不是static),这个我很有疑问的~~4 设置了这两种定位,都会有包裹性,宽度不是之前的100%(要改的话,可以通过设置left:0px,right:0px)5 带有覆盖效果的,基本上用absolute定位这种,都可以通过ma原创 2016-11-07 20:07:01 · 412 阅读 · 0 评论 -
欢迎使用CSDN-markdown编辑器
幕课网学习笔记–3大定位机制标准文档流浮动绝对定位标准文档流举例 自动居中*{margin:0;padding:0};.warp{ width:770px; margin:0 auto //auto会根据浏览器的宽度自动的设置两边的外边距,设置margin属性为auto的时候,不能再设置浮动或者绝对定位属性 } .header{ width:100%; heigh原创 2016-10-17 17:20:15 · 209 阅读 · 0 评论 -
bootstrap-table后端分页
项目用bootstrap-table做告警的后端分页表格,学习了下bootstrap-table1 参考资料资料:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ --官方地址 查询参数下面是最近看的一些http://www.cnblogs.com/gamehiboy/p/5176618.html 用例http:/原创 2016-10-18 10:01:37 · 2173 阅读 · 0 评论 -
使用bootstrap-table遇到的一个坑
有两个页面都是用的bootstrap-table做的,id起的名字是一样,表格里部分内容名称也一样,这样快速切换的时候,发现,本来一个应该没有数据的表格,显示了第二个页面中表格的数据~~~~~~查了半天,各种断点,后来发现,当时拷贝,两个表的ID起的一样,懒了一下,就出现了这个匪夷所思的问题,以后不要偷懒了。。。。 今天还做了post情况下,列是不固定情况的表格,大概思路是这样,先发消原创 2016-10-27 19:46:49 · 5098 阅读 · 0 评论 -
学习了一种新的图片居中的方法,父层很干净,利用了absolute属性
原创 2016-10-20 17:30:18 · 264 阅读 · 0 评论 -
几种我常用的元素居中总结
table-cell 支持响应式,水平垂直居中text-align:center 这个只能对行内元素进行水平居中,比如图片,文字,按钮,但是IE 6,7可以对任何元素居中 line-height如果只有一行文字,并且不多的情况下用,水平垂直居中 hihihhhhhhhhhhhhhhhhh margin 0 auto 加宽度水平居中,原创 2016-10-20 18:23:04 · 206 阅读 · 0 评论 -
使用bootstrap-table时遇到的选择分页后又执行查询的问题
我们的页面有一些下拉菜单,比如可以通过时间控件去选择查询不同时间段的告警,今天发现有这么个问题,比如用户可能会有这样的操作:1 用户随便浏览了下,发现好多告警啊,选择到了第2页,这时候,页面向后端传的是第二页 page=2;2 随后用户按时间段来查了,这时候只是refresh了下,数据变化了,但是此时页码是没有变的(感觉这个是个Bug啊~),而且因为是第二页,给后端传的还是page=2原创 2016-10-29 14:36:16 · 4850 阅读 · 0 评论 -
二级浮动菜单(angularjs2 + css)
UX给出这个要求,就是dc下有多个云环境,要求dc是下拉菜单,云环境在右边显示,拿到需求还有点蒙,同事说很像京东页面啊,搜了下,有人实现过,照着改了改大概就是先写个下拉菜单,然后右边的部分先隐藏,等hover左边的li的时候,显示右边部分,用例很多绝对定位~还好之前多看了看张鑫旭老师的课~~css部分 .nav_item{ /*width:300px;*/原创 2016-11-12 14:59:41 · 3638 阅读 · 0 评论 -
讲前端优化的一个链接
http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization说说自己的体会吧1 请求不存在资源,我理解是不是404的error要避免2 合并css文件,合并javascript,这个用到的不多,也是少加载外部文件吧3 sprite用来整合图片,这个我挺想试试,目前告警页面加载几个UX的图标转载 2016-11-30 17:00:56 · 282 阅读 · 0 评论 -
超出文本部分显示省略号
做对话框的时候,用户的名字有英文,有中文,刚开始没有考虑到起的名字天马星空的情况,后来发现了,为了快速改,用了很傻的判断文字长度的方法加省略号,后面有空了,网上搜到了对应的css的方法li{ display:block; overflow:hidden; word-break:keep-all; wh转载 2017-07-05 09:48:13 · 306 阅读 · 0 评论