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;
}

本文出自 “Accplayer的小地方” 博客，请务必保留此出处http://accplaystation.blog.51cto.com/9917407/1614567