对于流式布局以及js，样式表，都有简单的复习：
有关流式布局，有时会引起产生布局的错位达不到我们想要的效果，通常会在一个流的div的结束之后加一个空的div清除 <div style="clear:both"></div>
根据两张图片找出好友的昵称以及头像，并让其实现一些简单的效果，因为本身数据库没有这样的表格只能是简单的练习，以下是代码部分：
<title>例题</title>
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
.hy
{
width:200px;
height:50px;
margin-top:5px;
}
.hy:hover
{
background-color:#60C;
cursor:pointer;
color:white;
}
.pic
{
width:50px;
height:50px;
float:left;
}
.nk
{
height:50px;
width:130px;
float:left;
margin-left:20px;
line-height:50px;
vertical-align:middle;
}
</style>
</head>
<body>
<?php
$uid = "18653378660"; //登录者的信息
?>
<?php
//根据登录者的信息在friend中找朋友
//造一个新的连接对象
$db = new MySQLi("localhost","root","","weixin");
//判断连接是否出错
!mysqli_connect_error() or die("连接失败");
//写SQL语句
$sql = "select Friends from friends where Uid='{$uid}'";
//执行SQL语句
$result = $db->query($sql);
//从结果集中读取数据
$attr = $result->fetch_all();
//输出看看有多少朋友
//var_dump($attr);
//循环读取好友的用户名
foreach($attr as $v)
{
$fuid =$v[0];//好友的用户名
//根据好友的用户名查user表的昵称和头像
$fsql ="select NickName,Pic from users where Uid ='{$fuid}'";
$fresult =$db->query($fsql);
$fattr = $fresult->fetch_row();
echo "<div class='hy' onclick='Select(this)'>
<div class='pic'><img src='{$fattr[1]}' width='50px' height='50px' /></div>
<div class='nk'>{$fattr[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>