科技新知


CSS 高度不同之解決方法

用CSS 做網頁

用 css 及用table來做網頁的比較表:

  用table來做網頁 比較 用css來做網頁
檔案大小、讀取速度 檔案比較大,故讀取速度慢 < 檔案小很多,故讀取速度較多
無障礙網頁 不符合 < 完全符合
網頁定位問題 要用table中之table來做很麻煩 < 位置有指令,很簡單
做網頁的速度 每次都要重新來過,費時麻煩 < 有指令重複性很高,做網頁很快
IE、Firefox相容問題 沒有問題 > 大有問題
高度、寬度問題 沒有問題 > 大有問題

綜合上述,只要能解決高度、寬度、相容問題,我們是建議用css來做網頁是比較好。以下是範例:

一、宣告css擺放位置於 js/styles.css:

<head><link rel="stylesheet" type="text/css" href="js/styles.css"></head> 

二、首頁內容 indexEdit.htm

         <div id="La_0" class="pcc t2"><img src=images/top.gif width="978" height="59" border="0"></div>  /* 網頁 頂端 */

         <div id="Lb_0" class="pcc t2"><?=$sOut?></div>      /* 網頁 目錄選單 */

         <div id="Lc_0" class="pcc t2">       /* 網頁 中段 */

             <div id="Lc_Window"><?=$sShowWindow?></div>   /* 中段 櫥窗 */

            <div id="Lc_News"><?=$sShowNews?></div>   /* 中段 公告 */

            <div id="Lc_Rem" class="pct t4t">我們追求人類想飛的夢想! 我們追求人類想飛的夢想! 我們追求人類想飛的夢想!</div>   /* 中段 說明 */

       </div>

三、內頁內容  mainEdit.htm

      <div id="La_0" class="pcc t2"><img src=images/top2.gif width="978" height="59" border="0" usemap="#Map0">  /* 網頁 頂端 */

              <map name="Map0"><area href="index.php" shape="rect" coords="825,2,925,50"></map>   /* 網頁 回首頁 */

      </div>

      <div id="Lb_0"><?=$sOut?></div>    /* 網頁 目錄選單 */

      <div id="Lc_0">             /* 網頁 中段 */

          <div id="Lc_left" class="plt t2"><?=$sShowMeu?></div>    /* 中段 標題選單 */

          <div id="Lc_content" class="plt t2"><?=$sShowStr?></div>   /* 中段 標題內文 */

     </div>

四、底頁電話地址 bottomEdit.htm

         <div id="Ld_0"><?=$sShowInf?></div>

五、css內容:

.t1 { font-size: 9.0pt;                  /* 字型 1號 */

color: #666666 ;

font-family: Arial, Helvetica, sans-serif;

}

.t2 { font-size: 10.0pt;              /* 字型 2號 */

color: #666666 ;

font-family: Arial, Helvetica, sans-serif;

}

.t2t { font-size: 10.0pt;              /* 字型 1號 加粗 */

font-weight: bold;

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.t3 { font-size: 12.0pt;            /* 字型 3號 */

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.t3t { font-size: 12.0pt;          /* 字型 3號 加粗 */

font-weight: bold;

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.t4 { font-size: 14.0pt;          /* 字型 4號 */

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.t4t { font-size: 14.0pt;         /* 字型 4號 加粗 */

font-weight: bold;

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.t5 { font-size: 18.0pt;         /* 字型 5號 */

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.t5t { font-size: 18.0pt;        /* 字型 5號 加粗 */

font-weight: bold;

color: #333333;

font-family: Arial, Helvetica, sans-serif;

}

.plt { text-align: left;          /* 位置 水平置左 垂直置上 */

vertical-align: top;

}

.prt { text-align: right;        /* 位置 水平置右 垂直置上 */

vertical-align: top;

}

.pct { text-align: center;      /* 位置 水平置中 垂直置上 */

vertical-align : top;

}

.plc { text-align: left;          /* 位置 水平置左 垂直置中 */

vertical-align: middle;

}

.plb { text-align: left;        /* 位置 水平置左 垂直置下 */

vertical-align: bottom;

}

.prc { text-align: right;      /* 位置 水平置右 垂直置中 */

vertical-align: middle;

}

.pcc { text-align: center;    /* 位置 水平置中 垂直置中 */

vertical-align: middle;

}

.prb { text-align: right;      /* 位置 水平置右 垂直置下 */

vertical-align: bottom;

}

.pcb { text-align: center;     /* 位置 水平置中 垂直置下 */

vertical-align: bottom;

}

a { color: #0000FF;           /* 超連結不加底線 */

text-decoration: none ;

}

a:visited { color: #0000FF;        /* 超連結不加底線 */

text-decoration: none;

}

a:hover { text-decoration:none ;     /* 超連結不加底線 */

color:#ff9900 ;

}

.pg { page-break-before: always}       /* 跳頁 */

 

p { font-size:0.815em;              /* 段落 */

line-height:1.6em;

color:#333333;

margin-top:1em;

margin-left:0.8em;

margin-right:0.8em;

margin-bottom:0;

}

#La_0 { position: relative;         /* 網頁 頂端 */

width: 980px;

height: 59px;

left: 50%;

margin-left: -500px;

background: #6BADD6 ;

border: 1px solid #B2B9C4;

}

#Lb_0 { position: relative;       /* 網頁 目錄選單 */

width: 980px;

height: 30px;

left: 50%;

margin-left: -500px;

background: #6BADD6 ;

border: 1px solid #B2B9C4;

}

#Lc_0 { position: relative;       /* 網頁 中段 */

width: 980px;

left: 50%;

margin-left: -500px;

background: #AEDCF9 ;

border: 1px solid #B2B9C4;

overflow: hidden;

}

#Lc_Window { width: 980px ;      /* 中段 櫥窗 */

height: 160px ;

background: #80ffff ;

border: 1px solid #B2B9C4;

}

#Lc_News { width: 500px ;       /* 中段 公告 */

margin-top: 10px;

background: #A7BDC0 ;

border: 1px solid #B2B9C4;

}

#Lc_Rem { width: 980px ;       /* 中段 說明 */

height: 60px;

background: #AEDCF9 ;

padding-top: 20px;

}

#Lc_left { text-align: left;      /* 中段 標題選單 */

position: absolute ;

width: 200px;

left:0px;

background: #A6C1D1 ;

padding-top: 10px;

padding-bottom: 2000px;

margin-bottom: -2000px;

}

#Lc_content { text-align: left;      /* 中段 標題內文 */

width: 784px ;

margin-left: 200px;

background: #D4DCE1 ;

}

#Ld_0 { position: relative;         /* 網頁 底端 */

width: 980px;

height: 50px;

left: 50%;

margin-left: -500px;

background: #B6D2E3 ;

border: 1px solid #B2B9C4;

}

 
 
  All right reserved 2006 by  
統編:70384768 連絡電話:、0921-846099 傳真: