PHP服务器文件管理器开发小结（二）：版面设计和css

首先是引用jQuery和jQueryUI的方法，为了减轻服务器的压力，作者引用了第三方的源：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

也可以将以上源下载到本地使用。

同时，本地使用global.css，规划页面的布局。

注意，由于设计的管理器只维持一个页面，所有的请求通过AJAX动态显示在页面中，因此页面布局需要提前考虑待显示的所有情况。

下面直接列出global.css的内容，部分要素的用法到具体位置会具体介绍。

@CHARSET "UTF-8";
/* Globals */
body {
	font-family: pt-sans-narrow, sans-serif;
	font-size: 100%;
	line-height: 100%;
	padding: 0 6%;
	color: rgb(102, 102, 102);
}
.wrapper,
.section {
	position: relative;
	display: block;
	clear: both;
	float: left;
}
.wrapper {
	width: 97%;
	padding: 1em 1.5% 0;
	margin: 0 0 1em;
}
.section {
	width: 100%;
}
.page-title {
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
	line-height: 1;
	text-align: center;
	margin-top: 0;
}
.section-title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: 400;
	color: rgb(209, 72, 54);
	font-variant: small-caps;
	border-bottom: .05em solid rgb(226, 226, 226);
}
.section-subtitle {
	font-size: .9rem;
	line-height: 1.2;
	text-transform: uppercase;
}
table
{
	border-collapse:collapse;
}
table,td,th{
	border: 1px solid blue;
	font-size: 15px;
	padding: 0.5em;
}
td{	
	text-align: right;	
}
.fileName,.dirName
{
	text-align: left;	
}

/* Header */
.home .hgroup {
	margin-bottom: 8em;
}
.title,
.desc {
	text-align: center;
	font-family: 'Oswald', sans-serif;
}
.title {
	font-size: 3em;
	line-height: 1em;
	font-weight: 700;
	text-transform: uppercase;
	margin: 1em 0 0;
	color: rgb(209, 72, 54);
	text-shadow: .02em .02em 0 rgb(255, 255, 255), .05em .03em 0 rgb(102, 102, 102);
}
.desc {
	font-size: 1em;
	line-height: 2em;
	font-weight: 300;
	margin: 0 0 1em;
}
.sig{
	text-align: center;
}
.tabmenu{
	width: 24px;
	height: 24px;
}
.topmenu{
	width: 48px;
	height: 48px;
}
ul li{
	list-style: none;
	float: left;
}
.operations{
	padding: 0px;
	width: 12em;
	text-align: center;
}
.operations a{
	display: block;
	width: 24px;
	height: 24px;
	margin: 0.1em;	
}
.text-dialog{
	border:1px solid #999;
	height:300px;
	overflow:auto;
	width:600px;
	text-align:left;
}
#navi a{
	display: block;
	width: 48px;
	height: 48px;
	margin-left: 0.5em;
}