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&nbsp;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日&emsp;星期五&emsp;水瓶&emsp;壬辰年&emsp;龙&emsp;二月初三</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">&nbsp;<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="#">姐姐说&emsp;坚强的就是快乐的...<span class="yellow">cyber</span></a></li><li><a href="#">在linux下使用NOR&emsp;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="#">姐姐说&emsp;坚强的就是快乐的...<span class="yellow">cyber</span></a></li><li><a href="#">突厥系列之一-突厥，突厥人<span class="yellow">vivids</span></a></li><li><a href="#">在linux下使用NOR&emsp;flash存...<span class="yellow">alvin</span></a></li><li><a href="#">姐姐说&emsp;坚强的就是快乐的...<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> &nbsp;等我考完试</a></li><li><a href="#"><span>[</span>长不大的小孩儿<span>]</span>&nbsp;上完了最后一节严宣申老师...</a></li><li><a href="#"><span>[</span>詹尼花儿<span>]</span>&nbsp;一句话</a></li><li><a href="#"><span>[</span>长不大的小孩儿<span>]</span>&nbsp;看了一个比较崇拜的ss师兄</a></li><li><a href="#"><span>[</span>长不大的小孩儿<span>]</span>&nbsp;突然想起了鲁迅的一句话</a></li><li><a href="#"><span>[</span>E心e意w36<span>]</span>&nbsp;呵呵，做版主被弹劾了</a></li><li><a href="#"><span>[</span>Beyond&emsp;Paradise<span>]</span>&nbsp;偶尔也要更新一下~</a></li><li><a href="#"><span>[</span>詹尼花儿<span>]</span>&nbsp;痛苦啊</a></li><li><a href="#"><span>[</span>加州旅馆<span>]</span>&nbsp;寻找局部最优</a></li><li><a href="#"><span>[</span>星天的博客<span>]</span>&nbsp;冒着大风出去自习</a></li><li><a href="#"><span>[</span>星天的博客<span>]</span>&nbsp;卷首语</a></li><li><a href="#"><span>[</span>个人文集<span>]</span>&nbsp;发篇文章真难</a></li><li><a href="#"><span>[</span>E心e意w36<span>]</span>&nbsp;假期将至☧</a></li><li><a href="#"><span>[</span>长不大的小孩儿<span>]</span>&nbsp;今天......</a></li><li><a href="#"><span>[</span>蓝色天际/blueheaven<span>]</span>&nbsp;没课了</a></li><li><a href="#"><span>[</span>长不大的小孩儿<span>]</span>&nbsp;才看到有意思的东西</a></li><li><a href="#"><span>[</span>长不大的小孩儿<span>]</span>&nbsp;又要放假了</a></li><li><a href="#"><span>[</span>蓝空霞彩<span>]</span>&nbsp;读书人的出世与入世1</a></li><li><a href="#"><span>[</span>倏忽一年，花开两边<span>]</span>&nbsp;期末临近</a></li><li><a href="#"><span>[</span>倏忽一年，花开两边<span>]</span>&nbsp;小小学术之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="#">版权所有&nbsp;©艾萨克</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;
}

需要图中照片的私信我噢~

html+css（交河故城css）

相关资讯

热文排行

最新新闻

推荐新闻

热搜词