標(biāo)簽歸檔：CSS

網(wǎng)站灰黑白色CSS濾鏡代碼 全國(guó)哀悼日

由 發(fā)表于 ┊1,711 PV

根據(jù)國(guó)務(wù)院文件，5.19-5.21為全國(guó)哀悼日，在此期間，全國(guó)和各駐外機(jī)構(gòu)下半旗志哀，停止公共娛樂(lè)活動(dòng)，外交部和我國(guó)駐外使領(lǐng)館設(shè)立吊唁簿。5 月19日14時(shí)28分起，全國(guó)人民默哀3分鐘，屆時(shí)汽車、火車、艦船鳴笛，防空警報(bào)鳴響。并建議中國(guó)所有站 點(diǎn)更換為素裝。國(guó)務(wù)院決定5月19日至21日為全國(guó)哀悼日，為方便站點(diǎn)哀悼，特提供css濾鏡代碼，以表哀悼。以下為全站CSS代碼。

1
html { filter: gray; }

或者

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

使用方法：這段代碼可以變網(wǎng)頁(yè)為黑白，將代碼加到CSS最頂端就可以實(shí)現(xiàn)素裝。建議全國(guó)站長(zhǎng)動(dòng)起來(lái)。為在地震中遇難的同胞哀悼。

　　如果網(wǎng)站沒(méi)有使用CSS，可以在網(wǎng)頁(yè)/模板的HEAD之間插入：

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

如何讓IE6-IE7-FF的CSS樣式一致

由 發(fā)表于 ┊2,170 PV

現(xiàn)在主流的瀏覽器分別是：Internet Explorer 6， Internet Explorer 7和Firefox 2。這讓我們?cè)诰W(wǎng)站設(shè)計(jì)中不得不考慮如何使樣式“crossover”。這里介紹一個(gè)較為簡(jiǎn)單的方法使樣式的顯示效果在上述三種瀏覽器中保持一致。

首先我們針對(duì)Firefox 2設(shè)計(jì)了如下的樣式代碼：

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

然后針對(duì)Internet Explorer 6進(jìn)行樣式修改，使用如下的代碼語(yǔ)句，該代碼只能被 IE 6 識(shí)別：

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

最后針對(duì)Internet Explorer 7進(jìn)行如下樣式修改，該代碼也只能被 IE 7 識(shí)別：

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

通過(guò)上面的方法，你應(yīng)該能夠讓你的設(shè)計(jì)樣式更具通用性了。

轉(zhuǎn)自Smartr.cn

漂亮標(biāo)準(zhǔn)的CSS模板代碼

由 發(fā)表于 ┊5,847 PV

希望能書(shū)寫(xiě)簡(jiǎn)單而漂亮的CSS網(wǎng)站代碼嗎？Nice and Free CSS Templates 這個(gè)網(wǎng)站提供免費(fèi)的模板代碼，代碼均能通過(guò)W3C檢驗(yàn)。該網(wǎng)站提供12款模板代碼，基本上能滿足日常網(wǎng)站的設(shè)計(jì)樣式。有興趣的各位可以參詳下。

轉(zhuǎn)自Smartr.cn

10 步學(xué)習(xí)如何進(jìn)行 css 定位

由 發(fā)表于 ┊1,848 PV

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

1 . position:static：

網(wǎng)頁(yè)各個(gè)單元的默認(rèn)位置，這意味著該單元的位置通常不發(fā)生變化。在一般情況下，你不需要特別對(duì)它進(jìn)行設(shè)定，除非你需要指定先前已經(jīng)確定的另一個(gè)位置。

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

效果：
01.jpg
繼續(xù)閱讀 →

用 CSS 打造一個(gè)惟妙惟肖的網(wǎng)頁(yè)版蘋(píng)果工具條！

由 發(fā)表于 ┊2,393 PV

如果你是大蘋(píng)果的粉絲，你一定會(huì)愛(ài)上這款由 CSS 打造的蘋(píng)果工具條（dock menu，效果預(yù)覽），原文作者原創(chuàng)，原文會(huì)手把手教你打造！該工具條使用了 Jquery 這個(gè)輕量級(jí) Javascript 類庫(kù)（很多 AJAX 效果哦）提供的接口，Interface 提供的界面組件和原作者的原創(chuàng) Icon?！　∵@款 CSS dock menu 是為了用在作者打造的 WordPress 皮膚 iTheme 上的，不用我多說(shuō)，大家都猜到了吧：一款模仿蘋(píng)果的 WP 主題。

該皮膚支持 widgets ，側(cè)邊欄支持拖拽，適合WordPress 2.0 和 2.1，適合以下瀏覽器：IE, Firefox, Safari, Opera。

想看原文教程呢，請(qǐng)點(diǎn)擊這里，想下載 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]–>

繼續(xù)閱讀 →

一些DIV+CSS 命名規(guī)范

由 發(fā)表于 ┊1,737 PV

1.CSS ID 的命名
外　套：　　wrap
主導(dǎo)航：　　mainnav
子導(dǎo)航：　　subnav
頁(yè)　腳：　　footet
整個(gè)頁(yè)面：　content
頁(yè)　眉：　　header
頁(yè)　腳：　　footer
商　標(biāo)：　　label
標(biāo)　題：　　title
主導(dǎo)航：　　mainbav（globalnav）
頂導(dǎo)航：　　topnav
邊導(dǎo)航：　　sidebar
左導(dǎo)航：　　leftsidebar
右導(dǎo)航：　　rightsidebar
旗　志：　　logo
標(biāo)　語(yǔ)：　　banner
菜單內(nèi)容1： menu1 content
菜單容量：　menu container
子菜單：　　submenu
邊導(dǎo)航圖標(biāo)：sidebarIcon
注釋：　　　note
面包屑：　　breadcrumb(即頁(yè)面所處位置導(dǎo)航提示）
繼續(xù)閱讀 →

3個(gè)小工具

由 發(fā)表于 ┊2,719 PV

1.CSS Creator
這個(gè)小工具可以為您可視化的制作theme的框架結(jié)構(gòu)，包括doctype、外形(滿屏，居中，靠左)、最小寬度、最大寬度、頭部、左右欄、底部等的基本CSS定義。設(shè)置完畢以后點(diǎn)擊Generate Layout便會(huì)生成HTML和CSS文件，右鍵另存為即可使用了。
總的來(lái)說(shuō)，對(duì)于CSS初學(xué)者還是很有用的，因?yàn)槌鯇W(xué)者對(duì)一些margin、float可能搞不懂，使得左右欄這樣的布局無(wú)法實(shí)現(xiàn)。這個(gè)小工具僅僅是各出一個(gè)基本的框架結(jié)構(gòu)，生成的CSS文件還需要進(jìn)一步的完善。比如說(shuō)，你要加入你的配色。

2.kuler
布局完成以后，我們就需要考慮theme的色系了，憑空的想像是很難得，使用這個(gè)小工具可以為你節(jié)省冥思苦想的煩惱。而且網(wǎng)站還列出了一些優(yōu)秀的配色方案，值得借鑒。需要注冊(cè)。

3.Stripe Generator
有些時(shí)候，我們對(duì)一些區(qū)域，比如說(shuō)背景，不僅僅需要一些顏色的裝飾，可能會(huì)需要一些條紋？但PS等制圖軟件又不會(huì)，這時(shí)該怎么辦？使用Stripe吧，通過(guò)Stripe可以更具自己的需要選擇背景色，背景樣式，條紋色，條紋的形狀，條紋間距和寬度等，而且生成的條紋可以實(shí)現(xiàn)無(wú)縫連接，免去一些考慮是否無(wú)縫的苦惱。

轉(zhuǎn)自www.wp-theme.cn

分享收藏的CSS+DIV陳列館網(wǎng)站

由 發(fā)表于 ┊2,550 PV

學(xué)習(xí)程序最好的方法是查看別人的原代碼，學(xué)習(xí)CSS也一樣，這篇文章介紹最人們的CSS網(wǎng)站收集站點(diǎn)，行話叫CSS陳列館（showcase），[專錄](méi)網(wǎng)站設(shè)計(jì)師必看，必收藏，畢學(xué)習(xí)

　　http://www.csszengarden.com/
　　CSS禪意花園是最富盛名的CSS設(shè)計(jì)陳列館，Dave　Shea在創(chuàng)辦之初是為了讓網(wǎng)頁(yè)設(shè)計(jì)師通過(guò)CSS樣式表針對(duì)同一個(gè)Html文件的設(shè)計(jì)不同的樣式，卻沒(méi)想到這個(gè)項(xiàng)目成為了當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)頂尖高手展現(xiàn)無(wú)窮創(chuàng)意的舞臺(tái)，看看禪意花園的

　　http://www.cssvault.com/
　　Cssvault是第一個(gè)以網(wǎng)站縮略圖的方式呈現(xiàn)的優(yōu)秀設(shè)計(jì)的網(wǎng)站，而CSS陳列館（showcase）這一說(shuō)法也是由這里開(kāi)始，從開(kāi)始至今大約一年的時(shí)間里面，收錄了大量的優(yōu)秀設(shè)計(jì)，是CSS設(shè)計(jì)師必去的網(wǎng)站之一。

　　http://www.webstandardsawards.com/
　　Web Standards Award，顧名思義，這里也是收集符合“網(wǎng)頁(yè)標(biāo)準(zhǔn)”設(shè)計(jì)的網(wǎng)站，除收集外，還對(duì)每月收集來(lái)的網(wǎng)站進(jìn)行評(píng)選，獲勝設(shè)計(jì)可以冠以當(dāng)月“網(wǎng)頁(yè)標(biāo)準(zhǔn)”設(shè)計(jì)獎(jiǎng)的頭銜，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，也是一種殊榮。

　　http://www.unmatchedstyle.com/
　　這個(gè)網(wǎng)站是最新出爐的一個(gè)CSS陳列館，和前面介紹的幾個(gè)網(wǎng)站大同小異，也是采用縮略圖的方式呈現(xiàn)，當(dāng)然每個(gè)網(wǎng)站收集者的審美特征都不同，多一個(gè)地方無(wú)疑也給鐘情于CSS設(shè)計(jì)的朋友多了一個(gè)選擇，而且他們的更新很勤快。

繼續(xù)閱讀 →

DIV+CSS布局入門(mén)教程(六)

由 發(fā)表于 ┊1,805 PV

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

首先，有些東西需要說(shuō)明一下。對(duì)于之前的文章，由于為了讓大家更好的區(qū)分各層的關(guān)系，教程中不少地方使用了大寫(xiě)的CLASS或者ID，其實(shí)這樣做是不推薦的，我推薦的方法是使用單詞之間增加下劃線，或者單詞拼接的方法。因?yàn)镃SS是區(qū)分大小寫(xiě)的。大家可以看到，我提供給大家的下載文件中全部都是使用小寫(xiě)來(lái)處理的。

我們先來(lái)處理sidebar的樣式，經(jīng)過(guò)分析，我們可以得知，sidebar有四個(gè)部分，我們將這四個(gè)部分分為四個(gè)層：

繼續(xù)閱讀 →