一、 导航栏 DIV+CSS布局
先设计一个大盒子,用来盛放整条的导航栏,宽度就是屏幕的宽度:
#navigator{/*导航栏*/height:30px;width:1000px;font-size: 20px;list-style-type: none;background-color: black;padding-left: 300px;padding-right: 330px;}
下面是放每个小按钮的小盒子li:
#navigator li{/*导航栏里的小盒子*/margin-left: auto;margin-right: auto;float:left;/*导航栏里的小盒子左对齐*/}
下面是对超链接的设计:
#navigator li a{margin-left: 2px;width:150px;height:22px;color: aliceblue;text-decoration: none;display: block;/*连接块状呈现*/text-align: center;}
到这里就可以了,如果要实现鼠标指在按钮上变色,还需要对hover(徘徊)进行设计:
#navigator li a:hover{/*鼠标指到上面变色*/background-color: lightcoral;}