5月5 例题

对于流式布局以及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>

posted @ 2016-05-06 11:43 Durriya 阅读(121) 评论(0) 编辑收藏举报

Durriya

5月5 例题

公告