近年來小迷努力趕專題,把以前查詢外加學起來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標籤寬度與高度是怎麼算的.......