HTML5&CSS3学习-CSDN博客

【探索HTML5第二弹04】响应式布局（上），让我们一起来响应式布局吧

摘要: 前言第一次看到响应式布局这个东西的时候，我还以为又出了新东西呢，稍微研究了下才发现其实也是现有资源的组合而出的创新，中国什么时候也搞一个这种创新呢？所谓响应式布局，大意是在不同设备上（不同尺寸下）都能以比较合理的方式显示，大家千万不要觉得iphone上的显示感觉还不差，我们就说说博客园吧，其实园子该改成响应式布局，只不过要花点功夫。我们首先进入博客园后，手机对整个页面是有一定缩放的，所以看上去还是全屏呢，然后你要看其中一个内容还要滑大，左边完了要看右边又要滑过去，哎真是费力不讨好啊，不注意点到一个a标签又不见了，所以这真不是比较友好的界面。响应式布局的提出是比较有意思的，根据不同的尺寸做不同的阅读全文

posted @ 2013-05-15 17:41 叶小钗阅读(66) | 评论 (0) 编辑

【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！

摘要: 前言昨天，前天都有一些事情了，自己的学习任务有所耽搁，但这不是主要原因，主要原因是昨天和前天都在搞canvas相关东西，这个东东怎么说呢？我是越搞越不能确定自己是否会用到，所以过程中有点纠结，然后慢慢时间就过去了。另外，我本来想重新学习HTML5的，但是发现在走之前的老路，重复的过程就没必要了，我要从新思考一下最近的学习计划。最近开始接触了google地图应用，那确实叫一个不错啊！！！可以完成很多事情了，这里用到的是GMaps.js，这里将其简单说下吧！进入Gmaps的世界简单应用 1 <!DOCTYPE html> 2 <html xmlns="http://ww 阅读全文

posted @ 2013-05-09 09:31 叶小钗阅读(517) | 评论 (2) 编辑

【探索HTML5第二弹01】HTML5的前世今生以及来世

摘要: 前言新入职的团队，每天工作强度很大，我感觉在那里待一天要干原来1.5天的事情，虽然才去两天就深刻的感受到了什么是“程序员”了，原来我一直不是一个称职的程序员。新团队加班很厉害，但是我现在却不在意，我现阶段需要这种高强度的工作量历练，一年下来再看其他吧。但是，我期间还是有一定忐忑与不自信的，因为还没有接触正式的开发工作，也不知道自己能不能胜任，希望自己能干好吧！废话结束，我们开始正题吧。之前我们初探了一把HTML5和CSS3，但是很是片面，所以我们今天来个“三戏”HTML5，来剥开她的内衣吧......今天都10点了，便能学到哪里就是哪里了。HTML5发展史进入历史舞台的HTML5之前我们草草的阅读全文

posted @ 2013-05-06 23:00 叶小钗阅读(1071) | 评论 (1) 编辑

【实战HTML5与CSS3】免费制作威客页面啦（附源码）

摘要: 前言接着昨天的写，居然有圆友找到了网站原网址，这里也一并弄出来了，发现他们做出来其实和原型图还有一点差异呢：http://www.tmtpost.com/原型图今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！开始切图第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。第二步，将logo剪切了第三步，我们看看会用到哪些小图标，先全部给抠下来吧，暂时只弄了这么多需要再弄吧：我PS水平更加水到没边了，完全初阅读全文

posted @ 2013-05-05 17:26 叶小钗阅读(2046) | 评论 (17) 编辑

【实战HTML5与CSS3】用HTML5和CSS3制作页面（上）

摘要: 前言周一离职并且入职了，于是开始了做新项目，那天我问了下前端大哥，我们做的项目需要兼容哪些浏览器，他说需要兼容IE9以上与chrome，ff，我一下就诡异的笑了。。。。这不是HTML5与CSS3项目的温床吗？这次真的捡到宝了，再也不用担心IE678的问题了，可以肆意的使用最新的技术了。紧接着问题也来了，我现在需要切图了，对于我这种前端，css一直是短板，更何况切图！！！说实话我还真没有完整的切一张图来试试，于是今天让我们来试试吧！！！原型图今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！这里也对自己提出要求，希望做出来的阅读全文

posted @ 2013-05-04 19:08 叶小钗阅读(1010) | 评论 (6) 编辑

【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)

摘要: 目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言昨天的进度有点延缓，只做了快速导航特效，都是晚上回来一点多才基本结束，其中很多问题也没有修正，就只有一个白板特效。今天是假日的最后一天，所以需要有一个结果了，看来这次只能做首页了，乐观情况下需要把整个首页布局弄出来，再优化了。回顾特效，为什么absolute我们回顾下之前的几个特效，无论是导航上跟着走的背景，还是爆炸的图片，到昨天做的快速导航特效，他们全是采用绝对定位！然后来看看我们马阅读全文

posted @ 2013-05-01 16:07 叶小钗阅读(3019) | 评论 (14) 编辑

【实战HTML5与CSS3 第二篇】绚丽的快速导航！

摘要: 目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言今天9点就起来了，因为下午出去有个聚会，所以就早点起来进行，否则这个进度有点吃紧啊，昨天初略的完成了导航以及爆炸的图片，这里来回顾下：1 导航为一个div背景跟着导航栏目移动，并有一定抖动感觉，这个完全是jquery的东西了，若是用css3我暂时没有想到解决方案；2 图片爆炸功能，这个功能就现在来说都是有很多问题的，都不能用瑕疵来说，第一效果不能达到我的要求，第二性能上恐怕有问题，这块阅读全文

posted @ 2013-05-01 01:28 叶小钗阅读(2124) | 评论 (12) 编辑

【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！

摘要: 目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言先八卦一下，我昨天离职了，把电脑也退了，离职前，我发了一封邮件给整个部门，陈述自己的不舍与团队管理问题（估计传说中的leader要抓狂了），然后就昏昏的回家了，所以昨天没有什么产出。最近经常有朋友惊叹我的发帖速度很快，其实是有原因的，我最近两周要离职，所以就不太理我那传说中的leader了，每天多出很多时间可以学习。但是，下周后便会入职一家新公司了，我已经有感觉进去一段时间会很忙，会很阅读全文

posted @ 2013-04-29 20:03 叶小钗阅读(2063) | 评论 (14) 编辑

【CSS3初探之Media Queries】终于完成了的CSS3，我们来个终章总结！

摘要: 前言无论如何，学到这里，我可以自豪的告诉自己，我HTML5与CSS3学完了，不管我现在还记得住多少，我确确实实将他们学完了，还做了不少demo。回想几个月前，我一直在纠结自己应该学习HTML5与CSS3，我应该加强js与css，却一直没有任何产出！但是，我最近在两个星期就完成了HTML5与CSS3的初步学习，就此慢慢迈入HTML5与CSS3的大门，而且重新找回了学习的感觉，这些都为一个目标：两年内，我要成为国内优秀的前端工程师！我就发现理想与目标的力量是不可评估的，自从我有了明确的目标后，感觉做什么事都比较有干劲，我相信不久的将来我一定可以实现自己的目标！！！好了，会话结束，我们来看看今天的主阅读全文

posted @ 2013-04-27 14:16 叶小钗阅读(289) | 评论 (1) 编辑

【CSS3初探之变形与动画】令人惊叹的CSS3

摘要: 前言这个标题比较狗血了，我一直知道CSS3可以做很多事情，但是我昨天看到一个人用CSS3华丽的画了一个太极八卦！若是这个还可以接受，那么我今天就看见一个人用CSS3画了一个叮当猫！！！我突然就在想，你们究竟要闹哪样，实在太BT了！我在想我最近几天是不是应该试试呢？虽然我CSS比较水了。。。CSS3中的变形在CSS3中，可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种变形处理。transform基础知识在CSS3中，通过transform属性来达到功能需求，我们这里来看一个例子：<html xmlns="http://www.w3.org/1999/ 阅读全文

posted @ 2013-04-27 11:49 叶小钗阅读(1289) | 评论 (9) 编辑

摘要: PS:注意标题党哦前言本章主要介绍CSS3中与背景和边框相关的一些样式，其中包含与背景相关的属性，比如如何在一个元素背景中使用多个图片文件，如何绘制圆角边框以及如何给边框添加图片。这章的知识点都是很有意义的，是我们一定会用到的知识点，所以学习本章内容后需掌握：1 背景相关属性：background-clip、background-origin、background-size以及background-break2 如何在背景中使用多个图片完成负责背景的图像绘制3 设计圆角4 图像边框PS：奇葩的一天：今天算是我工作这么久以来最奇葩的一天，因为今天发生了两件事情：1 传说中的leader主动找我吵阅读全文

posted @ 2013-04-24 22:56 叶小钗阅读(1658) | 评论 (17) 编辑

【CSS3初探之盒相关样式】我们一人一个框。。。

摘要: 前言本章将介绍CSS3中各种盒的知识点；主要包含以下内容：CSS3中各种各样盒的类型概念、浏览器支持情况；当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示；掌握给盒添加阴影的属性；掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度；盒的类型inline-blockcss中我们使用display来定义盒的类型，总体上分为block与inline类型。css2.1追加了一个盒类型：inline-block，他属于block类型之一，但在显示上具阅读全文

posted @ 2013-04-23 20:17 叶小钗阅读(225) | 评论 (2) 编辑

【CSS3初探之字体、文本相关】让人开不了始的CSS3。。。

摘要: 前言2010年MIX大会上微软的工程师在介绍IE9时，以前端角度讲互联网发展分为了三个阶段：1 以内容为主的web1.0网络，前端主流技术为html与css2 以ajax为首的异步数据加载技术，热门技术是js/dom/异步数据请求3 便是即将迎来的HTML5+CSS3的时代PS：我记得大概08年的时候，ajax便在大事宣扬，但我私下发现周围会的人真心不多，应用也不多！！！到今天5年过去了，你页面不是ajax的都不好意思拿出来说，于是我在想5年后若是页面不是html5的，好意思拿出来说吗？？？因为，我css水平比较水，所以学习CSS3时候也顺便复习下css2的东西，真是一举两得啊！因为这个系列都阅读全文

posted @ 2013-04-22 23:29 叶小钗阅读(999) | 评论 (6) 编辑

【HTML5初探之Geolocation API】让我们获取女神的地址

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-20 20:30 叶小钗阅读(986) | 评论 (7) 编辑

【HTML5初探之Web Workers】网页也能多线程

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-20 17:09 叶小钗阅读(829) | 评论 (1) 编辑

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-20 14:20 叶小钗阅读(1089) | 评论 (5) 编辑

【HTML5初探之离线应用】如何打造零请求、无流量的网站？

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-20 13:00 叶小钗阅读(348) | 评论 (5) 编辑

【HTML5初探之本地存储】如果没有数据库。。。

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-19 17:19 叶小钗阅读(1108) | 评论 (7) 编辑

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-19 14:42 叶小钗阅读(237) | 评论 (2) 编辑

【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面

摘要: 接上一篇：【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不阅读全文

posted @ 2013-04-19 12:02 叶小钗阅读(701) | 评论 (5) 编辑

【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

摘要: 弧度一块可能有误，需要再研究导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多阅读全文

posted @ 2013-04-17 22:17 叶小钗阅读(562) | 评论 (1) 编辑

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-16 23:04 叶小钗阅读(1000) | 评论 (0) 编辑

【初探HTML5之使用新标签布局】用html5布局我的博客页！

摘要: 导航【初探HTML5之使用新标签布局】用html5布局我的博客页！【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？【HTML5初探之本地存储】如果没有数据库。。。【HTML5初探之离线应用】如何打造零请求、无流量的网站？【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦【HTML5初探之Web Workers】网页也能多线程【HTML5初探之Geo 阅读全文

posted @ 2013-04-16 13:32 叶小钗阅读(1160) | 评论 (6) 编辑