开发者学堂课程【移动 Web 前端开发：分类页-右测内容】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8433
分类页-右测内容
内容介绍
一、结构范例
二、样式范例
一、 结构范例
右侧栏需要上下滑动，是父容器嵌套子容器。
<div class="cate_right">//准备父容器
<div class="cate_right_box">//准备子容器
<!--广告-->
<a class=”banner“a href="#">
<img src="images/banner_1.jpg"alt=""/>
</a>
<!-热门分类-->
<div class="hot_category">//清除浮动
<h3>热门分类</h3>//标题
<ul class=”clearfix”> //清除浮动
<li><a href="#"><img src="images/nv-fy.jpg”alt=""/><p>毛呢短袖/p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg”alt=""/><p>毛呢短袖/p></a></li>
…….
二、样式范例
.cate_right{
overflow: hidden
height:100%;
}
.cate_right_box{
width：100%;//宽度和父容器一样
padding:0 10px;
}
.cate_right_box.banner{
margin-top:10px;//距离顶部有间距
width：100%；//宽度和父容器保持一致
display: block;
}
.cate_right_box.banner img{
display: block;
width：100%；
}
.cate_right_box.hot_category{
margin-top:10px;//和轮播图隔开距离 cate_right_box .hot_category h3{
font-size:12px;
}
.cate_right_box .hot_category ul{
width：100%;
}
cate_right_box .hot_category ul li{
width：33.3333%;
float:left;
}
.cate_right_box .hot_category ul li a{
width:100%;
display：block;
}
cate_right_box.hot_category ul li a imgt
display:block;//居中
width:60px;
height:60px;
margin:0 auto;
}
.cate_right_box .hot_category ul li a p{
text-align: center;
padding: 5px 0;
font-size: 12px;
color:#666；
}
