在一般的系统中，当用户点击头像的时候，就会跳转到对应的个人详情页，在这个页面，他可以查看和修改自己的个人信息，或者更换头像。

本案例中，个人详情页使用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" src="imageUpload\<?php  echo $header; ?>" /></a>

如果要用a标签打开一个新的页面，而不是当前页面直接跳转的话，就需要加上target="_blank" 属性。

测试成功。

个人详情页的绘制我们采用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:  http://www.bootcss.com/



下载下来后，得到的文件目录为：

将下载好的文件改一下名字，就叫bootstrap，拷贝到项目的根目录：

然后，打开user.php，引入核心的css文件和js文件。

<!-- 引入bootstrap的核心资源文件 -->

<link rel="stylesheet" type="text/css" href="bootstrap\css\bootstrap.min.css" />

<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap\js\bootstrap.min.js"></script>

根据需求，从https://v3.bootcss.com/css/

查看你想要的样式，然后复制粘贴到你的页面即可。

【php增删改查实例】第二十六节 - 个人详情页制作的更多相关文章

  1. 【php增删改查实例】第六节 - 部门管理模块（开始）

    sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如 ...

  2. 【php增删改查实例】第四节 -自己 DIY 一个数据库管理工具

    本节介绍如何自己DIY一个数据库管理工具,可以在页面输入sql 进行简单的增删改查操作. 首先,找到xampp的安装目录,打开htdocs: 新建一个php文件,名称为 mysqladmin.php ...

  3. 【php增删改查实例】第十七节 - 用户登录（1）

    新建一个login文件,里面存放的就是用户登录的模块. <html> <head> <meta charset="utf-8"> <sty ...

  4. 【php增删改查实例】第十一节 - 部门管理模块（编辑功能）

    9. 编辑部门功能的实现 思路:只允许用户勾选一条数据,点击编辑按钮,会跳出一个和新增数据类似的对话框.然后,用户可以修改部门名称和部门编码.点击保存按钮,提示修改成功. 9.1 前台代码编写 < ...

  5. 【php增删改查实例】第五节 - easyUI的基本使用

    1. 列表组件 datagrid 1.1 创建一个grid.html <html> <head> <meta charset="utf-8" /> ...

  6. 【php增删改查实例】第七节 - 部门管理模块（画一个datagrid表格）

    在easyui中,datagrid组件需要用一个table标签去渲染. <table id="grid0" title="部门管理" class=&quo ...

  7. python链接oracle数据库以及数据库的增删改查实例

    初次使用python链接oracle,所以想记录下我遇到的问题,便于向我这样初次尝试的朋友能够快速的配置好环境进入开发环节. 1.首先,python链接oracle数据库需要配置好环境. 我的相关环境 ...

  8. java：JSP（JSPWeb.xml的配置，动态和静态导入JSP文件，重定项和请求转发，使用JSP实现数据库的增删改查实例）

    1.JSP的配置: <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  9. yii2.0增删改查实例讲解

    yii2.0增删改查实例讲解一.创建数据库文件. 创建表 CREATE TABLE `resource` ( `id` int(10) NOT NULL AUTO_INCREMENT, `textur ...

随机推荐

  1. C# 简单实现直线方程，抛物线方程

    本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程,点.重新学习解析几何方面的知识.仅供学习分享使用,如有不足之处,还请指正. 涉及知识点: 直线方程的表达方式:一般表达式Ax ...

  2. vue自定义一个v-model

    目标 js <template> <my-form v-model="form"> </my-form> </template> & ...

  3. jdk1.8新特性总结

    一.引言 jdk1.8出来已经一段时间了,现在1.9也已经出来了,但是很多公司(我们公司也一样)不太愿意升级到高版本的jdk,主要是有老的项目要维护,还有升级的话配套的框架也要升级,要考虑的细节事情太 ...

  4. C#学习之接口

    什么是接口?其实,接口简单理解就是一种约定,使得实现接口的类或结构在形式上保持一致.个人觉得,使用接口可以使程序更加清晰和条理化,这就是接口的好处,但并不是所有的编程语言都支持接口,C#是支持接口的. ...

  5. 多个iframe中根据src获取特定iframe并执行操作

    多个iframe中根据src获取特定iframe并执行操作 前言:在项目中做一个批量编辑工单时需要在一大堆的iframe中的某一个iframe里边再用模态框的形式显示编辑区域,然后再在模态框里边加入i ...

  6. [转]JIRA 7.2.6与Confluence 6.0.3的安装与配置之MS SQL Server版

    相关软件版本信息 说明:下方软件可以点击链接,通过百度云盘进行下载. 操作系统:Windows 10(密码:foht)或者Windows Server 2012(密码:lsad): 数据库:SQL S ...

  7. DBUtils温习1

    1.简介 Commons DBUtIls是Apache组织提供的一个开源JDBC工具类库,它是对JDBC的简单封装,学习成本极低,但是使用DBUtils却极大的简化了dao层的开发,少些了很多的jdb ...

  8. 【gdoi2018 day2】第二题 滑稽子图

    题意: 给出一棵树.设\(E\)表示边集,\(V\)表示点集,\(S\)为\(V\)的一个子集. \(f(S)=|(u,v)|(u,v)\in E \ \&\&\ u\in V\ \& ...

  9. C#深度学习の委托深度解析

    一.我们在使用C#的过程中,不可避免的用到了委托. 委托的本质是什么呢? 从语法上看,委托是对方法的抽象封装,例如:public void print1(),public void print2(), ...

  10. img的complete和onload

    HTML DOM complete 属性 定义和用法: complete 属性可返回浏览器是否已完成对图像的加载. 如果加载完成,则返回 true,否则返回 fasle. 语法: imageObjec ...