池水間 - 關於斗數排盤設計 ::: 睡蓮‧池水間

子標題：關於斗數排盤設計 - 下

　　這是用XHTML Strict寫的貼盤代碼放到不同DOCTYPE下的W3C檢驗結果：

文檔類型	HTML		XHTML
W3C 檢驗結果	4.01 Transitional	4.01 Strict	1.0 Transitional	1.0 Strict	1.1

　　接下來看看所寫的代碼內容，為了方便讀者觀看，全部代碼不排成一行，以原始形式排列出來：

<table class="wl_zewei">
     <tr>
         <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS2b">陀羅<span class="wl_strength">陷</span></p>
	           <p class="wl_TS2b">鈴星<span class="wl_strength">得</span></p>
	           <p class="wl_TS2a">左輔</p>
	           <p class="wl_TS2c">天馬</p>
	           <p class="wl_TS3a">流馬</p>
	           <p class="wl_TS3a">流鉞</p>
	           <p class="wl_TS1">破軍<span class="wl_strength">平</span><span class="wl_FVb">祿</span></p>
	           <p class="wl_TS1">武曲<span class="wl_strength">平</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">天虛</p>
	           <p class="wl_MS1">天月</p>
	           <p class="wl_MS2">天廚</p>
	           <p class="wl_MS2">恩光</p>
	           <p class="wl_MS4">歲破</p>
	           <p class="wl_MS4">歲驛</p>
	           <p class="wl_MS4">力士</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>乙已</strong>‧<em>35 - 44</em></span>
	           <span class="wl_BR2">福</span>
	           <span class="wl_BR3">子女</span>
	      </div>
         </td>	
         <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS2b">地劫</p>
	           <p class="wl_TS2c">祿存<span class="wl_strength">廟</span></p>
	           <p class="wl_TS1">太陽<span class="wl_strength">旺</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS2">龍德</p>
	           <p class="wl_MS2">八座</p>
	           <p class="wl_MS1">旬空</p>
	           <p class="wl_MS4">龍德</p>
	           <p class="wl_MS4">息神</p>
	           <p class="wl_MS4">博士</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>丙午</strong>‧<em>25 - 34</em></span>
	           <span class="wl_BR2">田</span>
	           <span class="wl_BR3">夫妻</span>
	      </div>
         </td>	
         <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS2b">擎羊<span class="wl_strength">廟</span></p>
	           <p class="wl_TS1">天府<span class="wl_strength">廟</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">華蓋</p>
	           <p class="wl_MS1">旬空</p>
	           <p class="wl_MS1">白虎</p>
	           <p class="wl_MS1">天哭</p>
	           <p class="wl_MS2">天才</p>
	           <p class="wl_MS4">白虎</p>
	           <p class="wl_MS4">華蓋</p>
	           <p class="wl_MS4">官府</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>丁未</strong>‧<em>15 - 24</em></span>
	           <span class="wl_BR2">官</span>
	           <span class="wl_BR3">兄弟</span>
	      </div>
         </td>	
         <td class="wl_areaHL">
	      <div class="wl_topStars">
	           <p class="wl_TS1">天機<span class="wl_strength">得</span><span class="wl_FVa">科</span><span class="wl_FVc">忌</span></p>
	           <p class="wl_TS1">太陰<span class="wl_strength">利</span><span class="wl_FVa">祿</span><span class="wl_FVb">科</span><span class="wl_FVc">權</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">劫殺</p>
	           <p class="wl_MS1">天傷</p>
	           <p class="wl_MS2">天德</p>
	           <p class="wl_MS2">三台</p>
	           <p class="wl_MS2">天巫</p>
	           <p class="wl_MS2">解神</p>
	           <p class="wl_MS4">天德</p>
	           <p class="wl_MS4">劫煞</p>
	           <p class="wl_MS4">伏兵</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>戊申</strong>‧<em>05 - 14</em></span>
	           <span class="wl_BR2">僕</span>
	           <span class="wl_BR3HL">命宮</span>
	      </div>
	 </td>
     </tr>	
     <tr>
	 <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS2b">火星<span class="wl_strength">陷</span></p>
	           <p class="wl_TS2b">地空</p>
	           <p class="wl_TS1">天同<span class="wl_strength">平</span><span class="wl_FVa">權</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">大耗</p>
	           <p class="wl_MS3">紅鸞</p>
	           <p class="wl_MS2">月德</p>
	           <p class="wl_MS4">小耗</p>
	           <p class="wl_MS4">攀鞍</p>
	           <p class="wl_MS4">青龍</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>甲辰</strong>‧<em>45 - 54</em></span>
	           <span class="wl_BR2">父</span>
	           <span class="wl_BR3">財帛</span>
	      </div>
	 </td>		
	 <td class="wl_areaC" rowspan="2" colspan="2">
	      <h4 class="wl_Ctitle">命主資訊</h4>                 
	      <div class="wl_C">
	           <pre class="owner">
黎示例　陰男　62歲
1947 - 03 - 20　13：20
丁亥年　二月二十八日　未時
大限：乙卯‧02 - 11　　　流年：戊子
大驛土　土五局
命主：巨門　　　身主：天機
	           </pre>
	      <h4 class="TFtitle">時辰確定表</h4> 
<!-- ●●●●●↓↓時辰確定表區段↓↓●●●●●--><textarea class="TFblock" rows="200" cols="35">
01》命主：黎示例
02》性別：男
03》公曆出生日期：1947年3月20日下午1:20
04》農曆出生日期：1947年2月28日下午1:20
05》已自行調節夏令時間：否
06》出生地點：中國廣東省
07》目前居住地點：香港
08》身高：170公分
09》體重：80公斤
10》體形：略胖
11》個性：樂天，風趣健談
12》婚姻狀況：已婚--1妻
13》結婚日期：公曆1968年
14》離異日期：-------
15》配偶/對象出生日期：公曆1950年7月7日上午10:00
16》子女數目：2男1女
17》子女出生日期：長男─公曆1970年2月1日，次男─公曆1975年5月20日，幼女─公曆1979年10月30日
18》父親出生日期：農曆1915年4月
19》母親出生日期：農曆1920年8月
20》父母生肖：父-兔/母-猴
21》父母狀況：仙逝
22》與父母之間關係：良好
23》兄弟姊妹數目：1兄1姊3弟2妹
24》與兄弟姊妹之間關係：與其中一弟感情不佳，其餘融洽
25》交友情況：朋友眾多
26》出國記錄：1977年─到美加旅遊，1982年─到法國旅遊
27》居家環境：環境清幽，背山面海，西邊有園林小景
28》財務狀況：富足
29》職業：退休
30》命主關切問題：這樣這樣如此如此........
</textarea><!--●●●●●↑↑時辰確定表區段↑↑●●●●●-->
	      </div>
	      <h4 class="wl_Ctitle">關於排盤</h4>
	      <div class="wl_about">
	           <a href="網址">官網</a>
	           <a href="網址">支援</a>
	           <a href="網址">說明</a>
	      </div>
	 </td>		
	 <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS2a">天鉞</p>
	           <p class="wl_TS2a">右弼<span class="wl_FVc">科</span></p>
	           <p class="wl_TS1">貪狼<span class="wl_strength">利</span><span class="wl_FVb">忌</span><span class="wl_FVc">祿</span></p>
	           <p class="wl_TS1">紫微<span class="wl_strength">旺</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">破碎</p>
	           <p class="wl_MS2">封誥</p>
	           <p class="wl_MS2">天壽</p>
	           <p class="wl_MS4">吊客</p>
	           <p class="wl_MS4">災煞</p>
	           <p class="wl_MS4">大耗</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>己酉</strong>‧<em>115 - 124</em></span>
	           <span class="wl_BR2">遷</span>
	           <span class="wl_BR3">父母</span>
	      </div>
	 </td>
    </tr>	
    <tr>
	 <td class="wl_areaHL">
	      <div class="wl_topStars">
	           <p class="wl_TS2a">文昌<span class="wl_strength">利</span></p>
	           <p class="wl_TS3a">流昌</p><p class="wl_TS3a">流魁</p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">空亡</p>
	           <p class="wl_MS1">官符</p>
	           <p class="wl_MS1">天使</p>
	           <p class="wl_MS2">龍池</p>
	           <p class="wl_MS4">官符</p>
	           <p class="wl_MS4">小耗</p>
	           <p class="wl_MS4">將星</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>癸卯</strong>‧<em>55 - 64</em></span>
	           <span class="wl_BR2HL">命</span>
	           <span class="wl_BR3">疾厄</span>
	      </div>
	 </td>		
	 <td class="wl_areaHL">
	      <div class="wl_topStars">
	           <p class="wl_TS1">巨門<span class="wl_strength">陷</span><span class="wl_FVa">忌</span><span class="wl_FVb">權</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">天刑</p>
	           <p class="wl_MS1">寡宿</p>
	           <p class="wl_MS1">天使</p>
	           <p class="wl_MS3">天喜</p>
	           <p class="wl_MS4">病符</p>
	           <p class="wl_MS4">天煞</p>
	           <p class="wl_MS4">病符</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>庚戌</strong>‧<em>105 - 114</em></span>
	           <span class="wl_BR4">身</span>
	           <span class="wl_BR2">疾</span>
	           <span class="wl_BR3">福德</span>
	      </div>
	 </td>
    </tr>	
    <tr>
	 <td class="wl_area">
	      <div class="wl_topStars">
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS3">天姚</p>
	           <p class="wl_MS1">孤辰</p>
	           <p class="wl_MS1">截路</p>
	           <p class="wl_MS2">天官</p>
	           <p class="wl_MS2">天才</p>
	           <p class="wl_MS4">貫索</p>
	           <p class="wl_MS4">亡神</p>
	           <p class="wl_MS4">將軍</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>壬寅</strong>‧<em>65 - 74</em></span>
	           <span class="wl_BR2">兄</span>
	           <span class="wl_BR3">遷移</span>
	      </div>
	 </td>		
	 <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS3b">流羊</p><p class="wl_TS1">七殺<span class="wl_strength">廟</span></p>
	           <p class="wl_TS1">廉貞<span class="wl_strength">利</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS1">喪門</p><p class="wl_MS1">天傷</p><p class="wl_MS1">蜚廉</p>
	           <p class="wl_MS2">天貴</p><p class="wl_MS2">台輔</p><p class="wl_MS4">喪門</p>
	           <p class="wl_MS4">月煞</p><p class="wl_MS4">奏書</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>癸丑</strong>‧<em>75 - 84</em></span>
	           <span class="wl_BR2">夫</span>
	           <span class="wl_BR3">僕役</span>
	      </div>
	 </td>		
	 <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS3a">流祿</p>
	           <p class="wl_TS1">天梁<span class="wl_strength">廟</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS3">咸池</p>
	           <p class="wl_MS1">天空</p>
	           <p class="wl_MS1">陰煞</p>
	           <p class="wl_MS4">晦氣</p>
	           <p class="wl_MS4">咸池</p>
	           <p class="wl_MS4">陰煞</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>壬子</strong>‧<em>85 - 94</em></span>					           <span class="wl_BR2">子</span>
	           <span class="wl_BR3">官祿</span>
	      </div>
	 </td>		
	 <td class="wl_area">
	      <div class="wl_topStars">
	           <p class="wl_TS2a">天魁</p>
	           <p class="wl_TS2a">文曲<span class="wl_strength">得</span></p>
	           <p class="wl_TS3b">流陀</p>
	           <p class="wl_TS3b">流曲</p>
	           <p class="wl_TS1">天相<span class="wl_strength">得</span></p>
	      </div>
	      <div class="wl_middleStars">
	           <p class="wl_MS2">天福</p>
	           <p class="wl_MS2">鳳閣</p>
	           <p class="wl_MS2">年解</p>
	           <p class="wl_MS4">太歲</p>
	           <p class="wl_MS4">指背</p>
	           <p class="wl_MS4">喜神</p>
	      </div>
	      <div class="wl_bottomRanges">
	           <span class="wl_BR1"><strong>辛亥</strong>‧<em>95 - 104</em></span>
	           <span class="wl_BR2">財</span>
	           <span class="wl_BR3">田宅</span>
	      </div>
	 </td>
    </tr>
</table>

　　可以看到和一般貼盤代碼不同的是，這裡並沒有將文字解體以遷就垂直排列，除標籤外所用的屬性就只有“class”，排版任務主要由外部CSS來完成。

　　也許讀者會有疑問，CSS從代碼中分離出來了，那使用者張貼命盤時CSS部份要如何貼？

　　採用貼盤代碼與CSS分離法，目前在線上排盤程式中是個嶄新的概念。CSS部份需要由擁有網站管理權限者將CSS格式文件上傳到目錄後，才可以張貼無限量命盤。之所以要採用分離法，是有感於目前少數線上排盤程式於部份網站張貼命盤時出現各式各樣的問題，分離後的CSS 就可以扮演調整的角色，除此之外在維護全站所有已張貼的命盤時也就變得輕而易舉了。

分頁： « 1 2

睡蓮‧池水間

關於斗數排盤設計

子標題

評分

最新發表及資訊區

最新公告

最新文章

嵌入式內聯圖片

WL-OliveGreen

PHP 沈思錄之三：Smarty

樣板管理下儲存檔案後亂碼

Acid3算法更改　IE9/10滿分通過測試

避免常見的六種 HTML5 錯誤用法

CSS Specificity 在 IE 下的錯誤規則

文章分類

最新回覆

有關ｌｏｇｏ可以換嗎？

有關ｌｏｇｏ可以換嗎？

有關ｌｏｇｏ可以換嗎？

WL-OliveGreen

WL-OliveGreen

WL-OliveGreen

浮生錄回覆

最新浮生錄文章

最新留言

请教莲大：关于模板界面的修改

如何讓首頁的輪播區不在其他頁面顯示

xoops 首頁最新主題無法顯示主題類別(cbb4.03)

論壇區塊顏色無法跟佈景主題顏色一致

mysql 5.5

造訪統計

連結

睡蓮‧池水間

關於斗數排盤設計

子標題

引用

評分

最 新 發 表 及 資 訊 區

最新公告

最新文章

文章分類

最新回覆

浮生錄回覆

最新浮生錄文章

最新留言

造訪統計

連結

最新發表及資訊區