开发者学堂课程【移动 Web 前端开发：分类页-左侧栏】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8432
分类页-左侧栏
目录
一、 结构范例
二、 样式范例
一、 结构范例
左侧为分类栏模块
<div class=”cate_left”>
<ul>
<li class=""><a href="javascript:；">热门推荐</a></1i>
<li class=now""><a hraf_nP潮流女装</a</1i>
<li class=""><a href="javascript:；">品牌男装</a></li>
………
在编写结构时，结合轮播图的思路，即父容器嵌套子容器，子元素在父元素里做滑动。在上述，<div class=”cate_left”>为父容器，<ul>为子容器。
二、样式范例
/*左侧分类*/
.cate_left{
width:90px;
height:100%;
float: left;
}
.cate_left ul{
width:90px;//子容器宽度和父容器一样，高度不一样。
.cate_left ul li{
width:100px
height: 50px;
text-align: center;//文字居中
line-height:50px;//上下居中
border-right:1px solid #ccc;
border-bottom:1px solid#ccc；//增加下边框线和右边框线
background:#f3f4f6;//设置背景颜色为灰色
font-size:12px;//设置字体
.cate_left ul li a{
display: block;
}
.cate_left ul li.now{
border-right: none;//当为 now 时，右边边框线消失
background: #fff;//背景颜色消失
}
.cate_left ul li.now a{
color：#d8505c；//当为 now 时，字体颜色变为红色。
}
效果图如下：
此时查看父容器的大小是 90px*435x，子容器的大小是 90px*1200px，子容器比父容器长，说明可以做滑动。
