test.css
@CHARSET "UTF-8";
body{
background:url(/zzx/images/body_bg.jpg) repeat-x top;
color:#333; text-align:center;
font-size:12px;
font-family:Arial,Console,Verdana,Courier New;
}
a{
color:#369;
text-decoration:none;
}
a:hover{
text-decoration:none;
color:#200;
}
#container {
background: url("/zzx/images/head_bg.jpg") no-repeat scroll center top transparent;
}
#header {
width: 980px;
height: 30px;
margin: 0px auto;
padding: 50px 0px 0px;
text-align: left;
}
.header{}
#navigator{
display:block;
clear:both;
width:980px;
height:42px;
margin:0 auto;
padding:22px 0 0 0;
text-align:left;
}
.navigator{
text-align:right;
}
#body {
display: block;
width: 960px;
margin: 0px auto;
padding: 9px;
border: 1px solid rgb(221, 221, 221);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
text-align: left;
}
#body:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#main {
float: right;
width: 734px;
overflow: hidden;
padding: 7px;
border: 1px solid rgb(221, 221, 221);
border-radius: 4px 4px 4px 4px;
}
#side {
float: left;
width: 200px;
overflow: hidden;
line-height: 120%;
}
.side {
line-height: 120%;
}
.panel {
margin: 0px 0px 10px;
padding: 7px;
border: 1px solid rgb(221, 221, 221);
border-radius: 5px 5px 5px 5px;
}
#panel_Profile {
}
.panel_head {
clear: both;
height: 30px;
padding: 0px 10px;
border-radius: 4px 4px 4px 4px;
background: url("/zzx/images/panel_head_bg.jpg") repeat-x scroll center top transparent;
color: rgb(51, 51, 51);
font: bold 12px/30px Arial;
text-indent: 5px;
}
.side ul {
margin: 0px;
padding: 0px;
}
.side .panel_body {
padding: 4px 5px;
}
test.jsp
<%@ page language="java" contentType="text/html; utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="/zzx/jsp/blogjsp/test.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<div class="header">
header
</div>
</div><!-- id="header" -->
<div id="navigator">
<div class="navigator_bg"></div>
<div class="navigator">
navigator
</div>
</div><!-- id="navigator" -->
<div id="body">
<div id="main">
<div class="main">
main
</div>
</div><!-- class="main" -->
<div id="side">
<div class="side">
<div id="panel_Profile" class="panel">
<ul class="panel_head"><span>个人资料</span></ul>
<ul class="panel_body profile"></ul>
</div>
</div><!-- class="side" -->
</div>
</div><!-- id="body" -->
</div>
</body>
</html>