功能菜单栏实际上非常常见,通常可以在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;
}