DIVCSS網(wǎng)頁設(shè)計規(guī)范總結(jié)_第1頁
DIVCSS網(wǎng)頁設(shè)計規(guī)范總結(jié)_第2頁
DIVCSS網(wǎng)頁設(shè)計規(guī)范總結(jié)_第3頁
DIVCSS網(wǎng)頁設(shè)計規(guī)范總結(jié)_第4頁
DIVCSS網(wǎng)頁設(shè)計規(guī)范總結(jié)_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、div+css布局的好處1內(nèi)容和形式分離，網(wǎng)頁前臺只需要顯示內(nèi)容就行，形式上的美工交給css來處理。 生成的html文件代碼精簡，更小打開更快。2改版網(wǎng)站更簡單容易了，不用重新設(shè)計排版網(wǎng)頁，甚至于不用動原網(wǎng)站的任何html 和程序頁面，只需要改動css文件就完成了所有改版。對于門戶網(wǎng)站來說改版就像換件衣 服一樣簡單容易。3搜索引擎更友好，排名更容易靠前。第一內(nèi)容和形式分離，網(wǎng)頁前臺只需要顯示內(nèi)容就行，形式上的美工交給css來處 理。生成的html文件代碼精簡，更小打開更快。這個是div+css技術(shù)最現(xiàn)著的特點，也是css存在的根源。完全的顛覆現(xiàn)在傳統(tǒng) (table)網(wǎng)頁設(shè)計的技術(shù)。所有現(xiàn)在用t

2、able制作的內(nèi)容，都可以用css來解決掉，而且解 決的更完美，更強大。不需要大家再表格套表格，只需要用div套div就可以實現(xiàn)以往表格 套表格所有的美工，這樣的結(jié)果就是使用div+css技術(shù)，讓生成的網(wǎng)頁文件大小更精簡， 更小ctable時代，一個頁面表格達到10個以上是非常普遍的事情，但是現(xiàn)在用div+css, 一個table都可以不用，就完全達到之前的效果，這就直接導(dǎo)致網(wǎng)頁文件大小比使用table 時減少50%-80%,更節(jié)約各位站長的硬盤空間，訪問者打開網(wǎng)頁時更快,而且用div+css 時，不像以往使用table時，必須把全部table讀取完了才顯示頁面內(nèi)容，現(xiàn)在是可以讀一 個div就

3、顯示一個效果，大家打開網(wǎng)頁不用等。好處真是明顯而強大。這個優(yōu)點的確是顯著的，凡是使用傳統(tǒng)table建的網(wǎng)頁，內(nèi)容多的話，有時候達到30k 左右都有可能，文件打了打開時，肯定就有0.0兒秒的延遲。使用div+css,由于沒有表 格使用，你前臺打開看到的全是直接內(nèi)容，css文件都是導(dǎo)入鏈接的，是另一個文件，根 本和html文件大小沒關(guān)系，這種生成的html文件，一個也就10k左右大小。文件數(shù)量 少時看不出來，但是文件萬級以上時，還是會節(jié)約兒十m大小的。但是使用table制作網(wǎng)頁框架和表格時，全是選擇化制作的，也就是說不用大家去寫代 碼，很簡單輸入邊框和行數(shù)列數(shù)就可以達到制作出來的要求，但是使用di

4、v+css時，完全 是靠手寫代碼，一個表格寫四行代碼的話，如果一個頁面涉及十多個div表格生成，手寫代 碼將超過50行，而且如果你數(shù)學(xué)不好，或是邏輯思維能力不強的話，你手寫出來的表格將 是亂78糟，出現(xiàn)表格重疊和位置完全不正確。因為用div+css寫表格時，表格間的邏輯 排列關(guān)系完全是靠自己手寫代碼判斷，如果你沒有很強的手寫代碼能力和邏輯性，你所花費 的時間，比你用table制作時間至少是4倍左右。基本上一個頁面定義的id和class類， 完整頁面是不會少于20個的，一個id或class手寫5句，你制作一個html頁面將超過 100句代碼，當然其中很多是對以存成一個css文件來重復(fù)調(diào)用的。也就

5、是說相同的頁面 內(nèi)容的話，排版一樣的情況下，可以直接導(dǎo)入鏈接css來實現(xiàn)。這個就很像之前生成html時，制作一個網(wǎng)頁模板。但制作這個模板花的時間是用 table制作時的幾倍。這里有些人要說，但是我改版的時候，就只需要再寫一個css就可以 了，不用再生成htmlto那么我要說，當你再寫一個css文件改版時，我可能都己經(jīng)用 table制作好一個頁面模板，而且還自動生成html全站的頁面了。這不是不可能的。第二點 改版網(wǎng)站更簡單容易了，不用重新設(shè)計排版網(wǎng)頁，甚至于不用動原網(wǎng)站的任何 html和程序頁面，只需要改動css文件就完成了所有改版。div+css對于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易，

6、改版時，不用改動全 站html頁面，只需要重新寫css,再用新css覆蓋以前的css就可以實現(xiàn)改版了。方 便吧。第三點搜索引擎更友好，排名更容易靠前。div+css需要注意的問題1. 檢查html元素是否有拼寫錯誤、是否忘記結(jié)束標記即使是老手也經(jīng)常會弄錯div的嵌套關(guān)系。2. 檢查css是否正確檢查一下有無拼寫錯誤、是否忘記結(jié)尾的等。3. 確定錯誤發(fā)生的位置假如錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復(fù)正常, 即可確定錯誤發(fā)生的位置。4. 利用border屬性確定出錯元素的布局特性使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界

7、，錯誤 原因即水落石出。5. float元素的父元素不能指定clear屬性假如對float的元素的父元素使用clear屬性，四周的float元素布局就會混亂。6. float元素務(wù)必指定width屬性很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內(nèi)容如何, 一定要為其指定width屬性。7.是否重設(shè)了默認的樣式？某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開發(fā)前首先將全體的 margin、padding設(shè)置為0、列表樣式設(shè)置為none等。css書寫規(guī)范及方法一. 常規(guī)書寫規(guī)范及方法1. 選擇 doctype：xhtml

8、1.0提供了三種dtd聲明可供選擇：過渡的(transitional):求非常寬松的dtd,它允許你繼續(xù)使用html4.01的標識(但是 耍符合xhtml的寫法)。完整代碼如下：<! doctype html public “-/w3c/dtd xhtml 1.0 transitional/en, u/tr/xhtml1/dtd/xhtml1-transitional.dtd*>嚴格的(strict):要求嚴格的dtd,你不能使用任何表現(xiàn)層的標識和屈性，例如vbr>。完 整代碼如下：<! doctypehtml public “"

9、;/w3c/dtd xhtml 1.0 strict/enmuhttp :/www. /tr/xhtml1/dtd/xhtml1-strict.dtdu>框架的(frameset)針對框架頁面設(shè)計使用的dtd,如果你的頁面中包含有框架，需 要采用這種dtdo完整代碼如下：<! doctype html public “-/w3c/dtd xhtml 1.0 frameset/enn “/tr/xhtml1/dtd/xhtml1-frarneset.dtcta理想情況當然是嚴格的dtd,但對于我們大多數(shù)剛接觸web標準的設(shè)計師來說，過渡的d

10、td(xhtml 1.0 transitional)是目前理想選擇(包扌舌本站，使用的也是過渡型dtd)。因 為這種dtd述允許我們使用表現(xiàn)層的標識、元素和屬性，也比較容易通過w3c的代碼校 驗。2. 指定語言及字符集：為文檔指定語言：<html xmlns=,/1999/xhtmr, lang=,en,>為了被瀏覽器正確解釋和通過w3c代碼校驗，所有的xhtml文檔都必須聲明它們所使用的編碼語言；女口：常用的語言定義：<meta http-equiv=m content-type" content=” text/html; char

11、set=utf-8，/ />標準的xml文檔語言定義：<?xml version=”1.0" encoding=” utf-87 ?>針對老版本的瀏覽器的語言定義：<meta http-equiv=n content-languagen content=” utf-8/>為提高字符集，建議采用“utf8” o3. 調(diào)用樣式表：外部樣式表調(diào)用：頁面內(nèi)嵌法：就是將樣式表直接寫在頁面代碼的head|x0如：<style type=,text/css,x- body background : white ; color : black ; -> &l

12、t;/style>外部調(diào)用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區(qū)用類似以下代碼 調(diào)用。<link rel=''stylesheet" rev=,stylesheetm href=”css/style.css" type=,text/cssn media=,air, />在符合web標準的設(shè)計中，推薦使用外部調(diào)用法，可以不修改頁面只修改.css文件而改變 頁面的樣式。如果所有頁面都調(diào)用同一個樣式表文件，那么改一個樣式表文件，可以改變所 有文件的樣式。4、選用恰當?shù)脑兀焊鶕?jù)文檔的結(jié)構(gòu)來選擇html元素，而不是根據(jù)htm

13、l元素的樣式來選擇。例如，使用p 元素來包含文字段落，而不是為了換行。如果在創(chuàng)建文檔時找不到適當?shù)脑?，則可以考慮 使用通用的div或者是span；避免過渡使用div和span。少量、適當?shù)氖褂胐iv和span元素可以使文檔的結(jié)構(gòu)更加清 晰合理并且易于使用樣式；盡可能少地使用標簽和結(jié)構(gòu)嵌套，這樣不但可以使文檔結(jié)構(gòu)清晰，同時也可以保持文件的小 巧，在提高用戶下載速度的同時，也易于瀏覽器對文檔的解釋及呈視；5、派生選擇器：可以使用派生選擇器給一個元素里的子元素定義樣式，在簡化命名的同時也使結(jié)構(gòu)更加的清晰化，如：.mainmenu ul li background:url(images/bg.gif

14、;)6、輔助圖片用背影圖處理：這里的”輔助圖片”是指那些不是作為頁面耍表達的內(nèi)容的一部分，而僅僅用于修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動頁面的情況下通過css樣式來進行改動， 如：#logo background:url(images/logo.jpg) #fefefe no-repeat right bottom;7、結(jié)構(gòu)與樣式分離：在頁面里只寫入文檔的結(jié)構(gòu)，而將樣式寫于css文件中，通過外部調(diào)用css樣式表來實現(xiàn)結(jié)構(gòu)與樣式的分離。&文檔的結(jié)構(gòu)化書寫：頁面css文檔都應(yīng)采用結(jié)構(gòu)化的書寫方式，邏輯清晰易于閱讀。女山<div id=,mainmenu,>&l

15、t;ul><lixa href' #” >首頁v/ax/li><lixa href=” #” >介紹v/a>v/li><lixa href=” #” >服務(wù)</ax/li></ul></div>/*=主導(dǎo)航=*7#mainmenu width:100%;height:30px;background:url(images/mainmenu_bg.jpg) repeat-x;#mainmenu ul li float: left;line-height:30px;margin-right:1px

16、;cursor:pointer;/*=主導(dǎo)航結(jié)束=*/9、鼠標手勢：在xhtml標準中，hand只被ie識別,當需要將鼠標手勢轉(zhuǎn)換為“手形”時，則將“hand”換為 “pointer” ,即 “cursor:pointer;”二. 注釋書寫規(guī)范1、行間注釋：直接寫于屬性值后面，如：.searchborder:1 px solid #fff;/*定義搜索輸入框邊框*/background:url(./images/icon.gif) no-report #333;/*定義搜索框的背景*/2、整段注釋：分別在開始及結(jié)束地方加入注釋，如：/*=搜索條=*/.search border:1px sol

17、id #fff;background:url(./images/icon.gif) no-repeat #333;/*=搜索條結(jié)束=*/三. 樣式屬性代碼縮寫1、不同類有相同屬性及屬性值的縮寫：對于兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應(yīng)對其加以合 并縮寫，特別是當有多個不同的類而有相同的屬性及屬性值時，合并縮寫可以減少代碼量并 易于控制。如：#mainmenu background :url(./images/bg.gif);border:1px solid #333;width:100%;height:30px;overflowzhidden;#submenu b

18、ackground :url(./images/bg.gif);border:1px solid #333;width:100%;height:20px;overflowzhidden;兩個不同類的屬性值有重復(fù)之處，剛可以縮寫為：#mainmenu5#submenu background :url(./images/bg.gif);border:1px solid #333;width:100%;overflowzhidden;#mainmenu height:30px;#submenu height:20px;2、同一屬性的縮寫：同一屬性根據(jù)它的屬性值也可以進行簡寫，如：.search ba

19、ckground-color: #333;background-image :url(./images/icon.gif);background-repeat: no-repeat;background-position :50% 50%;.search background:#333 url(./images/icon.gif) no-repeat 50% 50%;3、內(nèi)外側(cè)邊框的縮寫：在css中關(guān)于內(nèi)外側(cè)邊框的距離是按照上、右、下、左的順序來排列的，當這四個屈性值不同時也可直接縮寫，如：.btn margin-top:10px;margin-right:8px;margin-bottom

20、:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom :12px;padding-left:8px;則可縮寫為:.btn margin:10px 8px 12px 5px;padding:10px 8px 12px 5px;而如果當上邊與下邊、左邊與右邊的邊框?qū)傩灾迪嗤瑫r，則屬性值可以直接縮寫為兩個，如:.btn margin-top:10px;margin-right:5px; margin-bottom :1 opx;margin-left:5px;縮寫為:.btn margin:10px 5px;而

21、當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如:.btn margin-top:10px;margin-right:1opx;margin-bottom :1 opx;margin-left:1opx;縮寫為：.btnmargin:10px;4、顏色值的縮寫：當rgb三個顏色值數(shù)值相同時，可縮寫顏色值代碼。如:.menu color:#ff3333;可縮寫為：.menu color:#f33; 四.hack書寫規(guī)范因為不同瀏覽器對w3c標準的支持不一樣，各個瀏覽器對于頁而的解釋呈視也不盡相同， 比如ie在很多情況下就與ff存在3px的差距，對于這些差異性，就需要利用css的hac

22、k 來進行調(diào)整，當然在沒有必要的情況下，最好不要寫hack來進行調(diào)整，避免因為hack而 導(dǎo)致頁而出現(xiàn)問題。1、ie6、ie7、ie8、ie9、firefox 之間的兼容寫法:寫法一：ie都能識別七標準瀏覽器（如ff）不能識別jie6能識別=但不能識別iimportant,ie7能識別=也能識別iimportant;ie8能識別=也能識別0;ie9能識別=也能識別90;ff不能識別*,但能識別iimportant;根據(jù)上述表達，同一類/id下的css hack可寫為: .searchinput background-color :#333;/*h 者皆“廣/*background-color:

23、#666 'important; /*僅 ie7*/ *background-color:#999; /*僅 ie6 ie7 */ background-color:#999; /*僅 ie6*/ background-color:red0;ie8 和 ie9 都支持； background-color:blue90;僅 ie9 支持；一般三者的書寫順序為：ff、ie7、ie6.寫法二ie6可識別，而ie7及ff皆不能識別，所以當只針對ie6與ie7及ff之間的區(qū)別時，可這樣書寫：.searchinput background-color :#333;/通用 */_background

24、-color:#666;/*僅 ie6 可識別*/寫法三：*+html與*html是ie特有的標簽，firefox暫不支持。.searchinput background-color:#333;*html .searchinput backgroundcolor:#666;/*僅 ie6*/*+html .searchinput background-color:#555;/*僅 ie7*/屏蔽ie瀏覽器：select是選擇符，根據(jù)情況更換。第二句是mac上safari瀏覽器獨有的。*:lang(zh) select font:12px iimportant; /*ff 的專用*/select

25、zempty font:12px iimportant; /*safari nj'£*/ie6 nf識別：這里主要是通過css注釋分開一個屬性與值，注釋在冒號前。select display /*ie6 不識別*/:none;2、清除浮動：在firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時 用這個清除浮動的hack來對父級做一次定義，那么就可以解決這個問題。select:after content:"."displayzblock;heightzo;clear :both;visibilityzhidden;css+di

26、v標簽命名規(guī)范頁頭:header背錄條zloginbar標志:logo側(cè)欄:sidebar廣告:ba nner導(dǎo)航:nav子導(dǎo)航:subnav菜單:menu子菜單:submenu搜索:search滾動:scroll頁面主體:main內(nèi)容:content標簽頁:tab文章列表：list提示信息:msg 小技巧:tips欄目標題:title友情鏈接:friendlink頁腳:footer力口 azjoinus指南:guild服務(wù):service熱點:hot新聞:news下載:download注冊:regsiter狀態(tài):status按鈕:btn投票:vote合作伙伴:partner版權(quán):copyri

27、ght1.cssid的命名外套:wrap主導(dǎo)航:mainnav子導(dǎo)航:subnav頁腳:footer整個頁面:content頁眉：header頁腳:footer商標zlabel標題:title主導(dǎo)航:mainnav(globalnav)頂導(dǎo)航:topnav邊導(dǎo)航:sidebar左導(dǎo)航 zleftsidebar右導(dǎo)航:rightsidebar旗志:logo標語:banner菜單內(nèi)容 1:menul content菜單容 mzmenucontainer子菜單:submenu邊導(dǎo)航圖標:sidebaricon注釋:note容器:contai ner內(nèi)容:content搜索 zsearch登陸zlog

28、in功能區(qū):shop（如購物車，收銀臺）當前的currentdiv+css網(wǎng)頁設(shè)計規(guī)范1、網(wǎng)頁html代碼最前面必須包括w3c聲明，以便符合標準： 一般網(wǎng)頁：<!doctype html public”/w3c/dtdxhtml 1.0 transitional/en"',http:/www. /tr/xhtml 1 /dtd/xhtml 1 -transitional.dtd"><html xnilns=h/1999/xhtmr,>框架頁：<! doctype html public”j/w

29、3c/dtdxhtml 1.0 frameset/enh"/tr/xhtml 1/dtd/xhtml 1 frameset.dtd"><html xmlns=n/1999/xhtml">2、網(wǎng)頁編碼聲明：簡體中文網(wǎng)頁為gb2312<meta http-equiv=mcontent-typeh content=mtext/html; charset=gb2312m />繁體中文網(wǎng)頁為big5<meta http-equiv=hcontent-typeh content

30、=ntext/html; charset= big5m />英文網(wǎng)頁為utf8<meta http-equiv=hcontent-typem content=ntext/html; charset= utf-8h />3、釆用css鏈接方式，全站使用同一個css文件，實現(xiàn)內(nèi)容與表現(xiàn)分離：<link href=himages/style.cssn iel二"stylesheet" type=ntext/cssh>不要將樣式直接寫在頁面html代碼中，頁面中不得使用vfontx/font>、<style>等標簽。4、css文件屮需

31、要對一些基本的標簽進行定義或重置：*padding:o;margin:0;body,td,th,div font-family:宋體；font-size: 12px;color: #000000;body background:#ffffff;p（line-height: 150%;a:link color: #000000;text-decoration: none;a:visited color: #000000;text-decoration: none;a:hover color: #ff()()()o;text-decoration: underline;a:active color

32、: #000000;text-decoration: none;hlcolor:#000000;line-height: 150%;font-size:24px;iilist-style:none;word-break: keep-all;white-space: nowrap;5網(wǎng)頁設(shè)計完成后，必須分別在internet explorer 6.0和firefox3.0進行兼容性測試，確保頁 面表現(xiàn)在這兩個主流瀏覽器中保持完全一致，無錯位、重疊現(xiàn)象。6、解決兼容性問題常用css代碼有：1) div對齊方式有居左、居中、居右三種方式，居中的要清除浮動：clear:both;否則就會有 重疊現(xiàn)象。

33、2) 隱藏超出部分：overflow:hidden;3) 設(shè)置固定寬度：width: 100pxo除特殊需要外，div 一般不設(shè)置高度，寬度、髙度不能使 用百分比，以免在各瀏覽器中出現(xiàn)較大誤差。4) 給 div 臨時加邊框：border:ipx solid;5) 用jimportant;為 ie 和 ff 設(shè)置不同樣式,如：width: 100px!important; width: 102px;前面是 ff樣式，后面是ie樣式。6) 判斷ie瀏覽器版本調(diào)用不同的樣式表。<!-iflte ie 6><link rel二"stylesheet" type二&

34、quot;text/css” hre仁"images/css.css" /><!endif|>v!if 1e7><link rel=nstylesheeth type=htext/cssm hre仁himages/css2.cssn /><!endifj><!-if ie 8><link rel=hstylesheeth type=htext/cssh href=,images/css3.cssm /><!endif>7）屏蔽ie7。<meta http-equiv=,fx-ua-co

35、mpatibleh content=uie=emulateie7h />7、信息列表用ul,li形式，減少代碼冗余。如：<div><ul><lix/li></ul></div>8、w3c驗證。通過w3c組織官方網(wǎng)站可以驗證css是否符合標準，網(wǎng)址是： /css-validatoi7checkaeferer1）所有標簽都必需使用小寫2）所有標簽內(nèi)之屈性都要有值且不可省略雙引號或單引號3）所有標簽必須成對，若非成對需加上/在最后4）一個網(wǎng)頁最少要包含的標簽<html><head

36、><meta http-equiv=ncontent-typeh content=mtext/html; charset= gb2312h /><title> 標題 </title></head><body>內(nèi)容</body></html>5）若要顯示<、>、&的話，需輸入：&lt;&gt; 若要顯示&于網(wǎng)頁中的話，則需輸入：&amp;6）標簽順序不可錯亂，應(yīng)該是：<b><p>文字</p></b>7）注釋文

37、字中不可包含，html注釋形式：v!注釋文字>,css注釋形式：/*注釋文 字*/在頁而中除了開始、結(jié)束、javascript代碼處需要加一些必要的注釋外，其他地方盡量少寫 注釋，有時注釋太多也會引起一些問題。在樣式表中可以適當加些注釋，簡要說明樣式的用途、范圍等。8、頁面引用樣式時使用class二” sty lei",而不是id二” stylcl",把id留給程序員使用，提高樣 式可重用性，減小css文件體積。9、html代碼要適當縮進（可在代碼前按tab鍵，或頁面全部做完后，在dw代碼視圖屮執(zhí)行“套用源格式”，不要有空白行。4-s242526<div cla

38、ss二"bgg"><table width二"950" border二"d" cellspacing二"o' <!dwl ayouttable>套用源格式(將源格式應(yīng)用于選定內(nèi)客(e)rl zu i n代碼格式設(shè)置 編輯標簽庫 枚才u10、網(wǎng)頁屮圖片的使用。1) 網(wǎng)頁中最好使用gif、jpg格式圖片，由于png圖片在瀏覽器中的兼容性還有問題，故不 建議使用。2) 欄目標題背景、圓角背景、邊框背景、標題前的icon圖標等可以寫在background:url(); 里。3) 網(wǎng)站logo、more

39、 new hot、廣告位等圖片需使用<img>標簽，以便為其添加鏈接。11、網(wǎng)頁整體必須在瀏覽器中居中顯示,即：div margin:。auto;。12、如果網(wǎng)頁中同時有飄浮圖片、下拉菜單、彈出對話框、flash,前三者耍位于flash ±方。 需在flash中加以下透明代碼：<param name二"wmode” value=',transparent',> /ie<embed wmode="transparent"> /firefox13、設(shè)置網(wǎng)頁滾動條的樣式：html scrollbar-face

40、-color:#f6f6f6;scrol lbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#0()0;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;14、英文、數(shù)字在ff下不自動換行，需加以下代碼：word wrap: break word;15、注意水平、垂直方向的對齊、留白問題。16、網(wǎng)頁寬度。一般窄屏寬為760px,寬屏為950px。17、樣式的

41、命名應(yīng)該符合語義化耍求，即一看樣式名就可知道這個樣式大概用在什么地方、 有什么用途，方便以后調(diào)用、維護。如頂部樣式則為.headero技巧代碼1 控制橫向和縱向滾動條的顯隱？<body style=hoverflow-y:hiddenh> 去掉 x 軸<body style=hoverflow-x:hiddenh> 去掉 y 軸<body scroll=fo”>不顯2表格變色<tdonmouseout=mthis.style.backgroundcolor=fmtstyle=,cursor: handu>3. 禁止復(fù)制，鼠標拖動選取<bod

42、yondragstart=window.event. returnvalue=falseoncontextmenu=window.eve ntreturnvalue=falseonselectstart=event.returnvalue=false>4普通iframe頁面<iframe name=,'namen src=,main.htmn width=450, height=h287nscrolling=hauton frameborder=nohx/iframe>5.iframe自適應(yīng)高度<iframe src=,findex.asp,f framebor

43、der=false scrolling=,fautofl width=,f100%lf height=m100%n frameborder=no ></iframe>6.ie地址欄前換成自己的圖標&可以在收藏夾中顯示出你的圖標<link rel="shortcut icon" href=nfavicon.icoh><link rel=nbookmarkn href=mfavicon.icon>7字號縮放 越來越多的人長時間的泡網(wǎng)，眼鏡的普及率也越來越高，讓文字大點，讓更多的用戶看的更 清楚。<script type=,

44、ftext/javascript,f>function dozoom(size)document.getelementbyld(fzoom,).style.fontsize=size4-fpxf;</script><span id=,zoom,>需要指定大小的文字</span><ahref=,fjavascript:dozoom(16),f>大v/a><ahref=,fjavascript:dozoom(14)f,>中</$：> <a href=njavascript:dozoom(12),f>小

45、</a>8.簡單的跳轉(zhuǎn)網(wǎng)頁代碼如果你要讓頁面顯示3秒鐘之后跳轉(zhuǎn)，可以在html代碼的vheadx/head>部分加上這樣的代碼：<meta http-equiv=mrefreshn content=,f3; url=h>9.iframe(嵌入式幀)口適應(yīng)高度填寫的嵌入地址一定要和本頁面在同一個站點上，否則會提示“拒絕訪問！ ”。對跨域引用 有權(quán)限問題，請查閱其他資料。<iframe name=mguestbook,f src=hgbook/index.aspn scrolling=no width=n100%”height=n100%“frameborder

46、=noonload=,ldocument.allfguestbook1.style. height=guestbook.document.body.s crollheightmx/iframe>10.跳轉(zhuǎn)菜單新窗口<selectname=hselecthonchange=hwindow.open(this.optionsthis.selected index.value)h><option value=h in ternet explorer</option><option value=hlf> microsoft home</option

47、><option value=,'n> developer network</option></select>11 .flash透明選項<param name=,wmodeh value=ntransparent”a12 添加到收藏夾和設(shè)為首頁<a href=# >設(shè)為首頁v/a><a href=,javascript:window.external.addfavorite(,站長設(shè)計網(wǎng)')"> 收藏本站v/a>13 .記錄并顯示網(wǎng)頁的最后修改時間<script ianguage

48、=javascript>document.write("最后更新時|司：” + documentastmodified +</script>14.節(jié)日倒計時<script language=,javascript,>var timedate= new date(noctober 1,2002”)；var times= ”國慶節(jié)”;var now = new date();var date = timedate.gettime() - now.gettime();var time = math.floor(date / (1000 * 60 * 60 *

49、24);if (time >= 0)document.write("現(xiàn)在離”+times+”還有：”+time +”天”)</script>15加在head里禁止緩存<meta http-equiv=hexpiresh content="0”><meta http-equiv=,cache-contror, content=,no-cache,><meta http-equiv=,pragmam content=,no-cache,>16.讓iframe框架內(nèi)的文檔的背景透明<iframesrc=habout :&

50、lt;bodystyle=fbackground:tra nsparent'”allowtra nsparency>v/iframe>17 打開窗口即最大化<script language=f,javascript,f> beginself.moveto(0,0)self. resizeto(screen.availwidth,screen.availheight)/ end -> </script>18加入背景音樂 <bgsound src=f,mid/windblue1.midlf loop=,-1h> 只適用于 ie<e

51、mbed src=,fmusic.midn autostart=htruef, loop=ntruen hidden=ntruem> 對netscape ,ie 都適用19 滾動<marquee direction=up height=146 onmouseout=start() onmouseover=stop()scrollamount=2> 滾動信息</marquee>20.防止點擊空鏈接時，頁面往往重置到頁首端代碼"javascript:void(null)”代替原來的“#”標記21 .文字或圖片彈出指定大小的窗口在body中加入<scri

52、pt ianguage=njavascriptn type=,text/javascriptn>functionmm_openbrwindow(thellrl,winname,features)window.open(theurl,winname,features);</script>彈出代碼<ahref=h#ntarget=h_selfmonclick=mmm_openbrwi ndow('windows01 .htm,/,/width=550,height=380,)h width=”550” height=m380u border=hon>圖片或文字

53、v/a>22 .跳轉(zhuǎn)頁面代碼<meta httpequiv=''refresh'' content=n5;url='*>23.細線分隔線<hr noshade size=o color=#cococo>24.網(wǎng)頁中的自動換行<td style="word七reak:break-all">就搞定了。完整的是word-wrap:style=f,table-layout:fixed; word-break:break-all;break-wordh25消除ie6自動出現(xiàn)的圖像工具欄,設(shè)置galler

54、yimg屬性為false或no .<img src=nmypicture.jpgh height=”100px” width=”1 oopx”galleryimg=tfno,l>26禁止頁面正文內(nèi)容被選取<body oncontextmenu=hreturn false11 ondragstart=hreturn false11 onselectstart =hreturnfalse*1onselect=hdocument.selection.empty ()noncopy=hdocument.selection.empty()n onbeforecopy=11 return

55、 falsef,onmouseup=ftdocument.selection.empty ()h>27.不能點右鍵，不用ctrl+a,不能復(fù)制作！<body one on textmenu=hwindow.event. returnvalue=falselfon keypress=hwindow.event. returnvalue=falsen onkeydown=,fwindow.event.returnvalue=falseh onkeyup=f,window.event, return value=false,f ondragstart=f,window.event.ret

56、urnvalue=false,t on selectstart=f,event.returnvalue=falsem></body>2&ie瀏覽器支持一個body屬性bgproperties,它可以讓背景不滾動: <body background=''圖片文件” bgproperties=,fixed,>29.隨機變換背景圖彖(一個可以刷新心情的特效)<script language=mjavascriptm>image = new array(4); 定義image為圖片數(shù)量的數(shù)組image 0 = 'tuo.gif&

57、#39; 背景圖象的路徑image 1 = *tu1 .gif'image 2 = *tu2.g訐，image 3 = *tu3.gifimage 4 = 'tu4.gifnu mber = math.floor(math.random() * image length);document.write("vbody background="+imagenumber+”：>”);</script>30圖片表單按鈕 <form id=ftform1m name=hform1h method=nposth action=fmf>hei

58、ght=h22h<imgsrc=nlogin.girwidth=n62nonclick=hdocument.form1 .submit()f, /></form>31 .左右陰影背景的css定義方法body text-align:center;background-repeat: repeaty;background-position: center;background-image: url(./images/bg.jpg);32. 劃過鏈接手型鼠標style=f,cursor:ha nct33. 如何關(guān)閉層<div id=fllayer1 ffx/div><a href=,f#lf onclick=hlayer1.style.display=,nonef,f>關(guān)閉層v/a>34.關(guān)閉窗口的腳本<a href=javascript:close()>關(guān)閉窗口v/a>35 .如果文字過長，則將

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論