自定义webUI实例

浏览数：42 / 时间：2015年06月09日

global.css

@charset "utf-8";
body {
margin: 0 auto;
font-size: 12px;
font-family: Verdana;
line-height: 1.5;
}
ul, dl, dd, h1, h2, h3, h4, h5, h6, form, p {
padding: 0;
margin: 0;
}
h1 {
font-size: 20px;
font-family: "microsoft yahei";
}
h2 {
font-size: 14px;
}
h3 {
font-size: 14px;
font-weight: normal;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 12px;
font-weight: normal;
}
ul {
list-style: none;
}
img {
border: 0px;
}
a {
color: #195cb5;
text-decoration: none;
}
a:hover {
color: #f00;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}

layout.css

@charset "utf-8";
@import url("global.css");
#container {
margin: 0 auto;
width: 950px;
}
#header {
height: 50px;
background: #ff911a;
}
#header h1 {
padding: 10px 20px;
}
#nav {
background: #ff6600;
height: 24px;
margin-bottom: 6px;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 4px 10px 2px 10px;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
text-decoration: underline;
}
/*main*/
#mainContent {
overflow: auto;
zoom: 1;
margin-bottom: 6px;
}
#side {
width: 200px;
float: left;
}
.sidebox {
border: 1px solid #ed6400;
margin-bottom: 6px;
}
.sidebox h4{
background: #ff911a;
padding: 2px 6px;
border-bottom: 1px solid #ed6400;
color: #fff;
}
#main {
width: 742px;
float: right;
}
.mainbox {
border: 1px solid #ed6400;
margin-bottom: 6px;
}
.mainbox h2 {
background: #ff911a;
padding: 2px 6px;
border-bottom: 1px solid #ed6400;
color: #fff;
}
.mainbox ul {
padding: 4px 6px;
}
/*footer*/
#footer {
border-top: 3px solid #ccc;
height: 50px;
text-align: center;
padding: 6px;
}

test.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>common</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div class="clearfloat"></div>
<div id="nav">
<ul>
<li><a href="#">nav 1</a></li>
<li><a href="#">nav 2</a></li>
<li><a href="#">nav 3</a></li>
<li><a href="#">nav 4</a></li>
<li><a href="#">nav 5</a></li>
</ul>
</div>
<div id="mainContent">
<div id="main">
<div class="mainbox">
<h2>title</h2>
<ul>content</ul>
</div>
</div>
<div id="side">
<div class="sidebox">
<h4>title</h4>
<ul>content</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
<div id="footer">
footer
</div>
</div>
</body>
</html>