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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。