网页设计中header部分制作

 

一个网页应有的布局分为三大块，分别是header，content，footer部分，下面就来介绍一下header部分的布局。主要分为下列四个部分。

Logo图片

多数网站都会有一个自己的logo图片，那么网页设计中，logo图片通常是放在header部分的左上角的。这是网上一个网页设计教学网站的头部布局。


 

#header .logo{
float: left;
margin: 0 0 0 10px;
color: #FFFFFF;
line-height: 80px;
}

利用左浮动
可以轻松完成这个功能，例外在利用margin，可以使logo处于更合适的位置。其中id=“header”的div容器为包裹头部的容器，最后将会介绍。

搜索框 

一般网站都会在顶部有一个搜索框，便于站内查找，当然前端设计，只需要将其布局做好，把id告诉后台开发者就好了，不必刻意去关注后台怎么实现搜索功能的，一般搜索框会放在靠右边的位置，本篇博客讲述的较为复杂的header设计，可以实现导航栏更换皮肤功能。所以把搜索框放在了logo图片后面。

 
 

#header .search{
left: 198px;
top: 20px;
position: absolute;
}

设置父元素相对定位，那么子元素设置成绝对定位可以用top,left属性将它布局于父容器内任意的地方。当然，适当的位置还是很重要的，需要简单的计算一下。 

更换导航栏皮肤控件
 

这里在最右边的地方加一个小控件，用来更换导航栏的皮肤，这里默认用纯色填充，其实用背景图的话原理类似。此处设计较为巧妙，是先将一张包含所有皮肤及该皮肤被应用的样式图片做成一张大的图片，大的图片中分为十二个小的图片，每个小图片代表一种皮肤，以及这个皮肤被选中的样式，只要当不同的皮肤获得被添加单击事件后，就可以利用脚本语言来处理切换皮肤。



此处不作为重点讲解，今后的博文中会慢慢陈述，那么布局代码如下： 

#skin{
float: right;
margin: 10px;
padding: 4px;
width: 120px;
}
#skin li{
margin-right: 4px;
width: 15px;
height: 15px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
float: left;
background-image: url(../img/theme.gif);
}
#skin_0{background-position: 0px 0px;}
#skin_1{background-position: 15px 0px;}
#skin_2{background-position: 35px 0px;}
#skin_3{background-position: 55px 0px;}
#skin_4{background-position: 75px 0px;}
#skin_5{background-position: 95px 0px;}
#skin_0.selected{background-position: 0px 15px;}
#skin_1.selected{background-position: 15px 15px;}
#skin_2.selected{background-position: 35px 15px;}
#skin_3.selected{background-position: 55px 15px;}
#skin_4.selected{background-position: 75px 15px;}
#skin_5.selected{background-position: 95px 15px;}

 

利用background-position属性显示总的图片的不同部分，就可以达到换肤后那个背景色上会出现被选中的样式。
 

导航栏 

一个header中，最重要的就是导航栏部分，导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。

导航栏的制作一般利用ul,li,a等几个样式，将li变成内联元素，即元素前后没有换行符。由于行内元素设置width和height是无用的，上下边界和上下填充也是不行的，所以无法控制大小，这样的话，可以通过子元素a来控制，将a元素设置成为块级元素。



 

.mainNav{
position: absolute;
top: 68px;
left: 0;
height: 37px;
line-height: 37px;
width: 990px;
z-index: 100;
background-color: #4A4A4A;
}
.mainNav .nav{
display: inline;
float: left;
margin-left: 25px;
}
.mainNav ul li{
float: left;
display: inline;
margin-right: 14px;
position: relative;
z-index: 100;
}
.mainNav ul li a{
display: block;
padding: 0 8px;
font-weight: 700;
font-size: 14px;
color: #FFFFFF;
}

父容器是相对定位，利用子元素的绝对定位可以使导航栏布局在合适的位置，在logo，搜索框，换肤控件的下方。二级导航菜单栏需要利用js和css配合完成，此处不做详细介绍。容器代码：

#header{
background: url(../img/headerbg.png) repeat-x scroll 0 0 #FFFFFF;
height: 105px;
}
#contentWidth{
position: relative;
width: 990px;
margin: 0 auto;
height: 105px;
z-index: 100;
}

 

这样一个网页的header部分就已经制作完成了，前端很重要的就是动手实践，希望大家学到的点滴都能去解决问题，因本人水平有限，难免会出错，欢迎大家指正，赐教，不胜感激，素材借鉴《锋利的jQuery》一书，是一本很不错的Jquery框架教学书籍，值得一看。