HTML5-個人中心

最新推荐文章于 2024-06-21 03:00:56 发布
最新推荐文章于 2024-06-21 03:00:56 发布
阅读量3.9k 收藏 11
点赞数 1
分类专栏： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yqj234/article/details/52333528
版权 
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>個人中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <style type="text/css">
        .vertical-center
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="panel panel-warning">
        <div class="panel-heading " style="background: #d9534f; color: #ffffff">
            <span class="glyphicon glyphicon-th-large" style="margin-right: 10px" />个人中心
        </div>
        <div class="panel-heading   ">
            <div class="row">
                <div class="col-xs-6 col-md-6">
                    <div>
                        <span>帳號:
                            <label>
                                K1311P99
                            </label>
                        </span>
                    </div>
                    <div>
                        <span>帳號:
                            <label>
                                楊清杰
                            </label>
                        </span>
                    </div>
                </div>
                <div class="col-xs-6 col-md-6">
                    <div class="container">
                        <div class="row bg-success" >
                            <div class="vertical-center" style="margin-top:15px">
                                <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                                </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                                </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                                </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                                </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="nav nav-pills nav-stacked   nav-divider">
            <br>
            <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-star" style="margin-right: 10px">
            </span>當前等級</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
            <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-yen" style="margin-right: 10px">
            </span>當前积分</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
            <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-calendar" style="margin-right: 10px">
            </span>注冊時間</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
            <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-open" style="margin-right: 10px">
            </span>我的上級</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
            <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-save" style="margin-right: 10px">
            </span>我的下級</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
            <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-globe" style="margin-right: 10px">
            </span>我的團隊</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
        </ul>
    </div>
    <div class="text-center" style="background: #FFF">
        <a href="user.html?action=upgrade">
            <button type="button" class="btn btn-success   " style="width:40%">
                <span class="glyphicon glyphicon-arrow-up" style="margin-right: 10px" />我要升級</button>
        </a><a href="index.php">
            <button type="button" class="btn btn-success" style="width:40%">
                <span class="glyphicon glyphicon-home" style="margin-right: 10px" />返回首頁</button>
        </a>
    </div>
    <p>
        </div>
</body>
</html>

yqj234
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5+css实现一个简单的网页用户中心效果/案例演示
No1banana的博客
01-26 3556
一、效果分析 根据案例示意图我们对案例的效果进行分析 二、具体实现 1.打开Dreamweaver2021新建一个html5格式文档，并设置title 2.在新建的的文档里利用html搭建起整体框架结构 3.搭建完整体的结构之后引入对应的图文内容 4.最后嵌入式的方式引入css样式设计效果 最后使用浏览器打开预览 效果如下 实现代码 <!doctype html> <html> <head> <meta charset="U
用户个人中心页面html5源码,橙色的商城个人中心全部页面模板html源码
weixin_39647471的博客
05-31 4902
(导航链接未设置，不能金币下载)包括登录、注册、安全设置以及购物、产品、我的钱包等页面模板html下载资源下载此资源下载价格为4D币，请先登录资源文件列表codedown123-0802-35/.project,1143codedown123-0802-35/css/amazeui.min.css,280625codedown123-0802-35/css/jd.css,1157cod...
HTML移动端购物商城个人中心模板
06-07
HTML移动端购物商城个人中心模板，DVI+CSS布局，全套模板，包括我的订单、退货记录、订单列表、订单详情、帐号安全、我的设置、我的积分等，是一款很不错的手机端个人中心模板。
html实现个人空间主页(附源码)
xcLeigh
11-10 1万+
html实现个人空间,html实现个人主页，html实现个人主页，酷炫的欢迎界面，科技感满满的主界面，优雅的屏幕待机界面。实现了个人日记管理功能，支持日记的添加，删除，修改，查看功能；实现了百度搜索功能，支持回车搜索；实现了常用工具链接管理功能，可以从界面上跳转到常用的工具；实现了个人的项目管理，通过项目地址跳转；实现了音乐播放，暂停，上一首，下一首，进度条，音量大小等功能，快来弄一款属于自己的个人空间,在个人空间里实现日常工作，日常学习管理。
CSDN自定义模块全攻略，DIY系统原有样式打造出你的专属个性化主页！
最新发布
小z的博客
06-21 5398
如何通过HTML+CSS自定义模板diy出自己的个性化csdn主页？
个人中心 - 实现修改用户头像、用户名或密码
xaiobit_hl的博客
08-02 2497
个人中心 - 实现修改用户头像、用户名或密码
【博主推荐】html好看的个人主页(附源码)
热门推荐
xcLeigh
06-04 4万+
html好看的个人主页，个人主页四种风格，可以自己灵活配置，改变背景图，星空主页风格，简洁个人主页风格，背景图个人主页风格，卡片个人主页风格。附带源码下载。
个人笔记--HTML5
11-25
HTML5个人笔记，如果有错误和意见，请在评论中提出！！！
HTML5综合设计-个人网站
08-19
内含完整代码，实验报告（源程序清单） HTML5实现一个完整的网站，调用HTML5常用API来设计各个模块（API包含：HTML5 拖放API、HTML5 表单API、HTML5 画布API、HTML5 媒体API、HTML5 Web存储API）
HTML5大作业-精致版个人博客空间模板源码
01-05
HTML5大作业-精致版个人博客空间模板源码，杨洋个人博客，大作业，大作业源码，个人空间源码，个人主页源码。模板界面主题分为博客主页、博主信息、我的文章、我的相册、我的工具、我的源码、我的日记、我的留言板、...
html-css-网页模板-个人介绍网站
11-23
"html-css-网页模板-个人介绍网站"这个主题聚焦于如何利用这两种语言创建一个个人介绍的网页模板。以下是对这些知识点的详细解释： HTML（HyperText Markup Language）是网页内容的结构化标记语言，它定义了网页的...
橙色的商城个人中心全部页面模板html源码
11-13
这是一套个人商城开发的模板，内容包括个人商城的不同界面信息
用户中心静态页面
02-01
用户中心html模板，采用html5，发布文章，管理文章，发送消息等模板
HTML个人信息注册页面
12-18
HTML设计一个个人信息注册页面 使用HTML设计一个个人信息注册页面，如下图所示，其中页面的排版可采用或+CSS。当点击“提交”按钮时，使用JavaScript编程在当前页面显示录入信息，并且实现籍贯和城市的级联。（选做：用JQuery实现页面功能）
基于html5的注册界面个人版
12-19
基于html5的注册页面，作为一个初学者的小案例解析。
html个人主页，共五个页面
05-14
html个人主页页面，其中包含五个模块【网站首页，教育背景，日常生活，兴趣爱好，给我留言】，共五个页面，是个不错的个人主页demo，喜欢的请下载。
个人中心的html,个人中心.html
weixin_29577613的博客
05-30 834
个人中心$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
html个人中心布局,html 后台页面布局
weixin_39544101的博客
05-30 1306
body{margin:0;}.left{float:left;}.right{float:right;}.clear{clear:both;}.pg-header .header{margin: 0 auto;width:100%;min-width:1080px;height: 48px;background-color:#2a6496;line-height: 48px;color: whi...
html5个人中心页面代码
06-06
以下是一个简单的 HTML5 个人中心页面的示例： ```html <!DOCTYPE html> <html="en"> <meta charset="UTF-8"> 个人中心 head> 个人中心 <li><a href="#">首页</a></li> <li><a href="#">个人信息</a>...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值