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

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

这时就通过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;}在鼠标经过时,字体颜色变味了天蓝色 从而完成了导航栏的大体制作

更多推荐

导航栏的制作