axl234

2014年8月15日

摘要：效果图样式1样式2调用正常情况下应该是后台生成的html代码，但还是写了一套操作tab页的方法调用简便如下：html 标题1 标题2 标题3 text1 te... 阅读全文

posted @ 2014-08-15 14:41 axl234 阅读(307) 评论(0) 推荐(0) 编辑

摘要：首先，我们先准备好html代码:CSS3实战开发之发光控件的实现立即搜索此时，我们先看一下此时未加样式时的运行效果：接着我们再设置页面外部容器的样式... 阅读全文

posted @ 2014-08-15 10:03 axl234 阅读(271) 评论(0) 推荐(0) 编辑

摘要：今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下... 阅读全文

posted @ 2014-08-15 10:02 axl234 阅读(246) 评论(0) 推荐(0) 编辑

2014年8月12日

CSS ::before 和 ::after 伪元素用法

摘要： CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，... 阅读全文

posted @ 2014-08-12 15:33 axl234 阅读(466) 评论(0) 推荐(0) 编辑

响应式与瀑布流

摘要：以上只是示例代码，懒得对低版本浏览器做兼容，所以有些地方直接使用了现代浏览器的特性。比如使用Float32Array代替普通数组省去了对数组元素的初始化步骤；使用Array.prototype.reduce方法来搜索数组中的东西。这些都是低版本浏览器不支持的，如果需要兼容可以手动改写为低版本浏览... 阅读全文

posted @ 2014-08-12 15:02 axl234 阅读(303) 评论(0) 推荐(0) 编辑

vertical-align:middle的居中细节调整

摘要：使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。运行abcdef 当容器内存在v... 阅读全文

posted @ 2014-08-12 14:40 axl234 阅读(1809) 评论(0) 推荐(0) 编辑

三栏布局中栏实现自适应宽度

摘要：对于div自适应宽度，网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后，不指定其float属性或将float属性指定为none，比如三栏布局居中的一栏为自适应宽度，就可以这样来定义三栏div：这是左栏这是右栏这是中栏，且自适应宽度效果如下：但是如果我们增加中栏的文字内容，并且为其添加... 阅读全文

posted @ 2014-08-12 14:36 axl234 阅读(872) 评论(0) 推荐(0) 编辑

2014年8月11日

模拟表格 inline-block等高布局

摘要：表格是个好东西，它可以自动根据内容来调整格子，确保数据正常显示，并且不破坏表格的结构。但也有一些劣势，因为是用大量标签堆砌而成，页面结构会比较乱，细节也往往不容易控制。所以我们希望有表格的展示效果，但不想用表格，于是就有了模拟表格。对于HTML中的同级数据，我们更希望把它们放到一起。所以UL、L... 阅读全文

posted @ 2014-08-11 15:40 axl234 阅读(741) 评论(0) 推荐(0) 编辑

2014年8月8日

CSS中zoom和scale的区别

摘要： zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。运行第一个测试中只设置了scale，... 阅读全文

posted @ 2014-08-08 10:39 axl234 阅读(308) 评论(0) 推荐(0) 编辑

CSS3属性text-overflow(省略符)实战开发详解

摘要：先看一下效果：好了，看完了效果，现在正式开始今天的开发旅程吧！首先我们先创建html页面，代码如下所示（红色文字即是我们Demo的主要内容）： text-overflow 实例详解今日头条 ... 阅读全文

posted @ 2014-08-08 10:11 axl234 阅读(345) 评论(0) 推荐(0) 编辑

公告