Tech佬日記: Simple Navigation Homepage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Intranet</title>
<link href="style/style_v1.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="header">
<ul>
    <li id="current"><a href=#>Home</a></li>
    <li><a href="it/document.html">Document</a></li>
    <li><a href="it/application.html">Application</a></li>
    <li><a href="it/dc.html">DC</a></li>
    <li><a href="it/cctv.html">CCTV</a></li>
    <li><a href="it/network.html">Network</a></li>
    <li><a href="it/project.html">Project</a></li>
    <li><a href="it/voip.html">VoIP</a></li>
    <li><a href="it/server.html">Server</a></li>
</ul>
</div>
<div id="Module">
<ul>
    <li><a href="it/document.html">Document</a></li>
    <li><a href="it/application.html">Application</a></li>
    <li><a href="it/dc.html">DC</a></li>
    <li><a href="it/cctv.html">CCTV</a></li>
    <li><a href="it/network.html">Network</a></li>
    <li><a href="it/project.html">Project</a></li>
    <li><a href="it/voip.html">VoIP</a></li>
    <li><a href="it/server.html">Server</a></li>
</ul>
</body>
</html>
Stylesheet is as below:
h1 { color:#222222;
    font-size:10px;
    font-weight:800;
    }
h2 { color:#FF0000;
    font-size:14px;
    font-weight:400;
    }
h3 { font-size:10px;
    font-weight:300;
    font-style:boder;
    }
h4 {font-size:9px;
    font-weight:100;
    }
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font-family: Arial, Helvetica, sans-serif;
}
#header {
float:left;
width:100%;
background:#DAE0D2 url("/images/v1/bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("/images/v1/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("/images/v1/right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("/images/v1/left_on.gif");
}
#header #current a {
background-image:url("/images/v1/right_on.gif");
color:#333;
padding-bottom:5px;
}
#header #title {
background-image:;
}
#Module{
display: block;
background-color: #FFFFFF;
margin:0;
padding:10px 10px 0;
width:100%;
}
#Module ul{
float:none;
margin:50px 0 0 0;
display: block;
width:100%;
}
#Module li{
list-style-type:none;
margin:0 0 0 10px;
padding:5px 5px 0 30px;
float:none;
}
.left{
    display: block;
    float: left;
    width: 50%;
}
.right{
    display: block;
    float: right;
    width: 50%;
}
#Left{
   display: block;
    float: left;
    width: 50%;
}
#Right{
   display: block;
    float: right;
    width: 50%;
}
#Bottom{
    background-color: #EEEEEE;
    display: block;
    float: none;
    width: 100%;
}

Tech佬日記

2012年11月30日星期五

Simple Navigation Homepage

没有评论:

发表评论