前端控制台html,前端实战之用户控制台

这是一个模仿简书风格的用户设置页面

实现页面

基本设置页

个人资料页面

黑名单页面

密码重置页

删除账号页

依赖第三方工具

BootStrap框架

jQuery

HTML代码

×

{{$root.msg}}

设置

• 基础设置

• 个人资料

• 修改密码

• 黑名单

• 删除账号

选择常用编辑器

切换后对新建文章生效

富文本编辑器

Markdown编辑器

头像

更换头像

• ng-file-select="fileSelect($files)" accept="image/*">

  上传头像

真实姓名

性别

男

女

电子邮件

电话号码

个人主页

自我描述

ng-model="profile.description">

保存修改

旧密码

新密码

请重复

保存

您可以在用户状态和用户主页中将其加入黑名单。您将无法看到加入黑名单的用户发表的状态和评论。

全选 批量移除
黑名单用户		操作
	{{person.name}}	从黑名单移除

删除账号

此操作将删除您的全部数据，请谨慎操作

删除账号

CSS代码

.navbar-USF{

left:0;

top:0;

position:fixed;

height:100%;

width:45px;

background-color:#3C3C3C;

}

.navbar-USF a{

display:block;

padding:10px;

line-height: 25px;

height:45px;

font-size:16px;

text-align: center;

}

.navbar-USF a:hover{

background:#E0E0E0;

}

.navbar-USF a span{

height:25px;

width: 25px;

}

.navbar-USF .nav-user{

position:relative;

width:100%;

bottom:-43%;

}

.navbar-USF .nav-user a{

padding:5px 10px;

height:35px;

}

.setting{

padding:0px 100px 30px;

color:#555555;

}

.page-title{

text-align:center;

margin:20px 0 20px;

font-size:30px;

padding-left:20px;

position:relative;

}

.page-title span{

top:5px;

}

.nav-tabs{

margin:20px 100px 10px 100px;

text-align:center;

display:tables;

padding:0 16%;

position:relative;

left:8%;

}label.btn-link{

cursor: pointer;

}

.nav-tabs>li>a{

margin-right:2px;

padding-left:12px;

display:block;

color:#555555;

}

.tab-content{

padding:30px 100px 0;

}

.check-helper{

height:18px;

width:18px;

margin:4px;

}

#setting-page .alert{

margin:10px 26% 0;

text-align:center;

position:absolute;

top:-10px;

width:20%;

}

#pass form{

width:40%;

margin:0 34%;

}

#pass .input-control{

margin-bottom:15px;

}

#pass label{

font-weight:normal;

}

#pass form input{

height:40px;

line-height:normal;

margin-top:0;

width:100%;

}

#destroy .block{

margin-left:38%;

}

#destroy .form-group{

width:50%;

}

#blacklist .block{

margin:0 25%;

position:relative;

left:2%;

}

table {

vertical-align:middle;

}

tr th{

text-align:center;

}

#blacklist tbody td {

text-align:center;

}

#blacklist tfoot td{

padding:15px;

vertical-align:middle;

}

#blacklist tfoot td span{

position:relative;

top:-4px;

}

#profile .block{

position:relative;

left:20%;

}

#profile .avatar img{

width:90px;

height:90px;

}

#profile .available-avatar img{

cursor: pointer;

}

.change-avatar .dropdown-menu{

padding: 3px;

width:180px;

position: relative;

}

.change-avatar li{

position:relative;

}

.change-avatar .upload-avatar{

display: block;

margin:5px;

font-size:14px;

text-align:left;

height:40px;

margin:5px;

padding: 10px;

}

.change-avatar .upload-avatar:hover{

background:#555555;

}

.available-avatar img{

width:40px;

height:40px;

margin:5px;

}

#basic .block{

position:relative;

left:32%;

}

#basic .notice{

font-size:12px;

color:#999999;

}

效果展示

个人资料页面

密码重置页面

黑名单页面

删除账号页面