软帝实训周报（2）

实训第二周心得

在软帝实训的第二周了，第一周的时候，软帝的实训气氛的确很好，在学校里大家的学习气氛没有这么重，柴老师说的没错，学习氛围非常重要。第一周学习了基础知识，第二周柴老师带着我们一起做了一个项目。
一个音乐后台管理系统，分别包含了：登陆界面，主界面与播放器界面
登陆界面代码如下：

 @charset "utf-8";
/* 重置样式 */
*{
 margin:0;
 padding:0;
 border:0;
}
body{
 background:rgb(11, 224, 147);
}
.login{
 position:absolute;
 top:50%;
 left:50%;
 margin:-250px 0 0 -200px;
 width:400px;
 height:500px;
 background:rgb(50, 53, 66);
}

.title,
.logo,
.login-form{
 position: absolute;
 left:0;
 right: 0;
}
.title{
 top:0;
 height:60px;
}
.title-txt{
 height: 58px;
 line-height: 58px;
 text-align: center;
 font-size: 1.1em;
 letter-spacing: 5px;
 color:#eee;
}
.title-split{
 display: inline-block;
 width:200px;
 margin-left:100px;
 height: 1px;
 border-bottom:1px solid rgba(255,255,255,0.1);
}
.logo{
 top:80px;
 height:120px;
 text-align: center;
}
.login-form{
 top:200px;
 bottom:0;
 height:300px;
}
.input-group{
 width:300px;
 margin-left:50px;
 margin-bottom:20px;
 height: 50px;
 background: rgb(71, 74, 85);
 border-radius:5px;
}

.icon,
.input-txt{
 float:left;
 display: inline-block;
}
.icon{
 width:50px;
 height:50px;
 background-repeat: no-repeat;
 background-position: center center;
}
.icon-user{
 background-image: url(../img/user.png);
}
.icon-pwd{
 background-image: url(../img/pwd.png);
}
.input-txt{
 width:240px;
 height: 100%;
 background: rgb(71, 74, 85);
 color:#ccc;
 outline:none; /*去除浏览器自带的元素外边框效果*/
}
.btn-login{
 margin:20px 50px;
 width:300px;
 height: 50px;
 font-size: 1.2em;
 letter-spacing: 10px;
 background: #31C27C;
 color:#eee;
 border-radius: 5px;
 cursor:pointer;
 outline: none;
}
.btn-login:hover{
 background: #41A863;
}
.account-link{
 display: flex;
 width:300px;
 margin: 0 50px;
}
.account-link>a{
 flex: 1;
 color:rgba(255,255,255,0.4);
 font-size:14px ; /*16px=12pt=1em*/
 text-decoration:none; /*去除文本装饰*/
}
.account-link>a:nth-child(2){
 text-align: right;
}
a:hover{
 color:rgba(255,255,255,0.8);
 text-decoration: underline;
}

页面效果如下：

这是主界面的效果图：

使用bootstrap效果实现，
分页效果图：


在系统登陆使用了bootstrap动画效果。

以下是音乐添加界面css代码:

<!-- 引入bootstrap.css文件 -->
		<link rel="stylesheet" type="text/css" href="assert/bootstrap-3.3.7-dist/css/bootstrap.css" />

	<ol class="breadcrumb">
			<li><a href="#">音乐列表</a></li>
		</ol>
		
		<div class="btn-group" style="margin-bottom:20px">
			<a href="music_add.html" class="btn btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;上传音乐</a>
			<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>&nbsp;批量删除</button>
		</div>
		
		<div class="panel panel-primary">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-list"></span>
				音乐列表
			</div>
			<div class="panel-body">
				<table class="table table-bordered table-striped table-hover table-condensed">
					<tr>
						<th><input type="checkbox" name="" id=""></th>	
						<th>序号</th>
						<th>歌曲名</th>
						<th>歌手</th>
						<th>专辑</th>
						<th>风格</th>
						<th>路径</th>
						<th>大小</th>
						<th>上传时间</th>
						<th>操作</th>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id=""></td>
						<td>1</td>
						<td>小苹果</td>
						<td>筷子兄弟</td>
						<td>老男孩</td>
						<td>广场</td>
						<td>/musics/01/xiaopingguo.mp3</td>
						<td>4.5MB</td>
						<td>2019-01-02 10:22:10</td>
						<td>
							<button class="btn btn-info btn-xs">详情</button>
							<button class="btn btn-danger btn-xs">删除</button>
						</td>
					</tr>
					
				</table>
				<!-- 分页链接 -->
				<div class="page text-center">
					<ul class="pagination">
						<li>
							<a href="">
								<span>&laquo;</span>
							</a>
						</li>
						<li><a href="">1</a></li>
						<li class="active"><a href="">2</a></li>
						<li><a href="">3</a></li>
						<li>
							<a href="">
								<span>&raquo;</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

柴老师这两个星期指导了我们许多，对于专业的理解，就业前景。在这里的每一天都接收到了新的知识。每天都非常的充实与快乐，真实的学习的快乐，对学习产生兴趣真的是最好的学习方法。