导航栏的制作

我们在看到一些网页的布局中，浮动总是离不开身影，浮动目的为了完成实现水平布局，有一个良好的布局，背后一定藏着一个良好的思维，请看思维导图

浮动为了实现水平布局的完成，在使用浮动之后元素脱离了文档流，使元素可以实现水平布局

这时就通过float：left/right；进行自己想要的布局。

浮动的特性：1.所有标签同排显示2.行标签适应所有CSS特性3.默认内容撑开盒子宽高4.元素脱离文档流

加入了浮动之后，网页布局还有许多为了不影响以后的布局，所以一般我们要清除浮动防止父级元素无法检测到子级的存在，高度无法撑开

清除浮动的人方法建议使用overflow:hidden;

光有理论知识，还得有动手操作，十万代码十万年薪！！下面是一个csdn导航栏的制作

效果图为

 1.首先这些所有内容都要在一个大的盒子里，防止其他标签显示不正常。我们命名csdn。给盒子一个高度，内容会将盒子撑开宽度不用调整

2.在这个div中插入图片  并调整图片大小 。当只调整图片的宽度或者高度时图片会等比例变化。给照片添加浮动

3.放8个a标签，添加浮动使所有都在一行中显示，调整高度 当行高等于高度时文本水平居中达到整洁的布局。

4.一般在*{margin：0；padding：0；text-decoration：none；}将a标签下划线去掉

5.a:hover{color：skyblue；}在鼠标经过时，字体颜色变味了天蓝色 从而完成了导航栏的大体制作