感谢H-ui、感谢CoreThink!  效果图:

这里使用table布局
/Theme/Blog/User/Index/home.html

<extend name="$_home_public_layout"/>

<block name="main">
<br><br>
<div class="container">
<table class="table">
<thead>
<tr>
<td ><a href="{:U('User/Talk/index', array('to_uid' => $user_info['id']))}" class="btn btn-success radius"><i style="font-size: medium" class="Hui-iconfont"></i> 发私信</a></td>
<td class="text-c">
<div class="maskWraper round" style="width:100px; height:100px; border:solid 1px">
<img src="{$user_info.avatar|get_cover='avatar'}" width="100px" height="100px" >
<div class="maskBar text-c">
{$user_info.nickname}
</div>
</div>
</td> <?php if ($follow_status) :?> <td>
<button type="button" class="btn btn-secondary radius ajax-follow"
url="{:U('User/Follow/add', array('uid' => $user_info['id']))}">
<i style="font-size: medium" class="Hui-iconfont"></i> 已关注
</button>
</td> <?php else :?> <td><button type="button" class="btn btn-secondary radius ajax-follow"
url="{:U('User/Follow/add', array('uid' => $user_info['id']))}">
<i style="font-size: medium" class="Hui-iconfont"></i> 加关注
</button></td> <?php endif; ?>
<td class="text-r"><a>个性签名:{$user_info.summary}</a></td>
</tr>
</thead>
</table> </div>
</block>
<block name="script">
<script type="text/javascript">
$(function(){
$.Huihover('.maskWraper');
});
</script>
</block>

  

CoreThink主题开发(九)使用H-ui开发博客主题之用户个人主页的更多相关文章

  1. 从无到有开发自己的Wordpress博客主题---代码环境准备

    注意这里说的是代码环境准备哦,而不是L(M)AMP运行环境哦,运行环境会在后述文章中在写. 一.在本地初始化git环境并且链接上gitee 1.在gitee上创建一个项目托管你的代码 这个不在赘述,按 ...

  2. 使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理

    原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理 摘要 通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客        3 ...

  3. 解决基于BAE python+bottle开发上的一系列问题 - artwebs - 博客频道 - CSDN.NET

    解决基于BAE python+bottle开发上的一系列问题 - artwebs - 博客频道 - CSDN.NET 解决基于BAE python+bottle开发上的一系列问题 分类: python ...

  4. 20款时尚的 WordPress 博客主题【免费下载】

    在这篇文章中,我们收集了20款时尚的 WordPress 博客模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单 ...

  5. 开源免费的WordPress个人博客主题推荐

    二次元动漫类个人主题 Sakura 功能强大,美观大气,二次元动漫专属 演示地址:https://2heng.xin/theme-sakura/ 开源地址:https://github.com/mas ...

  6. Hexo博客主题优化

    Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...

  7. 纯CSS打造BiliBili样式博客主题

    前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...

  8. dajngo ORM查询中select_related的作用,博客主题的定制,从数据库中按照年月筛选时间

    1.dajngo ORM查询中select_related的作用 select_related()方法一次性的把数据库关联的对象都查询出来放入对象中,再次查询时就不需要再连接数据库,节省了后面查询数据 ...

  9. Zblog主题模板自适应手机响应式ZblogPHP简洁博客主题

    Z-blog PHP版本简洁主题模板 特点简洁舒适 手机移动端自适应,完美有利于优化 代码结构利于编辑 对于不懂代码的,也非常适合简答后台简答 PC端侧边栏下拉跟随,无论下面有多长,导航侧边栏都只在左 ...

  10. 从无到有开发自己的Wordpress博客主题---Wordpress主题的构造

    在这篇教程中,主要是对Wordpress的主题的构造进行分析,以方便今后的开发工作. 本来打算就引用一下别人已经有的文档就好了,但还是想从头到尾捋一遍,也方便自己梳理学习. 1.Wordpress主题 ...

随机推荐

  1. mongo views

    db.itemsView.drop(); db.items.aggregate([ { "$match": { "status": "true&quo ...

  2. iptables修改

    https://fedoraproject.org/wiki/How_to_edit_iptables_rules?rd=User_talk:Rforlot Listing Rules Current ...

  3. websocket echo test

    http://www.websocket.org/echo.html .net websocket server http://superwebsocket.codeplex.com/ http:// ...

  4. cf #363 d

      time limit per test 2 seconds memory limit per test 256 megabytes input standard input output stan ...

  5. mongodb更新器

    Name Description $inc Increments the value of the field by the specified amount. $mul Multiplies the ...

  6. tomcat遇到版本问题

    1.Dynamic web module 2.J2EE  Web modules 3.Tomcat version 4.<web-app xmlns:xsi="http://www.w ...

  7. python 开发技巧(1)-- 用PyCharm安装第三方库

    在python开发中,我们经常需要安装一些python的第三方类库,包等等,用PyCharm就会安装就会超级方便 1.打开上面的小扳手 2.点击页面左边的Project Interpreter 3.点 ...

  8. 大数据实战centos 6.7安装mysql5.7

    https://www.cnblogs.com/jr1260/p/6590232.html

  9. SVN如何新建用户并分配权限

    打开SVN服务端,找到特定的项目目录,单击右键,然后点击属性:   在弹出的页面中,点击增加:   在增加的页面中,你可以选择之前已经创建的用户,也可以重新创建用户名和密码:   如果是选择已经有的用 ...

  10. 接入qq登录功能出现的问题

    在调用qq授权的接口时,出现以上错误. 原因是: 打包的应用签名和第一次上传包的签名不一致造成的 解决方法: 第一种方法:用上次打包apk的keystore重新打包apk,使签名一致. 第二种方法:联 ...