随笔分类 -  css相关

上一页 1 2 3 下一页
rem详解
摘要：rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么？rem（fontsizeoftherootelement）是指 相对于根元素的字体大小... 阅读全文
posted @ 2015-11-12 15:43 axl234 阅读(1481) 评论(1) 推荐(0)
引入css外部样式表
摘要：关于路径在还没有说之前先说下关于css引入的2种方式：相对路径(Relative Path)，顾名思义：就是css文件相对某一个参照物的位置。上物理课的时候老师都会提到相对运动：指某一个物体对另外一个物体的相对于一个固定参照物来是相对运动的。我们走路看汽车的时候觉得汽车往后走，汽车看我们的时候是往前... 阅读全文
posted @ 2015-05-30 16:22 axl234 阅读(412) 评论(0) 推荐(0)
Sass介绍及入门教程
摘要：Sass是什么？Sass是"Syntactically Awesome StyleSheets"的简称。那么他是什么？其实没有必要太过于纠结，只要知道他是“CSS预处理器”中的一种即可，简单点说，Sass就是“CSS预处理器”，你可以称其是工具或者是语言。如果你实在想知道他是什么？可以看Sass官网... 阅读全文
posted @ 2014-12-11 15:50 axl234 阅读(747) 评论(0) 推荐(0)
css3前端工具
摘要：随着CSS3的出现，CSS3讨论的话题越来越多了，现在各种教程也是多如牛毛，不比一年前的时候，找个资料要捞遍整个互联网，而且还很难找到自己需要的参考资料。从侧面也说明，CSS3对于前端工程师来说，越来越重要了，从各处的招聘信息也能看出这一点。说这么说我想强调的是他的重要性。另一方面，有很多CSS3的... 阅读全文
posted @ 2014-12-05 11:46 axl234 阅读(357) 评论(0) 推荐(0)
设置IE兼容模式
摘要：文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性，如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编... 阅读全文
posted @ 2014-11-06 15:57 axl234 阅读(652) 评论(0) 推荐(0)
checkbox和radio的样式美化问题
摘要：如果你下定决心要改变现有的默认的checkbox和radio的样式，那么我目前有两种办法：1、自己动手写一个，也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉，使用绝对定位的方式，手动切换checked和unchecked的图片，定位到原来input显示的地方；2、使用... 阅读全文
posted @ 2014-09-11 16:17 axl234 阅读(1199) 评论(0) 推荐(0)
基于HTML5 Canvas的网页画板实现教程
摘要：HTML5的功能非常强大，尤其是Canvas的应用更加广泛，Canvas画布上面不仅可以绘制任意的图形，而且可以实现多种多样的动画，甚至是一些交互式的应用，比如网页网版。这次我们要来看的就是一款基于HTML5 Canvas的网页画板，在这里仅对一些关键性的代码进行记录，大家也可以下载全部源代码研究。... 阅读全文
posted @ 2014-08-15 14:52 axl234 阅读(912) 评论(0) 推荐(0)
CSS3实战开发 表单发光特效实战开发
摘要：首先，我们先准备好html代码:CSS3实战开发之发光控件的实现 立即搜索 此时，我们先看一下此时未加样式时的运行效果：接着我们再设置页面外部容器的样式... 阅读全文
posted @ 2014-08-15 10:03 axl234 阅读(280) 评论(0) 推荐(0)
纯CSS3实现自定义涂鸦风格的边框
摘要：今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下... 阅读全文
posted @ 2014-08-15 10:02 axl234 阅读(268) 评论(0) 推荐(0)
CSS ::before 和 ::after 伪元素用法
摘要：CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，... 阅读全文
posted @ 2014-08-12 15:33 axl234 阅读(475) 评论(0) 推荐(0)
响应式与瀑布流
摘要：以上只是示例代码，懒得对低版本浏览器做兼容，所以有些地方直接使用了现代浏览器的特性。比如使用Float32Array代替普通数组省去了对数组元素的初始化步骤；使用Array.prototype.reduce方法来搜索数组中的东西。这些都是低版本浏览器不支持的，如果需要兼容可以手动改写为低版本浏览... 阅读全文
posted @ 2014-08-12 15:02 axl234 阅读(318) 评论(0) 推荐(0)
vertical-align:middle的居中细节调整
摘要：使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。运行abcdef 当容器内存在v... 阅读全文
posted @ 2014-08-12 14:40 axl234 阅读(1818) 评论(0) 推荐(0)
三栏布局 中栏实现自适应宽度
摘要：对于div自适应宽度，网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后，不指定其float属性或将float属性指定为none，比如三栏布局居中的一栏为自适应宽度，就可以这样来定义三栏div：这是左栏这是右栏这是中栏，且自适应宽度效果如下：但是如果我们增加中栏的文字内容，并且为其添加... 阅读全文
posted @ 2014-08-12 14:36 axl234 阅读(884) 评论(0) 推荐(0)
模拟表格 inline-block等高布局
摘要：表格是个好东西，它可以自动根据内容来调整格子，确保数据正常显示，并且不破坏表格的结构。但也有一些劣势，因为是用大量标签堆砌而成，页面结构会比较乱，细节也往往不容易控制。所以我们希望有表格的展示效果，但不想用表格，于是就有了模拟表格。 对于HTML中的同级数据，我们更希望把它们放到一起。所以UL、L... 阅读全文
posted @ 2014-08-11 15:40 axl234 阅读(759) 评论(0) 推荐(0)
CSS中zoom和scale的区别
摘要：zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。运行 第一个测试中只设置了scale，... 阅读全文
posted @ 2014-08-08 10:39 axl234 阅读(318) 评论(0) 推荐(0)
CSS3属性text-overflow(省略符)实战开发详解
摘要：先看一下效果：好了，看完了效果，现在正式开始今天的开发旅程吧！首先我们先创建html页面，代码如下所示（红色文字即是我们Demo的主要内容）： text-overflow 实例详解 今日头条 ... 阅读全文
posted @ 2014-08-08 10:11 axl234 阅读(362) 评论(0) 推荐(0)
INPUT[type=file]的change事件不触发问题
摘要：在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。 当INPUT[type=file]控件上已经选... 阅读全文
posted @ 2014-08-07 16:01 axl234 阅读(37882) 评论(0) 推荐(1)
CSS 根据数据显示样式
摘要：在低版本IE时代，我们想让数据根据其值显示不同的样式可能需要直接从服务器端输出时为不同的数据添加相应的class。但现在，通过属性选择器+伪元素+属性选择符，这三个东西混合使用就可以让数据根据其值以不同的样式显示，不需要再从程序控制样式。 现在有一堆数据，正数表示盈利，负数表示亏损。通常我们需要从... 阅读全文
posted @ 2014-08-07 15:16 axl234 阅读(1604) 评论(0) 推荐(0)
普通元素的层次问题
摘要：对定位元素使用z-index属性可以直接对元素设置层次，它会在渲染时影响元素的遮盖顺序。但z-index属性仅对定位元素生效，那么对于非定位元素呢？实际上在非定位元素之间也有自己的层次设置方案，一些普通的属性就可以影响非定位元素的遮盖顺序。 通常，在文档中位置较后的元素会挡住较前的元素。运行 但... 阅读全文
posted @ 2014-08-07 15:07 axl234 阅读(395) 评论(0) 推荐(0)
一次滚动一屏的滚动条行为实现
摘要：在一些类似于幻灯片之类的页面上，滚动条被限制为了每次滚动一个屏幕，也就是滚动幻灯片的一页。但浏览器并没有直接提供这样的功能，我们通常是通过程序控制来实现的。这样的程序并不困难，只要劫持鼠标滚轮事件，将其修改到自己需要的行为即可。 下面是一个简单地实现代码，这里没有考虑低版本浏览器的兼容，如果需要可... 阅读全文
posted @ 2014-08-07 11:18 axl234 阅读(2131) 评论(0) 推荐(0)

上一页 1 2 3 下一页