效果如下：依次为图一---图二----图三----图四

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

 

主要实现效果：

点击主标题显示下拉好友，再点击收起下拉好友；鼠标移到好友上背景颜色改变；选中的好友背景颜色也要改变；

 

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
*{ margin:0px auto; 
padding:0px; 
font-family:微软雅黑; 
font-size:14px;
}
.zhu{ width:200px; 
height:30px; 
text-align:center; 
line-height:30px; 
vertical-align:middle; 
background-color:#03C; 
color:white;
}
.zi{ width:200px; 
display:none}
.list{ width:198px; 
height:30px; 
text-align:left; 
line-height:30px; 
vertical-align:middle; 
border-left:1px solid #999;
border-right:1px solid #999;
}
.kg{
margin-left: 30px;
}
.kg1{
margin-left: 10px;
}
.list:hover{
cursor: pointer;
}

#z4{ border-bottom:1px solid #999;}
</style>

</head>
<body>
<div style="width:200px; height:600px; margin-top:30px">
<div class="zhu" onclick="Show('z1')">
我的好友
</div>
<div c

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式