来看头部，做好的效果图如下：
文章图片
接下来就进入主题吧~~
先来分析一下：
文章图片
有两张图片，一个填写账号密码和登录按钮的登录框，其他登录方式，（因为海外登录方式与前面纯图标的不太一样，这里又是只做了个大致的样式，所以就把海外用户登录与忘记密码做在了一个大div块中，大家可以按照自己的想法自行修改）
很明显，除了图片，后面的内容做在了一个大块中，其中每一个小块又可以使用div来做，而div是块标签，要想一行显示，就需要使用浮动了
初步做好长这样：
文章图片
去掉灰色（body的颜色）和粉色（头部颜色）之后就是和原图一样了~
文章图片
HTML代码如下：
文章图片
文章图片
重要部分上场了：
CSS（有三处背景颜色注释，可以去掉注释看一下效果是什么样子的）：
body{
/*****************************1*/
/* background-color: #666;
*/
}
/* 头 */
.new_header{
height: 70px;
/**********************2*/
/* background-color: pink;
*/
position: relative;
}
/* 为什么要设置a标签的浮动呢？
此时a标签要和后面的form_login的div标签一行显示，所而div是块元素，独占一行，所以要给div块加上浮动，但是只给div块加浮动，会将a标签挤到右边，所以a标签也加浮动
*/
.new_header a{
float: left;
}
/* 整个form_login块往左移动20个像素，并加20个像素的上边距 */
.new_header .from_login{
margin: 20px 0 0 -20px;
/********************************3*/
/* background-color: red;
*/
float: left;
}
.new_header .from_login input{
/* 设置宽高的原因，使用不设置宽高的框，使得这个输入框大小不一致，所以设置了宽高 */
height: 21px;
width: 120px;
/* 设置框中文字距离左边线以及右边线的距离，成大输入框 */
padding: 0 4px 0 10px;
/* 输入框右边加一个8px的边距 */
margin-right: 8px;
float: left;
/* 文字颜色改为#aaa */
color: #aaa;
}.new_header .from_login button{
width: 67px;
height: 25px;
background-image: url(./images/sprite.png);
background-position: -816px -188px;
/* 可以去掉原生button的边框样式 */
border: 0;
float: left;
}
.new_header .from_login button:hover{
background-position: -816px -240px;
}
.new_header .from_login .other_login1{
float: left;
font-size: 12px;
color: #aaa;
margin-left: 20px;
margin-top: 5px;
}
.new_header .from_login .other_login1 span{
float: left;
}
.new_header .from_login .other_login1 a{
width: 16px;
height: 16px;
margin-left: 5px;
background-image: url(./images/login_bg.gif);
}
.new_header .from_login .other_login1 .qq_login{
background-position: 0 0;
}
.new_header .from_login .other_login1 .weibo_login{
background-position: -16px 0;
}
.new_header .from_login .other_login1 .baidu_login{
background-position: -32px 0;
}
.new_header .from_login .other_login1 .weixin_login{
background-position: -48px 0;
}
.new_header .from_login .other_login2{
float: left;
}
.new_header .from_login .other_login2 a{
font-size: 12px;
color: #aaa;
text-decoration: none;
margin: 5px 0 0 18px;
}这个过程中遇到的问题：
1.button标签总是再带一个自己原有的样式，搞不明白应该怎么样去掉
文章图片
2.input输入框之间有一块莫名其妙的边距，怎么也去不掉，并且高低也不一样，button的高低也不一样
文章图片
解决办法：
1.这是button按钮的边框造成的 ，加border：0去掉边框就可以了
两个输入框和button按钮是行内块元素，它们可以挨在一起，但是挨在一起的时候呢，中间会存在空隙以及大小宽高等让人很无奈的问题，这个时候，可以使用浮动来解决这个问题，所以在这里加了float:left，问题解决
【PC端网页布局——世纪佳缘（三）头部】
推荐阅读
- JavaScript|web前端入门到实战（好用的Js图表库）
- 接口访问加密方式
- 实用技术|Chrome 技术篇-常用web调试手法（清除缓存并硬性重新加载）
- 有关easyUI的拖动操作中droppable，draggable用法例子
- web前端|CSS科技感四角边框
- ColorBox 演示和说明/API
- SUI 列表 底部无限滚动
- js把时间戳转化为时间
- js jq获取标签的各种方式整理
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示