html+css（交河故城css）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>故城</title>
<link rel="stylesheet" href="./故城css/top.css">
<link rel="stylesheet" href="./故城css/left.css">
<link rel="stylesheet" href="./故城css/right.css">
<link rel="stylesheet" href="./故城css/bottom.css">
</head>
<body>
<!-- 整体 -->
<div id="main">
<!-- 头部 -->
<div id="top">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">推荐</a></li>
<li><a href="#">最新 <br>日志</a></li>
<li><a href="#">最新 <br>评论</a></li>
<li><a href="#">尚未 <br>登录</a></li>
</ul>
</div>
<!-- 左边 -->
<div id="left">
<!-- 样式统计 -->
<div id="lstatistics">
<ul>
<li>用户：893人</li>
<li>日志：4397个</li>
<li>评论：4596篇</li>
</ul>
</div>
<!-- 热门博客 -->
<div id="lhotblog">
<div id="door">
<ul>
<li><a href="#"><span>艾萨克</span></a> <<a href="#" >isaac</a>></li>
<li><a href="#"><span>詹尼花儿</span></a> < <a href="#">jennifer</a>></li>
<li><a href="#"><span>流觞</span></a> < <a href="#">shenhuanyan</a>></li>
<li><a href="#"><span>CYBFRSPACE</span></a> < <a href="#">cyber</a>></li>
<li><a href="#"><span>小舔一下</span></a> < <a href="#">LifeSucks</a>></li>
<li><a href="#"><span>楚岑.洗心</span></a> < <a href="#">popla</a>></li>
<li><a href="#"><span>小孩儿</span></a> < <a href="#">bazhuazhua</a>></li>
<li><a href="#"><span>未名空间</span></a> < <a href="#">sheva</a>></li>
<li><a href="#"><span>Dark City</span></a> < <a href="#">freax</a>></li>
<li><a href="#"><span>E心E意&36</span></a> < <a href="#">moonbow</a>></li>
</ul>
<div id="open">
<a href="#">OPML</a> <a href="#">更多</a>
</div>
</div>
</div>
<!-- 最近更新 -->
<div id="lrecent">
<div id="new">
<ul>
<li><a href="#"><span>托波索的小屋</span></a> < <a href="#">quixote</a>></li>
<li><a href="#"><span>小孩儿</span></a> < <a href="#">bazhuazhua</a>></li>
<li><a href="#"><span>詹尼花儿</span></a> < <a href="#">jennifer</a>></li>
<li><a href="#"><span>E心E意&36</span></a> < <a href="#">moonbow</a>></li>
<li><a href="#"><span>Beyond</span></a> < <a href="#">sherrielin</a>></li>
<li><a href="#"><span>加州旅馆</span></a> < <a href="#">zhanxiongfei</a>></li>
<li><a href="#"><span>星天的博客</span></a> < <a href="#">starsky</a>></li>
<li><a href="#"><span>个人文集</span></a> < <a href="#">sherry</a>></li>
</ul>
<div id="ml">
<a href="#">OPML</a> <a href="#">更多</a>
</div>
</div>
</div>
<!-- 最新申请 -->
<div id="lapply">
<div id="apply">
<ul>
<li><a href="#"><span>星天的博客</span></a> < <a href="#">starsky</a>></li>
<li><a href="#"><span>蓝空霞彩</span></a> < <a href="#">wcylester</a>></li>
<li><a href="#"><span>随 缘</span></a> < <a href="#">matata</a>></li>
<li><a href="#"><span>大山的孩子 </span></a> < <a href="#">tuonene</a>></li>
<li><a href="#"><span>伊的四季</span></a> < <a href="#">Ifishamm</a>></li>
<li><a href="#"><span>SONG, original</span></a> < <a href="#">song</a>></li>
<li><a href="#"><span>买买提※温和的树</span></a> < <a href="#">mimiti</a>></li>
</ul>
</div>
<div id="more">
<a href="#">OPML</a> <a href="#">更多</a>
</div>
</div>
<div id="parabottom"></div>
</div>
<!-- 右边 -->
<div id="right">
<!-- 博客推荐 -->
<div id="recommendblog">
<a href="#" id="hua"> <p>詹尼花儿</p></a> <a href="#"><span class="Jennifer">Jennifer</span> </a>
<ul>
<li><a href="#">禅</a></li>
<li><a href="#">又地震了</a></li>
<li><a href="#">老李说</a></li>
<li><a href="#">地铁发飙记</a></li>
<li><a href="#">“王”者归来</a></li>
</ul>
</div>
<!-- 日期 -->
<div id="date">
<span id="long">2012年2月24日 星期五 水瓶 壬辰年 龙 二月初三</span>
<div id="zimu">
<ul>
<li><a href="#">*</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
<li><a href="#">R</a></li>
<li><a href="#">S</a></li>
<li><a href="#">T</a></li>
<li><a href="#">U</a></li>
<li><a href="#">V</a></li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
</div>
</div>
<!-- 博客搜索 -->
<div id="search">
<ul>
<li>博客搜索：<input type="text" size="10px" class="bl"></li>
<li><input type="radio" name="seave" checked>ID</li>
<li><input type="radio" name="seave">名称</li>
<li><input type="radio" name="seave">描述</li>
<li><a href="#" id="go">GO</a></li>
</ul>
</div>
<!-- 用户 密码 -->
<div id="user">
<ul>
<li>用户名：<input type="text" size="15px" id="ming">
<a href="#"> <input type="button" value="登录" class="deng" name="D"></a></li>
<li><span id="mimi">密</span>码：<input type="password" id="mima" size="15px"> <button class="deng" name="D">注册</button></li>
</ul>
</div>
<!-- 样式推荐 -->
<div id="recommendart">
<ul>
<li><a href="#">突厥系列之一-突厥，突厥人 <span class="yellow">vivids</span></a></li>
<li><a href="#">姐姐说 坚强的就是快乐的...<span class="yellow">cyber</span></a></li>
<li><a href="#">在linux下使用NOR flash存...<span class="yellow">alvin</span></a></li>
<li><a href="#">景致南浔<span class="yellow">amandavela</span></a></li>
<li><a href="#">Windows快捷键大全<span class="yellow">inming</span></a></li>
<li><a href="#">地铁发飙记<span class="yellow">jennifer</span></a></li>
<li><a href="#">2006发生的事<span class="yellow">xfavorx</span></a></li>
<li><a href="#">姐姐说 坚强的就是快乐的...<span class="yellow">cyber</span></a></li>
<li><a href="#">突厥系列之一-突厥，突厥人<span class="yellow">vivids</span></a></li>
<li><a href="#">在linux下使用NOR flash存...<span class="yellow">alvin</span></a></li>
<li><a href="#">姐姐说 坚强的就是快乐的...<span class="yellow">cyber</span></a></li>
</ul>
</div>
<!-- 最新日志 -->
<div id="newnode">
<img src="./JIAOtu/newnode.jpg" alt="">
<ul>
<li><a href="#"><span>[</span>托波索的小屋<span>]</span> 等我考完试</a></li>
<li><a href="#"><span>[</span>长不大的小孩儿<span>]</span> 上完了最后一节严宣申老师...</a></li>
<li><a href="#"><span>[</span>詹尼花儿<span>]</span> 一句话</a></li>
<li><a href="#"><span>[</span>长不大的小孩儿<span>]</span> 看了一个比较崇拜的ss师兄</a></li>
<li><a href="#"><span>[</span>长不大的小孩儿<span>]</span> 突然想起了鲁迅的一句话</a></li>
<li><a href="#"><span>[</span>E心e意w36<span>]</span> 呵呵，做版主被弹劾了</a></li>
<li><a href="#"><span>[</span>Beyond Paradise<span>]</span> 偶尔也要更新一下~</a></li>
<li><a href="#"><span>[</span>詹尼花儿<span>]</span> 痛苦啊</a></li>
<li><a href="#"><span>[</span>加州旅馆<span>]</span> 寻找局部最优</a></li>
<li><a href="#"><span>[</span>星天的博客<span>]</span> 冒着大风出去自习</a></li>
<li><a href="#"><span>[</span>星天的博客<span>]</span> 卷首语</a></li>
<li><a href="#"><span>[</span>个人文集<span>]</span> 发篇文章真难</a></li>
<li><a href="#"><span>[</span>E心e意w36<span>]</span> 假期将至☧</a></li>
<li><a href="#"><span>[</span>长不大的小孩儿<span>]</span> 今天......</a></li>
<li><a href="#"><span>[</span>蓝色天际/blueheaven<span>]</span> 没课了</a></li>
<li><a href="#"><span>[</span>长不大的小孩儿<span>]</span> 才看到有意思的东西</a></li>
<li><a href="#"><span>[</span>长不大的小孩儿<span>]</span> 又要放假了</a></li>
<li><a href="#"><span>[</span>蓝空霞彩<span>]</span> 读书人的出世与入世1</a></li>
<li><a href="#"><span>[</span>倏忽一年，花开两边<span>]</span> 期末临近</a></li>
<li><a href="#"><span>[</span>倏忽一年，花开两边<span>]</span> 小小学术之winpcap（自立更...</a></li>
</ul>
<div id="container"></div>
</div>
</div>
<!-- 底部 -->
<div id="footer">
<ul>
<li><a href="#">博客首页</a>|</li>
<li><a href="#">博客论坛</a>|</li>
<li><a href="#">用户列表</a>|</li>
<li><a href="#">自由推荐</a>|</li>
<li><a href="#">最新日志</a>|</li>
<li><a href="#">最新评论</a>|</li>
<li><a href="#">热门排行</a>|</li>
<li><a href="#">日志搜索</a>|</li>
<li><a href="#">立即申请</a></li>
</ul>
<ul>
<li><a href="#">版权所有 ©艾萨克</a></li>
</ul>
</div>
</div><!-- 整体结束 -->
</body>
</html>/* 整体布局和导航栏部分*/
*{
margin: 0px auto;
padding: 0px;
font-size: 12px;
color: #d9ac7e;
}
body{
background-color: #000000;
background-image: url(../JIAOtu/body_bg.jpg);
background-repeat: repeat-y;
background-position: center;
}
#main{
width: 800px;
height: 1500px;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/* 导航栏 */
#top{
width: 800px;
height: 430px;
background-image: url(../JIAOtu/banner.jpg);
}
#top ul{
padding-top: 60px;
float: right;
}
#top li{
padding-top: 15px;
padding-right: 10px;
}
#top a{
color: #fffffd;
}
#top a:hover{
color: #ffff00;
border-bottom:1px solid ;
}
/* 左边部分布局*/
#left{
width: 196px;
/* height: 1015px; */
float: left;
color: #a95e2b;
background-color: #3e3226;
}
/* 样式统计 */
#lstatistics{
margin-top: -60px;
padding-bottom: 10px;
}
#lstatistics li{
padding-top: 3px;
background: url(../JIAOtu/arrow1.gif) no-repeat 17px;
padding-left: 31px;
}
/* 熟门博客 最近更新 最新申请 */
#lhotblog{
width: 196px;
height: 27px;
background: url(../JIAOtu/lhotblog.jpg) ;
}
#lhotblog a,#lrecent a,#lapply a{
color: rgb(44, 149, 184);
}
#lhotblog a:hover,#lrecent a:hover,#lapply a:hover{
color: #00eded;
}
#door,#new,#apply{
padding-top: 40px;
margin-left: -3px;
}
#door span,#new span,#apply span{
color: rgb(183, 177, 173);
}
#door span:hover,#new span:hover,#apply span:hover{
color: #ccff66;
border-bottom: 1px solid;
}
#door li{
color: rgb(211, 123, 45);
background: url(../JIAOtu/arrow2.gif) no-repeat 15px;
padding-left: 32px;
}
#new li,#apply li{
color: rgb(211, 123, 45);
background: url(../JIAOtu/arrow3.gif) no-repeat 15px;
padding-left: 32px;
}
#open,#ml,#more{
float: right;
margin-top: 10px;
}
#open a,#ml a,#more a{
padding-top: 10px;
color:#b6b0ac;
padding-right: 10px;
}
#open a:hover,#ml a:hover,#more a:hover{
border-bottom: 1px solid;
color: #c6e14e;
}
/* 最近更新 */
#lrecent{
width: 196px;
height: 27px;
margin-top: 220px;
background: url(../JIAOtu/lrecent.jpg) ;
}
/* 最新申请 */
#lapply{
width: 196px;
height: 27px;
margin-top: 185px;
background: url(../JIAOtu/lapply.jpg) ;
}
#parabottom{
width: 196px;
height: 16px;
margin-top: 155px;
background-image: url(../JIAOtu/parabottom.jpg);
} /* 右边部分布局*/
#right{
width: 500px;
float: right;
}
/* 博客推荐 */
#recommendblog{
width: 510px;
height: 150px;
margin-left: -70px;
background: url(../JIAOtu/recommendblog.jpg) no-repeat;
}
#recommendblog ul{
margin-left: 130px;
margin-top: 10px;
}
#recommendblog li{
background: url(../JIAOtu/arrow2.gif) no-repeat 1px;
padding-left: 10px;
}
#recommendblog a:hover{
color: #f3f3ad;
}
#hua{
display: inline-block;
margin-top: 30px;
color: #c87e2e;
font-weight: bold;
margin-left: 130px;
}
.Jennifer{
color: #cd4d3d;
font-weight: bold;
margin-left: 30px;
}
/* 日期 */
#date{
width: 500px;
height: 50px;
margin-left: -70px;
margin-top: 10px;
padding-top: 10px;
padding-left: 15px;
background-image: url(../JIAOtu/currenttime.jpg);
}
#zimu a{
float: left;
padding-left: 10px;
}
#long{
color: #448fc8;
}
/* 博客搜索 */
#search{
width: 350px;
height: 30px;
margin-left: -70px;
margin-top: 5px;
padding-right: 190px;
}
#search li{
float: left;
color: #cd4d3d;
padding-right: 10px;
}
#go{
color: #c86615;
border: 1px solid #c86615;
}
.bl{
border: 2px solid #c86615;
}
/* 用户 密码 */
#user{
width: 500px;
height: 40px;
margin-left: -70px;
padding-bottom: 10px;
background-image: url(../JIAOtu/currenttime.jpg);
padding-top: 10px;
padding-left: 15px;
}
#user li{
background: url(../JIAOtu/arrow5.gif) no-repeat 1px;
padding-left: 10px;
color: rgb(200, 102, 21);
}
#mimi{
padding-right: 10px;
color: rgb(200, 102, 21);
}
#mima{
padding-left: 2px;
border: 2px solid rgb(239, 126, 33);
}
#ming{
border: 2px solid rgb(200, 102, 21);
}
.deng{
color: rgb(200, 102, 21);
border: 2px solid rgb(200, 102, 21);
margin-left: 5px;
padding-right: 5px;
}
/* 样式推荐 */
#recommendart{
width: 500px;
margin-top: 10px;
margin-left: -70px;
padding-bottom: 10px;
display: block;
background: url(../JIAOtu/recommendart.jpg) no-repeat;
}
#recommendart ul{
padding-top: 70px;
padding-left: 5px;
}
#recommendart li{
background: url(../JIAOtu/arrow6.gif) no-repeat 0px;
padding-left: 12px;
padding-bottom: 2px;
}
.yellow{
padding-left: 10px;
color: rgb(198, 143, 41);
}
/* 最新日志 */
#newnode{
width: 500px;
height: 336px;
margin-left: -70px;
padding-bottom: 50px;
}
#newnode img{
margin-left: -5px;
}
#newnode ul{
padding-left: 62px;
margin-top: -221px;
margin-bottom: 20px;
}
#newnode li{
padding-top: 1px;
background: url(../JIAOtu/arrow6.gif)no-repeat 11px;
padding-left: 30px;
}
#newnode span{
color: rgb(194, 99, 21);
}
#container{
width: 460.5px;
height: 277px;
margin-top: -275px;
margin-left: 79.5px;
background-image: url(../JIAOtu/container_bg.jpg);
}/*底部*/
#footer{
width: 800px;
height: 60px;
clear: both;
background-image: url(../JIAOtu/footer_bg.jpg);
}
#footer li{
float: left;
padding-top: 15px;
}需要图中照片的私信我噢~