zoukankan      html  css  js  c++  java
  • 【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:  http://www.bootcss.com/

    image.png

    image.png

    image.png

    下载下来后,得到的文件目录为:

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

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

    <!-- 引入bootstrap的核心资源文件 -->
    <link rel="stylesheet" type="text/css" href="bootstrapcssootstrap.min.css" />
    <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrapjsootstrap.min.js"></script>
    

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

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

  • 相关阅读:
    Magento 安装时文件权限 设置
    进度十(10.28)
    进度九(10.27)
    进度八(10.26)
    进度六(10.24)
    进度五(10.23)
    进度四(10.22)
    进度三(10.21)
    进度二(10.20)
    进度一(10.19)
  • 原文地址:https://www.cnblogs.com/skyblue-li/p/9155061.html
Copyright © 2011-2022 走看看