海涛的部落格
分类 Category : 网页设计

各种浏览器css hack

<Category: 网页设计> 2 条评论

你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下:

IE都能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important;
IE7能识别*,也能识别 !important;
IE8能识别\0,不能识别*,+,_,*加!important;
FF不能识别*,但能识别 !important;
例如style=”*width:10px!important; width:20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px

其中还有三种写法:

1种:
width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
*width:300px!important; /* ,IE7 既能能识别*号,也能识别important */
*width:400px; /* IE6也能识别*号 */
/*注意顺序 */

2种:
width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
*width:300px; /* IE7也能识别*号 */
_width:400px; /* IE6能识别下划线*/
/*注意顺序 */

3种:
width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
+width:300px; /* +只识别IE7 */
_width:400px; /* IE6能识别下划线*/
/*注意顺序 */

阅读这篇文章的其余部分 »

本文来自: 各种浏览器css hack

跨浏览器的CSS固定定位(position:fixed)

<Category: 网页设计> 发表评论

IE7、Firefox、Opera,都支持CSS的{position:fixed},所以很容易实现(《详解定位与定位应用》)
IE6不支持该属性,但是在使用!DOCTYPE 声明指定standards-compliant(标准)模式可以通过CSS hack实现
上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案,但是可以通过IE特有的expression在CSS中实现(移动网页时固定元 素会动),这和常见浮动Logo广告利用Javascript实现原理是一样的,只不过可以直接写在CSS中比较简便的
利用IE独有的条件注释语句可以针对不同的IE版本精确设置,同时避免了这些代码被其他浏览器读到,个人认为比纯粹的CSS Hack好,如果你安装了多个IE(包括绿色版本),条件注释将会以最高版本的IE为标准。

阅读这篇文章的其余部分 »

本文来自: 跨浏览器的CSS固定定位(position:fixed)

FastStone Capture

<Category: 网页设计> 发表评论

FSCapture是一款抓屏工具,附带的其他两个小功能:取色器和屏幕放大镜。对抓取的图像提供缩放、旋转、减切、颜色调整等功能。只要点点鼠标就能随心抓取屏幕上的任何东西,拖放支持可以直接从系统、浏览器或其他程序中导入图片。

取色器
现在网上各式各样的取色器应该不少了,包括之前一直用的蓝色经典推荐的ColorSPY, Firefox下还有一个专门的取色器扩展ColorZilla,这些都是很好的软件。但自从使用了FS Capture之后,这些我都很少用到了。原因很简单,各种取色软件的功能都大同小异,FS Capture非常小巧,既然有这样一个小软件能够包含取色器、屏幕放大镜和截屏的功能,为什么还要为这些功能而分开多个软件呢。FastStone Capture的取色支持RGB、Dec和Hex三种格式的色值,而且还有一个混色器,取到颜色之后可以再编辑。
阅读这篇文章的其余部分 »

本文来自: FastStone Capture

CSS在Internet Explorer 6, 7 和8中的差别| CSS| 前端观察

<Category: SEO和SEM, 网页设计> 发表评论
中文原文:CSS在Internet Explorer 6, 7 和8中的差别
译自:CSS Differences in Internet Explorer 6, 7 and 8
版权所有,转载请注明出处,多谢!

关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存。截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区,这个数字要小很多,统计显示大概只有40%

ie
阅读这篇文章的其余部分 »

本文来自: CSS在Internet Explorer 6, 7 和8中的差别| CSS| 前端观察

50款CSS工具

<Category: 网页设计> 发表评论

50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。

网格和布局

The 1KB CSS Grid

新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用。

Variable Grid System

基于 960px 的常规CSS网页布局工具,用于快速生成基本的 CSS 网格。

Grid Designer 2

可控性强,选项丰富的网格系统,支持 CSS 在线即时输出。

Design By Grid PNG Grid Generator

生成用于CSS网格的 PNG 图片,以方便地用作 PSD 或 HTML/CSS 设计背景,免除手工制作网格的麻烦。

nP: Grid Generator

用于设计布局结构,制定列、边缘、间距等参数。

YAML Builder

可视化,快捷的标准 XHTML 页面框架生成工具,但对 IE6 兼容欠佳。

GRIDINATOR

简单定制基于网格的CSS布局工具,可自定义多种参数。

Grid System Generator

生成适用于 960.gs,Golden Grid,1KB Grid 的网格布局,也可生成基本的通用网格。

YUI: CSS Grid Builder

来自 Yahoo 的网格工具,用于创建基础布局,统一浏览器表现。

Blueprint Grid CSS Generator

帮助你创造更灵活的 CSS 蓝图,包括 grid.css、compressed.css 和 grid.png 文件。

CSS Grid Calculator

快速设计页面布局,以多种方式构造网格。对于页面元素在浏览器中的表现方式,提供了精确的视觉反馈。
阅读这篇文章的其余部分 »

本文来自: 50款CSS工具

网页css设计命名规范

<Category: IT文摘, 网页设计> 发表评论

原载:彬Go

这套规范并非单纯的CSS、html或JavaScript命 名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。首先我是出于公司几位美 工的设计效果图源文件没有对图层命名而开始考虑总结一套的,还有一个原因就是网上大多命名规范都是关于编码的,也就是那些css、html、js和一些服 务器端语言的,至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员,而且前端开发工程师是要使用设计师的效果图源文件的,所以统一命名 规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。

Web UI 设计命名规范

一.网站设计及基本框架结构:

网页设计-命名规范

阅读这篇文章的其余部分 »

本文来自: 网页css设计命名规范

最常用的12种CSS BUG解决方法与技巧

<Category: 网页设计> 发表评论

CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6 与IE7在很多问题上也存在着很大的差别。在52CSS.com大量的技术文档中,也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技 能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助,如果您依然有疑问,欢迎您到 52CSS.com查阅、搜索相关内容。
阅读这篇文章的其余部分 »

本文来自: 最常用的12种CSS BUG解决方法与技巧

全球精选50个超牛的网站

<Category: 网页设计> 发表评论

              1,亲自动手给美女画纹身 http://www.crustydemons.co.uk/UK/tattoo_parlour/index.html
    
    2,一张纸能够折出多少种小动物?非常好玩的创意折纸 http://www.crabs.net.cn
    
    3,超有意思的Flash网站,虚拟办公 http://agencynet.com
    
    4,输入文字就发出声音! http://www.putonghuaonline.com
    只支持繁体中文,同时也是学习普通话和粤语的好地方
     阅读这篇文章的其余部分 »

本文来自: 全球精选50个超牛的网站

页面跳转代码

<Category: 网页设计> 发表评论

javascript代码

<script language=”javascript”>
window.location = “http://www.baidu.com”;
</script>

或者

<script language=”javascript”>
document.location = “http://www.baidu.com”;
</script>

php代码

<?php
header(”location: http://www.baidu.com”);
?>

Servlet中的跳转

RequestDispatcher rd = request.getRequestDispatcher(request.getContextPath() + “/jump_target.jsp”);
rd.forward(request, response);

本文来自: 页面跳转代码

添加了feedsky的订阅

<Category: 网页设计> 发表评论

很方便能把国内流行的大部分的订阅网站按钮添加到上面,这个应该是国内最好的一个rss feed发布网站了。
还有可以发广告赚钱,说是要验证代码:9105f60d。
先试试……

本文来自: 添加了feedsky的订阅