文档章节

个人信息布局 personal.html

shangn
 shangn
发布于 2017/07/05 14:22
字数 312
阅读 126
收藏 0

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          html,body{
             width:100%;

          }
          header{
            width:100%;
            height:200px;
            background-color: rgb(218, 1, 107);
            position: relative;
          }
          header .left{
            position: absolute;
            left: 8px;
            top: 8px;
            width:22px;
            height:40px;
            background: url('../image/back.png');
            background-position: center 8px;
            background-repeat: no-repeat;
            background-size: 11px 20px;
          }
          header .photo{
            width:70px;
            height:70px;
            /*虾面六行让头像水平竖直居中*/
            position: absolute;
            left:0;
            top:0;
            bottom: 0;
            right: 0;
            margin: auto;
            background: url('../image/user.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 70px 70px;
            border-radius: 50%;

          }
          .un{
            position: absolute;
            width:100%;
            text-align: center;
            bottom: 40px;
            color: #fff;
          }
          .info{
            position: absolute;
            width:100%;
            text-align: center;
            bottom:10px;
            color:#fff;
          }
          section{
            width:100%;
            height: 36px;
            position:absolute;;
            left:0;
            bottom: 0;
            text-align: center;
            font-size: 16px;
            }
          section .set{
            position: absolute;
            left:8px;
            top: 0;
            padding-left: 20px;
            line-height: 36px;
            width: auto;
            height: 100%;
            background: url('../image/user_setting.png');
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 18px 18px;
          }
          section .message{

          }
          section .tel{

          }
      </style>
  </head>
  <body>
    <header>
      <div class="left" tapmode onclick="api.closeWin();"></div>
      <div class="photo" tapmode onclick="chosePhoto();"></div>
      <div class="un" id="un"></div>
      <div class="info">
       积分:<span>20</span> |余额 ¥ <span>200</span>
       </div>
    </header>
      <section>
        <div class="set" tapmode onclick="toSet()">设置</div>
        <div class="message">消息</div>
        <div class="tel">客服</div>
      </section>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
        /* 获取用户元素*/
        var userDiv = $api.byId('un');
        /*从缓存去除用户名并赋值*/
        $api.html(userDiv, $api.getStorage('logSuccess'));
      };
      //更换头像
      function chosePhoto(){

      }
      /*进入设置*/
      function toSet(){

      }
  </script>
  </html>

© 著作权归作者所有

shangn
粉丝 0
博文 4
码字总数 1495
作品 0
西安
私信 提问
pageView 实现多数据循环显示.

最近项目需要用到pageView . 就是显示一些个人信息,比较多人,而且要有滑动效果,并且要实现滑到最后一个人的信息,下一个就要显示下一个人的信息.代码不多. 就一个类: package com.qiang.test;...

Jonson
2013/01/17
616
0
知识管理系统 Wikift 1.3.0 发布

bug修复 修复创建文章归属空间 tooltip 显示错误 修复进行高级搜索页面超宽问题 修复首页活跃用户样式错乱问题 修复文章详情页面无法展示关注用户状态 改进功能 文章详情页面编辑文章样式布局...

qianmoQ
2018/02/07
2.2K
0
哇塞,OSC 新版个人空间和博客详情上线啦!

哇塞,9月20日开源中国新版个人空间和博客详情页上线啦! 大家知道,作为开源中国的程序猿们压力很大滴(遥想当年红薯一头浓密乌黑的秀发…现如今……咳咳)。此次他们再次爆发洪荒之力,新版...

两味真火
2016/09/20
3.7K
44
Mac分屏-Window Tidy

我们在操作Mac 电脑的时候经常需要切换软件,调整窗口的大小。在 mac 上虽然可以采用多开桌面,然后将软件全屏放置在不同的桌面上通过四指左右滑动进行切换。但是由于个人操作习惯问题,鄙人...

胡志忠Bryce
2017/12/14
0
0
4月10日16:00

发起活动部分: 1、把“创建新的活动模板”改为“创建新活动” 2、“最多参加人数”改为“活动人数上限” 3、在我的活动里, 点击进某个活动后,活动详情下面直接显示报名的商品清单,每个商...

zq6
2015/04/10
3
2

没有更多内容

加载失败,请刷新页面

加载更多

centos7 安装 mysql5.7 版本(全)

centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c http://dev.mysql.com/get/mysql57-community-relea......

sanri1993
19分钟前
3
0
Spring3.x升级到Spring4.x-5.x时关于MappingJacksonHttpMessageConverter的报错问题

在Spring4.x或者以上的版本强使用(不然会报错): org.springframework.http.converter.json.MappingJackson2HttpMessageConverter 如果是Spring4.0获者以下的版本可以使用MappingJacksonH...

code-ortaerc
21分钟前
3
0
OSG 渲染状态污染到其它节点怎么解决?

在根节点补上初始状态

洛克人杰洛
23分钟前
3
0
grid 布局 设置行列间距

本文转载于:专业的前端网站➪grid 布局 设置行列间距 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt......

前端老手
35分钟前
3
0
spring-data-elasticsearch 和 Jackson 配合使用的bug

下面先简单描述项目。 项目依赖: dependencies { implementation group: 'org.springframework.boot', name: 'spring-boot-starter-data-elasticsearch', version: '2.1.0.RELEASE'......

Landas
36分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部