div+css实例：布局网站首页(四)

前面几篇文章我们都写完了网站首页的整体HTML和首页顶部的HTML代码和样式，这篇我们写完首页头部、导航栏和搜索部分的HTML代码和CSS样式。
下面是首页头部、导航栏和搜索部分的HTML代码：

首 页
PHP
JAVA
JSP
C++
.NET
C
MYSQL

  

上面的HTML代码涉及到了一点javascript代码，如有不太熟悉的网友可看看看本站的Javascript教程。
导航栏的导航栏目都是我们手工填写上去的，刚开始学习div+css布局的时候或者是在公司等做美工的话我也建议大家这么来做，导航栏目都是从数据库中取出来的，没有必要先写上去，为了方面测试姑且这么来写吧！
好了，下面开始写CSS代码：

/*--logo:banner 样式--*/
#header{
width:960px;
height:60px;
margin:10px 5px 10px 5px;
}
#header #logo{
width:200px;
height:60px;
float:left;
margin-right:12px;
}
#header .banner01{
width:500px;
height:60px;
float:left;
margin-right:12px;
}
#header .banner02{
width:236px;
height:60px;
float:left;
}
/*--迷你导航:开始--*/
#nav{
width:960px;
height:36px;
margin:0 auto;
overflow:hidden;
height:35px;
background:url('../images/header_bg.png') repeat-x 0 0;
}
#nav li{
width:70px;
height:35px;
float:left;
margin-left:-3px;
margin-right:3px;
float:left;
background: url(../images/header_interval.png) no-repeat 0 center;
text-align:center;
}
#nav a{
display:block;
width:70px;
height:35px;
float:left;
margin-left:3px;
line-height:35px;
text-align:center;
color:white;
font-weight:bold;
}
#nav a:hover{
text-decoration:none;
background:url('../images/header_hover.png') no-repeat center top;color:#FFF;
}
/*--迷你导航:结束--*/

/*--搜索框:开始--*/
#search{
width:958px;
height:35px;
margin:0 auto;
border:1px solid #C2DBA4;
background:#ECF7DE;
}
#search .search{
width:140px;
height:20px;
margin-top:6px;
margin-left:10px;
line-height:20px;
padding-left:20px;
vertical-align:middle;
border:1px solid #C2DBA4;
background:#fff url("../images/search.jpg") no-repeat 3px center;
}
#search .search_bt{
cursor:pointer;
width:68px;
height:21px;
border:0px;
margin-top:6px;
line-height:21px;
background:url("../images/search-bt.gif") no-repeat;
vertical-align:middle;
}
/*--搜索框:结束--*/

上面的CSS代码中有的需要背景图片的大家可以到本站DOWN下来，或者也可以换成自己想要的图片，如果有什么不懂的地方，大家可以在下面留言或是发邮件到：lyy163123@163.com
我尽量在最短的时间内回复大家的疑问。
网站首页主体部分和友情链接部分将在下一篇讲述，敬请期待！
有用  |  无用 取消

猜你喜欢