前端实战之用户控制台

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

实现页面

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

依赖第三方工具

BootStrap框架
jQuery

HTML代码

<body id="setting-page" ng-controller="setCtrl">
<link href="css/settings.css" rel="stylesheet">


<div class="navbar-USF">
    <div class="dropdown">
        <a href="/" title="回到首页" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-home"></span>
        </a>
        <a href="/" title="小组广场" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-th"></span>
        </a>
        <a href="/" title="发条状态" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-pencil"></span>
        </a>
    </div>
    <div class="nav-user">
        <a href="/user" title="个人主页" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-user"></span>
        </a>
        <a href="/message" title="您的消息" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-comment"></span>
        </a>
        <a href="/message" title="发现" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-eye-open"></span>
        </a>
        <a href="/">
            <span class="glyphicon glyphicon-book" title="收藏夹" data-placement="right" data-toggle="tooltip"> </span>
        </a>
        <a href="/settings" title="设置" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-cog"></span>
        </a>
        <a href="/logout" title="登出" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-log-out"></span>
        </a>
    </div>
</div>




<div class="container" ng-init="getUser()">
    <div class="setting">
        <div class="alert alert-info" ng-show="$root.display">
            <button type="button" class="close" ng-click="$root.display=false">
                <span>×</span>
            </button>
            {{$root.msg}}
        </div>
    </div>

<h2 class="page-title">
    <span class="glyphicon glyphicon-cog"></span>
    设置
</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li role="presentation" class="active">
        <a href="#basic" role="tab" data-toggle="tab">基础设置</a>
    </li>
    <li role="presentation">
        <a href="#profile" role="tab" data-toggle="tab">个人资料</a>
    </li>
    <li role="presentation">
        <a href="#pass" role="tab" data-toggle="tab">修改密码</a>
    </li>
    <li role="presentation">
        <a href="#blacklist" role="tab" data-toggle="tab">黑名单</a>
    </li>
    <li role="presentation">
        <a href="#destroy" role="tab" data-toggle="tab">删除账号</a>
    </li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="basic">
    <div class="block">
        <h4>
            选择常用编辑器
            <span class="notice">  切换后对新建文章生效</span>
        </h4>
        <div class="radio">
            <label>
                <input type="radio" name="editor" value="0" checked="checked">
                富文本编辑器
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="editor" value="1">
                Markdown编辑器
            </label>
        </div>
    </div>
</div>
<div role="tabpanel" class="tab-pane" id="profile" ng-controller="profileCtrl">
    <form class="block form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-2">
                头像
            </label>
            <div class="avatar col-sm-2">
                <img alt="用户头像" class="img-circle" ng-src="{{profile.avatar}}">
            </div>
            <div class="btn-group change-avatar col-sm-2">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    更换头像
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="upload-button">
                        <div class="btn btn-lg btn-link upload-avatar" type="file"
                             ng-file-select="fileSelect($files)" accept="image/*">
                            <span class="glyphicon glyphicon-pencil"></span>
                            上传头像
                        </div>
                    </li>
                    <li class="divider">
                    </li>
                    <li class="available-avatar">
                        <img ng-repeat="pic in picList" ng-src="{{pic}}" ng-click="changeAvatar(pic)">

                    </li>
                </ul>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                真实姓名
            </label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="张三" ng-model="profile.realname">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                性别
            </label>
            <div class="col-sm-2">
                <select class="form-control" ng-model="profile.sex">

                    <option value="0">
                        男
                    </option>
                    <option value="1">
                        女
                    </option>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label" ng-model="profile.email">
                电子邮件
            </label>
            <div class="col-sm-6">
                <input type="email" disabled="disabled" class="form-control" ng-model="profile.email" placeholder="Email">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                电话号码
            </label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="+86" ng-model="profile.phone">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                个人主页
            </label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="http://" ng-model="profile.page">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                自我描述
            </label>
            <div class="col-sm-6">
                <textarea type="text" class="form-control" rows="4" placeholder="填写您的个人简介可以帮助其他人更好的了解您."
                        ng-model="profile.description"></textarea>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            </label>
            <div class="col-sm-3">
                <button class="btn btn-lg btn-success" ng-click="saveProfile()">
                    保存修改
                </button>
            </div>
        </div>
    </form>
</div>
<div role="tabpanel" class="tab-pane" id="pass" ng-controller="resetPasswordCtrl">
    <form class="block">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    旧密码
                </div>
                <input class="form-control" ng-model="form.password" type="password" placeholder="***********">
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    新密码
                </div>
                <input class="form-control" ng-model="form.newPassword" type="password" placeholder="***********">
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    请重复
                </div>
                <input class="form-control" ng-model="form.repeatPassword" type="password" placeholder="***********">
            </div>
        </div>
        <br>
        <button class="btn btn-primary btn-lg" ng-click="reset()">
            保存
        </button>
    </form>
</div>
<div role="tabpanel" class="tab-pane" id="blacklist" ng-controller="blacklistCtrl">
    <div class="block" ng-init="initBlackList()">
        <p>
            您可以在用户状态和用户主页中将其加入黑名单。您将无法看到加入黑名单的用户发表的状态和评论。
        </p>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th colspan="2">
                    黑名单用户
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr ng-repeat="person in personList">
                <td>
                    <input class="check-helper" type="checkbox" ng-model="person.checked">
                </td>
                <td>
                    <a ng-href="/users/{{person.name}}">{{person.name}}</a>
                </td>
                <td>
                    <label class="btn-link btn-small unblock" ng-click="remove(person)">
                        从黑名单移除
                    </label>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="3">
                    <input class="check-helper" type="checkbox" ng-click="selectAll()">
                    <span>全选</span>
                    <label class="btn-link  pull-right" style="color:#555555" ng-click="removeAll()">
                        批量移除
                    </label>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<div role="tabpanel" class="tab-pane" id="destroy" ng-controller="destroyUserCtrl">
    <div class="block">
        <h4>
            删除账号
        </h4>
        <p class="text-danger">
            <span class="glyphicon glyphicon-exclamation-sign"></span>
            此操作将删除您的全部数据，请谨慎操作
        </p>
        <br>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-lock"></span>
                </div>
                <input class="form-control" ng-model="password" type="password" placeholder="当前密码">
            </div>
        </div>
        <br>
        <button class="btn btn-lg btn-danger" ng-click="destroy()">
            删除账号
        </button>
    </div>
</div>
</div>
</div>




</body>

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

效果展示

个人资料页面

密码重置页面

黑名单页面

删除账号页面

前端实战之用户控制台

实现页面

依赖第三方工具

HTML代码

CSS代码

效果展示

suemi

引用和评论

Java知识点汇总

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了