好友列表
内嵌>内联>外部
<head>
<style type="text/css">
*
{
margin:0px auto; //去除元素自带的边距 auto 自动居中
padding:0px; //去掉默认的内边距
font-family:微软雅黑; //设置字体
}
#list
{
width:350px;
height:400px;
}
.py
{
margin:10px 0px 0px 0px;
width:350px;
height:35px;
}
.py:hover //悬浮状态的效果
{
background-color:#639;
color:#FFF;//设置字体颜色
cursor:pointer; //光标指针形状
}
.img
{
width:35px;
height:35px;
float:left; //靠左浮动 在一行上
}
.nc
{
float:left; //靠左流 在一行
height:35px;
margin:0px 0px 0px 20px; //上右下左边距
line-height:35px; //设置行高 ，与height 相同
vertical-align:middle; //垂直对齐 ，与line-height 结合使用
}
<style/>
</head>
<body>
<?php
$uid= "1414141414";
?>
<div id="list">
<?php
$db = new MySQLi("localhost","root","123","lianxi");
!mysqli_connect_error() or die("连接失败");
$sql = "select Friends from friends where Uid = ‘{$uid}‘";
$result = $db->query($sql);
$attr = $result->fetch_all();
for($i = 0;$i<count($attr);$i++)
{
//朋友的用户名
$fuid = $attr[$i][0];
//查ueser表，根据朋友的UID查出头像和昵称
$sqlf = "select NickName,Pic from Users where Uid=‘{$fuid}‘";
$resultf = $db->query($sqlf);
$attrf = $resultf->fetch_row();
echo "<div onclick=‘ShowCode(this)‘ class=‘py‘ bs=‘{$fuid}‘> //bs=‘‘ 自定义属性 this 传div本身 this写在哪里就代表它本身
<img class=‘img‘ src=‘{$attrf[1]}‘/> //用class 不能用id html中不允许id 重复
<div class=‘nc‘>{$attrf[0]}</div>
</div>";
}
?>
</div>
<script type="text/javascript">
function ShowCode(div)
{
var d = document.getElementsByClassName("py"); //得到类似数组的集合
for(var i =0;i<d.length;i++)
{
d[i].style.backgroundColor = "#FFF";
d[i].style.color = "#000";
}
div.style.backgroundColor = "#639"; //改背景色
div.style.color = "#FFF"; //改字体颜色
alert(div.getAttribute("bs"));
}
</sctript>
</body>
时间： 2024-08-10 21:29:19