个人信息布局 personal.html

最新推荐文章于 2024-05-06 18:33:50 发布
最新推荐文章于 2024-05-06 18:33:50 发布
阅读量342 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3584445/blog/1162604
版权

<!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 οnclick="api.closeWin();"></div>
      <div class="photo" tapmode οnclick="chosePhoto();"></div>
      <div class="un" id="un"></div>
      <div class="info">
       积分：<span>20</span> ｜余额 ¥ <span>200</span>
       </div>
    </header>
      <section>
        <div class="set" tapmode οnclick="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>

转载于:https://my.oschina.net/u/3584445/blog/1162604

chengtangjian1797
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html——个人信息网页
leo_w20170621的博客
03-25 5万+
今天花了一晚上的时间，使用html编写了一个简单的个人信息网页。注：不知道为什么代码上传的时候空格符&amp;nbsp都不见。&lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8"&gt; &lt;tille&gt;个人信息&lt;/title&gt; &lt;style type="text/css"&gt;
personal.io:个人的
03-12
"personal.io:个人的"这个标题暗示了这是一个关于个人品牌建设、自我展示或者个人信息管理的项目，而“HTML”标签则揭示了这里的核心技术是超文本标记语言（HTML）。HTML作为网页设计的基础，对于创建个性化、互动性...
html制作好看的个人简历(附源码)
热门推荐
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
JavaScript：通过点击按钮实现个人信息的录入，进而输出个人信息
WHT869706733的博客
10-27 4267
内容：通过点击按钮实现个人信息的录入，进而输出个人信息。 要求：1、使用变量、字符拼接、点击事件、函数等知识。 2、一次性显示姓名、年龄、性别等个人信息。 3、使用prompt()函数、alert()函数、onclick()点击事件来实现。 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titile>通过点击按钮实现个...
【前端】HTML实现个人简历信息展示页面
最新发布
2303_80341387的博客
05-06 2634
接下来，我们可以看到每一个项目都有一个小标题，那么这些项目与项目之间可以用有序列表来表示，而功能介绍中的内容，我们又可以通过无序列表来表示。我们首先看到的是我们页面中的姓名，紧接着下面是我们的基本信息板块，教育背景板块，专业技能板块，还有我的项目板块，还有一个个人评价板块。接下来，我们还是首先看到教育背景这个标题，我们可以看到教育背景和基本信息是对应的，所以我们和基本信息一样都使用。接下来，我们就结合我们之前学习过的HTML的标签来打造一个简历信息的展示的页面.那么此时我们就写完了我们的基本信息板块。
个人信息中心html,个人信息布局 personal.html
weixin_35793357的博客
05-31 450
titlehtml,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: u...
Personal.github.io
03-19
总的来说，"Personal.github.io" 是一个利用 HTML、CSS 和 JavaScript 创建的个人网站项目，通过 GitHub Pages 服务进行托管，旨在呈现用户的个人信息、作品和技能。这个项目展示了前端开发的基本技术，并可能涵盖了...
personal.rar
05-24
总的来说，"personal.rar"是一个利用Bootstrap框架创建的个人主页项目，通过HTML、CSS和JavaScript技术展示了作者的个人信息和技能。这个项目不仅体现了Bootstrap的灵活性和易用性，也展现了开发者对Web设计和开发的...
个人博客--personalBlog.rar
06-08
在"personalBlog"的开发中，可能会使用到一些前端框架和库，比如Bootstrap，它提供了一套响应式的布局工具和预定义的CSS样式，可以帮助快速搭建美观的页面；或者使用Vue.js或React.js这样的现代前端框架，它们提供了...
PersonalBlog源码.zip
06-18
数据库通常用来存储用户信息、文章、评论等数据。MySQL、SQLite、MongoDB等可能是选择。数据库模型设计包括用户表、文章表、评论表等，通过SQL语句实现数据的增删改查操作。源码中可能包含数据库连接配置文件和ORM...
Android 用户个人信息状态布局显示
09-10
一个简单的自定义的组合布局，用来显示个人信息状态的 头像圆角显示，状态描述自定义显示
HTML个人信息注册页面
12-18
HTML设计一个个人信息注册页面 使用HTML设计一个个人信息注册页面，如下图所示，其中页面的排版可采用或+CSS。当点击“提交”按钮时，使用JavaScript编程在当前页面显示录入信息，并且实现籍贯和城市的级联。（选做：用JQuery实现页面功能）
HTML个人资料mooc风格
07-20
mooc风格的个人资料界面，有css. -----------------------------------------------
登录 注册 个人信息 的布局
qq_40983361的博客
12-13 598
登录 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="ve
HTML——form表单/个人信息
Chenbaby_的博客
11-15 2万+
姓名： 密码： 性别：             男             女                        喜爱的运动：篮球                             足球               棒球                     排球                                         
JavaScript个人记录方法
双双浪的博客
07-17 132
Object.defineProperty()方法 Object.defineProperty方法会直接在对象上新创建一个属性或修改这个对象的现有属性并返回此对象，通常通过此方法添加的属性的值是不可变的。 Object.defineProperty()接受三个参数： Object.defineProperty(obj, prop, descriptor) obj：目标对象 prop：对象属性的名称 descriptor: 所添加或要修改的属性值 const obj = {}; Object.define
文档中根元素前面的标记必须格式正确_HTML相关知识之文档声明标签——HTML学习之路（2）...
weixin_39723010的博客
12-01 850
上篇文章介绍了 注释标签，我个人感觉很容易理解，在日常编码中，大多数编辑器都有注释标签的快捷键，如sublime或VS code里在html代码里，选中想要注释掉的代码后，直接按ctrl+/即可。几乎不用手动输入了。还是很方便的。这篇我写标签，说起来这个标签，很常见，因为它会出现在每一个httml文档的最开头，然而，我们很少去重视它，为什么呢？说到这个标签，我不得不说起html的版本历史了。在大约...
比较不错的登录注册界面和个人信息界面
zb_tjw的博客
09-21 6473
  自己闲来无事从之前的项目里抽取了一个登录注册的小Demo，只有登录注册布局，没有真实功能，带一个小的抖动动画，另外附一张个人信息界面布局，里边用了高斯模糊的效果，有需要源码参考的留言就好，代码文件较多，不粘贴了 ...
uniapp个人信息页面
09-06
Uniapp个人信息页面可以是一个用于展示用户个人信息的页面，通常包括用户头像、昵称、性别、生日、联系方式等基本信息。以下是一个简单的Uniapp个人信息页面示例： ```html <view class="personal-info"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值