CSS文件的引入

新建文件reg.html文件

首先我们来分析网页布局

这是我们页面完成后的效果，

网页分为三部分

头部，主体，和底部我们按照这个顺序开始编写。

头部导航栏的编写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;使导航栏成为快元素。去掉下划线。并更改标签点击样式。效果如下图所示，我们的头部导航栏就完成了。