【php增删改查实例】第二十六节 - 个人详情页制作

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

本案例中,个人详情页使用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" 属性。

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" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap\js\bootstrap.min.js"></script>

根据需求,从<u>https://v3.bootcss.com/css/</u>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS开发之BusinessChat框架使用 原

      BusinessChat是iOS11.3后引入的新框架,这个框架配合iMessage应用将商家与用户更加紧密的结合起来,并且为商家提供了另外一种非常...

2092
来自专栏移动开发之家

移动端跨平台开发的深度解析

 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

1374
来自专栏跟着阿笨一起玩NET

WEB免费打印控件推荐

要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1、2W之间,这就麻烦了。

3.9K1
来自专栏社区的朋友们

20分钟掌握前端编写 CLI 工具

自古软件设计这个武林有两大流派,其中有一个是” CLI “,另外一个是” GUI “。它们一个为了普渡众生,一个为了提高内力,虽然在 GUI 出现之前,CLI ...

8800
来自专栏极客猴

分享一个爬取网站的小技巧

有时候,我们很想爬取一个网站的数据。如果 PC 端的网页的反爬机制太强,我们可以换个思路。现在很多网站为了满足手机浏览器能正常访问的需求,都会推出手机版的网页。...

7022
来自专栏cnblogs

【留言板】可编辑输入框操作总结

闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): ? 一、定义需求 可输入文本,以及插入表情。 ...

36010
来自专栏全栈之路

90版坦克大战

涉及知识:ts、h5(canvas),nodejs,java,游戏开发(声音系统、图像系统、行为系统(按键绑定行为)、简单精灵、精灵动画、简单界面绘制),ps(...

2531
来自专栏ASP.NET MVC5 后台权限管理系统

Bootstrap Metronic 学习记录(一)简介

1.简介   是一个基于Bootstrap 3.x的高级管理控制面板主题。Bootstrap Metronic - 是一个完全响应式管理模板。基于Bootstr...

3656
来自专栏phodal

单页面应用后台渲染的三次实践

或许这是一个好的主题,又或许这不是一个好的主题。但是至少我可以Share一下我的经验: 基于Mustache模板引擎的前后台渲染。 基于PreRender方式的...

3039
来自专栏SEO

SEO新手必知50个SEO术语词解释

45512

扫码关注云+社区

领取腾讯云代金券