HTML开发博客之注册页面设计（一）
CSS文件的引入
新建文件reg.html文件
首先我们来分析网页布局
这是我们页面完成后的效果，
网页分为三部分
头部，主体，和底部我们按照这个顺序开始编写。
头部导航栏的编写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册页面</title> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href=""> 首页</a></li> <li><a href="">科技资讯</a></li> <li><a href="">心情随笔</a></li> <li><a href="">资源收藏</a></li> <li><a href="">图文图片</a></li> <li><a href="">留言板</a></li> <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li> </ul> </div> </div> </body> </html>
创建div盒子，在盒子中嵌套div，使用无序列表创建导航，引入logo图片。
创建css文件
@charset "utf-8";
body{
background-color: #F0F0F0;
}
*{
border: 0px;
padding: 0px;
margin: 0px;
font-size: 14px;
}
#top{
width: 100%;
height: 90px;
background-color: white;
border-bottom: 1px solid #bbbbbb;
}
#menu{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}首先对全局初始化，对div做两个id标签，top和menu,分别设定头部的宽高，和页面整体布局的宽高。这样我们就得到如下图所示的页面
接着对页面进行样式的修改
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}修改img的高度,对ul序列去掉格式。
#menu ul li{
float: left;
height: 90px;
line-height: 90px;
margin-right: 50px;
}
#menu ul li a{
color: black;text-decoration: none;
display: inline-block;
}
#menu ul li a:hover{color: #FFD700;text-decoration: none}对li标签进行设置，做浮动操作，调整高度和间距，使用display: inline-block;使导航栏成为快元素。去掉下划线。并更改标签点击样式。效果如下图所示，我们的头部导航栏就完成了。
