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:1pxsolid#bbbbbb;
}
#menu{
width:1000px;
overflow:hidden;
margin:0auto;
}
首先对全局初始化,对div做两个id标签,top和menu,分别设定头部的宽高,和页面整体布局的宽高。这样我们就得到如下图所示的页面
接着对页面进行样式的修改#menuimg{
height:90px;
}
#menuul{
list-style-type:none;
}
修改img的高度,对ul序列去掉格式。#menuulli{
float:left;
height:90px;
line-height:90px;
margin-right:50px;
}
#menuullia{
color:black;text-decoration:none;
display:inline-block;
}
#menuullia:hover{color:#FFD700;text-decoration:none}
对li标签进行设置,做浮动操作,调整高度和间距,使用display: inline-block;使导航栏成为快元素。去掉下划线。并更改标签点击样式。效果如下图所示,我们的头部导航栏就完成了。