HTML/CSS
关注
分享
扫一扫
tigerpassion
这个作者很懒，什么都没留下…
展开
-
Price组件
<span class="price"> <span class="value">US $12.63 - 13.89</span> <span class="separator">/</span> <span class="u原创 2012-03-12 23:20:13 · 315 阅读 · 0 评论 -
HTML 5 新增元素
万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要（RSS）阅读器这类浏览器特性上。Web 设计人员开始学习使用异步 JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 Java...原创 2009-04-13 17:07:42 · 274 阅读 · 0 评论 -
把Google图书嵌入到网站中
把Google图书嵌入到网站中，或许大家还不知道吧，现在有办法啦。google给出了api，可以通过以下代码就可以产生一个基本的预览widget:例如：hVFxxxQYN-cC是Google图书里面的ID,可以通过url（http://books.google.com/books?id=hVFxxxQYN-cC）得到. 代码如下： <script type=”text/j...原创 2008-09-25 10:24:38 · 268 阅读 · 0 评论 -
打印web页面
打印HTML文档总是会出现问题。在CSS2中，我们可以借助打印属性让打印web内容更容易一些。page : auto | pagetype page-break-after : auto | always | avoid | left | right | null page-break-before : auto | always | avoid | left | righ...2008-02-09 14:32:28 · 134 阅读 · 0 评论 -
符合web标准的flash调用方法，解决了浏览器对flash的影响
SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的 HTML、XHTML中出现object、embed等非...2009-03-10 14:32:53 · 266 阅读 · 0 评论 -
表格样式的应用——对程序员比较有用（三）
基于表格样式的应用的扩展，有时我们也可以通过 unorder list 和 list item 来实现表单的结构化。【例三】 [align=center][img]http://tiger-passion.iteye.com/upload/picture/pic/32395/76cade93-b31c-30d3-aa61-b5ef792e0201.jpg[/img]用ul来实现三列...2009-03-03 13:56:31 · 127 阅读 · 0 评论 -
表格样式的应用——对程序员比较有用（二）
前一篇文章主要列出了table所有的HTML Tag和CSS Properties；接下来我们来看下两个例子看如何来灵活应用它们。用table来结构化表单内容：【例一】[align=center][img]http://tiger-passion.iteye.com/upload/picture/pic/32389/98ce8832-3a40-3f5e-b6fa-15d80...2009-03-03 11:51:22 · 144 阅读 · 0 评论 -
表格样式的应用——对程序员比较有用（一）
[b]table [/b]所有的[b]HTML Tag[/b][code="html"] table caption Food Drink Sweet A B C ...2009-03-03 11:25:40 · 178 阅读 · 0 评论 -
浏览器兼容的一套hack
通过ie注释来区分IE浏览器版本 除IE外都可识别 在IE注释之前调用样式,该样式是指标准样式,通常也可说ff下浏览的样式,在ie注释之后采用以下方式可引用专门针对opera下的浏览样式.如:/* opera styles */ @media all and (min-width:0px){ @import "print.css" BODY {font-size:...2007-11-05 15:48:16 · 79 阅读 · 0 评论 -
yahoo 正向google奋进
yahoo的邮箱正一步步向google 转变,自yahoo推出无限量以来,渐渐的有不少用户的眼球开始被吸引过来,但yahoo的邮箱在功能和体验到底又如何呢? 首先我们可以看看之前yahoo的邮件, 顶部有个大大的广告banner的,其它的设计都比较简洁,走的是朴素风格的路线,采用了panel式功能模块切换, 同时也将相册和空间整合进来,这点以及...2007-11-05 15:16:36 · 197 阅读 · 0 评论 -
Ajax: A New Approach to Web Applications
by Jesse James GarrettFebruary 18, 2005If anything about current interaction design can be called “glamorous,” it’s creating Web applications. After all, when was the last time you heard someone...原创 2007-09-14 10:01:38 · 108 阅读 · 0 评论 -
区别 ff, ie7.0, ie6.0浏览器
1.*+html 与 *html 是IE特有的标签, firefox 暂不支持，而*+html 又为 IE7特有标签。因此便可以很方便的得到一个针对于FireFox、IE6、IE7三种不通浏览器的hack实例代码如下：<o:p></o:p> <html> <head> <style> ...2007-09-11 14:26:49 · 128 阅读 · 0 评论 -
web页面打印
打印属性<o:p></o:p>打印HTML文档总是会出现问题。在CSS2中，我们可以借助打印属性让打印web内容更容易一些。<o:p></o:p> 属性<o:p></o:p> ...2007-09-11 14:14:18 · 150 阅读 · 0 评论 -
(续)精彩导航
对上述的导航菜单都简单浏览了一遍,挑选了几个比较喜欢用自己的方式实现了下! 发现其实挺简单的,无非就是想法和设计不错,不过往往我们国内设计师缺的就是这些...css 代码 /* menu Theme */ @import url(basestyle.css); @import url(baseframe.css); ...2007-09-11 13:51:46 · 140 阅读 · 0 评论 -
精彩导航汇总
今天在52css上逛了下,有不小的收获,站内提供的一些很好的资料可供学习网页制作的人作参考.以下是站点归纳出来的53个精彩导航菜单.对菜单感兴趣的人可以研究研究.1. Change.org 2. N.Design Studio | Design & Blog 3. Good Creative - Web and Graphic Design 4. MacRabbit ...2007-09-11 13:35:46 · 777 阅读 · 0 评论 -
小区域图形背景整合时出现的间隙问题
css 代码 .btop{ width:900px; height:10px; background:url(images/napic/top.jpg) no-repeat top left; } .bbottom{ width:900px; heig...2007-07-03 15:49:12 · 129 阅读 · 0 评论 -
XHTML 简史及XHTML V2 背后的设计理念
[b]XHTML 简史[/b]理解 XHTML V2 背后隐藏的设计理念需要了解一点历史。20 世纪 90 年代初，第一个 HTML 版本是基于标准通用标记语言（SGML）的。主要的区别在于超链接特性 — 万维网的关键基础和成功因素。和 SGML 一样，HTML 允许作者描述文档的结构，把头部和段落、有序列表、无序列表分开。在屏幕上的显示结果和浏览器有关。随着 Web 日渐普及，H...原创 2009-04-13 17:32:34 · 122 阅读 · 0 评论 -
网页字体的定义
网页中常用的字体定义：font-family: Arial,Verdana, Helvetica, sans-serif;也可以是引入外部字库来定义字体（更灵活的方式），@font-face {font-family: "Kimberley";src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype...2008-03-11 10:35:54 · 282 阅读 · 0 评论 -
Firefox 3 Beta 4已完成测试，Firefox 3最终版本也即将完成
Mozilla表示，在经过几个月的开发之后，Firefox 3试用版已经推出。 Mozilla负责工程研发的副总裁迈克·斯科罗普夫(Mike Schroepfer)称：“Firefox 3在很多方面都比其他浏览器更加稳定。”他表示，Mozilla工程师仍在对Firefox 3进行最后的测试和完善，有望在6月底以前推出最终版本. Ars Technica上的一篇文章中对Firefox 3 ...2008-03-22 14:02:13 · 145 阅读 · 0 评论 -
HTML5 postMessage
在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。 可以通过绑定window的message事件来监听发送跨文档消息传输...原创 2011-06-30 17:57:51 · 203 阅读 · 0 评论 -
使用html5和css3开发的3D版俄罗斯方块和机器猫
3D版俄罗斯方块：这是一款新颖的俄罗斯方块，跟传统的俄罗斯方块相比，玩法并没有太大的改变。然而，它以3D的方式展示在用户眼前。题目强调是HTML5和JavaScript。虽然html5是新技术，但没有JavaScript，它并不是那么强大。http://www.benjoffe.com/code/games/torus/机器猫：通过使使用CSS3，并非图片来实现机器猫的”图像“...原创 2010-10-17 22:32:22 · 225 阅读 · 0 评论 -
通过ifame的方式来实现加载Google Doc
通过iframe在自己网页中加载Google Doc非常简单，只需知道Google Doc的URL地址。例如： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm...2009-06-22 14:52:18 · 173 阅读 · 0 评论 -
在网页中加载Google Map
其实想要在自己的网页中加载Google Map很简单 以下是调用google map的页面： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"...2009-06-22 14:34:58 · 133 阅读 · 0 评论 -
wmode属性介绍
wmode 属性参数值有Window | Opaque | Transparent eg).<param name="wmode" value="Opaque"> 说明“Window” 在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。 “Opaque” 使应...2008-12-11 14:34:24 · 1165 阅读 · 0 评论 -
IE6 problem with LI spacing when display:block
#menu ul li a { padding-right: 20px; padding-left: 5px; font: normal normal 14px Verdana, Arial, sans-serif; /* STUpid f***ing browser alert! IE6 cannot handle this */ display: blo...2008-12-04 17:13:14 · 107 阅读 · 0 评论 -
由图形化按钮引出的相关hack
原文转自 小麦 http://www.mikkolee.com/73图形化按钮，就类似这个样子的：当然，它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮，而是怎么在网页里把它做出来。这里要提几个要求：A. 语义化。如果这个按钮叫“完成注册”，就要在HTML中写出这四个字，以保证只读HTML的情况下也知道这个按钮是什么文字。B. display:inl...原创 2008-12-03 16:19:07 · 140 阅读 · 0 评论 -
ie6 背景图片出不来
在IE6下,隐藏的浮层在重新显示后，部分区域背景图片显示不出来.在网上查了下,说是因为:IE6下默认不缓存背景图片.可用下方法来解决(让IE6缓存背景图片):在head区（即<head>到</head>之间添加以下代码：CODE:<!--[if IE 6]><script type="text...2009-11-25 21:01:28 · 162 阅读 · 0 评论 -
Firefox特有css扩展样式列表
Mozilla浏览器支持一些扩展的CSS是以-moz开头的。这些措施包括了一些功能，包括圆形边界，并能够指定不同的方块的宽度和高度的计算，在非标准方式下，这种css在Mozilla浏览器下执行计算更容易得到支持。 有些特性在后来被提议列入的CSS规范，但标准的属性与-moz属性还是有些不同。 其中一些非标准属性只适用于Mozilla浏览器。At-rules * @-moz-d...2009-05-13 16:23:36 · 339 阅读 · 0 评论 -
css hacks中的最小属性选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> <head> <title>Test</title> </head2009-05-13 12:16:43 · 123 阅读 · 0 评论 -
css hacks 中的 if注释
if条件是css hacks中经常会使用到一种hack，其语法归纳如下:指定条件格式<!--[if condition]> HTML <![endif]-->非条件格式<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->...2009-05-13 11:35:46 · 180 阅读 · 0 评论 -
MIME类型导致css在Firefox下无效
最近十分郁闷，原因是Firefox出问题了，无法正确的载入CSS，CSS完全失效，让我无法测试很多东西。 查看CSS路径，完全是正确的，也是用的标准的<link rel="stylesheet" type="text/css" href="XXX" />的写法。但是在我公司的服务器上老是有问题，页面看起来像是CSS完全失效了，而IE、Safari之类的则是完全正常，静态页面在本地...2009-05-05 11:32:54 · 271 阅读 · 0 评论 -
图片阴影效果实现
图片或边框的阴影效果在web app中经常会意见，以下是归纳的几种简单的实现方法实现一：<style type="text/css"><!--/* easy drop shadow================================== */.img-wrapper { background: url(images/shadow.gif)...2009-05-05 10:22:42 · 210 阅读 · 0 评论 -
在Web 中嵌入图表
可以通过使用 JavaScript 库，CSS，Flash，Silverlight，PHP 库，服务器端的组件，也可以使用 Google Chart API 这样的 Web 服务。来实现在 Web 中嵌入图形图表JS Charts (JavaScript based chart generator)Protovis (visualization toolkit for JavaSc...2009-05-05 10:00:19 · 309 阅读 · 0 评论 -
可供选择CSS框架
在这里你有一个很酷的框架，收集创建的CSS布局。 如果你不喜欢框架，宁愿使用自己的手写代码以促进自己的发展，请跳过本篇文章。 我想有一个建设性的意见，那就是有选择的使用其优点避开其缺点。 就个人而言，我喜欢960grid，但我同样也喜欢blueprint和malo。 一般当我使用了一个框架，是因为我可以有一个快速得到我想要的网站，因为有一个好记的CSS类，因为我可以不用头疼于跨浏览...2009-05-05 09:50:09 · 195 阅读 · 0 评论 -
XHTML 和 DOCTYPE 切换
为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”（也叫“DOCTYPE 嗅探”）的功能。<o:p></o:p>引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开...2007-04-30 20:21:59 · 75 阅读 · 0 评论 -
*html/*+html的用途
*+html 与 *html 是IE特有的标签, firefox 暂不支持，而*+html 又为 IE7特有标签。因此便可以很方便的得到一个针对于FireFox、IE6、IE7三种不通浏览器的hack实例代码如下： css 代码 #wrapper { #wrapper { width: 120px; } /* FireFox */ ...2007-04-30 20:16:26 · 461 阅读 · 0 评论 -
样式引用的优先级
四种不同样式的引用优先级关系：1.直接定义标记的STYLE属性1.css 代码 "lh-col" style="background:#00ff00;"> 这类样式引用优先级是最高的通常可用来强制设置相应标签样式；2.定义内部样式表2.css 代码 "text/css"> #lh-col{ b...2007-02-15 16:45:15 · 249 阅读 · 0 评论 -
连续空格在IE与FIREFOX中的不同处理
原来IE和FIREFOX除了有些标准不同以外 ， 在处理功能上也存在着差别，IE对连续的&nbps不能进行换行处理，而 FIREFOX中可以，所以今天用IE打开是只能看带左边的，右边的全到下面去了，都是&nbps 也就是 “空格” 惹的祸...2007-02-15 00:35:07 · 109 阅读 · 0 评论 -
字体象素
字体所占象素高度 通常用line-height:20px;起实际的所处的位置上下距离不一致，下面总比上面要多出2px,所以通常在指定区域里要字体居中，可以采用如下办法：padding:5px 0 3px 0;css 代码 p{ line-height:21px;padding:5px 0 3px 0;} 这样一来文本才能实现真正意义上上下居中。...2007-02-12 23:59:56 · 122 阅读 · 0 评论 -
文本省略
text-overflow : clip | ellipsis 参数： clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...） 说明： 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 对应的脚本特性为textOverflow。请参阅我编写的其他书目。 css 代码 ...2007-02-12 23:57:34 · 106 阅读 · 0 评论