在一般的系统中，当用户点击头像的时候，就会跳转到对应的个人详情页，在这个页面，他可以查看和修改自己的个人信息，或者更换头像。
本案例中，个人详情页使用bootstrap框架。
首先，我们新建一个html页面作为我的个人详情页。为了获取后台数据比较方便，这个详情页的文件格式我们就改为php。
在项目根目录新建一个user.php。
<html> <head> <meta charset="utf-8"> <title>个人详情页</title> <script type="text/javascript"></script> <style type="text/css"> </style> </head> <body> 个人详情页 </body></html>
然后，我们希望点击用户头像就跳转到这个详情页，怎么做呢？很简单，只要给img标签外面套一层a标签即可。
<a href="user.php" target="_blank"><img class='header_pic' width="64px" height="64px" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageUpload\<?php echo $header; ?>" /></a>
如果要用a标签打开一个新的页面，而不是当前页面直接跳转的话，就需要加上target="_blank" 属性。
image.png
测试成功。
个人详情页的绘制我们采用bootstrap框架。
抄一段百度百科：
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 [1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
综上所述，反正bootstrap很牛逼，很流行，很好用就对了。
Bootstrap: <u>http://www.bootcss.com/</u>
image.png
image.png
image.png
下载下来后，得到的文件目录为：
将下载好的文件改一下名字，就叫bootstrap，拷贝到项目的根目录：
然后，打开user.php，引入核心的css文件和js文件。
<!-- 引入bootstrap的核心资源文件 --><link rel="stylesheet" type="text/css" href="bootstrap\css\bootstrap.min.css" /><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-easyui-1.3.3/jquery.min.js"></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bootstrap\js\bootstrap.min.js"></script>
根据需求，从<u>https://v3.bootcss.com/css/</u>
查看你想要的样式，然后复制粘贴到你的页面即可。
小礼物走一走，来简书关注我
作者：剽悍一小兔
链接：https://www.jianshu.com/p/0a56dc34c5ea
共同学习，写下你的评论
评论加载中...
作者其他优质文章
