有時我們可能希望內部連結與外部連結顯示不同的樣式,如外部連結。我想在連結的旁邊加上一個小表徵圖,以表示其是一個外部的連結,來告訴來訪者,讓他們來確認是在新視窗開啟還是在本視窗開啟。我們可能會這樣做: 代碼如下複製代碼 .external{background:url(images/external.gif) no-repeat right top;padding-right:12px;}
background-position 的值可以是長度單位,百分比,或者關鍵字。 長度單位比較好理解。多少就多少,正的就正,負的就負的。而關鍵字的中left top就是0% center 就是50% right bottom就是100%,那百分比是怎樣算的呢? 假如是 background-position:50% 0 的話,就是容器的左上方開始的座標(50%,0) 和背景圖的左上方開始的座標(50%,0)的位置同點處,但這樣的說法好像比較不好計算。或者換個說法比較容易理解:
由於項目中編寫文檔結構、編寫CSS的人員較多,並與程式員協同工作,就需要統一class與id的名稱,前天花了一點時間,按照大多人的習慣,制定了下面的常用關鍵字:容 器:container/box 頭 部:header 主 導 航:mainNav 子 導 航:subNav 頂 導 航:topNav 網站標誌:logo 大 廣 告:banner 頁面中部:mainBody 底 部:footer 菜 單:menu 菜單內容:menuContent 子 菜 單:subMenu
我們應該養成良好的編碼習慣,CSS整體布局聲明為我們的代碼簡化、提高運行效率提供了途徑。我們列舉比較常用的形式,並加上解釋。整體布局聲明的作用在於將目標作一個整體的概括,聲明一些完全相同或基本相同的屬性及值,以免在後面的代碼中每一個標籤中都需要單獨定義。若有不同的屬性與值,後面的重新定義即可。一、通配式整體布局聲明。 代碼如下複製代碼 * {margin:0;padding:0;font-size:0.8em;...}
CSS允許你控制網頁外觀和布局的各個方面——包括字型、頁邊空白和游標。不錯,從CSS
元素的屬性(Attribute)也可以用於selector。下面的列表中例舉了幾種模式:Attribute Selector Patterns模式說明E[attr]Attribute selector屬性選取器、匹配任何含有該屬性的E元素,不必考慮它的值的大小E[attr="value"]Attribute selector,屬性選取器、匹配任何具有該屬性的元素E,條件是屬性的值必須與設定的值相等。E[attr~="value"]Attribute
■繼 承 和 層 疊CSS規則影響元素的顯示形態,但是如果沒有樣式匹配或者存在多種樣式規則同時匹配該元素時,元素顯示的形態到底是遵循哪個規則呢?本節論述的內容涉及到樣式的繼承和層疊方面的知識。●繼 承有些樣式通過預設的樣式設定而“繼承”,也就是說,子項目繼承父元素的樣式規則,包括color、font和text-align等等。例如:p { color: red }...<p>Sample paragraph with
margin是我們在進行CSS布局中非常常用的屬性之一,但如果運用不得當,往往會產生過多的垃圾代碼,讓我們的編碼體積不斷增加。今天我們介紹一種編碼最佳化的小執行個體,通過此例希望大家能意識到代碼最佳化的途徑是多種多樣的,也算是一個拋磚引玉的引子吧。看XHTML代碼: 代碼如下複製代碼 <div id="main"> <div id="body1"> &
一、Margin(框距)padding(邊框距)margin屬性設定順序:上右下左padding屬性設定順序:上右下左margin:25px 0 25px 0;簡寫:margin:25px 0;二、Display顯示內容設定(1)、Display屬性none (隱藏).alt {display:none;}<span class=”alt”>Content List Part</span>(2)、Display屬性block (塊/地區)Img
一、三種樣式選取器 屬性選取器 p {color:red;}類別選取器 .p {color:red;}ID選取器 #p {color:red;}二、transparentBackground:transparent; 防止定義背景被覆蓋三、Netscape4.X(IE/WINDOWS4.0以前的版本)下錯誤的透明背景理解Background:inhrit; 在netscape4.x下透明背景將被理解為黑綠四、字型預設選擇:Body {font-family:”lucida
1.若有疑問立即檢測 在出錯時若能對原始代碼做簡單檢測可以省去很多頭痛問題。W3C對於XHTML與CSS都有偵查工具可用,請見http://validator.w3.org 請注意,在檔案開頭的錯誤,可能因為不當的結構等因素造成更多錯誤;我們建議先修正一些最明顯的錯誤之後重新檢測,這樣也許會讓錯誤數量爆減。2.使用浮動功能時記得適當清除指令 浮動是個危險的功能,未必會產生您所期望的結果。如果您遇到浮動元素延伸到外圍容器的邊框或者其他不正常情況,請先確定您的做法是正確的。
CSS檔案先準備 還是先寫好HTML檔案?網上有很多種答案:先寫HTML後寫CSS;先寫CSS後寫HTML;兩者同時寫。 我的準則是先寫HTML打好基礎,然後再寫CSS進行表現的控制! 對於初學者我建議兩者一起寫,先寫CSS或者先寫HTML對於初學者都不是恰當得的方法。 如果讓一個人編寫代碼,你告訴他先寫HTML,寫完後 HTML不能修改了,然後你寫CSS,如果他可以寫出來,那這個人一定是一個水平非常高的Builder了!所以對於初學者,多數情況下我建議同時編寫,具體我說一下步驟:
css自動換行有什麼技巧?大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 CSS如何將他們換行的方法! 大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 CSS如何將他們換行的方法! 對於div 1.(IE瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。 代碼如下複製代碼 #wrap{white-space:normal; width:200px;
ID與CLASS怎麼用,在標題中有提及使用原則與技巧,這裡的使用原則與技巧是我的經驗總結,並非摘自哪本典籍,所以並不是什麼權威論述,請各位網友在看到這篇文章時需要有主見的閱讀,不要被我的妖言所迷惑。 ID與CLASS的使用原則 據說W3C對於ID與CLASS的設定是ID具有唯一性,CLASS具有普遍性。所以我們這裡的使用原則也是依據這一特性建立的。 ID是不能重複的,所以在XHTML的結構中,大結構一定是用ID。比如標誌、導航、主體內容、著作權。這些呢接我自己制定的規範命名為#logo
好久沒有認真寫點東西了,想起最近這些時間經常有朋友問到我有關於DIV+CSS布局的問題,其實歸根結底還是由於沒有入門造成的。那麼接下來的這篇文章就帶領大家入門吧... 在網頁製作中,有許多的術語,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關於HTML的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。 所有的設計第一步就是構思,構思好了,一般來說還需要用Phot
一種是把CSS文檔放到<head>文檔中: <style type=“text/css”> …… </style> 其中<style>中的“type='text/css’”的意思是<style>中的代碼是定義樣式表單的。 另一種方法是把CSS樣式表寫在HTML的行內,比如下面的代碼: <p style=“font-size:14pt;color:blue”>藍色14號文字</p> 這是採用<Style=“
如何使DIV置中主要的樣式定義如下:body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 說明:首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容置中;對於IE這樣設定就已經可以了。但在mozilla中不能置中。解決辦法就是在子項目定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
方法一:用png圖作背景要注意hackhtml代碼 代碼如下複製代碼 <div class="logo"><a href="/">logo</a></div> css代碼 代碼如下複製代碼 .logo { width: 338px; height: 57px; float: left; background: url(/images/logo.png) 0px
區別不同瀏覽器的CSS hack寫法:區別IE6與FF: background:orange;*background:blue;區別IE6與IE7: background:green !important;background:blue;區別IE7與FF:
div水平置中很容易,設定css樣式 text-align: center; 就可以了。垂直置中也有個屬性 vertical-align: middle; 這個屬性普通設定是沒有效果的。第一種方法:通過一個空白圖片可以達到垂直置中的效果。 代碼如下複製代碼 <html> <title>圖片置中</title> <style>/*定義垂直置中*/#test * {