第8天：CSS制作导航栏

65 阅读 0 评论 43 点赞

我是靠谱客的博主冷静衬衫，最近开发中收集的这篇文章主要介绍第8天：CSS制作导航栏，觉得挺不错的，现在分享给大家，希望可以做个参考。

今天主要学习了网页导航栏的制作。注意：引入外部CSS样式时，如果使用background：url（../images/1.png）,一定记得用..跳出当前文件夹，回到上级目录。

一、导航栏实现步骤：

1、网页整体分为头部、内容、尾部。网页中心内容部分为版心。版心是定宽的。

2、设定版心宽度。其余每部分内容只需要设置高度即可。

3、header部分分为左、中、右三部分。分别用div包起来，可以设置padding。

4、nav部分用ul实现，li中的a标签为行内元素，要用display转为块标签，给li设置宽高、行高，可以实现居中。

5、鼠标移上去的效果用a：hover实现。

导航栏代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>

*{
margin:0;
padding:0;
}
body{
font-family: "微软雅黑";
font-size: 16px;
}
.header{
height:58px;<

以上就是冷静衬衫为你收集整理的第8天：CSS制作导航栏的全部内容，希望文章能够帮你解决第8天：CSS制作导航栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。