hey 标题又是我第一喜欢的魔幻现实主义 盒子是主题 而猫就抽象了 大概是薛定谔的吧
back 这次放的东西又很common 很期待什么时候 make something special ok! wait
一个学生信息管理系统的后台 写的时候chrome firefox 都ok 回来上Safari好像有一点显示问题 没有很多特效 但是基本的都有
建议csdn搞一个上传文件夹的选项 如果是我没发现 给它道个歉
添加信息页面的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style>
.student-form{
position: absolute;
top: 50%;
left: 50%;
width: 600px;
min-height: 400px;
margin-left: -300px;
margin-top: -200px;
display: inline-block;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tips-title">
<a href="">学员管理</a> > <a href="">学员信息添加</a>
<hr />
</div>
<div class="container">
<form action="" class="student-form">
<div class="input-group">
<input type="text" class="input" placeholder="请输入学员学号" />
</div>
<div class="input-group">
<input type="text" class="input" placeholder="请输入学员姓名" />
</div>
<div class="input-group">
<input type="text" class="input" placeholder="请设置学员密码" />
</div>
<div class="input-group">
<input type="text" class="input" placeholder="请输入学员电话号码" />
</div>
<div class="input-group">
<input type="text" class="input" placeholder="请输入学员毕业院校" />
</div>
<div class="input-group">
<input type="text" class="input" placeholder="请输入学员家庭住址" />
</div>
<div class="input-group">
<button class="btn btn-primary btn-cord">添加</button>
</div>
</form>
</div>
</body>
</html>
信息显示页面的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/public.css" />
<style>
.btn1{
width: 88px;
height: 38px;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.2);
line-height: 38px;
text-align: center;
cursor:pointer;
transition: opacity .9s;
}
.tab-header,.table-box{
position: relative;
min-width: 800px;
height: 50px;
}
.btn-group{
float: left;
}
.search{
float: right;
}
</style>
</head>
<body>
<div class="tips-title">
<a href="">学员管理</a> > <a href="">学员信息</a>
<hr />
</div>
<div class="container">
<div class="tab-header">
<div class="btn-group">
<button class="btn1 btn-success btn-cord" οnclick="location.href='student_add.html'">新增学员信息</button>
<button class="btn btn-error btn-cord">批量删除</button>
</div>
<div class="search">
<input type="text" class="input sm-width" />
<button class="btn btn-primary btn-cord">搜索</button>
</div>
</div>
<div class="table-box">
<table>
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>学号</th>
<th>姓名</th>
<th>电话号码</th>
<th>毕业院校</th>
<th>家庭住址</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>CM</td>
<td>13897439222</td>
<td>湖北大学</td>
<td>亭林镇43号</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>CMMM</td>
<td>13897453542</td>
<td>湖北大学</td>
<td>亭林镇44号</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>CMCM</td>
<td>13886723473</td>
<td>湖北大学</td>
<td>亭林镇45号</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MCCM</td>
<td>13893467922</td>
<td>湖北大学</td>
<td>亭林镇46号</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>5</td>
<td>MMMCM</td>
<td>13827890976</td>
<td>湖北大学</td>
<td>亭林镇47号</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>6</td>
<td>MCMCMC</td>
<td>13972828334</td>
<td>湖北大学</td>
<td>亭林镇48号</td>
</tr>
</tbody>
</table>
<!--分页链接-->
<ul class="page-link">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</body>
</html>
写到这里很气 chrome老是崩溃 换了一个浏览器 我滴心态炸了
下面是标题 按钮 选择框 以及 分页 的公共样式
/**/
.tips-title {
position: relative;
top: 10px;
}
.tips-title a {
letter-spacing: 4px;
}
a:hover {
color: #f00;
}
.tips-title a:first-child {
text-indent: 0.5cm;
}
hr{
border:1px solid rgba(0,0,0,0.1);
}
.container {
position: relative;
top: 20px;
padding: 10px;
min-height: 500px;
}
/*输入框公共样式*/
.input-group {
margin: 10px 10px 0 10px;
text-align: center;
}
.input {
width: 380px;
height: 40px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
transition: all .5s;
}
.input:focus {
border-color: rgb(255, 176, 24);
box-shadow: 0 0 10px rgba(255, 176, 24, 0.5);
}
/*按钮组织公共样式*/
.btn{
width: 78px;/*给定按钮宽度 可更改*/
height: 38px;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.2);
line-height: 38px;
text-align: center;
cursor:pointer;
transition: opacity .9s;
}
.btn-sm{
width: 58px;
height: 28px;
line-height: 28px;
font-size: 0.9em;
}
.btn-primary{
color: #fff;
background-color: #0E90D2;
border-color: #0E90D2;
}
.btn-primary:hover,.btn-success:hover,.btn-second:hover,.btn-error:hover{
opacity: 0.8;
}
.btn-success{
color: #fff;
background-color: #5EB95E;
border-color: #5EB95E;
}
.btn-second{
color:#fff;
background-color: #3BB4F2;
border-color: #3BB4F2;
}
.btn-error{
color:#fff;
background-color: #DD514C;
border-color: #DD514C;
}
.btn-cord{
border-radius: 5px;
}
.sm-width{
width:280px;
}
/*选择框公共样式*/
.icheck{
position: relative;
margin: 0 auto;
display: inline-block;
width: 58px;
height: 22px;
line-height: 22px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 13px;
cursor: pointer;
overflow: hidden;
}
.thumb{
position: absolute;
left: 1px;
top: 1px;
display: inline-block;
width: 20px;
height: 20px;
background-color: rgba(0,0,0,0.2);
border-radius: 50%;
}
.icheck-label{
position: absolute;
margin-left: 10px;
display: inline-block;
height: 24px;
line-height: 24px;
}
::-webkit-input-placeholder{
color:rgba(0,0,0,0.2);
}
/*表格的公共样式*/
.table-box>table{
width:100%;
min-width: 800px;
border-collapse:collapse;
}
table th,table td{
padding:5px;
text-align: center;/*设置单元格内部的文本居中*/
}
table thead th{
border-top:1px solid rgba(0,0,0,0.5);
border-bottom:1px solid rgba(0,0,0,0.5);
}
table tbody td{
border-bottom: 1px solid rgba(0,0,0,0.1);
}
tbody tr{
cursor:pointer;
transition: background-color .5s;
}
tbody>tr:hover{
background-color: rgb(255, 255, 221);
}
/*分页公共样式*/
.pages {
width: 100%;
text-align: center;
}
.page-link {
margin-top: 20px;
text-align: center;
}
.page-link li {
display: inline-block;
margin-left: 5px;
}
.page-link>li>a {
display: block;
padding:0.5em 1em;
color:#0e90d2;
border:0.1em solid #ddd;
border-radius: 3px;
}
.page-link>li>a:hover{
background-color: #ddd;
}
.active-page{
color:#fff !important;
background-color:#3bb4f2;
border-color:#3bb4f2;
}
好的 完了!