【php增删改查实例】第二十六节 - 我的详情页制做

时间 2019-11-09

原文原文链接

在通常的系统中，当用户点击头像的时候，就会跳转到对应的我的详情页，在这个页面，他能够查看和修改本身的我的信息，或者更换头像。javascript

本案例中，我的详情页使用bootstrap框架。php

首先，咱们新建一个html页面做为个人我的详情页。为了获取后台数据比较方便，这个详情页的文件格式咱们就改成php。css

在项目根目录新建一个user.php。html

<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" 属性。java

测试成功。jquery

我的详情页的绘制咱们采用bootstrap框架。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/

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