【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/

查看你想要的樣式，而後複製粘貼到你的頁面便可。