随笔分类 - css
摘要：摘要： 多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。display:table one two ...
阅读全文
摘要：摘要： 在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。line-height： vertical-align:middle; :before： ...
阅读全文
摘要：摘要： 前面已经分享了三种方法制作tooltips，今天再来分享一个借助a标签来实现tooltips的方法。效果如下：
阅读全文
摘要：摘要： 段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器。单行放大： 在第一行内放大，效果如下： Document This is a test article. This is a test arti...
阅读全文
摘要：摘要：我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的...
阅读全文
摘要：摘要： 在我们制作页面时CSS hack由于不同的浏览器，比如Internet Explorer,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏...
阅读全文
摘要：清除图片下方出现几像素的空白间隙方法1：img{display:block;}方法2：img{vertical-align:top;}除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和值都可以方法3：#test{font-size...
阅读全文
摘要：摘要： 无论多少人开发一个项目，规范是最初始也是最基本的，一个好的规范不仅让代码看起来完美也能够解决冲突。下面是我在开发时使用的css规范基本规范：所有名称小写，符合w3c规范类名和id，多个变量之间用中划线连接所有变量只能使用名词变量定义要符合语义化基本原则：以项目名或者一个全局名称为命名空间，...
阅读全文
摘要：无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框，这种箭头可以通过背景图片或者是css来实现，本文介绍三种通过css实现带箭头的提示框。通过border属性思路：两个三角形，通过定位使两个三角形相差1px作为边框。CSS3 transfrom思路：先做一个两条边相同颜色的正方形，然后旋转一定...
阅读全文
摘要：在开发过程中经常会遇到文本过长超出文本的宽度，这时候我们会考虑将文本截断，但是只顾截断会失去交互的友好性，因为用户不知道后面还有内容，我们会在文本超出宽度的部分加上省略号，然后加上title属性，当用户鼠标放到此处提示完整信息。文本溢出显示省略号有两种情况：单行文本1 text-overflow: ...
阅读全文
