前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下.什么是:before和:after? 该如何使用他们?:before是css中的一种伪元素,可用于在某个元素之前插入某些内容.:after是css中的一种伪元素,可用于在某个元素之后插入某些内容.下面我们先跑个简单的代码测试下效果: <…

CSS 巧用 :before和:after:http://web.jobbole.com/85083/ css清除元素间距:http://ouvens.github.io/frontend-css/2015/08/06/css-get-rid-of-gap.html css居中与自适应布局:http://ouvens.github.io/frontend-css/2014/11/08/css-center-layout.html css清除浮动:http://ouvens.github.io/f…

  在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是大家全神贯注思考的18分钟 ———————— ……思考结束 三.问题引导 针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值. 于是要实现上图所示的效果,我们可能会将CSS代码分成两块,一块针对IE6~8,另外一块针对I…

今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维码的功能.但是它们大部分都是 Canvas 或者其它编程语言实现的. 如果我们现在已经有了一张白底黑字的普通二维码,想把它变成一个渐变色的二维码?该如何做呢? 本文就将介绍,使用 CSS,快速将一个普通黑色二维码,变成任意我们想要的彩色渐变二维码. 强大的混合模式 拥有一张原图,想改变其颜色.在 C…

下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法. 单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; } 优点:代码简洁 巧用背景色实现分…

上下左右边框交界处呈现平滑的斜线.利用这个特点,通过设置不同的上下左右边框宽度或颜色,可以得到小三角.梯形等. 调整宽度大小可以调节三角形形状. 实现三角形 示例1: #test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px; } 示例2: 在上面的基础上,把高度宽度都设为0时,会呈现边界斜线. #test2 { heig…

明天就是4月1日愚人节了,也就是那个可适度开玩笑.整蛊的日子了.如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这个国外网友Wes Bos分享的 CSS 文件吧. 一.打开浏览器的 Custom.css 文件 本文以 Chrome 为例(CSS 修改后立即生效),进入同事或朋友的电脑,按下面方式打开 Custom.css 文件 Mac:~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.…

由于设计需要,我们的页面中经常会有如下效果: 可是我们实现出来的效果确实这样的: 看起来两行文本没有对齐嘛,仔细检查后原来是[字符的原因,因为是中文标点符号占半个字的位置.不信?选中下汉字标点符号看一下即可.至于为什么会占半个字的位置,个人觉得可能是为了方便排版,标点符号也要占一个汉字的空间(想想小时候写的作文标点符号是不是都占一格).标点符号相对于格子左对齐,所以自然一侧留下一半空间.具体原因求科普!查明原因即对症下药,既然中文标点符号占汉字半个位置,那么我们使用CSStext-indent:…

某天突然遇到一个有趣的面试题,需用CSS实现一个宝马的Logo,第一反应就是这不是老生常谈的八卦图的小变形吗,只需用伪元素就可轻易的实现啦,但是细看要求说只能在一个标签里写样式,所以呜呜呜...请教下大神,还是有多种方法的,下面简单分享一下哈! 实现如下效果: 第一种:利用伪元素实现 #box{ width: 100px; height: 100px; border-radius: 100%; background-color: #fff; position: relative; border:…