用 javascript 做一个类似于 QQ好友列表

样式

具体步骤

1.CSS 网页布局

：在 CSS 网页布局中我们使用了 后代选择器（table td），也就意味着 table 中的 td标签全部使用该定义内容；table td div ：它意味着 table 中的 td 中的 div 中的内容
全部使用该定义；至于最后两个这是使用了我们的 伪元素选择器 ，并利用了以下属性；

	 :link 表示元素未被点击的状态
	 :hover 表示光标移入的状态
	 :active 表示元素被点击时的状态
	 :visited 表示元素被访问过后的状态
	 :text-decoration 属性规定添加到文本的修饰。

2.Javascript 定义网页行为

：图片中被 script 包裹的代码就是 JavaScript 代码；虽然看着他很少，但是他所包含的内容确实不少：首先我们定义了一个普通方法，利用 function 关键字，openDiv 为函数名，thisobj 为参数；然后将参数传给 oA，然后利用 oA 所接收到参数，将他的父节点再次传出去，传给 oPerent，然后利用 .getElementsByTagNmae("")：根据标签名获取页面中的元素；然后在该方法中继续写一个判断语句

3.HTML 定义内容

效果图

代码

在这里插入代码片


 
    





   

     

       "javascript:void(0)" οnclick="openDiv(this)">
         西游记好友
        

            唐僧

            孙悟空

            猪八戒

            沙僧

            白龙马

        
      
     
 

     

       "javascript:void(0)" οnclick="openDiv(this)">
         三国好友
        

            刘备

            诸葛亮

            关羽

            张飞

            赵云

        
      
     
 

     

       "javascript:void(0)" οnclick="openDiv(this)">
         水浒好友
        

            宋江

            卢俊义

            秦明

            呼延灼

            李逵