<!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:"微软雅黑"; } #list { width:350px; height:400px; background-color:#999; } .py { width:350px; height:40px; margin:8px 0px 0px 0px; } .py:hover { background-color:#3F0; color:#FFF; cursor:pointer; } .img { width:35px; height:40px; float:left; } .nc { float:left; height:40px; margin:0px 0px 0px 20px; line-height:40px; vertical-align:middle; } </style> </head> <body> <?php $uid = "15053397521"; //因为没有从登陆页面传过来,所以先给uid传一个值 ?> <div id="list"> <?php //造链接对象 $db =new MySQLi("localhost","root","517","weixin"); //判断是否出错 !mysqli_connect_error() or die("连接失败"); //写sql语句 $sql = "select Friends from friends where Uid='{$uid}'"; //执行sql语句 $result = $db->query($sql); $attr = $result->fetch_all(); for($i=0;$i<count($attr);$i++) { //查出朋友的用户名，因为二维数组的结果就一个值,所以索引取0. $fuid = $attr[$i][0]; //查users表,根据朋友的UID查出朋友的昵称和头像 $sqlf = "select Pic,NickName from Users where Uid='{$fuid}'"; $resultf = $db->query($sqlf); $attrf = $resultf->fetch_row();//因为是根据朋友的uid查询的，所以查出的只能是一条数据,所以最好用fetch_row()方便些 //在外层div里加一个bs自定义属性,方便后期加功能,想选中某一个DIV的时候,存上他的用户名,以后方便以后取出 echo"<div onclick='ShowCode(this)' class='py' bs='{fuid}'> <img class='img' src='{$attrf[0]}' /> <div class='nc'>{$attrf[1]}</div> </div>"; } ?> </div> <!--用js的方式更改样式--> <script type="text/javascript"> function ShowCode(div) { //让div在被选中之前,先把之前所有div的样式先清除掉 var a = document.getElementsByClassName("py"); //查出来的a是一个集合,js里的集合和PHP里的数组是一样的道理 //利用for循环把所有div的样式清除 for(var i=0;i<d.length;i++) { //alert(d[i]); //可以alert试试,看下输出的是什么.如果输出的是divelement,就说明找到了每一个DIV了.d[i]就可以代表div了. d[i].style.backgroundcolor = "#FFF"; d[i].style.color = "#000"; } //清除之后再给选中的div加上指定的样式 div.style.backgroundcolor = "#3F0"; //修改样式的时候,背景色backgroundcolor中间没有横杠链接的 div.style.Color = "#FFF"; //修改字体颜色 //每点击一个div让它显示输出谁的用户名 alert(div.getAttribute("bs")); //把用户名存在自定义属性bs里了,所以可以通过这个方法获取属性 } </script> </body> </html>
*
{
margin:0px auto; 0px表示去掉元素自带的边距 auto设置后，div就可以自动居中
padding:0px; 去掉默认的内边距
}
一般做页面之前都会写上以上代码，方便布局
小节:
1）.任何标签里都是可以自己写属性的,名字和值可以自己定义.用js取值, 把属性放在getattribute();里
就可以取到值。
2）.给外层div定义一个bs属性，里面的值是朋友的uid.点击div的时候，就知道点击的是哪个了。
3）.HTML里面不允许ID重复，所以for循环里用的都是class，class可以重复。如果想用ID，要加上标识，
让每一个ID不一样。
4）.float：代表流.
5）.margin:0px 0px 0px 20px; margin控制的方向顺序是：上右下左（顺时针方向）
6）.在css样式表里调字体垂直对齐:
line-height:40px; （行高）
vertical-align:middle; （把字在行高里对齐）
7）.根据以上代码,让鼠标放在外层DIV上面，样式出现改变
.py:hover
{
background-color:#3F0;
color:#FFF;
cursor:pointer; //表示鼠标放在上面变成小手
}
8).点击某一个div，让div背景变成另一个颜色，鼠标挪出后颜色不变、再取出选中值
方法：使用onclick点击事件
点击之后会执行相应的函数，函数里面的this是一个参数，调用函数的时候传给它一个参数,this参数写
在哪里，就代表谁。
以上代码中onclick事件写在了div里，这里的参数this就代表这个div.写function函数的时候，里面的
参数名字可以自己定义！！
9).样式是有优先级的！
js代码的样式加在了元素里面,而hover是在css样式表里的。一个内联样式一个内嵌样式，！写在元素里
面的样式优先级最高，可以覆盖hover里的，写在hover里的，比外部的样式表优先级要高！
10).因为function里的参数是传进去的,所以属性不能直接点出来，需要自己手写.如果是document出来的
可以只能点击出来