網頁開發備忘

 

    BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

儘管可以用<img>直接插在內容中,但這是不推薦的。這裏的"輔助圖片"是指那些

不是作爲頁面要表達的內容的一部分,而僅僅用於修飾、間隔、提醒的圖片。例如:

相冊中的圖片、圖片新聞中的圖片,上面的3d盒模型圖片都屬於內容的一

部分,它們可以用<img>元素直接插在頁面裏,而其它的類似logo,標題圖片,列表

前綴圖片都必須採用背景方式或者其他CSS方式顯示。

 

爲頁面添加正確的DOCTYPE

1)過渡型(Transitional

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

設定一個名字空間(Namespace

 

直接在DOCTYPE聲明後面添加如下代碼:

 

<html XMLns="http://www.w3.org/1999/xhtml"> 

 

一個namespace是收集元素類型和屬性名字的一個詳細的DTDnamespace

聲明允許你通過一個在線地址指向來識別你的namespace。只要照樣輸入代碼就可以。

 

聲明你的編碼語言

 

爲了被瀏覽器正確解釋和通過標識校驗,所有的XHTML文檔都必須聲明它們所使

用的編碼語言。代碼如下:

 

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

 

這裏聲明的編碼語言是簡體中文GB2312,你如果需要製作繁體內容,可以定義爲BIG5

爲搜索引擎準備的內容

代碼如下,替換成你自己站點的內容就可以:

 

允許搜索機器人搜索站內所有鏈接。如果你想某些頁面不被搜索,推薦採用robots.txt方法

<meta content="all" name="robots" />

設置站點作者信息

<meta name="author" content="[email protected],阿捷" />

設置站點版權信息

<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />

站點的簡要介紹(推薦)

<meta name="description" content="新網頁設計師。web標準的教程站點,

推動web標準在中國的應用" />

站點的關鍵詞(推薦)

<meta content="designing, with, web, standards, xhtml, css, graphic, design,

layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />

 

給所有屬性值加引號 例:height="100",而不能是height=100

關閉所有的標籤例如:

 

<br /> <img src="webstandards.gif" />

背景圖象重複與否:[/B]

 

background-repeat:

repeat | repeat-x | repeat-y | no-repeat

 

注:

以上設置標籤的意義

repeat   圖象水平垂直方向都重複。

repeat-x  圖象水平方向重複。

repeat-y  圖象垂直方向重複。

no-repeat  圖象不重複。

 

說:

定義圖象重複方向是對於一些獨特的圖象定位而言。 

 

:

background-repeat: repeat(設定背景圖爲重複,如果重複一般不必設置,這個是瀏覽器默認的。) 

 

背景圖的地址最好寫全,就是 http://~~因爲據說,NETSCAPE4.0以下好象支持的不是很好。

 

背景圖象是否隨滾動條移動:

 

background-attachment: 

scroll | fixed

scroll屬於瀏覽器默認的,也就是隨滾動條移動,fixed爲不動。

 

[B]給背景圖定位:

 

---就是設置它顯示在哪裏.最上面top,還是左邊left

background-position:

| [percentage | length]{1,2}

|[top | center | bottom]

| [left | center | right] 

 

background-position:[percentage | length]是用X(橫座標)y(縱座標)定義,

background-position: 20px 40px;

 

background-position:[top | center | bottom] [left | center | right]

是一樣的意思了,三個任意兩個搭配可以產生不同的效果.

可以是background-position:top center;center bottom;top bottom;left,right.....

 

bottom:,top:,left:,right:,center:.

全部的設定:

 

{ background: background-color || background-image || background-repeat

|| background-attachment || background-position }

 

:

body{ background: #ffffff; background-image: url( http://user.7host.com/

bluemm/img/1bg.gif); background-attachment: fixed; background-repeat:

no-repeat; background-position: right bottom }

使你的主頁自動被搜索引擎收錄

   你一定爲了讓你的網站名揚天下而去各個搜索引擎註冊吧?在網上有很多機器人,

它們自動搜尋關鍵字,你只要在網站上設立這樣的關鍵字,就有可能被它們找到。

<head><meta http equiv=keywords content=yancheng,science,technolodgy,

information,network,politics,economic charset=gb2312></head>

   其中 CONTENT 這個屬性主要讓你放置一些你主頁裏的關鍵詞,而且這些關鍵詞

最好容易使人想到。

如果是有意義的圖片,不便用背景方法,可以用增高行距的辦法變通實現垂直居中,完整代碼如下:

 

<html>

<head>

<style>

body{TEXT-ALIGN: center;}

#center{ MARGIN-RIGHT: auto;

MARGIN-LEFT: auto;

height:200px;

background:#F00;

width:400px;

vertical-align:middle;

line-height:200px;

}

</style>

</head>

<body>

<div id="center"><img height="79" src="style/001/logo_w3cn_194x79.gif" width="194" border="0" /></div>

</body>

</html>

說明:vertical-align:middle;表示行內垂直居中,我們將行距增加到和整個DIV一樣高line-height:200px;然後插入圖片,就垂直居中了。

計數器的代碼:<tr>

          <td width="100%" align="center"><font size="3" color="#33CC00" class="f1">You

            are the</font><font size="4" color="242931"> <img src="http://202.113.53.130

          /counters/count.exe?dd=d|sh=T|df=tjmu.dat" align="absmiddle"><font size="3">

            <font color="#33CC00" class="f1">guests to access this page since

            Dec ,01,1997</font> </font></font></td>

        </tr>

 

    BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

儘管可以用<img>直接插在內容中,但這是不推薦的。這裏的"輔助圖片"是指那些

不是作爲頁面要表達的內容的一部分,而僅僅用於修飾、間隔、提醒的圖片。例如:

相冊中的圖片、圖片新聞中的圖片,上面的3d盒模型圖片都屬於內容的一

部分,它們可以用<img>元素直接插在頁面裏,而其它的類似logo,標題圖片,列表

前綴圖片都必須採用背景方式或者其他CSS方式顯示。

 

使用騰訊QQ提供的天氣預報教本,代碼如下:

<!-- 天氣預報 -->

<p><b>天氣預報</b></p>

<center>

<iframe id="weather" width="157" height=257 frameborder="0" scrolling="NO" src="http://appnews.qq.com/cgi-bin/news_qq_search?city=%C9%CF%BA%A3"></iframe>

</center>

city一項中需要填入所需預報城市編碼,默認值是深圳。其中的"%D6%D8%C7%EC"代表城市的代碼.

 

那麼如何得知你所在城市的代碼呢?其實很簡單,只需要到baidu搜索一下城市的名稱,比如"重慶",然後地址欄中的那個代碼就是了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章