序言
前段时间学习了一下Html+Css+Js相关知识，感觉不用的话很容易忘记，因此打算每周有空的时候都会写一些小型的demo，也希望能给想入门Web前端的Android程序猿们一些建议，好了话不多说，代码为敬：
image
实现
就是这样一个简单的效果，来看一下html代码：
<body>
<div class="tabBar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">我的</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</div>
</body>
是不是很简单，html代码里面只管放东西进去就好了，需要什么就放什么，在html中，通常用ul标签来实现无需列表，而li标签通常被用来定义列表项目，所以它们俩是配套使用的，塞完东西之后我们要去摆放和设置一些样式
没有加css样式
要想好看，接下来看看css代码：
.tabBar{
width: 600px;
height: 50px;
background-color: #ffffff;
margin: 10px auto;
}
.tabBar ul {
width:510px;
margin: 0 auto;
}
.tabBar ul li {
width: 100px;
height: 50px;
float: left;
list-style: none;
}
.tabBar ul li a{
width: 100px;
height: 50px;
text-align: center;
margin: 0 1px;
display: block;
background-color: #e1e1e1;
line-height: 50px;
text-decoration: none;
color: #000000;
}
.tabBar ul li a:hover{
color: #ffffff;
background-color: #f60;
}
貌似看起来也很简单，解释一下，list-style: none;这句代码是去除<li>前面的圆点的，text-decoration: none;这句是去除<a>标签的下划线的，然后我们对<li>标签使用float: left;属性，这样就能使得列表横向排列了。代码中有一些居中的写法，我们来看看：
margin: 0 auto;||margin: 10px auto;这样是让布局水平居中，这其实是一个缩写，想了解更多的可以翻到底下去看我以前写的文章line-height: 50px;这种可以让布局垂直居中，这个高度设置为父布局的高度就行了text-align: center;这种一般是文本居中的方式。
