练习
<!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;
}
.hy
{
200px;
height:50px;
margin-top:5px;
}
.hy:hover
{
background-color:#60C;
cursor:pointer;
color:white;
}
.pic
{
50px;
height:50px;
float:left;
}
.nk
{
height:50px;
130px;
float:left;
margin-left:20px;
line-height:50px;
vertical-align:middle;
}
</style>
</head>
<body>
<?php
$uid = "18653378660"; //登录者
?>
<?php
//1.造连接对象
$db = new MySQLi("localhost","root","123","weixin");
//2.判断连接是否出错
!mysqli_connect_error() or die("连接失败！");
//3.写SQL语句
$sql = "select Friends from Friends where Uid='{$uid}'";
//4.执行SQL语句
$result = $db->query($sql);
//5.从结果集中读取数据
$attr = $result->fetch_all();
//var_dump($attr);
//循环读取好友的用户名
foreach($attr as $v)
{
$fuid = $v[0]; //好友用户名
//根据好友的用户名去查Users表查出昵称和头像
$sqlu = "select NickName,Pic from Users where Uid='{$fuid}'";
$r = $db->query($sqlu);
$attru = $r->fetch_row();
echo "<div class='hy' onclick='Select(this)'>
<div class='pic'><img src='{$attru[1]}' width='50' height='50' /></div>
<div class='nk'>{$attru[0]}</div>
</div>";
}
?>
</body>
<script type="text/javascript">
function Select(aa)
{
//清除原选中状态
var div = document.getElementsByClassName("hy");
for(var i=0; i<div.length;i++)
{
div[i].style.backgroundColor = "white";
div[i].style.color = "#000000";
}
//设置选中
aa.style.backgroundColor = "#60C";
aa.style.color = "white";
}
</script>
</html>
<!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">
.test
{
200px;
height:50px;
float:left;
}
</style>
</head>
<body>
<div class="test">AA</div>
<div class="test">BB</div>
<div class="test">CC</div>
<div class="test">DD</div>
<div class="test">EE</div>
<div class="test">FF</div>
<div style="clear:both"></div>
<div style="100px; height:100px; background-color:#03C">TEST</div>
</body>
</html>