请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351
前言：
今天做头部开发，也就是所谓的顶部开发，网站布局规划好以后，接下来就是对网站首页顶部的布局实现。个人简介网站项目实战开发（顶部/头部代码实现）
顶部功能：
1、顶部浮动（浮动布局，左右浮动）
2、顶部分成两个板块，一个是顶部的上面部分，一个是顶部的下面部分
3、由于是自适应页面，所以需要设置网页最大宽度，但是不需要设置网站网页的宽度，用max-width，而不是width
4、logo实现和右侧菜单栏实现
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
/*width: 1863px;*/
width: 100%;
height: 100px;
display: block;
/*background-color: aqua;*/
}
header .header_top{
width: 100%;
display: block;
background-color: #999999;
}
.header_top_center{
max-width: 1366px;
margin: 0 auto;
display: block;
height: 30px;
/*line-height: 30;*/
/*background-color: lightskyblue;*/
font-size: 12px;
}
.header_top_right{
float: right;
line-height: 30px;
}
.header_top_right a{
margin-right: 10px;
text-decoration: none;
color: black;
}
.header_top_right a:nth-last-child(1){
margin-right: 20px;
}
.denglu{
float: left;
padding-left: 10px;
line-height: 30px;
}
header .header_bottom{
width: 100%;
height: 70px;
display: block;
/*background-color: skyblue;*/
}
.header_bottom_center{
max-width: 1366px;
margin: 0 auto;
display: block;
height: 70px;
/*background-color: lightskyblue;*/
}
.header_bottom_left{
float: left;
width: 240px;
height: 70px;
/*background-color: blueviolet;*/
}
.header_bottom_right{
float: right;
}
.header_bottom_right img{
height: 70px;
float: right;
}
.header_bottom_right ul li{
float: right;
height: 70px;
line-height: 70px;
margin-right: 20px;
list-style: none;
}
.header_bottom_right ul li:hover{
background-color: orange;
}
.header_bottom_right ul li a{
text-decoration: none;
color: black;
}
.center{
width: 100%;
height: 785px;
background-color: pink;
}
footer{
width: 100%;
height: 215px;
padding-top: 30px;
background-color: skyblue;
}
.footer{
margin: 0 auto;
max-width: 1366px;
height: 153px;
background-color: #e82c07;
}
</style>
</head>
<body>
<header>
<div>
<div>
<div>
<a href="">免责申明</a>
<a href="">投稿本站</a>
<a href="">本站标签</a>
<a href="">联系站长</a>
</div>
<span style="display: block">登录</span>
</div>
</div>
<div>
<div>
<div>
<h1>
<img src="img/logo.png" alt="">
</h1>
</div>
<div>
<ul>
<li>
<a href="#">每日编程</a>
<span style="display: inline">
<img src="img/icosanjiao.png">
</span>
</li>
<li>
<a href="#">资源分享</a>
<span style="display: inline">
<img src="img/icosanjiao.png">
</span>
</li>
<li>
<a href="#">个人笔记</a>
<span style="display: inline">
<img src="img/icosanjiao.png">
</span>
</li>
<li>
<a href="#">首 页</a>
</li>
<!-- 由于浮动的原因，所有先浮动的元素默认靠右边最近，因此需要将显示到右边的元素写到第一行，显示到左边的元素写到最后一行-->
</ul>
</div>
</div>
</div>
</header>
<div></div>
<footer>
<div></div>
</footer>
</body>
</html>
效果图展示：
![(]M5[_H4LR{R9BL7_P8O_WW.png](https://www.zbck123.com/zb_users/upload/2019/11/201911121573531073102450.png "(]M5[_H4LR{R9BL7_P8O_WW.png")
说明：
首页顶部还会有其他功能，其他功能将在后面陆续讲解，现在讲解一个大概
宗波尘客(www.zbck123.com)宗九尘博客 联系QQ：203239351
