《通信软件开发与应用》课程结业报告
一、实验要求
构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：
A. 静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
B. 动态网站。使用任何一个前端框架如Angular等进行某应用网站的开发如英雄之旅等，需要有CRUD即增删改查功能并有一定的样式，网站内放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等（Angular项目可参阅 https://angular.cn/guide/deployment）。
撰写结业报告，要求如下：
A. 题目为《通信软件开发与应用》课程结业报告
B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结
C. 该报告需表现为HTML格式，从你上面的网站中可访问到
二、主题选取
本次实验我选取的主题是“电商管理平台”。我设计了五个相关界面，分别是“商品信息”、
“商品品牌信息”、“供应商信息”、“商品类型”、“订单信息”。这五个界面分别展示了相关的表单信息，并且有相关添加、刷新、返回、编辑、删除按钮，同时有相关查询功能框，但因为没有和后端链接，这些功能都只做相关展示。
本次实验我是采用纯CSS样式构建出“电商管理平台”的相关五个界面，但由于本身知识掌握的不足，构建的界面相对单一、简单。
三、开发过程
1.开发工具
开发工具：Visual Studio Code
2.导航栏的设计
该“电商管理平台”的导航栏很简单
（1）导航栏样式
因为导航栏样式大同小异，这里只给出一个界面的导航栏
（2）导航栏代码
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="good">商品信息 <span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodbrand" data-toggle="dropdown">商品品牌信息<span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodsupplier" data-toggle="dropdown">供应商信息<span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodsort" data-toggle="dropdown">商品类型<span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodorder" data-toggle="dropdown">订单信息<span class=""></span></a></li>
</ul>
</div>
3.页面设计
①商品信息界面设计
（1）界面设计
（2）代码
/*HTML代码*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../resource/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../resource/bootstrap/css/bootstrap.css.map">
<link rel="stylesheet" href="../resource/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../resource/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="../resource/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="../resource/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../resource/font-awesome-4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/goods.css">
<title>电商管理系统(商品信息)</title>
</head>
<body>
<div class="table-wrapper">
<div class="main-header">
<div class="navbar navbar-static-top">
<div class="navbar-header">
<a href="#" class="navbar-brand"><b>电商平台管理系统</b></a>
</div>
<!--顶部导航栏菜单按钮-->
<!-- /.navbar-collapse -->
<!--顶部导航栏右侧的-->
</div>
</div>
<div class="box-header with-border">
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="good">商品信息 <span
class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodbrand"
data-toggle="dropdown">商品品牌信息<span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodsupplier"
data-toggle="dropdown">供应商信息<span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodsort"
data-toggle="dropdown">商品类型<span class=""></span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle btn-success" id="goodorder"
data-toggle="dropdown">订单信息<span class=""></span></a></li>
</ul>
</div>
<div class="form-inline pull-right">
<button type="button" name="search" id="search-btn"
class="btn btn-default pull-right searchBtn" title="查询">
<i class="fa fa-search"></i>
</button>
<input type="text"
class="form-control pull-right name-search position-search"
id="findBrandById" placeholder="编号" />
</div>
</div>
<div class="box-header with-border">
<button type="button" name="add" id="addbrand"
class="btn btn-default pull-left addBtn btn-default">
<i class="fa fa-plus-circle btn-default"></i>添加
</button>
<button type="button" name="cancel" id="cancel-btn"
class="btn pull-left resetBtn btn-default" title="刷新">
<i class="fa fa-refresh btn-default"></i>刷新
</button>
<button type="button" name="returnBtn" id="returnBtn"
class="btn pull-left resetBtn btn-default" title="返回">
<i class="fa fa-left btn-default"></i>返回
</button>
</div>
<table class="fl-table" id="dataTable">
<thead>
<tr>
<th>商品编号</th>
<th>品牌编号</th>
<th>分类编号</th>
<th>商品名称</th>
<th>商品型号</th>
<th>商品简介</th>
<th>商品单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>A001</td>
<td>A级</td>
<td>爱马仕包</td>
<td>1个</td>
<td>好看的爱马仕包包</td>
<td>10000元</td>
<td><button color='blue' class='btn btn-sm btn-success delBtn' id='editBtn'>编辑</button>
<button color='blue' class='btn btn-sm btn-success delBtn'>删除</button></td>
</tr>
<tr>
<td>002</td>
<td>B001</td>
<td>B级</td>
<td>农夫山泉矿泉水</td>
<td>550ml</td>
<td>大自然的搬运工</td>
<td>2元</td>
<td><button color='blue' class='btn btn-sm btn-success delBtn'>编辑</button>
<button color='blue' class='btn btn-sm btn-success delBtn'>删除</button></td>
</tr>
<tr>
<td>003</td>
<td>C001</td>
<td>C级</td>
<td>MAC</td>
<td>480g</td>
<td>口红</td>
<td>880元</td>
<td><button color='blue' class='btn btn-sm btn-success delBtn' id='editBtn'>编辑</button>
<button color='blue' class='btn btn-sm btn-success delBtn'>删除</button></td>
</tr>
<tr>
<td>004</td>
<td>B002</td>
<td>B级</td>
<td>卫龙辣条</td>
<td>300g</td>
<td>吃的辣条</td>
<td>0.5元</td>
<td><button color='blue' class='btn btn-sm btn-success delBtn' id='editBtn'>编辑</button>
<button color='blue' class='btn btn-sm btn-success delBtn'>删除</button></td>
</tr>
<tr>
<td>005</td>
<td>C002</td>
<td>C级</td>
<td>且初卸妆水</td>
<td>330ml</td>
<td>卸妆水</td>
<td>330元</td>
<td><button color='blue' class='btn btn-sm btn-success delBtn' id='editBtn'>编辑</button>
<button color='blue' class='btn btn-sm btn-success delBtn'>删除</button></td>
</tr>
</tbody>
</table>
<div class="modal" id="EdgeModal">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<form id="userEditForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<strong>商品信息</strong>
</h4>
</div>
<div class="modal-body">
<input type="hidden" name="no" id="code" />
<div class="form-horizontal">
<div class="row">
<div class="form-group">
<label class="col-sm-2 control-label">商品编号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gId" id="gId" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px;">*</span>
</div>
</div>
<label class="col-sm-2 control-label">品牌编号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="brandId" id="brandId" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">分类编号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="sortId" id="sortId" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品名称</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gName" id="gName" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品型号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gVersion" id="gVersion" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">型号单位</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gUnit" id="gUnit" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品简介</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gIntro" id="gIntro" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品价格</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gPrice" id="gPrice" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary saveBtn "id="save_brand">保存</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">返回</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal" id="tEdgeModal">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<form id="userEditForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<strong>商品信息</strong>
</h4>
</div>
<div class="modal-body">
<input type="hidden" name="no" id="code" />
<div class="form-horizontal">
<div class="row">
<div class="form-group">
<label class="col-sm-2 control-label">商品编号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gId" id="gId" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">品牌编号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="brandId" id="brandId" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">分类编号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="sortId" id="sortId" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品名称</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gName" id="gName" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品型号</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gVersion" id="gVersion" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">型号单位</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gUnit" id="gUnit" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品简介</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gIntro" id="gIntro" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
<label class="col-sm-2 control-label">商品价格</label>
<div class="col-sm-4">
<div class="col-md-10">
<input class="form-control" type="text" name="gPrice" id="gPrice" />
</div>
<div class="col-md-2">
<span style="color: #F00; font-size: 30px">*</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary saveBtn "id="tsave_brand">保存</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">返回</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../resource/jQuery/jQuery-2.1.4.min.js"></script>
<script src="../resource/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#goodsupplier').on('click',function(){
window.location='goodssupplier.html';
})
$('#good').on('click',function(){
window.location='goods.html';
})
$('#goodsort').on('click',function(){
window.location='goodsspecification.html';
})
$('#goodbrand').on('click',function(){
window.location='goodsbrand.html';
})
$('#goodorder').on('click',function(){
window.location='goodsorder.html';
})
$('#save_brand').on('click',function(){
jQuery("#EdgeModal").modal('show');
});
$('#tsave_brand').on('click',function(){
jQuery("#tEdgeModal").modal('show');
});
$('#addbrand').on('click',function(){
jQuery("#tEdgeModal").modal('show');
});
$('#editBtn').on('click',function(){
jQuery("#EdgeModal").modal('show');
});
</script>
</body>
</html>
/*CSS代码*/
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(to right, #25c481, #25b7c4);
}
h2{
text-align: center;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
padding: 30px 0;
}
/* Table Styles */
.table-wrapper{
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}
.fl-table {
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;
}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 12px;
}
.fl-table thead th {
color: #ffffff;
background: #4FC3A1;
}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;
}
.fl-table tr:nth-child(even) {
background: #F8F8F8;
}
/* Responsive */
@media (max-width: 767px) {
.fl-table {
display: block;
width: 100%;
}
.table-wrapper:before{
content: "Scroll horizontally >";
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;
}
.fl-table thead, .fl-table tbody, .fl-table thead th {
display: block;
}
.fl-table thead th:last-child{
border-bottom: none;
}
.fl-table thead {
float: left;
}
.fl-table tbody {
width: auto;
position: relative;
overflow-x: auto;
}
.fl-table td, .fl-table th {
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;
}
.fl-table thead th {
text-align: left;
border-bottom: 1px solid #f7f7f9;
}
.fl-table tbody tr {
display: table-cell;
}
.fl-table tbody tr:nth-child(odd) {
background: none;
}
.fl-table tr:nth-child(even) {
background: transparent;
}
.fl-table tr td:nth-child(odd) {
background: #F8F8F8;
border-right: 1px solid #E6E4E4;
}
.fl-table tr td:nth-child(even) {
border-right: 1px solid #E6E4E4;
}
.fl-table tbody td {
display: block;
text-align: center;
}
}
②商品品牌界面设计
（1）界面设计
（2）代码
因为HTML代码部分大同小异，之后界面只展示CSS代码
/*CSS代码*/
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background: #3c8dbc;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
/* general styling */
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
background: #59b6ec;
}
③供应商信息界面
（1）界面设计
（2）代码
/*CSS代码*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
background-color: #adadad;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
}
/*** Table Styles **/
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color:#D5DDE5;;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:23px;
font-weight: 100;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align:middle;
}
th:first-child {
border-top-left-radius:3px;
}
th:last-child {
border-top-right-radius:3px;
border-right:none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom: 1px solid #C1C3D1;
color:#666B85;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background:#4E5066;
color:#FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top:none;
}
tr:last-child {
border-bottom:none;
}
tr:nth-child(odd) td {
background:#EBEBEB;
}
tr:nth-child(odd):hover td {
background:#4E5066;
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
background:#FFFFFF;
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
button{
background-color: rgb(210, 206, 206);
}
.dropdown{
background: #9b9b9b;
}
.dropdown-toggle{
color: white;
}
④商品类型界面设计
（1）界面设计
（2）代码
/*CSS代码*/
@import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700';
* {font-family: 'Open Sans', sans-serif;}
.rwd-table {
margin: auto;
min-width: 1000px;
max-width: 100%;
border-collapse: collapse;
}
.rwd-table tr:first-child {
border-top: none;
background: #428bca;
color: #fff;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;
}
.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
margin-top: .5em;
}
.rwd-table td:last-child {
margin-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 120px;
display: inline-block;
color: #000;
}
.rwd-table th,
.rwd-table td {
text-align: left;
}
.rwd-table {
color: #333;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #bfbfbf;
}
.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}
@media screen and (max-width: 601px) {
.rwd-table tr:nth-child(2) {
border-top: none;
}
}
@media screen and (min-width: 600px) {
.rwd-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
}
.rwd-table td:before {
display: none;
}
.rwd-table th,
.rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
padding-right: 0;
}
.rwd-table th,
.rwd-table td {
padding: 1em !important;
}
}
body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);
}
⑤订单信息界面设计
（1）界面设计
（2）代码
/*CSS代码*/
@import url(https://fonts.googleapis.com/css?family=Oswald:400|Raleway:400,700,400italic,700italic);
*,
:before,
:after {
box-sizing: border-box;
}
body {
background-color: #1d1f20;
color: #e5e5e5;
font: 16px/1.25 'Raleway', sans-serif;
padding: 0.5em;
}
main,
footer {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 64em;
width: 100%;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
margin: 0.25em 0;
text-align: center;
}
/* Links */
a {
color: #a2ed56;
}
a:hover {
color: #83e4e2;
}
/************************************************/
/********************* TABLE ********************/
/************************************************/
table {
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
width: 100%;
}
/*** HEADER ***/
table thead {
border-bottom: 2px solid #e5e5e5;
}
table th,
table td {
padding: 1em 0.5em;
position: relative;
}
table th {
font: 400 1.25em/1 'Oswald', sans-serif;
letter-spacing: 0.025em;
outline: none;
padding-right: 2em;
text-align: left;
text-transform: uppercase;
transition: color 0.2s ease-in-out;
}
table th:hover,
table th:focus {
color: #83e4e2;
}
/* Arrows */
table th:after,
table th:before {
border: 0.35em solid transparent;
content: '';
height: 0;
position: absolute;
right: 0.65em;
top: 50%;
transform: translateY(-50%);
transition: border-color 0.2s ease-in-out;
width: 0;
}
table th:before {
border-bottom-color: rgba(255, 255, 255, 0.25);
border-top: 0;
margin-top: -0.35em;
}
table th:after {
border-bottom: 0;
border-top-color: rgba(255, 255, 255, 0.25);
margin-top: 0.35em;
}
table th:hover:before,
table th:focus:before {
border-bottom-color: rgba(255, 255, 255, 0.75);
}
table th:hover:after,
table th:focus:after {
border-top-color: rgba(255, 255, 255, 0.75);
}
table th[aria-sort="ascending"],
table th[aria-sort="descending"] {
color: #fddc32;
}
table th[aria-sort="ascending"]:before {
border-bottom-color: #a2ed56;
}
table th[aria-sort="ascending"]:after {
border-top-color: rgba(255, 255, 255, 0.25);
}
table th[aria-sort="descending"]:before {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
table th[aria-sort="descending"]:after {
border-top-color: #fd6470;
}
/*** BODY ***/
table tbody > tr {
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
table tbody > tr:hover {
background-color: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 1);
color: #fff;
}
/* Primary Color */
table tbody > tr:nth-of-type(6n+1) {
border-color: rgba(162, 237, 86, 0.5);
}
table tbody > tr:nth-of-type(6n+1):hover {
background-color: rgba(162, 237, 86, 0.25);
border-color: rgba(162, 237, 86, 1);
}
/* Secondary Color */
table tbody > tr:nth-of-type(6n+2) {
border-color: rgba(131, 228, 226, 0.5);
}
table tbody > tr:nth-of-type(6n+2):hover {
background-color: rgba(131, 228, 226, 0.25);
border-color: rgba(131, 228, 226, 1);
}
/* Tertiary Color */
table tbody > tr:nth-of-type(6n+3) {
border-color: rgba(253, 100, 112, 0.5);
}
table tbody > tr:nth-of-type(6n+3):hover {
background-color: rgba(253, 100, 112, 0.25);
border-color: rgba(253, 100, 112, 1);
}
/* Quaternary Color */
table tbody > tr:nth-of-type(6n+4) {
border-color: rgba(252, 168, 88, 0.5);
}
table tbody > tr:nth-of-type(6n+4):hover {
background-color: rgba(252, 168, 88, 0.25);
border-color: rgba(252, 168, 88, 1);
}
/* Quinary Color */
table tbody > tr:nth-of-type(6n+5) {
border-color: rgba(253, 220, 50, 0.5);
}
table tbody > tr:nth-of-type(6n+5):hover {
background-color: rgba(253, 220, 50, 0.25);
border-color: rgba(253, 220, 50, 1);
}
/* Name Cell */
table td[data-label="Name"] {
font-weight: 700;
letter-spacing: 0.05em;
}
/* Animal Cells */
table td[data-label="Chickens"],
table td[data-label="Pigs"],
table td[data-label="Snakes"] {
text-align: center;
}
/* Check and Cross Marks */
table tr span.yes,
table tr span.no {
transition: all 0.2s ease-in-out;
}
table tr:hover span.yes,
table tr:hover span.no {
color: #fff;
}
table span.yes {
color: #a2ed56;
font-size: 1.25em;
}
table span.no {
color: #fd6470;
font-size: 0.875em;
}
/*** FOOTER ***/
footer {
text-align: center;
}
footer a {
display: inline-block;
}
/************************************************/
/***************** MEDIA QUERIES ****************/
/************************************************/
@media (max-width: 50em) {
/*** TABLE ***/
table tr,
table td {
display: block;
}
table tr {
padding: 0.75em 0;
}
/* Header */
table thead tr {
text-align: center;
}
table th {
display: block;
padding: 0.25em 0.5em;
}
/* Body */
table td {
padding: 0.25em 0.5em 0.25em 6.5em;
}
table td:before {
content: attr(data-label);
font: 400 1.125em/1 'Oswald', sans-serif;
left: 0.5em;
position: absolute;
top: 0.125em;
width: 100%;
}
/* Animal Cells */
table td[data-label="Chickens"],
table td[data-label="Pigs"],
table td[data-label="Snakes"] {
text-align: left;
}
table span.yes {
line-height: 0.875;
}
}
.dropdown-toggle{
font-size: 20px;
}
四、问题解决
1.遇到的问题
（1）表格的制作和设计问题
因为我的“电商管理平台”最主要是表格的设计，对于表格的制作不是特别的了解，有关表格的设计和排版比较困难
（2）部署的问题
托管到github网站上，从来没有部署过，不太了解，出现了较多问题
（3）有关图片部署的问题
在部署网页时，有图片显示不出来
2.解决的问题
解决了表格的设计问题和部署问题。
（1）表格的制作和设计问题
去B站学习了表格相关的制作，以及相关的CSS来美化表格，同时也去了很多网站上学习了优秀案例
（2）部署的问题
去网上学习，其中有一步骤配置失败，并去询问了同学，得以解决。
3.未解决的问题
未解决的问题是有关图片部署的问题，将网页图片下载下来或重新上传代码文件和图片文件也未能解决部分图片在部署后不能显示的问题。
总结
本次实验我选择的题目是自选主题，写五个静态界面。这次实验让我收获了很多。
首先，通过老师上课耐心细致地讲解，我学到了很多相关的知识，而且通过老师的教学网站，我也能温故知新，并且老师课上给了我们很多有用的网站和资料。通过这次实验，让我将所学的知识点转化为了实践操作，更加加深了我对所学知识的理解和掌握。
其次，这次实验不仅增强了我的动手能力，还增加了我的思考和学习能力。搭建不出想要的东西时，我会先上网找资料和视频学习，会自我先进行思考，若不能解决，会去询问同学，和同学讨论，学习他们的思维。
这次实验让我受益匪浅，希望以后能多学习相关的知识，争取搭建出更好更完善的系统！
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
