代碼學習群簡易教程（18）

位

代

碼本節講解定位代碼。在製作網頁的時候，幾乎都要應用到定位代碼。一段文字，一個圖片，要放置在網頁中的哪個位置，是「居左」對齊，還是「居中對齊」，或者是「居右對齊」，都離不開定位代碼。如果在網頁內容上層的某個部位，還要插入（或者說「覆蓋」）一些內容的話，那就更需要應用定位代碼啦！也許有的朋友會說：「網頁內容，幾乎都要應用到定位代碼？」「我製作的網頁，從來沒有應用過定位代碼呀？」。我的回答是：那是你應用了系統默認的定位樣式的緣故。也就是說，你製作的網頁中的內容都是「居左對齊」的啦。我在2012年至2013年發表的《代碼入門教程》 中，把「定位代碼」叫做「定位標籤」是錯誤的。定位代碼，只能作為某些標籤的屬性應用，因此，定位代碼，也可以叫做定位屬性。在這裡我順便講解一下標籤名稱與屬性的區別。標籤名稱，是指明它所修飾與管轄的網頁內容類型的。例如，「文字標籤」，專門修飾與管轄「文字」；「圖片標籤」，專門修飾與管轄「圖片」。「標籤名稱」在尖括弧中的位置，是佔據「首要」位置的。標籤名稱，沒有「屬值」與它相連接。而「屬性」呢，它是標籤中可以添加的一項內容。它起修飾與限制網頁顯示效果的作用。「屬性」在尖括弧中的位置，是在標籤名稱的後面的。屬性有「屬值」與其相連接。在製作網頁時，常應用的定位方式是「水平對齊」方式。下面講解幾種標籤中定位方式的應用：一、文字的定位方式：文字的定位方式，要在段落標籤、塊區標籤等標籤在應用，應用這些標籤控制文字的內容。水平對齊方式有三種類型：1、居左對齊：表達方式舉例：段落中的居左對齊：<p align=left>或者<p style="text-align: left">代碼舉例：<P style=" COLOR: rgb(250,0,200); FONT-SIZE: 28px" align=left>學習代碼要多理解代碼的意思，多製作網頁，多觀察顯示效果，多記錄製作筆記。這是學習代碼的根本方法。千萬不要死記硬背歐！</P>顯示效果：學習代碼要多理解代碼的意思，多製作網頁，多觀察顯示效果，多記錄製作筆記。這是學習代碼的根本方法。千萬不要死記硬背歐！「居左對齊」的對齊方式適用於散文類的文章。2、居中對齊：表達方式舉例：段落中的居中對齊：<p align=center>或者<p style="text-align: center">代碼舉例：<P style="COLOR: rgb(250,0,200); FONT-SIZE: 28px" align=center>透過秋葉灑落的一縷陽光<BR>我真想為你寫首詩 <BR>可手中的筆<BR>總是那樣的笨拙<BR>我拿什麼寫給你<BR>我的知己<BR><BR>仰望蒼穹如勾的一彎半月<BR>我真想為你寫首詩<BR>可手中的筆<BR>總是那樣的蒼白<BR>我拿什麼寫給你<BR>我的知己 <BR><BR>…… </P>顯示效果：透過秋葉灑落的一縷陽光我真想為你寫首詩可手中的筆總是那樣的笨拙我拿什麼寫給你我的知己仰望蒼穹如勾的一彎半月我真想為你寫首詩可手中的筆總是那樣的蒼白我拿什麼寫給你我的知己……「居中對齊」的對齊方式適用於詩詞類的文章。3、居右對齊：表達方式舉例：段落中的居右對齊：<p align=right>或者<p style="text-align: right">代碼舉例：<DIV style="COLOR: rgb(250,0,200); FONT-SIZE: 24px" align=right>「春天沒來」編撰</DIV><DIV style="COLOR: rgb(250,0,200); FONT-SIZE: 24px" align=right>2014年6月4日於北京</DIV>顯示效果：「春天沒來」編撰2014年6月4日於北京「居右對齊」的對齊方式適用於作者的署名以及作品的寫作時間等內容。上面講解的是文字作品中的對齊方式。二、圖片的定位方式：圖片作品中的對齊方式，與文字作品中的對齊方式相似。不過，圖片的寬度超過680px左右時，圖片的「居中對齊」就與「居左對齊」沒有多大的區別啦。圖片的三種對齊方式舉例：1、「居左對齊」圖片：代碼舉例：<P align=left><IMG title="" src="https://www.getit01.com/getimg_360.php?url=http://image73.360doc.com/DownloadImg/2014/06/0208/42232619_2.jpg"></P>效果：

2、「居中對齊」的圖片：代碼舉例：<P align=center><IMG title="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image73.360doc.com/DownloadImg/2014/06/0208/42232619_2.jpg"></P>效果：

3、「居右對齊」的圖片：代碼舉例：<P align=right><IMG title="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image73.360doc.com/DownloadImg/2014/06/0208/42232619_2.jpg"></P>效果：

在製作圖片網頁的時候，我們常常應用的是「居中對齊」的對齊方式。如果一篇網頁中，圖片的寬度不一致，有的圖片寬度超過700px，用某些瀏覽器觀看，顯示效果將不能「居中對齊」。代碼舉例：<P align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image31.360doc.com/DownloadImg/2011/07/0504/13814793_1.jpg"></P><P align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2708/11259065_20"></P><P align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image44.360doc.com/DownloadImg/2011/11/2712/19597464_1.jpg"></P><P align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image48.360doc.com/DownloadImg/2012/01/0319/20499710_30.jpg"></P>下面是我用兩種瀏覽器觀看上面網頁的顯示效果：1、用360安全瀏覽器6.3觀察上面網頁的截圖：<IMG title=360安全瀏覽器6.3觀察效果 src="https://www.getit01.com/getimg_360.php?url=http://userimage5.360doc.com/14/0606/13/4127803_201406061351030848.png">顯示效果接近於「居左對齊」。2、用QQ瀏覽器6.3觀察上面網頁的截圖：<IMG title=QQ瀏覽器觀察效果 src="https://www.getit01.com/getimg_360.php?url=http://userimage5.360doc.com/14/0606/13/4127803_201406061351050567.png">顯示效果為「居中對齊」。遇到上面所說的圖片無法居中對齊的情形，可將代碼「修改」一下。在每個段落標籤中添加一個最寬圖片的寬度值即可。代碼：<P style="WIDTH: 800px" align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image31.360doc.com/DownloadImg/2011/07/0504/13814793_1.jpg"></P><P style="WIDTH: 800px" align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2708/11259065_20"></P><P style="WIDTH: 800px" align=center><IMG title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image44.360doc.com/DownloadImg/2011/11/2712/19597464_1.jpg"></P><P align=center><IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 800px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 635px; BORDER-LEFT-WIDTH: 0px" title=春天沒來歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image48.360doc.com/DownloadImg/2012/01/0319/20499710_30.jpg"></P>三、移動標籤中的定位方式：移動標籤中的對齊方式，是指「移動內容」在「移動屏幕」中的位置而言的。代碼：<MARQUEE style="TEXT-ALIGN: left; FILTER: glow(color=yelow, strength=0); LINE-HEIGHT: 150%; WIDTH: 680px; FONT-FAMILY: 隸書; HEIGHT: 150px; COLOR: rgb(255,255,0); FONT-SIZE: 27pt" direction=up scrollAmount=2>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您</MARQUEE><BR><BR><MARQUEE style="TEXT-ALIGN: center; FILTER: glow(color=yelow, strength=0); LINE-HEIGHT: 150%; WIDTH: 680px; FONT-FAMILY: 隸書; HEIGHT: 150px; COLOR: rgb(255,255,0); FONT-SIZE: 27pt" direction=up scrollAmount=2>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您</MARQUEE><BR><BR><MARQUEE style="TEXT-ALIGN: right; FILTER: glow(color=yelow, strength=0); LINE-HEIGHT: 150%; WIDTH: 680px; FONT-FAMILY: 隸書; HEIGHT: 150px; COLOR: rgb(255,255,0); FONT-SIZE: 27pt" direction=up scrollAmount=2>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您<BR>春天沒來歡迎您</MARQUEE>上面的代碼中設置了「居左對齊」、「居中對齊」與「居右對齊」三種不同的對齊方式，其效果如下：春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您春天沒來歡迎您四、表格標籤中的定位方式：表格標籤中的對齊方式，是指表格在網頁中的水平位置而言的。居左對齊的表格代碼：<TABLE title=表格 border=3 cellSpacing=10 cellPadding=3 width_=300 background=地址 bgColor=#00f200 align=left height=100><TBODY><TR><TD><P><FONT style="FONT-SIZE: 29px" color=#000000>內容處</FONT> </P></TD></TR></TBODY></TABLE>效果：內容處居中對齊的表格代碼：<TABLE title=表格 border=3 cellSpacing=10 cellPadding=3 width_=300 background=地址 bgColor=#00f200 align=center height=100><TBODY><TR><TD><P><FONT style="FONT-SIZE: 29px" color=#000000>內容處</FONT> </P></TD></TR></TBODY></TABLE>效果：內容處居右對齊的表格代碼：<TABLE title=表格 border=3 cellSpacing=10 cellPadding=3 width_=300 background=地址 bgColor=#00f200 align=right height=100><TBODY><TR><TD><P><FONT style="FONT-SIZE: 29px" color=#000000>內容處</FONT> </P></TD></TR></TBODY></TABLE>效果：內容處表格標籤中的對齊方式，並不能控制單元格中放入的內容。單元格中的內容，應該在列標籤中添加對齊方式進行控制，也可以把單元格中的每個內容，放置到設置了對齊方式的段落標籤或者塊區標籤中進行控制。作業：1、認識水平對齊的三種表達方式。製作網頁時，根據具體情況，應用合適的水平對齊方式。2、水平對齊的三種方式各適用於哪些類型的文章？3、一篇網頁中有多張圖片的時候，如果不能「居中對齊」，應該用什麼方法處理？4、移動標籤中的對齊方式是指什麼？5、表格標籤中的對齊方式是指什麼？6、應該應用什麼方法控制單元格中內容的對齊方式？7、網頁內容不能正常顯示，一般有哪幾種原因？

網頁內容不能正常顯示的原因，大致有三點：一、網站伺服器的數據設置有問題；二、你使用的瀏覽器不支持；三、網頁代碼有錯誤。「春天沒來」謹啟2014年6月7日於北京「春天沒來」編撰2014年6月7日於北京
推薦閱讀：