<!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出来的

可以只能点击出来

 

 

PHP--仿微信, 通过登陆者用户名显示好友列表,显示头像和昵称的更多相关文章

  1. 【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面

    android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面 本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲 ...

  2. uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能

    基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...

  3. XMPP通讯开发-仿QQ显示好友列表和用户组

    在 XMPP通讯开发-服务器好友获取以及监听状态变化   中我们获取服务器上的用户好友信息,然后结合XMPP通讯开发-好友获取界面设计    我们将两个合并起来,首先获取用户组,然后把用户组用List ...

  4. react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN ...

  5. 37.qt quick- 高仿微信实现局域网聊天V3版本(添加登录界面、UDP校验登录、皮肤更换、3D旋转)

    1.版本介绍(已上传至群里) 版本说明: 添加登录界面. UDP校验登录. 皮肤更换. 3D旋转(主界面和登录界面之间切换) . 效果图如下所示: 如果效果图加载失败,可以去哔哩哔哩 https:// ...

  6. Android编程之仿微信显示更多文字的View

    微信朋友圈中,如果好友发表的文字过长,会自动收缩起来,底下有提示,当点击“显示更多”时才会展开. 首先定义布局文件(很简单,不解释): <?xml version="1.0" ...

  7. iOS 即时通讯 + 仿微信聊天框架 + 源码

    这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...

  8. iOS开发-仿微信图片分享界面实现

    分享功能目前几乎已成为很多app的标配了,其中微信,微博等app的图片分享界面设计的很棒,不仅能够展示缩略图,还可以预览删除.最近我在做一款社交分享app,其中就要实现图文分享功能,于是试着自行实现仿 ...

  9. php 实现微信模拟登陆、获取用户列表及群发消息功能示例

    本文实例讲述了php实现微信模拟登陆.获取用户列表及群发消息功能.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

随机推荐

  1. 【转】如何在Ubuntu 14.04 LTS上设置Nginx虚拟主机

    介绍 转自http://www.pandacademy.com/%E5%A6%82%E4%BD%95%E5%9C%A8ubuntu-14-04-lts%E4%B8%8A%E8%AE%BE%E7%BD% ...

  2. 【JAVA8】Set排序四种写法

    工作中遇到,写了很久以前的写法,师兄给了很多建议,于是整理了一下.孔子曰:"你知道茴香豆的茴字有几种写法吗?" 第一种,平常的写法: public class App { publ ...

  3. css之vw布局

    vw,vh是视口单位,是相对视口单位,与百分百布局不一样的是,百分百是相对于父及元素,而vw布局是相对与窗口. 而rem布局是要与js一起配合 // 以iphone6设计稿 @function px2 ...

  4. dubbo整合springboot最详细入门教程

    说明 目前互联网公司,大部分项目都是基于分布式,一个项目被拆分成几个小项目,这些小项目会分别部署在不同的计算机上面,这个叫做微服务.当一台计算机的程序需要调用另一台计算机代码的时候,就涉及远程调用.此 ...

  5. CDH CM元数据梳理，包括HIVE

      一.Schema SCM 表结构梳理(对应生产BAOFOO_SCM) AUDITS 登录信息.服务,角色重启.配置更改 PROCESSES 进程信息.这里面有很多信息.开放的web端口. HOST ...

  6. Spring Framework 条件装配 之 @Conditional

    Spring Framework 条件装配 之 @Conditional 前言 了解SpringBoot的小伙伴对Conditional注解一定不会陌生,在SpringBoot项目中,Conditio ...

  7. 并发编程-concurrent指南-ReadWriteLock-ReentrantReadWriteLock（可重入读写锁）

    几个线程都申请读锁,都能获取: import java.util.concurrent.TimeUnit; import java.util.concurrent.locks.ReentrantRea ...

  8. ZOJ 3953：Intervals（优先队列+思维）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5572 题意:给出n个线段,问最少删除几个线段可以使得任意一个点不会被三个以上的 ...

  9. django基础知识之定义视图:

    定义视图 本质就是一个函数 视图的参数 一个HttpRequest实例 通过正则表达式组获取的位置参数 通过正则表达式组获得的关键字参数 在应用目录下默认有views.py文件,一般视图都定义在这个文 ...

  10. Java线程池源码及原理

    目录 1 说明 1.1类继承图 2 线程池的状态 3 源码分析 3.1完整的线程池构造方法 3.2 ctl 3.3 任务的执行 3.3.1 execute(Runnable command) 3.3. ...