代码改变世界

随笔分类 -  css

如何理解 web 语义化?

2013-02-18 19:26 by lefan, 1639 阅读, 收藏,
摘要: 语义化简单说来就是让机器可以读懂内容,语义网是让机器可以理解数据 HTML是联系大多数Web资源的纽带,也是内容的载体。在Web被刚刚设计出来的时候,可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单:用来发布Web内容和资源的索引,方便人们查看。但是随着Web规模的不断扩大,信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理Web上发布的各种内容,搜索引擎就诞生了。再后来,人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂Web上发布的各种内容就变得越来越重要。语义网技术,它包括一套描述语言和推理逻辑。它包通. 阅读全文

CSS3 动画按钮

2013-01-13 21:26 by lefan, 311 阅读, 收藏,
摘要: 做一款动画按钮效果,主要是学习CSS3的一些效果。在Chrome,Firefox 和 Safari 浏览器中效果最佳。 HTML 部分对应的class为praticle,代码如下:1 <section>2 <div class="particle"></div>3 </section> 这些精美的效果用到了 CSS3 border-radius(圆角)、box-shadow(阴影)、transition(变形)、transform(转换)和 animation(动画)等特性,精简以后的代码如下: 1 section > 阅读全文

CSS3 范爷图库

2013-01-11 23:48 by lefan, 203 阅读, 收藏,
摘要: 瀑布流式布局是目前比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。 参考堆糖的瀑布流做了范爷图库demo:范爷图库代码来源:堆糖代码 阅读全文

学习CSS 制作Contact Form

2013-01-11 22:08 by lefan, 254 阅读, 收藏,
摘要: 在博客中一般都会有个的留言栏。在这些联系表单多少一些CSS代码组成,可供学习也很容易入手。demo:留言用户名: 请输入您的用户名邮箱: 请输入您的邮箱留言: 请写下您的留言如果你有任何相关问题,请联系lefan 阅读全文

CSS box-shadow

2013-01-09 21:38 by lefan, 351 阅读, 收藏,
摘要: 先来看box-shadow的浏览器兼容性,Opera已经支持box-shadow属性。firefox通过私有属性-moz-box-shadow支持。Safari和Chrome通过私有属性-webkit-box-shadow支持。box-shadow有六个可设值: img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 }1. 阴影水平偏移量:如果该参数为正值,则阴影在box的右边;如果该参数为负,则阴影在box的左边2. 阴影垂直偏移量:如果该参数为正值,则阴影在box的底部;反之,则在box顶部3. 阴影模糊距离(大小):此参数可选,只能是正值。如果该参数值 阅读全文

实现一个简单编辑器

2013-01-08 21:59 by lefan, 208 阅读, 收藏,
摘要: 需提供以下功能:字体加粗;文本左对齐、右对齐、居中;设置字体; 设置字号; 设置字体颜色; 插入超链接; 插入图片.demo: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html" charset="gb2312" charset="utf-8"/> 5 <title>编辑器</title> 6 <script s 阅读全文

CSS border-radius

2013-01-07 22:29 by lefan, 471 阅读, 收藏,
摘要: CSS3属性:border-radiusborder-radius:none| <length>{1,4} [ / <length>{1,4} ]?相关属性border-top-right-radius ,border-bottom-right-radius ,border-bottom-left-radius ,border-top-left-radius取值:<length>:由浮点数字和单位标识符组成的长度值。不可为负值。border-top-left-radius:由浮点数字和单位标识符组成的长度值。不可为负值。说明:第一个值是水平半径。如果第二个值 阅读全文

用Firefox OS 开发个Webapp

2013-01-03 21:23 by lefan, 269 阅读, 收藏,
摘要: 看了Ruth John的LET'S MAKE A FIREFOXOS APP ,URL”http://12devsofxmas.co.uk/post/2012-12-27-day-2-lets-make-a-firefoxos-app”按照步骤做了个Webapp,不过图片可能有点问题,明天看看能不解决,但是这过程也让我很欣喜。 Ruth is the Unicorn Trainer for The Lab at O2. Where, with ten years in the industry, she heads up uxing, designing and front end c 阅读全文

CSS布局入门--应用Block Formatting Context

2012-12-30 20:08 by lefan, 412 阅读, 收藏,
摘要: 如何实现一个左图右内容的显示效果,写出html和css(见下图)。方案11 <table>2 <tr>3 <td valign="top" class="imgtd">4 <a ...><img ...></a>5 </td>6 <td valign="top">...</td>7 </tr>8 </table> html结构丑陋,但css简单。方案2 1 <div class="twit 阅读全文

用Web技术开发客户端(一)

2012-12-27 20:35 by lefan, 1684 阅读, 收藏,
摘要: 范怀宇(@duguguiyu)分享了《豌豆荚2.0重构时遇到的坑》,其中有段用“Web的思想”做PC客户端,引起了我强烈的好奇,通过慢慢消化,也使我对豌豆荚、Web、开源,有了新的认识。一、用“Web的思想”做PC客户端“全新的豌豆荚2.0的架构其实看上去和Web应用比较相似。前端页面主要基于Webkit内核,用Html、CSS、JS的技术绘制界面,满足标准的Web规范,甚至可以跑在Chrome上来测试。其他需要和Windows的一些原生效果比较相似的界面部分,我们从Chromium中抽取了一套UI框架来构建。在后端的逻辑主要分成两个部分,一个是平台层,提供基础的功能服务,比如说与手机通信,和 阅读全文

用java做坦克大战--主要类和基本功能实现

2012-12-27 20:20 by lefan, 2509 阅读, 收藏,
摘要: 1.坦克大战总体功能设计1.1 TankClient TankClient类是客户端的主类,它承担整个系统的所有功能的调度工作,是游戏运行的界面。它有三个线程,主线程负责对窗口和键盘的监听;PaintThread线程负责对界面的重画;ControlThread负责对游戏中的事件响应。主要方法和属性有: public static final int GAME_WINDOW_WIDTH= ; 窗口宽度 public static final int GAME_WINDOW_HEIGHT = ; 窗口高度 public static final int GAME_WIDTH = ; 游戏界面宽.. 阅读全文