對于web2.0的過度我們盡量使用xhtml格式來寫代碼,再次給大家推薦一個教程,就是php100教程。里面在php開發(fā)的前期有一個很好的xhtml教程,是李炎恢老師主講的,大家有時間的話好好學(xué)學(xué)。
其次新建html頁面時最好用DreamWeaver或者類似的網(wǎng)頁工具來建,因為它會自動生成一些代碼,如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這個代碼的指定,因為DOCTYPE會影響css的編譯,作為w3c的標準,我們一定要加上這個DOCTYPE的聲明。
下面主要講一下在css在網(wǎng)頁設(shè)計和布局中的技巧,讓你如何更好的去解決瀏覽器的兼容性問題
1.div的垂直居中問題。
首先呢,我說一下在代碼書寫時的一個問題,一個良好的代碼書寫習(xí)慣對于程序員來說非常重要。比如簡單的代碼縮進,css類的起名等。對于代碼的縮進,改善代碼的層次結(jié)構(gòu),再次我向大家推薦一款工具,就是微軟的Visual studio。因為本身來說我就是做.net開發(fā)的,所以對微軟的.net開發(fā)工具也比較熟悉。對于很多常見的代碼格式例如html,xml,aspx,asp,php等常見的網(wǎng)頁文件,他都可以對此進行代碼柵格化。這樣非常有利于找到層次結(jié)構(gòu),加快開發(fā)。具體方法是把以html,xml,aspx,asp或者php為后綴的網(wǎng)頁文件用visual studio打開,然后按下ctrl+E,然后按下ctrl+D.有時Visual Studio會提示不是vs(之后把visual Studio一律叫做vs)的內(nèi)部命令。這時不要慌張,做一個簡單的配置就可以。
點工具》》選項》》環(huán)境》》鍵盤》》重置,如果測試還是不行的話,就把剛才說的這個鍵盤里面的"應(yīng)用以下其他鍵盤映射方案"復(fù)選框勾選Visual C#2005,這樣應(yīng)該就沒有問題,如果大家在測試的過程中還有什么問題,可以在本網(wǎng)站(www.woyexing.com)的首頁聯(lián)系我。
下來說一下wrapper這個詞,在英文單詞中他是外套,外殼的意思。所以在html中,我們習(xí)慣性的在<body>和</body>之間新建一個<DIV class="wrapper">,以wrapper為類名的一個<div>.參考上一點,我們隨時可以利用vs把自己的代碼柵格化,使得整體美觀,有利于開發(fā)。
現(xiàn)在說div內(nèi)容的居中問題,首先給div一個高度,然后讓行高和div的高度一樣高;
示例代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.wrapper
{
border: #F00 solid 1px;
width: 998px;
height: 700px;
margin: 0 auto;
}
.wrapper .header
{
border: #00F solid 1px;
height: 40px;
line-height: 40px;
width: 996px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
頭部部分內(nèi)容頭部部分內(nèi)容頭部部分內(nèi)1容頭部部分內(nèi)容頭部部分內(nèi)容頭部部分2內(nèi)容
</div>
</div>
</body>
</html>