CSS

定位一直是WEB標準應用程式中的痛點，如果理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。如果理清了定位的原理，那定位會讓網頁實現的更加完美。定位的定義：在CSS中關於定位的內容是：position:relative | absolute | static | fixedstatic 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。relative 不脫離文檔流，參考自身靜態位置通過top,bottom,left,right

一段文字，當滑鼠在文字上面單擊，文字消失，原來文字的地方卻立即變成了一張圖片，當滑鼠在圖片上單擊，圖片又消失，原來的文字又重現了，像變魔術一樣，是不是有意思?!這種效果用Dreamweaver的Behavirs

三欄布局是目前最常見的網頁布局，主要頁內容放在中間一欄，邊上的兩欄放置導航連結之類的內容。基本布局一般是標題之下放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁尾，頁尾也佔據整個頁面寬度。絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以產生帶有表格、建立固定寬度布局或者“液態”（它可以根據使用者瀏覽器視窗寬度自動調整）布局的網頁。

CSS支援多種長度單位。它們可被分成兩大類：絕對長度單位（以不依賴於顯示裝置的絕對尺寸來定義長度）；相對長度（相對其它為瀏覽器所知的單位來定義長度）。絕對長度度量可使用五種單位：英寸（in）、厘米（cm）、毫米（mm）、磅（point，寫作pt）、字高（pica，寫作pc）。磅和字高通常被用作印刷單位，其中1pica=12pt。CSS把1pica定義為1/72in，也就是說，72pica=1in。這也是高品質印表機常用的 Adobe postscript

我們在瀏覽很多網站的時候會看到有的網站當你的滑鼠移動到導覽列的文字上的時候會感覺字在動，或則字型的顏色會變，或則有上劃線，看看我的部落格上導覽列的效果你的明白了，今天三少就來告訴大家這是怎麼樣實現的。其實這個很簡單，它實際上是用CSS來實現的，請跟著我的步驟做，Let' Go!1.進入你的個人門戶管理，選擇個人門戶設定，然後選擇模版選擇，選擇自訂CSS進入。2.你是不是看到了一些CSS代碼呢，請找到下列代碼：body{margin-top: 0px;margin-right:

讓div+css的div置中, 而裡面的文字不置中的做法:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html

本文配套源碼工具非常簡單, 寫了 10 行左右的代碼; 運行效果圖:代碼檔案:unit Unit1;interfaceuses　Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,　Dialogs, ExtCtrls, StdCtrls, ComCtrls, OleCtrls, SHDocVw;type　TForm1 = class(TForm)　　Memo1: TMemo;　　Splitter1:

前面我們瞭解了CSS的文法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識別並調用。當瀏覽器讀取樣式表時，要依照文字格式設定來讀，這裡介紹四種在頁面中插入樣式表的方法：鏈入外部樣式表、內部樣式表、匯入外表樣式表和內嵌樣式。1.

儘管對於現如今的頻寬來說，網頁檔案那僅以K來算的大小實在是微不足道，但如何將這以K來計算的網頁檔案精簡到最小還是網頁設計師們所應該考慮的問題之一。眾所周之，在不影響整個網頁構架與功能的情況下，網頁檔案越小越好，因為更小的網頁檔案有利於瀏覽器對網頁的解釋時間縮到更短，自然訪客也就不用面臨等待網頁緩慢呈現的煩躁了，這一點對於那些頻寬少網速慢的使用者猶為明顯。試想一下，你會是希望開啟一個網站的時候整個網站馬上呈現在你面前呢？還是喜歡花上十幾秒甚至是幾分釧來看整個網站一點一點的被瀏覽器解釋出來呢？在Ta

系統原來的更換CSS模板是要重新重新整理一下兒頁面的，我一直都對這個功能很不滿意，百分之九十五的功能都用AJAX無重新整理的實現了，難道要在這個小小的更換頁面CSS模板上給使用者添點噁心嗎？於是，昨天晚上好好考慮了這個功能上的實現，原來發現其實並不難，小改一下就OK了，現在系統上的模板更換是不用重新整理頁面來完成的，明顯在感覺上比原來好得多了，下面談談經驗吧：

隨著應用CSS網頁布局構建網頁，以及web標準的廣泛普及與發展，表格漸漸被人們遺忘，但是表格還是有它優秀的一面，資料處理用表格的確省了不少麻煩！這個是細表格的代碼，並且通過了標準驗證！　　table{　　　　border:1px solid #000;　　　　border-width:1px 0 0 1px;　　　　margin:2px 0 2px

本文總結了用div CSS進行網頁表單布局的五個小技巧可以協助你更靈活的控製表單，使頁面更加滿意。 1、表單文本輸入的移動選擇： 在文本輸入欄中，如果加入了提示，來訪者往往要用滑鼠選取後刪除，再輸入有用的資訊。其實只要加入onMouseOver="this.focus()" onFocus="this.select()" 代碼到 <textarea> 中，一切就會變得簡單多了，如： <textarea name=textarea

使用DIV+CSS排版不是用換個標籤然後再去按照表格的方式去排版，而是做到內容與表現的分離。1: ID用於標識頁面單獨元素以及持久行的結構性元素 方便JS的調用類用於標識同一頁面可重複定義使用的結構性元素 ID與類的命名需與表現形式無關 ：leftContent 而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峰式大小寫（標誌符由多個單片語成 除首詞首字母小寫外 其餘單詞首字母均大寫）”2：避免濫用類 當類型的結構需要不一樣的表現時 記得什麼是層疊樣式表

“Lightbox”是一個別緻且易用的圖片顯示效果，它可以使圖片直接呈現在當前頁面之上而不用轉到新的視窗。lightbox效果網路上有很多js版本的介紹。不過都下載一個lightbox的js小則幾十K，大則上百K。如果你只是需要一個類似Lightbox的效果，這種百分之百純CSS製造，不含js的辦法倒是可以試試。以下是引用片段：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

由於平時不太用到，所以過去寫css的時候對於position屬性的absolute、

在符合標準的網頁設計中如何用CSS控制網頁的背景呢？包括背景的顏色，背景的圖片等一些問題，在本教程中一次給你講清楚。 ·背景顏色 background-color我想這個我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個的預設值是transparent（透明色）。例：body{background-color:yellow}H1{background-color:#000000}·背景圖片

內容摘要：本文列舉了相容 IE 和 FF 的換行 CSS 推薦樣式，詳細介紹了word-wrap同word-break的區別。相容 IE 和 FF 的換行 CSS 推薦樣式最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word; word-break:break-all;也不是word-wrap:break-word; overflow:auto;在 IE 下沒有任何問題，在 FF

1.DOCTYPE 影響 CSS 處理2.FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行3.FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中4.FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width5

作為一個熱門技術，CSS的發展的確有些緩慢。CSS最早被提議在1994年，最早被瀏覽器支援在1996年，CSS一直被力捧為傳統的以HTML為基礎的web代碼的繼承者。CSS使用樣式表來控制整個網站字型和布局的能力,使它看起來非常有效率、易於設計和有遠見。然而，也一直有荒誕的說法圍繞著CSS，阻礙了網頁設計師學習和掌握這種語言。究竟是什麼讓人們大驚小怪呢？ 我們訪問了大學教師Christopher

前面兩篇文章我們分別談到了class和id的相關知識和如何使用，但是在實際項目中，我們該如何抉擇，class還是id？先回顧下兩者的區別吧！1.id具有唯一性，class具有普遍性，所以一個頁面同一個id只能使用一次，而class可以被無限制使用。2.id的優先順序要高於class的!如下面列子：<html>#p1{color:red}.p2{color:green}<p id="p1" class="p2">這是一個段落</