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

时间：2010-10-22 来源：erxiao

一个相当简单的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-/*行高为文字1.5倍*/
    background-color:#444;
      }

/*页面层容器*/
#container
{
    width: 758px;
    margin: 20px auto;
    background-color:GrayText;

}

/*页面头部*/
#Header
{
    /*background-image: url(images/header.gif);*/
    margin:0 auto;
    width:756px;
    color:#bbb;
    position:relative
}
/*标题*/
h1
{
    margin:10px 0 0 0;

    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;
    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加上

代码    <div id="container">
           <div id="content">
           <h2>欢迎光临 </h2>
           <div class="contentBox">
           </div>
           </div>
           <div id="sideBar">
           <ul>
               <li><a href ="#">投票结果</a></li>
               <li><a href ="#">投票结果</a></li>
              </ul>
           </div>
</div>

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