完整的CSS代碼如下：
body,td,th {
font-size: 12px;
color: #0f54c3;
}
body {
margin-left: 5px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
}
a:link {
color: #0f54c3;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CC0000;
}
a:hover {
text-decoration: underline;
color: #FF00FF;
}
a:active {
text-decoration: none;
color: #3366FF;
}
#header {
height: 60px;
width: 814px;
border: 1px solid #0f54c3;
}
#logo {
float:left;
height: 60px;
width: 200px;
background:url(../images/xkland_logo.gif) no-repeat left top;
}
#advertisment {
float: left;
height: 56px;
width: 500px;
margin:1px;
border: 1px solid #0f54c3;
}
#appendix {
width:100px;
height:60px;
float: right;
text-align:right;
}
#appendix p {
margin:3px;
}
#menu {
border: 1px solid #0F54C3;
padding:5px;
margin:0px;
width:804px;
margin:1px 0px;
height: 12px;
}
#menu li {
float:left;
padding-left:10px;
padding-right:10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #0F54C3;
}
#menu .lastMenuItem {
border-right-style:none;
}
#loginView {
border: 1px solid #0F54C3;
width: 280px;
margin:1px 0px;
}
#catalog {
border: 1px solid #0F54C3;
width:280px;
margin:1px 0px;
}
#search {
width: 280px;
border: 1px solid #0F54C3;
margin:1px 0px;
}
#newReply {
width: 280px;
border: 1px solid #0F54C3;
margin:1px 0px;
}
#hotTopics {
width: 280px;
border: 1px solid #0F54C3;
margin:1px 0px;
}
#statistics {
width: 280px;
border: 1px solid #0F54C3;
margin:1px 0px;
}
#hotGroups {
width: 280px;
border: 1px solid #0F54C3;
margin:1px 0px;
}
#hotUsers {
border: 1px solid #0F54C3;
width: 280px;
margin:1px 0px;
}
#footer {
width: 814px;
border: 1px solid #0F54C3;
margin:1px 0px;
}
#newTopics {
position: absolute;
height: 279px;
width: 531px;
left: 288px;
top: 100px;
border: 1px solid #0F54C3;
}
h3 {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #0F54C3;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 15px;
margin: 0px;
font-size: 10.5pt;
}
#loginView p {
margin:3px;
text-align:center;
}
#loginView form {
margin:0px;
}
.textInput {
border: 1px solid #CCCCCC;
width: 15em;
height:12px;
}
#loginView ul {
margin:8px 10px 3px 10px;
}
#loginView ul li {
float: left;
width: 130px;
height:18px;
}
.clear {
clear: left;
}
完整的HTML代碼如下：
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="
http://struts.apache.org/tags-bean" prefix="bean" %>
<!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>歡迎來到俠客Land</title>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="advertisment">此處顯示 id "advertisment" 的內容</div>
<div id="appendix">
<p>收藏本站</p>
<p>全站下載</p>
<p>聯系作者</p>
</div>
</div>
<ul id="menu">
<li>菜單項一</li>
<li>菜單項二</li>
<li>菜單項三</li>
<li class="lastMenuItem">最后一個菜單項</li>
</ul>
<div id="loginView">
<h3>用戶登錄</h3>
<form name="form1" id="form1" method="post" action="">
<p>用戶名：
<input class="textInput" name="userName" type="text" id="userName" />
</p>
<p>密 碼：
<input class="textInput" name="password" type="password" id="password" />
</p>
<ul>
<li>忘記密碼？</li>
<li>新用戶注冊</li>
<li><input type="checkbox" name="checkbox" value="checkbox" />記住我</li>
</ul>
<p class="clear">
<input type="submit" name="Submit" value="登 錄" />
</p>
</form>
</div>
<div id="catalog">此處顯示 id "catalog" 的內容</div>
<div id="search">此處顯示 id "search" 的內容</div>
<div id="newTopics">此處顯示 id "newTopics" 的內容</div>
<div id="newReply">此處顯示 id "newReply" 的內容</div>
<div id="hotTopics">此處顯示 id "hotTopics" 的內容</div>
<div id="statistics">此處顯示 id "statistics" 的內容</div>
<div id="hotGroups">此處顯示 id "hotGroups" 的內容</div>
<div id="hotUsers">此處顯示 id "hotUsers" 的內容</div>
<div id="footer">此處顯示 id "footer" 的內容</div>
</body>
</html>