前端导航条和相对定位,绝对定位,固定定位

先写基本的HTML文件,用div框起来,使用ul标签。


image.png

使用css文件设置样式


image.png

先给导航栏设置宽,高和背景颜色,然后使用p标签左浮动,ul标签右浮动,使其脱离文档流在一行显示;将p标签的line-height和top的height值设置一样,使p标签居中显示;line-height设置垂直居中,text-align设置水平居中,导航栏完成

想给它加多一点样式,鼠标点到哪个栏目那个栏目就变色


image.png

a为联级标签,用display将a标签设为块级标签,设置好宽和高:hover为当前鼠标点中时,背景颜色设为黄色,字体设为黑,完成

你可能感兴趣的:(前端导航条和相对定位,绝对定位,固定定位)