HTML个人资料界面

最新推荐文章于 2024-05-13 10:09:55 发布
最新推荐文章于 2024-05-13 10:09:55 发布
阅读量5.6w 收藏 218
点赞数 37
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sequin_YF/article/details/54562151
版权

好久都没有写博客了，仿佛什么都没有学一般。

考试前为了挑战杯项目赶出来的界面，新接触了HTML，仿照CSDN上的风格。下学期就要学HTML了算是一种提前预习吧。因为不会用，所以特别的冗杂，没有将格式封装到一起。
加油吧，tomorrow is a new day.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Personal</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="77103107776157736375" />
    <meta property="wb:webmaster" content="c4f857219bfae3cb" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta http-equiv="Cache-Control" content="no-transform " />
    <meta name="keywords" content="寻亲网" />
    <meta name="description" content="寻亲网" />


    <link rel="stylesheet" href="../base.css" type="text/css" />
    <link rel="stylesheet" href="../common-less(1).css" type="text/css" />
    <link rel="stylesheet" href="../moco.min.css" type="text/css" />
    <link rel="stylesheet" href="../common-less.css" type="text/css" />
    <link rel="stylesheet" href="../profile-less.css" type="text/css" />

</head>

<body >

<div id="header">
    <div class="page-container" id="nav">
        <div id="logo" class="logo"><a href="#" target="_self" class="hide-text" title="首页">ChinaXunQin</a></div>


        <button type="button" class="navbar-toggle visible-xs-block js-show-menu" >
            <i class="icon-menu"></i>
        </button>
        <ul class="nav-item">
            <li class="set-btn visible-xs-block js-header-avator"><a href="#" target="_self"><img width="40" height="40"></a></li>

            <li>
                <a href="../list"  target="_self">A</a>
            </li>
            <li><a href="../program"  target="_self">B<i class="icn-new"></i></a></li>
            <li>
                <a href="#" target="_self">C</a>
            </li>
            <li><a href="../wenda"  target="_self">D</a></li>
            <li><a href="../article"  target="_self">E</a></li>
            <li class="visible-xs-block"><a href="../setprofile" target="_self">我的设置</a></li>
            <li class="visible-xs-block"><a href="/passport/user/logout?referer=#" target="_self">退出</a></li>

        </ul>
        <div id="login-area">
            <ul class="clearfix logined">
                <li class="header-app">
                    <a href="/mobile/app" >
                        <span class="icon-appdownload"></span>
                    </a>
                    <div class="QR-download">
                        <p id="app-text">APP下载</p>
                        <p id="app-type">iPhone / Android / iPad</p>
                        <img src="../QR-code.jpg">
                    </div>
                </li>
                <li class='remind_warp'>
                    <!-- <i class="msg_remind"></i> -->
                    <a target="_blank" href='/u/4566560/notices'>
                        <i class='icon-notifi'></i>
                        <span class="msg_icon" style="display: none;"></span>
                    </a>
                </li>
                <li class="my_message">
                    <i class="msg_remind"></i>
                    <a href="/u/4566560/messages" title="我的消息" target="_blank">
                        <!-- <span class="msg_icon" style="display: none;"></span> -->
                        <i class="icon-mail"></i>
                        <span style="display: none;">我的消息</span>
                    </a>
                </li>
                <li class="set_btn user-card-box" id='header-user-card'>
                    <a id="header-avator" class="user-card-item js-header-avator" action-type="my_menu"  href="/u/4566560" target="_self">
                        <img width="40" height="40">
                        <i class="myspace_remind" style="display: none;"></i>
                        <span style="display: none;">动态提醒</span>
                    </a>
                    <div class="g-user-card"></div>
                </li>
            </ul>
        </div>


        <div class='search-warp clearfix' style='min-width: 32px; height: 60px;'>
            <div class="pa searchTags" >
                <a href="#" target="_blank">A</a>
            </div>

            <div class="search-area" data-search="top-banner">
                <input class="search-input" data-suggest-trigger="suggest-trigger"      type="text" autocomplete="off">
                <input type='hidden' class='btn_search' data-search-btn="search-btn" />
                <ul class="search-area-result" data-suggest-result="suggest-result">
                </ul>
            </div>
            <div class='showhide-search' data-show='no'><i class='icon-search'></i></div>
        </div>
    </div>
</div>

<div class="bindHintBox js-bindHintBox hide">
    <div class="pr">
        为了账号安全，请及时绑定邮箱和手机<a href="/user/setbindsns" class="ml20 color-red" target="_blank">立即绑定</a>
        <button  class="closeBindHint js-closeBindHint" type="button"></button>
        <div class="arrow"> </div>
    </div>
</div>


<div id="main">

    <div class="page-settings">
        <div class="top">
            <div class="w960 mauto top_title">
                <p>个人设置</p>
            </div>
        </div>
        <div class="setting pb10">
            <div class="nav-tabs pa">
                <h class="baseinfo fl active">基本信息</h>
                <a href="http://www.baidu.com" class="countinfo fl">帐户信息</a>
                <a href="http://www.baidu.com" class="countinfo fl">收货地址</a>
                <a href="http://www.baidu.com" class="countinfo fl">实名认证</a>
                <div class="cb"></div>
            </div>
            <div class="contentBox">
                <div class="formBox">
                    <div id="setting-profile" class="setting-wrap setting-profile">

                        <div class="wlfg-wrap clearfix ">
                            <label class="label-name" for="job">头像：</label>
                            <div class="rlf-group">
                                <img class="fl avator-img" id="js-portrait" src="http://img.mukewang.com/58492fe600012e8e01800180-200-200.jpg" data-portrait="58492fe600012e8e01800180" width="180" height="180">
                                <div class="fl ml20 pr">
                                    <div><input type="button" hidefocus="true" value="换一换" class="js-avator-try avator-try"></div>
                                    <div id="avator-btns" class="avator-btn-inner">
                                        <!--div class="avator-btn-snswrap">
                                            <span class="l-sns-btn l-sns-weibo" data-sns="weibo">从新浪微博同步头像</span>
                                        </div !-->


                                        <div class="avator-btn-wrap">
                                            <form target="uploadtarget" action="postpic" method="post" enctype="multipart/form-data">
                                                <a href="javascript:void(0)" hidefocus="true" class="avator-btn-fake">上传头像</a>
                                                <input class="hide" type="file" title="上传头像" name="fileField" id="upload" accept="image/*">
                                                <input class="hide" type="hidden" name="type" value="1">
                                            </form>
                                            <iframe src="about:blank" id="uploadtarget" name="uploadtarget" frameborder="0" style="display:none;"></iframe>
                                        </div>
                                    </div>
                                </div>
                                <div class="cb"></div>
                                <p class="rlf-tip-wrap errorHint color-red" ></p>
                            </div>
                        </div>

                        <form id="profile" >

                            <div class="wlfg-wrap clearfix">
                                <label class="label-name" for="nick" >昵称：</label>
                                <div class="rlf-group">
                                    <input type="text" name="nickname" id="nick"  autocomplete="off"  data-validate="require-nick"  class="moco-form-control" value="Sequin_YF" placeholder="请输入昵称."/>
                                    <p class="rlf-tip-wrap errorHint color-red" ></p>
                                </div>
                            </div>



                            <!--div class="wlfg-wrap clearfix">
                                <label class="label-name" for="job">职位：</label>
                                <div class="rlf-group">
                                    <select class="moco-form-control rlf-select" name="job" hidefocus="true" id="job" data-validate="require-select">
                                        <option value="">请选择职位</option>
                                        <option value="13" >学生</option>
                                        <option value="1" >页面重构设计</option>
                                        <option value="6" >Web前端工程师</option>
                                        <option value="5" >JS工程师</option>
                                        <option value="8" >PHP开发工程师</option>
                                        <option value="11" >JAVA开发工程师</option>
                                        <option value="7" >移动开发工程师</option>
                                        <option value="9" >软件测试工程师</option>
                                        <option value="10" >Linux系统工程师</option>
                                        <option value="2" >交互设计师</option>
                                        <option value="3" >产品经理</option>
                                        <option value="15" >数据库工程师</option>
                                        <option value="4" >UI设计师</option>
                                        <option value="17" >CG影视动画师</option>
                                        <option value="16" >全栈工程师</option>
                                    </select>
                                    <p class="rlf-tip-wrap errorHint color-red"></p>
                                </div>
                            </div!-->

                            <div class="wlfg-wrap clearfix">
                                <label class="label-name" for="province-select">城市：</label>
                                <div class="rlf-group profile-address">
                                    <select id="province-select" class='moco-form-control' hidefocus="true">
                                        <option value="0">选择省份</option>
                                        <option value="1">北京</option>
                                        <option value="2">天津</option>
                                        <option value="3">河北</option>
                                        <option value="4">山西</option>
                                        <option value="5">内蒙古</option>
                                        <option value="6">辽宁</option>
                                        <option value="7">吉林</option>
                                        <option value="8">黑龙江</option>
                                        <option value="9">上海</option>
                                        <option value="10">江苏</option>
                                        <option value="11">浙江</option>
                                        <option value="12">安徽</option>
                                        <option value="13">福建</option>
                                        <option value="14">江西</option>
                                        <option value="15">山东</option>
                                        <option value="16">河南</option>
                                        <option value="17">湖北</option>
                                        <option value="18">湖南</option>
                                        <option value="19">广东</option>
                                        <option value="20">海南</option>
                                        <option value="21">广西</option>
                                        <option value="22">甘肃</option>
                                        <option value="23">陕西</option>
                                        <option value="24">新疆</option>
                                        <option value="25">青海</option>
                                        <option value="26">宁夏</option>
                                        <option value="27">重庆</option>
                                        <option value="28">四川</option>
                                        <option value="29">贵州</option>
                                        <option value="30">云南</option>
                                        <option value="31">西藏</option>
                                        <option value="32">台湾</option>
                                        <option value="33">澳门</option>
                                        <option value="34">香港</option>
                                        <option value="100">其他</option>
                                    </select>
                                    <select class='moco-form-control' id="city-select" hidefocus="true">
                                        <option value="0">选择城市</option>
                                    </select>
                                    <select class='moco-form-control mr0' id="area-select" hidefocus="true">
                                        <option value="0">选择区县</option>
                                    </select>
                                    <div class="cb"></div>
                                    <p class="rlf-tip-wrap errorHint color-red"></p>
                                </div>
                            </div>

                            <div class="wlfg-wrap clearfix">
                                <label class="label-name h16 lh16" >性别：</label>
                                <div class="rlf-group rlf-radio-group">
                                    <label  class="lh16"><input type="radio" hidefocus="true" value="0"   name="sex">保密</label>
                                    <label  class="lh16"><input type="radio" hidefocus="true" value="1"  name="sex">男</label>
                                    <label  class="lh16"><input type="radio" hidefocus="true" value="2" checked="checked" name="sex">女</label>
                                    <p class="rlf-tip-wrap errorHint color-red"></p>
                                </div>
                            </div>
                            <div class="wlfg-wrap clearfix">
                                <label class="label-name" for="aboutme">个性签名：</label>
                                <div class="rlf-group">
                                    <div class="pr">
                                        <textarea name="aboutme"  id="aboutme"  rows="5" class="noresize js-sign moco-form-control"></textarea>
                                        <p class="numCanInput js-numCanInput ">还可以输入128个字符</p>
                                    </div>
                                </div>
                            </div>

                            <div class="wlfg-wrap clearfix">
                                <label class="label-name" for="profile-submit"></label>
                                <div class="rlf-group">
                                    <span id="profile-submit"  hidefocus="true"  aria-role="button" class="rlf-btn-green btn-block profile-btn">保存</span>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>


<div id="footer" >
    <div class="waper">
        <div class="footerwaper clearfix">
            <div class="followus r">
                <a class="followus-weixin" href="javascript:;"  target="_blank" title="微信">
                    <div class="flw-weixin-box"></div>
                </a>
                <a class="followus-weibo" href="http://weibo.com/u/3306361973"  target="_blank" title="新浪微博"></a>
                <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
            </div>
            <div class="footer_intro l">
                <div class="footer_link">
                    <ul>
                        <li><a href="#" target="_blank">网站首页</a></li>
                        <li><a href="#" target="_blank" title="企业合作">企业合作</a></li>
                        <li><a href="#" target="_blank">人才招聘</a></li>
                        <li> <a href="#" target="_blank">联系我们</a></li>
                        <li> <a href="#" target="_blank">常见问题</a></li>
                        <li> <a href="#" target="_blank">意见反馈</a></li>
                        <li><a href="#" target="_blank">haha</a></li>
                        <li> <a href="#" target="_blank">友情链接</a></li>
                        <li><a href="#" target="_blank">合作专区</a></li>
                         <li><a href="#" target="_blank">关于我们</a></li>
                    </ul>
                </div>
                <p>Copyright © 2016 hahaheiheilalayouyou | ChinaXunQin </p>
            </div>
        </div>
    </div>
</div>


<div id="J_GotoTop" class="elevator">

    <a href="#" class="elevator-msg" title="意见反馈"><i class="icon-feedback"></i></a>
    <a href="#" class="elevator-app" title="app下载">
        <i class="icon-appdownload"></i>
        <div class="elevator-app-box"></div>
    </a>
    <a href="#" class="elevator-weixin no-goto" id="js-elevator-weixin" title="官方微信">
        <i class="icon-wxgzh"></i>
        <div class="elevator-weixin-box"></div>
    </a>
    <a href="3" class="elevator-top no-goto" style="display:none" title="返回顶部" id="backTop"><i class="icon-up2"></i></a>
</div>



<!--script-->
<script src="../ssologin.js?v=2.0"></script>
<script type="text/javascript" src="../sea.js"></script>
<script type="text/javascript" src="../sea_config.js?v=201612141100"></script>
<script type="text/javascript">seajs.use("../"+OP_CONFIG.module+"/"+OP_CONFIG.page);</script>





<div style="display: none">
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ff0cfcccd7b1393990c78efdeebff3968' type='text/javascript'%3E%3C/script%3E"));
        (function (d) {
            window.bd_cpro_rtid="rHT4P1c";
            var s = d.createElement("script");s.type = "text/javascript";s.async = true;s.src = location.protocol + "//cpro.baidu.com/cpro/ui/rt.js";
            var s0 = d.getElementsByTagName("script")[0];s0.parentNode.insertBefore(s, s0);
        })(document);
    </script>
    <script>
        (function(){
            var bp = document.createElement('script');
            bp.src = '//push.zhanzhang.baidu.com/push.js';
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
</div>
</body>
</html>

这里写图片描述

Sequin_Yf
关注
  • 37
    点赞
  • 踩
  • 218
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
专栏目录
商城个人中心 网站模板 html
04-23
此项目为实操项目简化版，包含html静态页面，JS，CSS，能实现网站模板基本要求
HTML个人信息注册页面
12-18
HTML设计一个个人信息注册页面 使用HTML设计一个个人信息注册页面，如下图所示，其中页面的排版可采用或+CSS。当点击“提交”按钮时，使用JavaScript编程在当前页面显示录入信息，并且实现籍贯和城市的级联。（选做：用JQuery实现页面功能）
HTML5实现简洁好看的个人主页，个人小站(多种风格附源码)
最新发布
xcLeigh
05-13 8833
HTML5实现简洁好看的个人主页(个人小站五种风格附源码)，个人主页源码，个人小站源码，五种风格对应五种常用主页菜单，学习类，展示类，制作类，成就类等，界面主题都是以按钮展开延申，展示个人信息，根据不同类型不同显示，对应图片文字可直接修改，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
html实现个人空间个人主页
11-10
酷炫的欢迎界面，科技感满满的主界面，优雅的屏幕待机界面。实现了个人日记管理功能；实现了百度搜索功能；实现了常用工具链接；实现了项目管理；实现了音乐播放等https://blog.csdn.net/weixin_43151418/article/details/127736068
HTML移动端购物商城个人中心模板
06-07
HTML移动端购物商城个人中心模板，DVI+CSS布局，全套模板，包括我的订单、退货记录、订单列表、订单详情、帐号安全、我的设置、我的积分等，是一款很不错的手机端个人中心模板。
个人资料：我的个人资料页面
02-18
个人资料：我的个人资料页面
漂亮好看的个人中心后台html页面来了
weixin_49669081的博客
03-11 2095
你是否常常找不到好看的个人中心页面 就现在这里有你需要的。
html实现个人空间（源码）
xcLeigh
11-04 6734
html实现个人空间，个人空间可以配置自己想听的音乐，个人空间可以配置自己常用的链接，个人空间可以自定义链接类型，在这基础上可以扩展记事本，音乐等。html实现个人主页，html实现个人私密空间。支持扩展配置
如何用html5做个人中心,个人中心页面从思考到设计全过程
weixin_35070925的博客
06-01 4852
原标题：个人中心页面从思考到设计全过程最近刚做完一个项目，我发现我的设计效率相比之前竟然提升了30%以上，在以前做界面时总是会纠结采用什么样式，什么布局。而现在在看了原型之后就大概知道我要怎么做了，没有了以前做页面时的纠结，效率自然提升了。我想着主要是因为平时长期的分析总结的结果，我能够很明确的知道什么时候该用什么交互方式，什么时候该用什么样式。因此今天想拿“个人中心页面从思考到设计全过程”和大家...
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
热门推荐
HTML网页设计
08-19 1万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
html个人中心样式,个人中心.html
weixin_35853363的博客
05-31 6371
个人中心-完善个人资料body{line-height: 1.6 !important;}.layui-layer-btn0{background: #FD295B !important;border-color: #FD295B !important;} 托尼乔巴ID:15245895等级：L10绑定信息提现进度推广佣金自主问答设置版本信息首页已接任务申诉中心活动中心我的var wave1...
个人博客HTML界面
01-24
【个人博客HTML界面】是一个基于HTML技术构建的用于展示个人风采和分享观点的网页设计。在互联网时代，个人博客成为了许多人表达自我、分享知识和经验的平台。这个HTML界面专为个人博客设计，只涵盖了首页的展示，是...
HTML界面，个人空间
03-21
总的来说，创建一个"HTML界面，个人空间"需要结合HTML的结构化标签、CSS的样式设计以及可能的JavaScript交互，以实现界面的美观和功能的完善。每个部分都需要精心设计和优化，以满足用户对简洁、易用的需求。
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。...无论是对个人项目还是商业应用，这些HTML5+CSS3的精美登录界面都是提升网页质量的宝贵资源。
前端HTML人物简历界面
10-23
1.求职申请：求职者可以使用前端HTML人物简历界面来展示自己的个人信息、教育背景、工作经验、技能和项目经验等，以便于吸引招聘者的注意。 2.自媒体推广：自媒体从业者可以利用前端HTML人物简历界面来展示自己的...
html实现微信界面
02-06
在本项目中，“html实现微信界面”是一个基于HTML技术构建的个人小项目，旨在模仿微信的用户界面。这个项目展示了如何使用HTML、CSS和可能的JavaScript来创建一个类似微信的应用程序的基本框架。以下是对这个项目中...
个人中心 - 实现修改用户头像、用户名或密码
xaiobit_hl的博客
08-02 2392
个人中心 - 实现修改用户头像、用户名或密码
html个人中心网页,个人中心页面.html
weixin_34822215的博客
05-31 6643
个人中心页面$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
html实训微信个人中心界面
01-14
HTML实训微信个人中心界面的设计包括了个人信息展示、设置功能、头像修改等模块。在个人信息展示模块中，可以显示用户的昵称、头像、性别、地区等基本信息，同时还有用户等级、积分、会员等级等相关信息进行展示。而在设置功能模块中，可以包括账号与安全、通用、隐私、通知等设置选项，用户可以根据自己的需求进行相应的设置。另外，头像修改模块可以让用户上传新的头像，并对现有的头像进行裁剪和编辑。在整个界面的设计上，可以使用微信的蓝色作为主色调，并且保持简洁、清晰的风格，使得用户能够快速找到所需要的信息和功能。在布局上，可以采用响应式设计，使得界面可以在不同设备上都能够有良好的显示效果。另外，为了提升用户体验，可以添加一些动画效果和交互设计，让用户操作起来更加流畅和自然。总之，通过合理的界面布局和设计，用户可以在微信个人中心界面上方便地查看个人信息、进行设置操作，从而提升用户对微信的使用体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值