div+css
刺客团队
梦想还是要有的,万一实现了呢
展开
-
CSS3中的弹性流体盒模型技术详解(一)
从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点。下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。 好了,长话短说,现在开始我们的《CSS3中的弹性流体...2014-08-06 00:22:00 · 133 阅读 · 1 评论 -
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果:从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗。很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了...2014-09-05 00:15:41 · 129 阅读 · 0 评论 -
CSS3实战开发:使用CSS过滤效果来改变图片样式
各位网友,大家好,我是陌上花会开。我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性,我们使用CSS来给web图像添加相同的效果。首先我们先在网页中显示一张图片,html代码如下:<!DOCTYPE html><html><head><meta chars...2014-08-21 01:50:06 · 267 阅读 · 0 评论 -
CSS3实战开发:手把手教你纯CSS3手风琴特效实战开发(无需JS代码或插件)
各位网友,大家好,我是实战互联网技术部的陌上花会开。前一段时间我给大家分享了一系列CSS3实战开发的案例,继续以前的脚步。在本次CSS3实战开发案例中,我将手把手带领大家开发纯CSS3的手风琴特效开发。一如既往,先给大家演示效果动画:上面的效果是纯CSS开发的,大家是不是觉得很棒呢。现在我将分步骤带领大家实战开发今天的特效。首先,编写html源代码: <!DOCTY...2014-08-20 14:35:06 · 215 阅读 · 0 评论 -
CSS3实战开发:手把手教你鼠标滑动特效开发
各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解。有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手。请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程。今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画:你有没有觉得上面的这个特效很棒呢!好,现在咱们就...2014-08-19 00:12:59 · 296 阅读 · 0 评论 -
CSS3实战开发:手把手教大家搜索表单发光特效实战开发
各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧:从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效。PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果。首先,我们先准备好html代码:<!doctype html><html...2014-08-15 00:19:45 · 167 阅读 · 0 评论 -
CSS3属性选择器详解
上一章在《CSS3基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选...原创 2014-08-12 00:05:24 · 226 阅读 · 0 评论 -
CSS3伪类选择器详解
前面花了两节内容分别在《CSS3基本选择器》和《CSS3属性选择器详解》介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把...原创 2014-08-12 00:01:30 · 163 阅读 · 0 评论 -
CSS选择器的优化
前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS3基本选择器、CSS3属性选择器详解以及CSS3伪类选择器详解。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的,所以今天先从选择器开始入手,加强自己。如果你也感兴趣那就跟我一起来吧。浏览器如何识别你的选择器首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应...原创 2014-08-11 23:57:51 · 128 阅读 · 0 评论 -
CSS3基本属性之渐变Gradient
CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐...原创 2014-08-11 23:55:20 · 151 阅读 · 0 评论 -
CSS3实战开发:仿天猫首页图片展示动画特效实战开发
各位网友大家好,我是陌上花会开,人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果。我这么做只为激起大伙的动手能力,望大家能明白我的用心。好了,不废话了,直接本篇的实战开发吧。我们看...2014-08-09 01:32:45 · 264 阅读 · 0 评论 -
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)
各位网友,大家好,我是陌上花会开,人称陌陌,在上一篇文章《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》 中,我已经手把手带领大家开发了一个鼠标滑过时的动画特效。这篇文章里,我将再带领大家开发另一个动画特效,希望大家能得到启发。还是一如往常,我不提供源码下载,但是可以保证:只要是将本教程中的代码,一步步复制到本地,定会得到楼主同样的运行效果。好了,废话少说,直接进入今天...2014-08-08 16:21:05 · 186 阅读 · 0 评论 -
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效
各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌。今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效。在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果。希望大家明白我的用心。好了不废话,直接进入今天的主题吧。在今天这个案例里,我准备3个素材,一张背景图,两张风景图片。这个大家可以到网上自行下...2014-08-08 08:51:44 · 187 阅读 · 0 评论 -
CSS3实战开发:手把手教你照片墙实战开发
在《CSS3 2D转换技术之translate实战开发》文章中,我给大家列出了CSS3中的2D转换方法:1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()同时对第一个方法 translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉...2014-08-07 09:59:56 · 171 阅读 · 0 评论 -
CSS3实战开发: 弹性盒模型之响应式WEB界面设计
各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。 当你学习完成《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》这个系列教程之后,...2014-08-06 00:38:08 · 385 阅读 · 2 评论 -
CSS3中的弹性流体盒模型技术详解(二)
在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里,我给大家列出了,从css1到css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。box-pack 作用:用来规定子元素在盒子内的水平空间分配方式box-pack 语法:box-pack: start | end | center | justify; start对于正常方向的框,首...2014-08-06 00:28:11 · 158 阅读 · 1 评论 -
互联网技术开发者必备的调试工具和脚本
俗话说的好:武功再好,一砖撂倒;功夫再高,也怕菜刀。可想而知,拥有工具是多么重要!!!哈哈,不闲扯了,直接给大家上工具吧。很多大牛都是有一套自己钟爱的工具集和资源集的哦。在今天这篇文章中,我将介绍一些能够帮助你高效开发的工具脚本和资源,权当抛砖引玉,希望能够带给大家帮助。1. JSFIDDLEJSFIDDLE是一个超棒的在线JS/CSS/HTML调试和分享工具,大家可以方便的在web页面中...2014-09-05 23:26:35 · 153 阅读 · 0 评论