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