厚积薄发-css布局页面头部

抄别人的东西。一个一个字符打下来，还是有收获的。

一个相当简单的CSS页面布局。

html代码如下：

代码

　　  

< div  id ="Header" >
　　         < h1 >< span > XXXXXXXX span > h1 >
                 < ul  id ="topMenu" >
                     < li  class ="firstChild" >< a  href ="#" > a > diary li >
                     < li >< a  href ="#" > tech a > li >
                     < li >< a  href ="#" > reading a > li >
                     < li >< a  href ="#" > help a > li >
                 ul >
               
                 < div  id ="mainMenu-outer-wrapper" >
                     < div  id ="mainMenu-inner-wrapper" >
                         < ul  id ="mainMenu"   >
                         < li  class ="firstChild" >< a  href ="#" > 首页 a > li >
                         < li >< a  href ="#" > 读书笔记 a > li >
                         < li >< a  href ="#" > 相片 a > li >
                         < li >< a  href ="#" > 其它 a > li >
                         < li  class ="lastChild" >< a  href ="#" > 帮助 a > li >
                         ul >
                         < div  class ="clearBoth" > div >
                      div >
                   div >
        div >  
   

  < div  id ="Footer" >
         版权所有
          div >
       

 

css代码如下：

代码

/*基本信息*/
body 
{
    font : 12px Tahoma ;
    text-align : center ;
    background-repeat : repeat-x ;
    margin : 0 ;
    line-height : 1.5 ; /* 行高为文字1.5倍 */
    background-color : #444 ;
       }
      
/* 页面层容器 */
#container
{
    width :  758px ;
    margin :  20px auto ;
    background-color : GrayText ;
    height : auto ;
}

/* 页面头部 */
#Header
{
     /* background-image: url(images/header.gif); */
    margin : 0 auto ;
    width : 756px ;
    color : #bbb ;
    position : relative
}
/* 标题 */
h1
{
    margin : 10px 0 0 0 ;
    height : 63px ;
    background-image : url('image/logo.jpg') ;
    background-repeat : no-repeat ;
    
     }
     /* 不显示，用图片来显示，这里这是便于搜索 */
    h1 span
     {
        display : none ;
         }
        
/* 头部菜单，使用绝对定位，把它固定在标题右侧 */
#topMenu
{
    margin : 0 ;
    padding : 0 ;
    position : absolute ;
    list-style-type : none ; /* 取消排列前的圆点 */
    right : 10px ;   /* 固定在右边 */
    top : 50px ;
}

#topMenu li
{
    float : left ;
    border-left : 1px white solid ; /* 设置竖线 */
}
/* 设置文字颜色为白色 */
    #topMenu li a
     {
        padding : 0 10px ;
        color : White ;
        text-decoration : none ;
         }
        
/* 设置鼠标移过的背景颜色 */
#topMenu li a:hover
{
    background-color : #000 ;
}
/* 第一个的竖线去掉 */
#topMenu li.firstChild
{ border : none ; }

/* 主菜单 */
#mainMenu 
{
    color : #000 ;
    width : 500px ;
     }
#mainMenu li
{
    float : left ; /* 向左浮动，即可使原来竖直排列的变成水平排列 */
    list-style-type : none ;
    border-left : 1px #aaa solid ; /* 设置左右边框 */
    border-right : 1px #eee solid ; /* 左边浅一些，右边深一些 */
    background-color : #ccc ;
}
#mainMenu li.firstChild { border-left : none ; }
#mainMenu li.lastChild { border-right : none ;
    height :  18px ;
}

/* 设置文字样式 */
#mainMenu li a
{
    display : block ; /* 设置背景为块状 */
    padding : 5px 10px ;
    color : #333 ;
    text-decoration : none ;
     }
    
     /* 设置鼠标经过的样式 */
    #mainMenu li a:hover
     {
        background-color : #eee ;
         }
        
/* 设置圆角框,上端 */
#mainMenu-outer-wrapper
{
    background-color : #ccc ;
    background-image : url('image/top_03.gif') ;
    background-repeat : no-repeat ;
     /* padding-top:1px; */
    margin-top : 10px ;
     }
     /* 设置圆角框,下端 */
#mainMenu-inner-wrapper
{
/*     background-image:url('image/main1_08.gif'); */
    background-repeat : no-repeat ;
    background-position : bottom ;
    padding-bottom : 7px ;
    
     }
     /* 菜单式浮动的，所以要增加一个空的div。使得下面框也出现在菜单下面，否则，会出现在上面 */
    .clearBoth
     {
        clear : left ;
         }
        
/* 页脚 */
#Footer
{
    clear : both ;
    background : #444 ;
    padding-top : 15px ;
     }
    

 

 

布局主体内容的话，在html加上     
             
     

 

代码

   
           
           

欢迎光临 

           
           

           

           
           

               
• 投票结果

               
• 投票结果

              

           

  

 

css代码相信你也能写出来了。

转载于:https://www.cnblogs.com/xiaoer/archive/2010/10/22/1857945.html