# 浮动导航栏 浮动导航栏  ## 1\. 先定盒子 ~~~ { margin: 0; padding: 0;} li {list-style: none ;} . banner { width: 760px; height: 150px; background-color: pink; margin: auto ; } ~~~ ## 2\. 导航栏盒子 ~~~ .nav {width:760px ; height: 32px; background-color:pink margan :0 auto ; } ~~~ ## 3\. 给列表块元素 加浮动 让他们在一行 ~~~ nav ul li{ float: left; /\*因为li让文字竖着显示，所以必须给li添加浮动\*/ } ~~~ ## 4\. 给内容框框定大小 （以为a是行元素 要转为块元素） ~~~ .nav ul li a{ /\*定给a大小， 因为我们需要a:hover\*/ display: block; /\*a是行内 元素需要转换\*/ width: 80px ; height: 32px: line -height: 32px; 文本对齐方式：垂直居中 text-aLign: center; /\*background-color: pink;\*/ background: ur1( images/button1. jpg) no-repeat ; 图片不平铺（保持） font-size: 12px; text - decoration: none ; color: #40510a ;} ~~~ ## 5\. 鼠标点击时样式 ~~~ nav ul li a:hover { background image: ur1( images/but ton2Ijpg); } ~~~