前端实战之用户控制台

---

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

实现页面

• 基本设置页
• 个人资料页面
• 黑名单页面
• 密码重置页
• 删除账号页

依赖第三方工具

• BootStrap框架
• jQuery

HTML代码

    

        
            
        
        
            
        
        
            
        
    
    

        
            
        
        
            
        
        
            
        
        
             
        
        
            
        
        
            
        
    


    

        

            
                ×
            
            {{$root.msg}}
        
    


    
    设置


    

        基础设置
    
    

        个人资料
    
    

        修改密码
    
    

        黑名单
    
    

        删除账号
    



    

        

            选择常用编辑器
              切换后对新建文章生效
        
        

            
                
                富文本编辑器
            
        
        

            
                
                Markdown编辑器
            
        
    


    

        

            
                头像
            
            

                
            
            

                
                    更换头像
                    
                
                

                    

                        

                            
                            上传头像
                        
                    
                    

                    
                    

                        

                    
                
            
        
        

        

            
                真实姓名
            
            

                
            
        
        

        

            
                性别
            
            

                

                    
                        男
                    
                    
                        女
                    
                
            
        
        

        

            
                电子邮件
            
            

                
            
        
        

        

            
                电话号码
            
            

                
            
        
        

        

            
                个人主页
            
            

                
            
        
        

        

            
                自我描述
            
            

                
            
        
        

        

            
            
            

                
                    保存修改
                
            
        
    


    

        

            

                

                    旧密码
                
                
            
        
        

        

            

                

                    新密码
                
                
            
        
        

        

            

                

                    请重复
                
                
            
        
        

        
            保存
        
    


    

        

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

            

            

                

                    黑名单用户
                
                

                    操作
                
            
            

                

                    
                
                

                    {{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;
}

效果展示

个人资料页面

密码重置页面

黑名单页面

删除账号页面