body {
margin: 0px;
padding: 0px;
}#view_menu {
width: 600px;
height: 30px;
line-height: 30px;
cursor: default;
}
#view_menu_title {
float: left;
font-family: 'Microsoft YaHei';
width: 150px;
text-align: center;
}
#view_menu_trends {
float: left;
line-height: 30px;
color: #99CC99;
font-size: 10px;
}
.currentTrends {
color: #009933;
}
#view_menu_trends ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#view_menu_trends ul li {
text-align: center;
float: left;
width: 15px;
}
#view_menu_control {
float: left;
width: 100px;
height: 30px;
text-align: center;
}
#view_menu_control img {
width: 25px;
height: 25px;
line-height: 30px;
cursor: pointer;
}
#view_content {
width: 548px;
height: 178px;
position: relative;
overflow: hidden;
border: 1px solid #CCCCCC;
}
#view_content_fixed {
position: absolute;
width: 2500px;
}
#view_content_fixed img {
cursor: pointer;
}
#view_content ul {
margin: 0px;
position: absolute;
padding: 0px;
}
#view_content ul li {
margin: 0px;
padding: 0px;
float: left;
padding: 8px;
list-style: none;
display: inline;
}
.view_content_fixed下的SPAN标签是为了加标题的
效果图如下:
还有两个地方没有细化，第一个就是
这个动态点点击的时候也可以切换页面，第二个
左右切换按钮,可以添加按压效果，点击的时候取深色图片。
好了，大体的效果就这样，细节自己去玩吧，希望自己能坚持写下去，从小案例到大案例，好好学习！
