标题:使用html，css实现简单的导航栏
一、实现过程
首先通过ul,li实现一个无序列表，添加背景得到如图所示的样式【文档流】
让li浮动，使得垂直排列–>水平排列，【注意需要开启bfc，让ul脱离文档流，使得其宽高由ul中的内容li撑开】
为li设置宽度，使得ul中的内容分布均匀为超链接设置宽度，使得可以点击的范围更大【注意：此步骤需先将内联元素–>块元素，才能设置宽度】
设置字体颜色，大小，去掉超链接的下划线，将文字放置在内容中央即可
二、注意：text-align：center;让内容【文字】放在中央
而margin:0 auto;是将元素放置中央
<!doctype html><html><head><meta charset="utf-8"><title>测试导航栏2 再写一次</title><style type="text/css">*{margin:0;padding:0;}.nav{/*去掉默认装饰*/list-style:none;/*设置宽度*/width:800px;/*设置背景*/background-color:pink;/*设置位置*/margin:10px auto;/*开启bfc*/overflow:hidden;}li{/*移动块元素li*/float:left;/*设置宽度*/width:25%;}a{/*将内联元素设置为块元素*/display:block;/*设置宽度 使得扩大范围,要先设置为块元素,否则宽度无效*/ width:100%;/*设置字体大小*/font-size:20px;/*字体颜色*/color:black;/*文字的位置*/text-align:center;/*去掉下划线*/text-decoration:none;}a:hover{/*设置鼠标移入状态*/background-color:green;}</style></head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul><img src="magazine-unlock-hi1057703.jpg" width="300" alt="周杰伦"/><br/></body></html>
