随笔分类 -  css

上一页 1 2 3 下一页
如何改变placeholder的样式
摘要：input::-webkit-input-placeholder { color: #B2B2B2; } input:-moz-placeholder { color: #B2B2B2; } input::-moz-placeholder { color: #B2B2B2; } input:-ms-input-placeholder { c... 阅读全文
posted @ 2017-11-29 17:31 明明一颗大白菜 阅读(934) 评论(0) 推荐(0)
如何使用css影藏滚动条
摘要：1.单纯的一句代码： 但是这代码最大的弊端就是只能在webkit内核的浏览器上进行显示，无法做Hack 2. 说说原理吧，首先是vw,vh这种css3单位不懂请百度，让body宽度是窗口宽度加上20px（浏览器滚动条差不多这个宽度），.page里面的宽度是100%视口也就是100vw，这样body的 阅读全文
posted @ 2017-11-02 16:02 明明一颗大白菜 阅读(521) 评论(0) 推荐(1)
css纯字母或者字母换行显示
摘要：white-space:normal; word-break:break-all; 阅读全文
posted @ 2017-10-13 14:28 明明一颗大白菜 阅读(220) 评论(0) 推荐(1)
将display设置为inline-block之后产生间隙然后换行问题的解决方法
摘要：在我们会用display的时候，inline-block肯定不陌生吧，我今天在做项目的时候，用了inline-block,使a标签可以自定义宽度，但是随之而来的问题就是换行的BUG，如下图 特地加了一个border来看其间距，果不其然，会产生一定的间隙 解决方法1：浮动 没有什么是浮动解决不了的，如 阅读全文
posted @ 2017-09-05 10:13 明明一颗大白菜 阅读(1196) 评论(0) 推荐(0)
利用css3制作毛玻璃的效果
摘要：忙里偷闲，最近又在看许多比较酷炫的效果。现在基于jquery的插件比较多，但是很多插件的兼容性不是太好，所以原生的才是王道。在日常当中，毛玻璃已经不常见了，那是一个很久远年代的东西了。诺，下面就是毛玻璃： 哈哈，不闲扯了，接下来不如正题吧，先看一下终极效果： 嗯，好了，，开始我们的步骤吧： 第一步： 阅读全文
posted @ 2017-06-03 17:59 明明一颗大白菜 阅读(2747) 评论(0) 推荐(2)
教你一招解决浏览器兼容问题（PostCSS的使用）
摘要：我们在处理网页的时候，往往会遇到兼容性的问题。在这个问题上分为两个大的方向：屏幕自适应&浏览器兼容。而屏幕自使用的方法有许多，包括框架之类的，但是浏览器的兼容却没有一个号的框架。在我们日常处理中，会使用属性兼容（*background,_background...）,前缀兼容（-webkot-,-o 阅读全文
posted @ 2017-05-30 21:56 明明一颗大白菜 阅读(5918) 评论(0) 推荐(22)
webstorm编译less和scss
摘要：Webstorm 配置less编译的Arguments参数: $FileName$ $FileParentDir$\ccy\ccy1\ccy2\$FileNameWithoutExtension$.css --source-map 路径的根目录为本文件所在的上一层父文件 如下图所示： Webstor 阅读全文
posted @ 2017-03-01 21:32 明明一颗大白菜 阅读(325) 评论(0) 推荐(1)
什么叫做hack
摘要：由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏 阅读全文
posted @ 2017-03-01 21:25 明明一颗大白菜 阅读(385) 评论(0) 推荐(0)
怪异模式和标准模式的定义和区别
摘要：所谓的标准模式是指，浏览器按W3C标准解析执行代码； 怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览 阅读全文
posted @ 2017-03-01 21:13 明明一颗大白菜 阅读(599) 评论(0) 推荐(0)
三种方式加入媒体样式
摘要：1. /*@media Rule*/ @media all and (max-width : 1024px){...} 2. /*@imput Rule*/ @imput url(styles.css) all and (max-width : 1024px){...} 3. <link rel = 阅读全文
posted @ 2016-12-20 22:06 明明一颗大白菜 阅读(177) 评论(0) 推荐(0)
如何让多文本内容只显示一行，其余用省略号来显示
摘要：在此需要用到三个属性配合使用： 阅读全文
posted @ 2016-12-20 21:53 明明一颗大白菜 阅读(9374) 评论(0) 推荐(16)
background-clip和background-origin
摘要：background-clip 修剪：背景颜色从哪些区域开始显示，默认从border开始该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。background-clip: border- 阅读全文
posted @ 2016-12-20 21:44 明明一颗大白菜 阅读(186) 评论(0) 推荐(0)
完成响应式的方式
摘要：1.媒体查询 2.通过em 和rem单位等 3.通过js 4.通过第三方框架bs等 阅读全文
posted @ 2016-12-19 23:10 明明一颗大白菜 阅读(165) 评论(0) 推荐(0)
盒子模型 W3C中和IE中盒子的总宽度分别是什么
摘要：W3C盒模型 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right IE盒模型 总宽度 = margin-left + width + margin-r 阅读全文
posted @ 2016-12-19 23:09 明明一颗大白菜 阅读(3409) 评论(0) 推荐(10)
双飞翼布局
摘要：描述：两边内容不变，中间内容变化 代码： 阅读全文
posted @ 2016-12-19 23:08 明明一颗大白菜 阅读(148) 评论(0) 推荐(0)
圣杯布局
摘要：描述：两边的内容变化，中间的内容不变 代码： 阅读全文
posted @ 2016-12-19 23:05 明明一颗大白菜 阅读(175) 评论(0) 推荐(0)
清除浮动影响的方法
摘要：1.在浮动所在的标签里面加一个兄弟标签2.在所在父级标签加一个伪类3.在下面的div里面加clear代码如下： <body><div class="parentOne"><div class="first">1</div><!--第一种方法--><div class="second" style=" 阅读全文
posted @ 2016-12-19 23:03 明明一颗大白菜 阅读(221) 评论(0) 推荐(0)
在input中既隐藏边框，也隐藏轮廓的设置
摘要：在设置input的时候，我们往往不想显示边框，所以通常会在css里面写"border"none"，但是结果往往差强人意，如下图 我们这个时候可以加一个属性来把它的轮廓也隐藏掉："outline:none" css代码如下: 阅读全文
posted @ 2016-12-19 22:56 明明一颗大白菜 阅读(10916) 评论(0) 推荐(20)
解决“”父级标签和子标签边框重叠，设置子标签的margin父标签会跟着移动“”的方法
摘要：1.可以给父标签一个padding,然后给一个很小的值，虽然不影响整体但是不建议使用 2.给父标签一个"over:hidden"的样式，推荐使用 阅读全文
posted @ 2016-12-19 22:48 明明一颗大白菜 阅读(802) 评论(0) 推荐(1)
如何选中多个相同标签的奇数行或者偶数行
摘要：在伪类方法里面，有一个:nth-child()的方法，当（）里面的参数为2n的时候表示偶数行，当（）里面的参数为2n+1或者2n-1的时候表示奇数行 后面的参数为数字的时候，表示的选择的哪一行 实例： 阅读全文
posted @ 2016-12-19 22:43 明明一颗大白菜 阅读(1337) 评论(0) 推荐(1)

上一页 1 2 3 下一页
<-- -->