关于Web功能菜单栏排列的两种做法

功能菜单栏实际上非常常见，通常可以在web首页看到，起到导航的作用。下面总结一下CSS的两种做法。

做法一：盒子排列

盒子排列，主要利用浮动让盒子排在一行，然后调整a链接样式。其实也没什么好说的，可能这一块用的还是比较少暂时没有什么感悟。做法二会多一点。

做法二：无序列表

<ul> <li>标签创建无序列表就，然后把li调整为块状，浮动靠左，代码里面有标注的都是必要的，其余的基本上都是非必要的样式调整内容。

.sale li {
	width: 320px;
	height: 510px;
	background-color: #fff;
	float: left;    /*浮动靠左*/
	border: 1px solid #e7e8e9;  
}

.sale a {
    width: 148px;
    height: 38px;
    border: 2px solid #ff9412;
    display: block;
    margin: 40px auto 0;
    text-align: center;
    line-height: 38px;
    text-decoration: none;  /*可以去除li自带的那个点装饰*/
    color:#ff9412;
}
.sale a:hover {
    width: 148px;
    height: 38px;
    display: block;      /*转换为块状*/      
    margin: 40px auto 0;
    text-align: center;
    line-height: 38px;
    text-decoration: none;
    color:#fff;
    background-color: #ff9412;
}