近年來小迷努力趕專題,把以前查詢外加學起來DIV標籤整理一下做個小筆記!XD

 


 

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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">
body,jsp{margin:0;padding:0;}
#apDiv1 {
width:1024px;      <<寬度設定1024px
margin: 0px auto;   <<邊界設定0px 自動
height: 1080px;      <<高度設定1080px
}
#apDiv2 {
background-color:#FFF;     <<背景顏色設定白色
height: 130px;
}
#apDiv3 {
background-color:#FFF;
height: 52px;
text-align:center;          <<格式對齊置中
}
#apDiv4 {
background-color:#FFF;
font-size: 50px;                              <<字型大小設定50px
font-family:"華康采風體W3(P)";         <<字體用"華康"系列
font-weight: bold;                           <<字的型態用粗體
text-align:center;
height: 898px;
}
#apDiv5 {
width: 20px;
float: left;                       <<DIV標籤靠左側
height: 1080px;
}
#apDiv6 {
width: 984px;
background-color:#FFF;
float: left;                      
height: 1080px;
}
#apDiv7 {
width: 20px;
float: left;
height: 1080px;
}
body {
background-image:
url(BackImage_1.gif);       <<背景圖用"BackImage_1.gif"
background-color: #399;         <<背景顏色是深綠色
}
</style>
</head>

<body>
<div id="apDiv1">
     <div id="apDiv5">

       放一張靠左邊直彩圖,做網頁的邊框美化
     </div>                              <<DIV5結尾
     <div id="apDiv6">
           <div id="apDiv2">  放Logo和登入登出的東西 </div>   <<DIV2結尾
           <div id="apDiv3">
               網頁按鈕,可純文字Key或放Flash按鈕,到時再用DW的"地圖連結"(名稱我忘了)
           </div>                               <<DIV3結尾
           <div id="apDiv4">
           放內文區,這塊我直接空白交給程式組,因為程式組人員說我幫拉表格對他們來說是不方便

           </div>                              <<DIV4結尾
     </div>                              <<DIV6結尾
     <div id="apDiv7">
        放一張靠右邊直彩圖,做網頁的邊框美化
     </div>                             <<DIV7結尾
</div>                              <<DIV1結尾

</body>
</html>

 

 

以圖示說明在CSS設定DIV標籤寬度與高度是怎麼算的.......

 

DIV  

arrow
arrow
    全站熱搜

    o迷苓o 發表在 痞客邦 留言(0) 人氣()