- 博客(29)
- 收藏
- 关注
RSS订阅CSS3 Media Queries 详细介绍与使用方法
Media Queries 就是要在支援CSS3 的浏览器中才能正常工作，IE8 以下不支持。 而Media Queries 的套用方法千变万化，要套用在什么样的装置中，都可以自己来定义。到底什么是Media Queries ？ 一般我们在开发HTML + CSS 网页中，都会有一份CSS 来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起，我们在开发网页只考虑到自己的...
2014-09-11 01:03:10
236
jQuery圆形统计图实战开发
今天我给大家介绍一款圆形统计图circliful，它基于HTML5的画布和jQuery，无需使用图像轻松实现圆形统计图，而且有很多属性设置，使用起来非常方便。首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中<script src="http://code.jquery.com/jquery-1.10.2.min.js"><...
2014-09-10 10:45:38
212
PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)
使用过百度统计或者cnzz统计的童鞋应该知道，后台有一个地图统计，不同访问量的省份显示的颜色也不一样，今天我将带领大家开发一个这样的案例。上一篇《使用raphael.js绘制中国地图》文章中，我给大家介绍了如何使用raphael.js绘制中国地图，今天我要给大家介绍在实际应用中，如何把数据载入到地图中。本文结合实例，使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果。本例...
2014-09-07 00:25:28
343
Javascript实战开发：教你使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图，也就是在地图上动态的显示某个时间段某个省份地区的统计数据，我们不需要flash，仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。在本文中，我给大家分享如何使用js来完成地图交互。先简单介绍下raphael.js，raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运...
2014-09-06 08:57:19
463
WEB开发中常用的正则表达式集合
在计算机科学中，正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在WEB开发中，正则表达式通常用来检测、查找替换某些符合规则的字符串，如检测用户输入E-mai格式是否正确，采集符合规则的页面内容等等。今天我将分别用PHP和Javascript向大家介绍WEB开发中最常用最实用的正则表达式及其用法，正则表达式是一门学科，不可能使用一篇文章来讲解完，理论的东西网上很多，有兴趣的...
2014-09-06 08:16:12
104
互联网技术开发者必备的调试工具和脚本
俗话说的好：武功再好，一砖撂倒；功夫再高,也怕菜刀。可想而知，拥有工具是多么重要！！！哈哈，不闲扯了，直接给大家上工具吧。很多大牛都是有一套自己钟爱的工具集和资源集的哦。在今天这篇文章中，我将介绍一些能够帮助你高效开发的工具脚本和资源，权当抛砖引玉，希望能够带给大家帮助。1. JSFIDDLEJSFIDDLE是一个超棒的在线JS/CSS/HTML调试和分享工具，大家可以方便的在web页面中...
2014-09-05 23:26:35
161
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
各位网友大家好，今天我要带领大家开发一个纯CSS的图片分类显示的网址导航，单纯看标题大家可能有些困惑，依照以往惯例，我先给大家演示一下实际运行效果：从上面的运行效果，大家不难发现，当我点击某一菜单时，导航区域会相应高亮显示此分类的图标，而其他图标则会变暗。很多人可能会说，这个这么简单，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快实现同样的效果了...
2014-09-05 00:15:41
133
CSS3实战开发:使用CSS过滤效果来改变图片样式
各位网友，大家好，我是陌上花会开。我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用CSS来给web图像添加相同的效果。首先我们先在网页中显示一张图片,html代码如下：<!DOCTYPE html><html><head><meta chars...
2014-08-21 01:50:06
270
CSS3实战开发:手把手教你纯CSS3手风琴特效实战开发(无需JS代码或插件)
各位网友，大家好，我是实战互联网技术部的陌上花会开。前一段时间我给大家分享了一系列CSS3实战开发的案例，继续以前的脚步。在本次CSS3实战开发案例中，我将手把手带领大家开发纯CSS3的手风琴特效开发。一如既往，先给大家演示效果动画：上面的效果是纯CSS开发的，大家是不是觉得很棒呢。现在我将分步骤带领大家实战开发今天的特效。首先，编写html源代码： <!DOCTY...
2014-08-20 14:35:06
218
CSS3实战开发:手把手教你鼠标滑动特效开发
各位网友，如果你已经看过我的CSS3实战开发系列教程，我相信你对CSS3已经有了非常全面深刻的了解。有些人可能CSS3语法掌握了不少，但是真正实际用起来还有点生疏，甚至无从下手。请别担心，我会不断更新一系列实战开发案例，我会为大家分步骤剖析特效开发过程。今天我将手把手带领大家开发一个鼠标滑动的特效案例，废话不多说，直接上效果动画：你有没有觉得上面的这个特效很棒呢!好，现在咱们就...
2014-08-19 00:12:59
300
CSS3实战开发：手把手教大家搜索表单发光特效实战开发
各位网友，大家好，我是陌上花会开，今天这个案例，我将带领大家,手把手教大家开发一个会发光的表单组，还是先秀运行效果图吧：从这个效果图，大家可以发现，当光标在某个组件上时，它就会发光，今天我将带领大家实战开发这个特效。PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果。首先，我们先准备好html代码:<!doctype html><html...
2014-08-15 00:19:45
174
原创 CSS3基本选择器详解
CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对...
2014-08-12 00:09:12
116
原创 CSS3属性选择器详解
上一章在《CSS3基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选...
2014-08-12 00:05:24
231
原创 CSS3伪类选择器详解
前面花了两节内容分别在《CSS3基本选择器》和《CSS3属性选择器详解》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把...
2014-08-12 00:01:30
165
原创 CSS选择器的优化
前面花了几个篇幅着重介绍了CSS的选择器的使用，我将其分成三个部分：CSS3基本选择器、CSS3属性选择器详解以及CSS3伪类选择器详解。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的，所以今天先从选择器开始入手，加强自己。如果你也感兴趣那就跟我一起来吧。浏览器如何识别你的选择器首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应...
2014-08-11 23:57:51
133
原创 CSS3基本属性之渐变Gradient
CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐...
2014-08-11 23:55:20
154
CSS3实战开发:手把手教大家折角效果实战开发
各位网友，大家好，我是陌上花会开，今天这篇文章，我将手把手教大家如何开发一套纯CSS的折角效果。一如往常，我不提供代码下载，但是我可以保证，只要将教程中的代码复制到本地，绝对百分百获得与我演示的效果一样，希望各位明白我的用意。好了，直接开始今天的教程吧。首先，我先给大家演示一下今天实战案例的效果： 有人会说这是什么？这就是我们今天的实战开发，我将带领大家开发上图中的右上角折叠效果...
2014-08-09 15:13:24
237
CSS3实战开发:仿天猫首页图片展示动画特效实战开发
各位网友大家好，我是陌上花会开，人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常，我既不提供源码给大家，也不提供Demo给大家，只是希望大家能跟着我的讲解，然后将代码一步步复制到本地，本人可以保证，页面上的代码复制到本地，绝对百分百运行，且得到与陌陌一样的运行效果。我这么做只为激起大伙的动手能力，望大家能明白我的用心。好了，不废话了，直接本篇的实战开发吧。我们看...
2014-08-09 01:32:45
267
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)
各位网友，大家好，我是陌上花会开，人称陌陌，在上一篇文章《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》 中，我已经手把手带领大家开发了一个鼠标滑过时的动画特效。这篇文章里，我将再带领大家开发另一个动画特效，希望大家能得到启发。还是一如往常，我不提供源码下载，但是可以保证：只要是将本教程中的代码，一步步复制到本地，定会得到楼主同样的运行效果。好了，废话少说，直接进入今天...
2014-08-08 16:21:05
190
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效
各位网友大家好，我是陌上花会开，当然大家也可以叫我陌陌。今天这篇文章，我将手把手带领大家实战开发一个鼠标划过图片时的动画特效。在这里我不会给大家提供案例的源码下载，但是本人可以保证，只要大家跟着我的思路，一步步将代码复制到本地，一定会得到同样的运行效果。希望大家明白我的用心。好了不废话，直接进入今天的主题吧。在今天这个案例里，我准备3个素材，一张背景图，两张风景图片。这个大家可以到网上自行下...
2014-08-08 08:51:44
214
CSS3实战开发:手把手教你照片墙实战开发
在《CSS3 2D转换技术之translate实战开发》文章中，我给大家列出了CSS3中的2D转换方法：1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()同时对第一个方法 translate()做了非常详尽的介绍，并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉...
2014-08-07 09:59:56
174
CSS3实战开发: 弹性盒模型之响应式WEB界面设计
各位网友大家好，如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示，相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。从本篇文章开始，我将带领大家，手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。 当你学习完成《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》这个系列教程之后，...
2014-08-06 00:38:08
400
2
CSS3中的弹性流体盒模型技术详解(二)
在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里，我给大家列出了，从css1到css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。box-pack 作用：用来规定子元素在盒子内的水平空间分配方式box-pack 语法：box-pack: start | end | center | justify; start对于正常方向的框，首...
2014-08-06 00:28:11
165
1
CSS3中的弹性流体盒模型技术详解(一)
从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。 好了，长话短说，现在开始我们的《CSS3中的弹性流体...
2014-08-06 00:22:00
143
1
CSS3新增属性text-shadow详解及燃烧的字体实战开发
今天我们有很多程序员在给文本设置样式时，都感觉无从下手。一般有两种情况：1) 不知道关于文本到底有哪些样式属性；2) 即使借助开发工具的自动提醒，依然不清楚样式属性的具体意思，以及具体用法。 今天这篇文章，我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例，来使大家重新认识CSS3文本样式，真心希望大家通过此篇文章，即使不能做到精通CSS3的文本样式的应...
2014-08-05 01:35:50
547
CSS3新增属性text-overflow(省略符)实战开发详解
有人会问，为什么我把text-overflow拿出来单独讲解。以前，当一行内容显示不完整的时候，想要显示省略符，需要通过javascript等手段。但是CSS3引入了text-overflow省略符属性，只需要短短一行代码就可以实现，开发方式的简洁强大不言而喻。 这篇文章，我讲带领大家做一个《今日头条》新闻导航列表，带领大家领略text-overfow的强大魅力。先看一下效果：...
2014-08-05 01:30:11
379
CSS3属性选择器详解 及 双色球实战开发
在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？这一节中，我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器。双色球案例：大家都知道，双色球共有7个球，6个红球，1个蓝球。首先我们先在页面上面定义7个span标签：&...
2014-08-04 12:34:01
376
:link,:visited,:focus,:hover,:active详解
CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。:link 与 :visited 在样式文件中的顺序可以随便放置。而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。:focus -> :hover -> :active 有些人可能会困惑，为什...
2014-08-04 12:30:57
118
CSS中选择器优先级顺序实战讲解
我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。 当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。...
2014-08-04 00:02:19
195
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人