标签归档：CSS

网站灰黑白色CSS滤镜代码 全国哀悼日

由 发表于 ┊1,616 PV

根据国务院文件，5.19-5.21为全国哀悼日，在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5 月19日14时28分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。并建议中国所有站 点更换为素装。国务院决定5月19日至21日为全国哀悼日，为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。

1
html { filter: gray; }

或者

1
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

　　如果网站没有使用CSS，可以在网页/模板的HEAD之间插入：

1
2
3
4
<style type="text/css">
<!--
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
--></style>

V2EX所用的CSS圆角代码

由 发表于 ┊2,316 PV

不支持IE浏览器，代码如下：

1
2
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

单独控制四个角

1
2
3
4
-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;

如何让IE6-IE7-FF的CSS样式一致

由 发表于 ┊2,034 PV

现在主流的浏览器分别是：Internet Explorer 6， Internet Explorer 7和Firefox 2。这让我们在网站设计中不得不考虑如何使样式“crossover”。这里介绍一个较为简单的方法使样式的显示效果在上述三种浏览器中保持一致。

首先我们针对Firefox 2设计了如下的样式代码：

1
#MyDiv { margin : 10px 10px 10px 10px; }

然后针对Internet Explorer 6进行样式修改，使用如下的代码语句，该代码只能被 IE 6 识别：

1
2
/* IE6 Only */
* html #MyDiv { margin : 5px 5px 5px 5px; }

最后针对Internet Explorer 7进行如下样式修改，该代码也只能被 IE 7 识别：

1
2
/* IE7 Only */
*:first-child+html #MyDiv { margin : 2px 2px 2px 2px; }

通过上面的方法，你应该能够让你的设计样式更具通用性了。

转自Smartr.cn

10 步学习如何进行 css 定位

由 发表于 ┊1,832 PV

我们今天来探讨一下不同的 css 布局特性，包括：position:static, position:relative, position:absolute, 等等。

1 . position:static：

网页各个单元的默认位置，这意味着该单元的位置通常不发生变化。在一般情况下，你不需要特别对它进行设定，除非你需要指定先前已经确定的另一个位置。

1
2
3
#div-1 {
position:static;
}

效果：
01.jpg
继续阅读 →

用 CSS 打造一个惟妙惟肖的网页版苹果工具条！

由 发表于 ┊2,314 PV

如果你是大苹果的粉丝，你一定会爱上这款由 CSS 打造的苹果工具条（dock menu，效果预览），原文作者原创，原文会手把手教你打造！该工具条使用了 Jquery 这个轻量级 Javascript 类库（很多 AJAX 效果哦）提供的接口，Interface 提供的界面组件和原作者的原创 Icon。　　这款 CSS dock menu 是为了用在作者打造的 WordPress 皮肤 iTheme 上的，不用我多说，大家都猜到了吧：一款模仿苹果的 WP 主题。

该皮肤支持 widgets ，侧边栏支持拖拽，适合WordPress 2.0 和 2.1，适合以下浏览器：IE, Firefox, Safari, Opera。

想看原文教程呢，请点击这里，想下载 CSS dock menu呢，这里。
Insert code
In between the HTML <head> tag, add the following code

1
2
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
1
 <link href="style.css" rel="stylesheet" type="text/css" />
1
2
3
4
5
 <!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

继续阅读 →

一些DIV+CSS 命名规范

由 发表于 ┊1,726 PV

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footet
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
继续阅读 →

3个小工具

由 发表于 ┊2,703 PV

1.CSS Creator
这个小工具可以为您可视化的制作theme的框架结构，包括doctype、外形(满屏，居中，靠左)、最小宽度、最大宽度、头部、左右栏、底部等的基本CSS定义。设置完毕以后点击Generate Layout便会生成HTML和CSS文件，右键另存为即可使用了。
总的来说，对于CSS初学者还是很有用的，因为初学者对一些margin、float可能搞不懂，使得左右栏这样的布局无法实现。这个小工具仅仅是各出一个基本的框架结构，生成的CSS文件还需要进一步的完善。比如说，你要加入你的配色。

2.kuler
布局完成以后，我们就需要考虑theme的色系了，凭空的想像是很难得，使用这个小工具可以为你节省冥思苦想的烦恼。而且网站还列出了一些优秀的配色方案，值得借鉴。需要注册。

3.Stripe Generator
有些时候，我们对一些区域，比如说背景，不仅仅需要一些颜色的装饰，可能会需要一些条纹？但PS等制图软件又不会，这时该怎么办？使用Stripe吧，通过Stripe可以更具自己的需要选择背景色，背景样式，条纹色，条纹的形状，条纹间距和宽度等，而且生成的条纹可以实现无缝连接，免去一些考虑是否无缝的苦恼。

转自www.wp-theme.cn

分享收藏的CSS+DIV陈列馆网站

由 发表于 ┊2,482 PV

学习程序最好的方法是查看别人的原代码，学习CSS也一样，这篇文章介绍最人们的CSS网站收集站点，行话叫CSS陈列馆（showcase），[专录]网站设计师必看，必收藏，毕学习

　　http://www.csszengarden.com/
　　CSS禅意花园是最富盛名的CSS设计陈列馆，Dave　Shea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式，却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台，看看禅意花园的

　　http://www.cssvault.com/
　　Cssvault是第一个以网站缩略图的方式呈现的优秀设计的网站，而CSS陈列馆（showcase）这一说法也是由这里开始，从开始至今大约一年的时间里面，收录了大量的优秀设计，是CSS设计师必去的网站之一。

　　http://www.webstandardsawards.com/
　　Web Standards Award，顾名思义，这里也是收集符合“网页标准”设计的网站，除收集外，还对每月收集来的网站进行评选，获胜设计可以冠以当月“网页标准”设计奖的头衔，对于设计师来说，也是一种殊荣。

　　http://www.unmatchedstyle.com/
　　这个网站是最新出炉的一个CSS陈列馆，和前面介绍的几个网站大同小异，也是采用缩略图的方式呈现，当然每个网站收集者的审美特征都不同，多一个地方无疑也给钟情于CSS设计的朋友多了一个选择，而且他们的更新很勤快。

继续阅读 →

DIV+CSS布局入门教程(六)

由 发表于 ┊1,725 PV

这半个月以来今天是头一天在20:00左右下班，想起关于这个教程一直没有完成，心里感觉非常不踏实。两个月前刚辞职，本想把教程全部完成，但是由于一次不幸，导致硬盘中的数据大部分丢失，本写了一半的教程也随之灰飞烟灭。但最近有许多的网友通过博客、QQ、MSN、E-MAIL等途径与我联系，希望能继续更新这个教程，甚至有网友居然拨打我的手机(我不知道大家是如何知道我的号码的，，哎~~)被大家所感动，时间虽然很紧，但还是抽点时间来尽量完成这个教程吧~~就像鲸鱼叔叔所说的，时间就是奶，越挤就越多~~

首先，有些东西需要说明一下。对于之前的文章，由于为了让大家更好的区分各层的关系，教程中不少地方使用了大写的CLASS或者ID，其实这样做是不推荐的，我推荐的方法是使用单词之间增加下划线，或者单词拼接的方法。因为CSS是区分大小写的。大家可以看到，我提供给大家的下载文件中全部都是使用小写来处理的。

我们先来处理sidebar的样式，经过分析，我们可以得知，sidebar有四个部分，我们将这四个部分分为四个层：

继续阅读 →