厚积薄发css布局页面头部

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

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

html代码如下:

代码

    
<div id="Header">
          
<h1><span>XXXXXXXX</span></h1>
                
<ul id="topMenu">
                    
<li class="firstChild"><href="#"></a>diary</li>
                    
<li><href="#">tech</a></li>
                    
<li><href="#">reading</a></li>
                    
<li><href="#">help</a></li>
                
</ul>
               
                
<div id="mainMenu-outer-wrapper">
                    
<div id="mainMenu-inner-wrapper">
                        
<ul id="mainMenu" >
                        
<li class="firstChild"><href="#">首页</a></li>
                        
<li><href="#">读书笔记</a></li>
                        
<li><href="#">相片</a></li>
                        
<li><href="#">其它</a></li>
                        
<li class="lastChild"><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加上     
             
     

 

代码
   <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代码相信你也能写出来了。

原文地址:https://www.cnblogs.com/xiaoer/p/1857945.html