制作网页导航栏
记录自己的学习过程
以前粗略的把html和css过了一遍，发现如果记得不是特别牢，敲代码还是无从下手的，所以还是 多敲敲比较好。
1、直接用链接<a>来制作简易的而顶部导航栏
这里用到了内部样式表，在<style>里面写css，用到两种选择器：id选择器和类（class）选择器，说是选择器其实在我的理解里和标记差不多，通过对应的标记来查找想要的元素。使用id选择器是以“#”开头，后面紧跟你设置的id值，class则是以“.”开头，后面跟上的设置的class值，两者之间最大的区别在于id选择器在一个文档里智能存在一个，而类（class）选择器可以在一个文档里存在多个。而且id选择器不能够和其他选择器结合使用，例如你要找ul这个元素下面id为“idValue”的值，可能会写“ul #idValue{}”，这样编辑器会报错，而类选择器则可以结合使用，例如你要找p标签下class=“classValue”的值，就可以这样子写：p.classValue{};
对于下面代码一些属性的解释：
margin：设置元素的外间距；
padding：设置元素的内边距;
border-right：对右边的边框进行定义。
color:设置字体的元素；
text-decoration:none:移除文本多余的修饰，同时通过这个属性除了none还可以设置为underline(文本下划线)，overline（文本顶部下划线），line-through（穿过文本下的一条线），blink（定义闪烁的文本），inherit（从父类继承text-decoration 属性的值），顺带一说，该属性为css1版本中的属性。
text-align：设置文本对齐方向，上下左右中都可以设置。
target="_bank":点击链接后打开新窗口，不设置的话默认覆盖原窗口。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="PWBJBL">
<title>导航栏制作</title>
<style>
#navigation1{margin: auto;text-align: center;}
.RightBorder{
/*text-decoration：none 去除文本多余的修饰*/
text-decoration: none;
color: black;
border-right:solid 1px black;
text-align: center;
/*padding:内边距，当值为两个时，分别设定的是上下为0，左右为5px的内边距；
当值为四个时，设置的顺序为顺时针顺序，即上、右，下左；
值为三个时，则是上，左右，下的顺序，boder(外边距)同理*/
padding: 0 5px;
}
</style>
</head>
<body>
<!--顶部导航栏-->
<div id="navigation1">
<a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=c9588339-af2c-4f2b-ae1c-5f633165f01b&union_place=un"
target="_blank" class="RightBorder">首页</a>
<a href="https://pindao.suning.com/?safp=d488778a.homepagev8.126605238663.6&safpn=10001"
target="_blank" class="RightBorder">办公家具</a>
<a href="https://dianqi.suning.com/?safp=d488778a.homepagev8.126605238663.5&safpn=10001"
target="_blank" class="RightBorder">数码科技</a>
<a href="https://redbaby.suning.com/?safp=d488778a.13701.0.78fd97a8e1&safpn=10007"
target="_blank" class="RightBorder">母婴</a>
<a href="https://qiang.suning.com/pc/brandBenefits.html?safp=d488778a.13701.0.d9e23bea58&safpn=10007"
target="_blank" class="RightBorder">秒杀活动</a>
</div>
</body>
</html>效果是这样的：
2、使用列表制作比较好看的导航栏
这里是用了无序列表嵌套链接制作，列表默认是竖下来的，但可以使用浮动（float）来使它变为横向。也可以使用display: inline-block;两者有所差别，display: inline-block；会有间隙，需要将父元素的字体大小调为0去除间隙，这里使用浮动。（注：这里面链接的地址是我找的苏宁易购的网址，还有一个是自己文件夹里的一个网页）
下面是用到的css属性：
list-style-type:none；用于移除列表前的标志，通常写完一个无序列表，每一行都会有一个“·”,设置为none去掉了这个点。与此同时还能够使用这个属性设置这个点是实心还是空心之类的。
overflow：hidden；指定如果内容溢出一个元素的框，会发生什么。hidden定义了，如果标签内的内容溢出，内容就会被修剪，溢出的内容不可见。默认值为visibility，即内容溢出不进行修剪。设置为auto，如果内容被修剪，则会出现一个滚动条，向下拉就能看到溢出的内容；同时还有一个scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容；这两者的效果比较像，不同在于scroll在内容不溢出的时候依旧显示滚动条，而auto只有在内容溢出被修剪了才会出现滚动条；
backgroud-color;设置背景色；
display：block；属性规定元素应该生成的框的类型。block设置了元素作为块级显示，前后带有换行符。这里就是将a标签设置为块级，进行高宽的设置，类似于在a标签外套一层<span>，设置为inline时为默认的内联元素。
folat：left;向左浮动，即在第一行没有满的情况下，第二行到第一行的右边显示。
伪类：a.hover:设置鼠标放在连接上时的状态；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="PWBJBL">
<title>导航栏制作（列表）</title>
<style>
#navigation2{
/*list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记*/
list-style-type: none;
overflow: hidden;
margin: 0%;
padding: 0%;
background-color: rgb(132, 0, 255);
}
a.nav{
text-decoration: none;
/*display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度*/
display: block;
width: 100px;
text-align: center;
color: white;
padding: 14px 16px;
}
/*伪类*/
li a:hover{
background-color:indianred;
}
#navigation2 li{
/*设置列表水平*/
display: inline;
float: left;
}
</style>
</head>
<body style="margin: 0%;padding: 0%;">
<!--制作导航栏2：使用列表-->
<ul id="navigation2">
<li><a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=c9588339-af2c-4f2b-ae1c-5f633165f01b&union_place=un"
target="_blank" class="nav">首页</a>
</li>
<li>
<a href="https://pindao.suning.com/?safp=d488778a.homepagev8.126605238663.6&safpn=10001"
target="_blank" class="nav">办公家具</a>
</li>
<li>
<a href="https://dianqi.suning.com/?safp=d488778a.homepagev8.126605238663.5&safpn=10001"
target="_blank" class="nav">数码科技</a>
</li>
<li>
<a href="https://redbaby.suning.com/?safp=d488778a.13701.0.78fd97a8e1&safpn=10007"
target="_blank" class="nav">母婴</a>
</li>
<li>
<a href="https://qiang.suning.com/pc/brandBenefits.html?safp=d488778a.13701.0.d9e23bea58&safpn=10007"
target="_blank" class="nav">秒杀活动</a>
</li>
<li>
<a href="../p2/login.html" target="_blank" class="nav">登录</a>
</li>
</ul>
</body>
</html>最后效果时这样的：
