一、我首页代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="江西消防" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>江西消防政工网</title>
</head>
<body>
<div class="content">
<div class="header">
<img src="images/logo.jpg" alt="首页链结" />
</div>
<div class="bar style1">
<ul>
<li class="active" >首页</a></li>
<li><a href="#" accesskey="讲话">领导讲话</a></li>
<li><a href="#" accesskey="政治工作">政工动态</a></li>
<li><a href="#" accesskey="法规">政工法规</a></li>
<li><a href="#" accesskey="干部">干部人事</a></li>
<li><a href="#" accesskey="组织">组织工作</a></li>
<li><a href="#" accesskey="教育">宣传教育</a></li>
<li><a href="#" accesskey="政工">纪检保卫</a></li>
<li><a href="#" accesskey="调研">调研指导</a></li>
<li><a href="#" accesskey="政工">学习交流</a></li>
<li><a href="#" accesskey="文化">警营文化</a></li>
<li><a href="#" accesskey="心理">心理健康</a></li>
<li><a href="#" accesskey="下载">下载中心</a></li>
<li><a href="#" accesskey="服务">留言本</a></li>
</ul>
</div>
<div id="zhongshang1">
<div class="time">2006年6月1日</div>
<div class="login">>>用户登陆</div>
</div>
<div class="gundong">滚动新闻</div>
<div id="zhongshang">
<div class="topleft"><img src="images/2006129204620373.jpg" alt="图片" />幻灯片新闻
</div>
<div class="topright">
<h2>政工要闻</h2>
<p>大标题式新闻(头条新闻,字体大小颜色任选)</p>
<p>简短的新闻内容,[全文]</p>
<h2>全站搜索</h2>
关键字</div>
</div>
<div class="lines2">
<h2>网络办公</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<h2>专题栏目</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<h2>党团建设</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p> </p>
</div>
<div id="linesone">
<div class="lines3">
<h2><a href="index.html">通知公告</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7 </p>
<h2><a href="index.html">干部人事</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7 </p>
<h2><a href="index.html">宣传教育</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7 </p>
<h2><a href="index.html">纪检保卫</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7 </p>
</div>
<div class="lines4">
<h2><a href="index.html">总队工作动态</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<h2><a href="index.html">支队政工动态</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<h2><a href="index.html">全国政工动态</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
</div>
<div class="lines11">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="613" height="94"
align="left">
<param name="movie" value="images/篮球竞赛12.swf" />
<param name="quality" value="high" />
<embed src="images/篮球竞赛12.swf" width="613" height="94" align="left" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div class="lines21"><h2>他山之石</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<h2>稿件排名</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<h2>资料统计</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p> </p>
</div>
<div id="linesone1">
<div class="lines31">
<h2><a href="index.html">政工法规</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10 </p>
</div>
<div class="lines41">
<h2><a href="index.html">学习交流</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10 </p>
<p>11</p>
</div>
</div>
<div id="linesone1">
<div class="lines31">
<h2><a href="index.html">警营文化</a></h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6 </p>
</div>
<div class="lines41">
<h2>心理健康</h2>
<p>1 </p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
</div></div>
<div class="lines11">
<h2>网站导航</h2>设置两排,一排是全国和全省文字导航,一排在图片导航,后台可以任意修改</div>
<div class="subContainer">
<p>主办单位:江西省消防总队政治部</p>
<p>CopyRight 2005 All Rights Reserved</p>
</div>
</body>
</html>
二、样式表文件
body {
padding: 0;
margin: 0;
line-height: normal;
background: #fff;
color: #454545;
font-family: Tahoma, sans-serif;
font-size: 9pt;
}
a {
color: #000000;
background: inherit;
list-style-type: square;
}
a:hover { color: #FF3300; background: inherit; }
h1 {
letter-spacing: -1px;
padding: 7px 0 0 8px;
margin: 0;
font-family: Arial, Sans-Serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.dark { color: #737373; background: inherit; font-weight: bold; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #FF6600; background: inherit; }
h2 {
margin: 0;
padding: 0;
letter-spacing: -1px;
font-family: Arial, Sans-Serif;
font-size: 10pt;
font-weight: bold;
}
h2 { font-size: 10pt; margin-bottom: 5px; color: #000; background: inherit; }
p { margin: 0 0 5px 0; }
ul { margin: 0; padding : 0; list-style : none; }
form { margin: 0; }
/* 顶部
------ */
.content {
margin: 0 auto;
width: 780px;
padding: 5px;
}
.header {
height: 55px;
background: #FFFFFF;
color: #808080;
margin: 2px 0;
padding:l0 0 0 0;
border-bottom: 3px solid #ccc;
}
.top_info {
float: right;
width: 555px;
padding: 5px 0 4px 0;
border-bottom: 1px solid #eee;
background: #FFFFFF;
color: #808080;
}
.top_info_left {
width: 200px;
float: left;
}
.top_info_right {
float: right;
width: 290px;
paddinFFFFF;
border-style:solid;t: 1px solid #eee;
}
.browse_category {
font-size: 0.9em;
width: 190px;
color: #FFF;
background: inherit;
}
.bar {
clear: both;
font-size: 9pt;
height:20px;
color: #FFF;
background: #CC0000;
margin: 0px;
border-bottom: 2px solid #CCCCCC;
}
.bar li {
margin: 0px;
padding: 7px 3px 2px 3px;
background: #CC0000;
float: left;
}
.bar li.active {
background: #FF0000 url(bar.gif) no-repeat center top;
color: #fff;
font-weight: bold;
padding: 7px 3px 2px 3px;
}
.bar li a {
font-weight: bold;
color: #FFF;
background: inherit;
text-decoration: none;
}
.bar li a:hover {
background: #FF0000 url(bar.gif) no-repeat center top;
color: #fff;
font-weight: bold;
padding: 7px 0px 3px 0px;
}
/* ----- 中上 ----- */
#zhongshang1{
clear: left;
margin: 0em 13em 0em 0em;
}
.time{
float: left;
clear: left;
width: 232px;
background-color:#F3F3F3;
color:#CCCCCC;
height:20px;
}
.login{
float: left;
width: 372px;
color:#CCCCCC;
height:20px;
background-color:#F3F3F3;
text-align: center;
}
.gundong{
float: right;
clear: right;
width: 176px;
height:20px;
background-color:#F3F3F3;
margin: 0;
padding: 0;
text-align: right;
}
#zhongshang{
margin: 0 auto;
width: 780px;
}
.topleft{
float: left;
clear: left;
width: 285px;
color:#CCCCCC;
}
.topleft img{
width: 285px;
height:235px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
border: 1px solid #000000;
float: left;
}
.topleft h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
}
.topright{
float: right;
clear: right;
width: 475px;
color:#CCCCCC;
height:110px;
margin: 5px;
}
.topright h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
/* ----- 中间 ----- */
#linesone{
clear: left;
margin: 0em 13em 0.5em 0em;
}
div.lines1{
float: left;
clear: left;
width: 616px;
color:#CCCCCC;
height:110px;
}
div.lines2{
float: right;
clear: right;
width: 13.5em;
height:110px;
background-color:#F3F3F3;
margin: 0;
padding: 0;
}
div.lines2 h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
div.lines2 img{
width: 13em;
height:110px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
div.lines3{
float: left;
clear: left;
width: 232px;
color:#CCCCCC;
height:100px;
border: 1px solid #CC0000;
margin: 0em 4px 0em 0;
}
div.lines3 h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
div.lines3 li{
font-size: 9pt;
font-style: normal;
text-align: left;
text-indent: 5px;
padding:0px 0 3px 0px;
list-style-type: disc;
color: #000000;
}
div.lines4{
float: left;
width: 372px;
color:#CCCCCC;
height:100px;
border: 1px solid #CC0000;
margin: 0em 0px 0em 2px;
}
div.lines4 h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
div.lines4 li{
font-size: 9pt;
font-style: normal;
text-align: left;
text-indent: 5px;
padding:0px 0 3px 0px;
list-style-type: disc;
color: #000000;
}
/* ----- 下面 ----- */
#linesone1{
clear: left;
margin: 0em 13em 0em 0em;
}
div.lines11{
float: left;
clear: left;
width: 616px;
color:#CCCCCC;
height:110px;
}
div.lines21{
float: right;
clear: right;
width: 13.5em;
height:110px;
background-color:#F3F3F3;
margin: 0;
padding: 0;
}
div.lines21 h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
div.lines21 img{
width: 13em;
height:110px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
div.lines31{
float: left;
clear: left;
width: 302px;
color:#CCCCCC;
height:100px;
border: 1px solid #CC0000;
margin: 0em 4px 0em 0;
}
div.lines31 h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
div.lines31 li{
font-size: 9pt;
font-style: normal;
text-align: left;
text-indent: 5px;
padding:0px 0 3px 0px;
list-style-type: disc;
color: #000000;
}
div.lines41{
float: left;
width: 302px;
color:#CCCCCC;
height:100px;
border: 1px solid #CC0000;
margin: 0em 0px 0em 2px;
}
div.lines41 h2{
text-align: left;
color:#FFFFFF;
background-color:#FF6600;
border-style:solid; border-width:1px; border-color:#FF9933;
padding: 5px 0px 5px 5px;
}
div.lines41 li{
font-size: 9pt;
font-style: normal;
text-align: left;
text-indent: 5px;
padding:0px 0 3px 0px;
list-style-type: disc;
color: #000000;
}
div.subContainer{
clear:both;
text-align: center;
width: 780px;
height:300px
font-size: 100%;
background-color:#CCCCCC;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;
margin: 0em 0em 0em 0em;
padding: 2em 0em 0em 0em;
}
div.copyright {
color: #999999;
text-align:right;
text-align: center;
}
div.copyright a{
color:#999999;
}
div.subLinks{
float:left;
clear:left;
color:#777777;
text-align: center;
}
div.subLinks a{
color:#777777;
}