標簽歸檔：CSS

網站灰黑白色CSS濾鏡代碼 全國哀悼日

由 發表于 ┊1,668 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,341 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,129 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,845 PV

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

1 . position:static：

網頁各個單元的默認位置，這意味著該單元的位置通常不發生變化。在一般情況下，你不需要特別對它進行設定，除非你需要指定先前已經確定的另一個位置。

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

效果：
01.jpg
繼續閱讀 →

用 CSS 打造一個惟妙惟肖的網頁版蘋果工具條！

由 發表于 ┊2,369 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,735 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,714 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,521 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,779 PV

這半個月以來今天是頭一天在20:00左右下班，想起關于這個教程一直沒有完成，心里感覺非常不踏實。兩個月前剛辭職，本想把教程全部完成，但是由于一次不幸，導致硬盤中的數據大部分丟失，本寫了一半的教程也隨之灰飛煙滅。但最近有許多的網友通過博客、QQ、MSN、E-MAIL等途徑與我聯系，希望能繼續更新這個教程，甚至有網友居然撥打我的手機(我不知道大家是如何知道我的號碼的，，哎~~)被大家所感動，時間雖然很緊，但還是抽點時間來盡量完成這個教程吧~~就像鯨魚叔叔所說的，時間就是奶，越擠就越多~~

首先，有些東西需要說明一下。對于之前的文章，由于為了讓大家更好的區分各層的關系，教程中不少地方使用了大寫的CLASS或者ID，其實這樣做是不推薦的，我推薦的方法是使用單詞之間增加下劃線，或者單詞拼接的方法。因為CSS是區分大小寫的。大家可以看到，我提供給大家的下載文件中全部都是使用小寫來處理的。

我們先來處理sidebar的樣式，經過分析，我們可以得知，sidebar有四個部分，我們將這四個部分分為四個層：

繼續閱讀 →