html+css（交河故城css）

标签：color top padding html nbsp margin 交河 css left

<!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;
}

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

标签：color,top,padding,html,nbsp,margin,交河,css,left
From： https://blog.csdn.net/2301_81256766/article/details/142319212

相关文章

赞助商

阅读排行