CSS

朋友，百姓網前端架構師css魔法的《css揭秘》，已經出版發行，並贈送了我一本。看了一下這本書，確實有很多css技巧。讓你會有蠻大的收穫，在這裡幫他宣傳一下！今天所說的案例呢，也是部分借鑒這本書的。今天和大家聊聊css變數和繼承！有人會說，css怎麼會有變數和繼承？你是說的css處理器吧！不是，我說的是純css，其實，css也在努力融入各種前置處理器的特性和寫法，甚至有些屬性比前置處理器更加強大，例如：閑話少說，我們還是切入正題吧！css變數其實我說的變數，並非css處理器中的自訂變數，而是cs

一，什麼是.clearfix你只要到Google或者Baidu隨便一搜"css清除浮動"，就會發現很多網站都講到"盒子清除內部浮動時可以用到.clearfix"。  代碼如下複製代碼 .clearfix:after {    content: " ";    display: block;    clear:

使用css中的：hover製作菜單，有一點需要注意的是在設計菜單時，要先設計一級菜單（使用position: relative;），使用同樣樣式，二級菜單div{display: none;} ，再設計二級菜單div後的ul位置（使用position: absolute;）。  代碼如下複製代碼 <!DOCTYPE html><html lang=”zh-cn”><head><meta

內容過濾是一個在Web上常見的一個功能，特別是在電商網站，為了讓使用者過濾內容，僅顯示符合自己的要求的內容。截個圖來說，能更好的說明這樣的功能，比如淘寶網：如上圖所示，使用者想購買一件裙子，在整個產品列表中，顯示的產品數量太多了。顧客不知道如何選擇自己所需要的裙子。在頂部提供了一個分類，顧客選擇需要的選項，產品中就會過濾掉不合格產品。上圖選擇了”氣質優雅“的裙子。當然還可以選擇更多的條件。這裡就不我多說了。話說回來，以前實現這樣一個效果都需要藉助於JavaScript(或者基於jQuery外掛程

前言css選取器，是前端的基本功，只要你是一個前端，這個一定要掌握！今天之所以要重溫一下css選取器，主要是和大家再複習一下css選取器中的一些常用符號的使用，例如“+、~、^、$、>、*”等的使用！之所以要複習呢，是因為我一個寫後端的哥們，前端寫的也很好，但是他今天突然問我，css中加號和大於符號是啥意思？我說，這個貌似jquery中也有吧！好吧，可能這些符號不常用，造成我們對這些符號的陌生！那麼今天，我們一起再來複習一下吧！大家在右側搜尋方塊中搜尋“

瀏覽器支援所有主流瀏覽器都支援 visibility 屬性。注釋：任何的版本的 internet explorer （包括 ie8）都不支援 "inherit" 和 "collaps教程e" 屬性值。所有主流瀏覽器都支援 display 屬性。注釋：任何版本的 internet explorer （包括 ie8）都不支援

一、少用偏門。　　類似break-word斷行，z-index手動分層，還有像垂直對齊等等這些偏門CSS最好少用，因為不一定所有瀏覽器都支援，而且極難通過W3C檢測。 　　二、center不是float的值。　　很多新手都會把center誤認為是float的值，而偏偏不是如此。center只是text-align的值。 　　三、對齊不能包括兩個值。　　很多新手會在float或者text-align中填寫兩個值，比如：float:left top。這是不允許的，瀏覽器

先看2張效果圖：CSS：  代碼如下複製代碼 /*   對話氣泡   用法：使用.speech-bubble和.speech-bubble-DIRECTION類   <div class="speech-bubble speech-bubble-top">Hi there</div>*/ .speech-bubble {  position:

實現原理：（1）指定寬度：width:300px;（2）overflow:hidden; 將超出內容隱藏（3）text-overflow:ellipsis; IE 專有屬性，當對象內文本溢出時顯示省略標記(…)（4）white-space:nowrap; 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象  代碼如下複製代碼 <style type="text/css"> .textOverFlow

　　margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎屬性。一、margin的基本特性　　margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來設定box的margin area。屬性margin可以用來同時設定box的四邊外邊距，而其他的margin屬性只能設定其自各的外邊距。　　margin屬性可以應用於幾乎所有的元素，除了表

 代碼如下複製代碼 table{　　table-layout: fixed;}td{　　white-space: nowrap;　　overflow: hidden;　　text-overflow: ellipsis;} 解析:1. table-layout: fixed 由於table-layout的預設值是auto，即table的寬高將取決於其內容的多寡，如果內容的體積無法估測，那麼最終表格的呈現形式也無法保證了，fixed一下就好了。（注意：此樣式是關鍵）2.

先來看效果吧 代碼如下  代碼如下複製代碼 <style type="text/css"> body, html {     scrollbar-face-color: #353535;     scrollbar-shadow-color: #565656;     scrollbar-highlight-color: #565656;

在stackoverflow看到的一個方法是在主體內容前加一個暗錨：  代碼如下複製代碼 <a class="target-fix" name="a-<?php $a->id(); ?>"></a><artivle>主體內容...</article> 將錨點進行位移，並隱藏佔位：  代碼如下複製代碼 .target-fix

以下規範建議，均是Alloyteam在日常開發過程中總結提煉出的經驗，規範具備較好的項目實踐，強烈推薦使用。字型設定使用無襯線字型body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }iOS 4.0+ 使用英文字型 Helvetica Neue，之前的iOS版本降級使用 Helvetica。中文字型設定為華文黑體STHeiTi。 需補充說明，華文黑體並不存在iOS的字型庫中

目前，主要有以下幾種用用途： 　　1、顯示伺服器端環境變數 　　2、將常值內容直接插入到文檔中 　　3、顯示WEB文檔相關資訊(如檔案製作日期/大小等) 　　4、直接執行伺服器上的各種程式(如CGI或其他可執行程式) 　　5、設定SSI資訊顯示格式(如檔案製作日期/大小顯示方式) 　　進階SSI可設定變數使用if條件陳述式。 　 SSI有什麼用? 之所以要扯到ssi，是因爲shtml--server-parsed HTML 的首字母縮減詞。包含有嵌入式伺服器方包含命令的 HTML

非常高興地看到很多設計師開始關注和嘗試使用web標準製作網頁。但從網友們的問題和製作中發現幾個問題，在這裡特別提醒一下：1.不是為了通過校正才標準化。web標準的本意是實現內容(結構)和表現分離，就是將樣式剝離出來放在單獨的css檔案中。這樣做的好處是可以分別處理內容和表現，也方便搜尋和內容的再利用。W3C校正僅僅是協助你檢查XHTML代碼的書寫是否規範，CSS的屬性是否都在CCS2的規範內。代碼的標準化僅僅是第一步，不是說通過的校正，我的網頁就標準化了。我們不是為了虛名，或者向別人炫耀：“看我

前言

Mask濾鏡可以為網頁上的HTML元件對象作出一個矩形遮罩，關於什麼是遮罩?如果你用過Flash中的遮罩，你就會知道了，就是那個樣子了。實際上對於遮罩你也可以這樣來理解，相當於用一塊有色布把物件蓋起來，但內容卻被挖去了。若你還不明白，就看下面的圖片再聽我給你細說。　　圖1　mask濾鏡效果1　　在上面這mask濾鏡中用這麼深的顏色，主要是讓你能清楚地看出效果來。讓我們來看一下mask濾鏡的參數： 它只有一個參數Color，即遮罩的顏色 以#RRGGBB 格式的顏色值。

引伸閱讀 * 解讀absolute與relative * position:relative/absolute無法衝破的等級 * 對《無法衝破的等級》一文的補充 定位一直是WEB標準應用程式中的痛點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。定位的定義：在CSS中關於定位的內容是：position:relative | absolute | static | fixedstatic 沒有特別的設定，

IE7發布已經有些日子了，因此網站需要照顧的瀏覽器又多了一個。這兩天設計師們在做相容，找到了一個解決辦法，這裡既是共用，也是記錄。結合之前自己使用important!和/**/來區分IE5、IE6、Moz的經曆，以下代碼區分4個瀏覽器，複製代碼儲存成一個HTML檔案看看效果吧：（ 無標題文檔 IE5: YELLOW IE6: GREEN IE7: BLUE MOZ: RED [Ctrl+A 全選