HTML页面设计之导航栏

一、 导航栏 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;
			}