CSS

CSS進階布局已逐漸流行，但面對所謂DIV+CSS布局的叫法讓人更為擔心，不要讓DIV成為Table的替代品，多層嵌套的DIV會嚴重影響代碼的可閱讀性，活用HTML為我們提供的標籤吧。什麼時候應該用DIV?雖然在這方面沒有什麼硬性的規定,但個人認為DIV更適用於大體架構的定位.例如我們要定義一塊頭部的地區,一般會這樣定義一個DIV:<div

 　　最近我想修改一下這個網站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭。可是，一想到這需要使用圖片，並且各種顏色，各種方向的箭頭要準備無數種，這幾乎是一種災難。幸運的是，MooTools的核心開發著Darren Waddell告訴了我一個非常棒　　使用純CSS，你只需要很少的代碼就可以創作出各種瀏覽器都相容的三角形箭頭!　　CSS代碼　　複製代碼　　代碼如下:　　/* create an arrow that points up

 以前做網頁的時候，只考慮 IE6 和 FF 的相容性，公司換了，要求也高了，FF和IE 6 7 8 要全相容了，碰到要單獨Hack IE8的。當然，用注釋非常方便，只要添加相應的注釋就可以解決。但問題是，為了一句CSS寫多一個檔案，或者在header上添加註釋，那顯然不是懶人的習慣做法。結論如下：selector{ property:value; /* 所有瀏覽器 */ property:value9; /* 所有IE瀏覽器 */ +property:value; /* IE7

 如果你是一名前端開發工程師，一般px和em使用頻率比較高。但是今天本文的重點是介紹一些我們使用很少、甚至麼有聽說的單位。一、重溫em<style type="text/css">body {font-size: 12px;}div {font-size: 1.5em;}</style><body><div>Test-01 (12px * 1.5 = 18px)<div>Test-02 (18px *

 　　CSS樣式和JavaScript指令碼是應該放在外部檔案中呢?　　還是把它們放在頁面本身之內呢?　　如何處理是關於一些效能規則的思維，52CSS.com就這些問題，作一些探討。　　在實際應用中使用外部檔案可以提高頁面速度，因為CSS樣式和JavaScript指令檔都能在用戶端產生緩衝。內建在HTML文檔中的CSS樣式和JavaScript指令碼則會在每次請求中隨HTML文檔重新下載。這雖然減少了HTTP請求的次數，卻增加了HTML文檔的大小。從另一方面來說，如果外部檔案中的CSS

 嚴格來說不是光CSS就能令IE瀏覽器崩潰(crash)，而要配合一定的XHTML架構。到現時為止發現有兩種寫法的代碼分別會令IE6、IE7崩潰，至於原因我嘗試尋找過答案但至今還沒找到…如你有這方面的認識或更詳細的資料很希望你能分享一下！令瀏覽器崩潰的代碼如下：Crash IE6<style type="text/css">a{position:relative;}a:hover{float:left;}</style><

用於布局架構： #outer{ overflow:hidden;}#outer .panel{ float:right; width:286px; padding-left:21px; border-left:1px solid #E5E3D7; padding-bottom: 27670px !important; margin-bottom: -27670px !important; }#outer

XHTML部分：<dl> <dt>公司名稱：</dt> <dd><input name="text" type="text" value="廣州駿寶實業有限公司" size="50" /> <span class="red">*</span></dd> <dt>

LI代碼的格式化:A).運用CSS格式化列表符： ul li{list-style-type:none;}B).如果你想將列表符換成映像，則： ul li{list-style-type:none;list-style-image: url(/blog/images/icon.gif);}C).為了靠左對齊，可以用如下代碼： ul{list-style-type:none;margin:0px;}D).如果想給列表加背景色，可以用如下代碼： ul{list-style-type:

 　　一、 去除超級連結的底線以及在超級連結上實現滑鼠移至上方變色：　　在預設情況下，用DreamWeaver設計的網頁中的超級連結都有底線，看上去不大美觀。要去除這些討厭的底線,很多報刊介紹的方法都是在HTML原始碼中手工加入一段代碼，其實在DreamWeave中很容易去除連結的底線。首先在DreamWeaver的Document

 正確使用a標籤超連結是blog中用的最多的html標籤，它用來連結到其他的文章或者站台連結，建議大家用a標籤時將下列屬性都添加上：href：設定連結的url地址或錨點target：設定滑鼠點選連結後的目標視窗或架構頁面，一般常用的是target="_blank"，表示新開一個視窗開啟連結，向在當前頁面開啟連結就不用加這個屬性了title：設定滑鼠移動到連結上時顯示的提示資訊rel：這個是最近才開始流行的新屬性。rel="nofollow"表示禁

 　　1. 屬性寫在一行內，屬性之間、屬性名稱和值之間以及屬性與“{}”之間須有空格，例如：.class { width: 400px; height: 300px; }　　2. 屬性的書寫順序：　　2.1. 按照元素模型由外及內，由整體到細節書寫，大致分為五組：　　位置：position,left,right,float　　盒模型屬性：display,margin,padding,width,height　　邊框與背景：border,background　　

　　h1標籤對提高SEO關鍵詞排名的作用想必是個站長都知道，但是h1標籤會使文字變大，有時候會在網頁中顯得格格不入。下面小編來跟大家分享下CSS隱藏文字的方法。　　下面就拿網路教學基地logo部分用CSS隱藏文字來給大家舉例：　　我們從h1代碼部分看到的其實只是文字描述，但是為了整體美觀考慮，我們把h1標籤裡面的a連結文字用CSS隱藏，並且設定背景圖片logo，這樣外觀看到的就是logo圖片　　CSS隱藏文字代碼：　　h1 a {　　height: 80px;　　width:

 一、什麼是CSS Hack？不同的瀏覽器對CSS的解析結果是不同的，因此會導致相同的CSS輸出的頁面效果不同，這就需要CSS Hack來解決瀏覽器局部的相容性問題。而這個針對不同的瀏覽器寫不同的CSS 代碼的過程，就叫CSS Hack。CSS Hack常見的有三種形式：CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器。1、屬性級Hack：比如IE6能識別底線”_”和星號” *

　　DIV+CSS最重要的優勢之一：保持視覺的一致性;以往表格嵌套的製作方法，會使得頁面與頁面，或者地區與地區之間的顯示效果會有偏差。而使用DIV+CSS的製作方法，將所有頁面，或所有地區統一用CSS檔案控制，就避免了不同地區或不同頁面體現出的效果偏差。下面為你介紹幾點注意事項，希望對你有協助。　　1、不要使用過小的圖片做背景平鋪。　　這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的地區，需要 200*200=40, 000 次，佔用資源。　

首先先看一下基本定義：複合選取器就是兩個或多個基本選取器，通過不同方式串連而成的選取器，主要包括“交集”選取器、“並集”選取器、“後代”選取器。 交集選取器“交集”複合選取器是由兩個選取器直接連接構成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標記選取器，第二個必須是類別選取器或者ID選取器。這兩個選取器之間不能有空格，必須連續書寫。注意其中第一個必須是標記選取器，如p.class

以下是引用片段： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

由於項目中編寫文檔結構、編寫CSS的人員較多，並與程式員協同工作，就需要統一class與id的名稱，常用關鍵字：容 器：container/box 頭 部：header 主 導 航：mainNav 子 導 航：subNav 頂 導 航：topNav 網站標誌：logo 大 廣 告：banner 頁面中部：mainBody 底 部：footer 菜 單：menu 菜單內容：menuContent 子 菜 單：subMenu 子功能表內容：subMenuContent 搜 索：search

   代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

關於換行、裁剪的一些CSS屬性word-wrap: normal | break-wordnormal 正常換行，內容可以撐破容器，例如長單詞或者長數位情況break-word 以單詞作為換行依據，如果需要，單詞內部允許斷行word-break: normal | break-all | keep-allnormal 正常換行，內容可以撐破容器，例如長單詞或者長數位情況break-all 以字母作為換行依據keep-all 中英文下和normal相同white-space: normal ||