目录
效果图
一导入bootstrap依赖
<!--导入bootstrap依赖-->
<link rel="stylesheet" href="accsets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="accsets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="accsets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>二 对左侧超链接进行设计
<style>
a:link{
font-size: 20px;
color:rgb(109,109,109);
}
a:visited{
font-size: 20px;
color:rgb(109,109,109);
}
a:hover{
font-size: 20px;
color: white;
text-decoration: none;
}
</style>三左侧内容实现
<div class="row">
<!--导航-->
<div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px; ">
<div class="row">
<div class="col-md-12" style="height: 70px;line-height: 70px;font-size: 20px;color: #9acfea;font-weight: bold; background-color: rgb(0,40,77);text-align: center">
<img src="accsets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px">蜗牛CRM管理系统
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12 " style="text-align: center; padding: 20px 0px 20px 0px;">
<a href="#">退出登录</a>
</div>
</div>
</div>三右侧内容
<div class="col-md-9" style="border: 1px solid gray;height: 800px">
<div class="row">
<!--x显示位置-->
<div class="col-md-12" style="height: 70px;font-size: 18px; color: rgb(109,109,109);line-height: 70px;padding-left:20px;">
> 首页
</div>
</div>
<div class="row">
<!--x显示位置-->
<div class="col-md-12" style="background-color:rgb(240,242,245);height: 730px;padding: 20px">
<img src="accsets/img/index.png" class="img-responsive center-block"/>
</div>
</div>
</div>添加用户
<div class="col-md-9" style="border: 1px solid gray;height: 800px">
<div class="row">
<!--x显示位置-->
<div class="col-md-12" style="height: 70px;font-size: 18px; color: rgb(109,109,109);line-height: 70px;padding-left:20px;">
> 添加用户
</div>
</div>
<div class="row">
<!--x显示位置-->
<div class="col-md-12" style="background-color:rgb(240,242,245);height: 730px;padding: 20px">
<div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>用户名</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>昵称</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>手机号</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>生日</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label style="margin-right: 15px">性别</label>
<label class="radio-inline">
<input type="radio" name="sex">男
</label>
<label class="radio-inline">
<input type="radio" name="sex">女
</label>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center">
<button class="btn btn-primary" style="margin-right: 8px">添加</button>
<button class="btn btn-default">重置</button>
</div>
</div>
</div>
</div>修改密码
<div class="col-md-9" style="border: 1px solid gray;height: 800px">
<div class="row">
<!--x显示位置-->
<div class="col-md-12" style="height: 70px;font-size: 18px; color: rgb(109,109,109);line-height: 70px;padding-left:20px;">
> 修改密码
</div>
</div>
<div class="row">
<!--x显示位置-->
<div class="col-md-12" style="background-color:rgb(240,242,245);height: 730px;padding: 20px">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
<label>当前密码</label>
<input type="password" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
<label>确认密码</label>
<input type="password" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 30px;text-align: center">
<button class="btn btn-primary" style="margin-right: 8px">修改</button>
<button class="btn btn-default" type="reset">重置</button>
</div>
</div>用户管理
<div class="row" style="background-color: rgb(240,242,245);height: 730px;padding: 20px">
<div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
<table class="table table-striped" style="margin-top: 20px">
<caption>用户管理-用户列表</caption>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>昵称</th>
<th>性别</th>
<th>生日</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>张三</td>
<td>男</td>
<td>200-02-04</td>
<td>12234455</td>
<td>
<button class="btn btn-link">修改</button>
<button class="btn btn-link">删除</button>
</td>
</tr>>
</tbody>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
