提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Web 在线文件管理器学习笔记与总结（2）显示文件列表（名称，类型，大小，可读，可写，可执行，创建时间，修改时间，访问时间）

文件列表笔记Web学习执行 总结 创建
2023-09-11 14:17:03 时间

主要函数：

filetype() 判断文件类型

filesize() 得到文件大小（字节）

is_readable() 判断文件是否可读

is_writeable() 判断文件是否可写

is_executable() 判断文件是否可执行

filectime() 文件创建时间

filemtime() 文件修改时间

fileatime() 文件访问时间

 

file.func.php 封装文件操作的文件：

<?php
/*
    转换字节大小
*/
function transByte($size){
    $arr = array('B','KB','MB','GB','TB','EB');
    $i = 0;
    while($size > 1024){
        $size /= 1024;
        $i++;
    }
    return round($size,2).' '.$arr[$i];
}

index.php:

 1 <?php 
 2 require 'dir.func.php';
 3 require 'file.func.php';
 4 $path = 'file';
 5 $info = readDirectory($path);
 6 ?>
 7 <!DOCTYPE html>
 8 <html>
 9 <head>
10 <meta charset="UTF-8">
11 <title>Insert title here</title>
12 <link rel="stylesheet" href="cikonss.css" />
13 <link rel="stylesheet" href="common.css" />
14 </head>
15 <body>
16 <h1>在线文件管理器</h1>
17 <div id="top">
18     <ul id="navi">
19         <li><a href="index.php" title="主目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-home"></span></span></a></li>
20         <li><a href="#" title="新建文件" ><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-file"></span></span></a></li>
21         <li><a href="#" title="新建文件夹"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-folder"></span></span></a></li>
22         <li><a href="#" title="上传文件"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-upload"></span></span></a></li>
23         <li><a href="#" title="返回上级目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-arrowLeft"></span></span></a></li>
24     </ul>
25 </div>
26 <table width='100%' border='1' cellpadding="5" cellspacing="0" bgcolor="#abcdef" align="center">
27     <tr align="center">
28         <td>编号</td>
29         <td>名称</td>
30         <td>类型</td>
31         <td>大小</td>
32         <td>可读</td>
33         <td>可写</td>
34         <td>可执行</td>
35         <td>创建时间</td>
36         <td>修改时间</td>
37         <td>访问时间</td>
38         <td>操作</td>
39     </tr>
40     <?php 
41         if($info['file']){
42             $i = 1;
43             foreach($info['file'] as $val){
44                 $p = $path.'/'.$val;
45     ?>
46     <tr align="center">
47         <td><?php echo $i;?></td>
48         <td><?php echo $val;?></td>
49         <td><?php $src = filetype($p) == 'file'?'file_ico.png':'folder_ico.png';?><img src="images/<?php echo $src;?>" alt="" title='文件'></td>
50         <td><?php echo transByte(filesize($p));?></td>
51         <td><?php $src = is_readable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可读'></td>
52         <td><?php $src = is_writeable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可写'></td>
53         <td><?php $src = is_executable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可写'></td>
54         <td><?php echo date('Y-m-d H:i:s',filectime($p));?></td>
55         <td><?php echo date('Y-m-d H:i:s',filemtime($p));?></td>
56         <td><?php echo date('Y-m-d H:i:s',fileatime($p));?></td>
57         <td>
58             <a href="" title='查看'><img src="images/show.png" width="32" alt=""></a>
59             <a href="" title='修改'><img src="images/edit.png" width="32" alt=""></a>
60             <a href="" title='重命名'><img src="images/rename.png" width="32" alt=""></a>
61             <a href="" title='复制'><img src="images/copy.png" width="32" alt=""></a>
62             <a href="" title='剪切'><img src="images/cut.png" width="32" alt=""></a>
63             <a href="" title='删除'><img src="images/delete.png" width="32" alt=""></a>
64             <a href="" title='下载'><img src="images/download.png" width="32" alt=""></a>
65         </td>
66     </tr>
67     <?php            
68                 $i++;
69             }
70         }
71     ?>
72 </table>
73 </body>
74 </html>

common.css:

    body,p,div,ul,ol,table,dl,dd,dt{
        margin:0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    ul,li{
        list-style: none;
        float: left;
    }
    #top{
        width:100%;
        height:48px;
        margin:0 auto;
        background: #E2E2E2;
    }
    #navi a{
        display: block;
        width:48px;
        height: 48px;
    }
    #main{
        margin:0 auto;
        border:2px solid #ABCDEF;
    }
    .small{
        width:25px;
        height:25px;
        border:0;
}
View Code

cikonss.css：

/*
 * Cikonss v1.0
 *
 * URL: https://github.com/zzap/Cikonss
 * License: MIT License
 *
 */

/* Generals */
.icon {
    /* don't change width and height in order to change the size of the icon,
    you can control the size with font-size for different class(es) - below */
    line-height: 100%;
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
    float: left;
}
/* Button like icons */
.icon-square,
.icon-rounded {
    border: .75em solid rgb(242, 242, 242); /* #f2f2f2 */
    background-color: rgb(242, 242, 242); /* #f2f2f2 */
    margin: 0 .5em .5em 0;
    /* for browsers that supports */
    -webkit-box-shadow: 0 0 0 .0625em rgb(226, 226, 226); /* #e2e2e2 */
    -moz-box-shadow: 0 0 0 .0625em rgb(226, 226, 226); /* #e2e2e2 */
    box-shadow: 0 0 0 .0625em rgb(226, 226, 226); /* #e2e2e2 */
}
.icon-rounded {
    border-radius: 1.5em;
}
/*
 * Sizes
 *
 * 5 preset sizes, simply change the font-size or add your custom class.
 *
 */
.icon-small {
    font-size: 1em;
}
.icon-mid {
    font-size: 2em;
}
.icon-large {
    font-size: 4em;
}
.icon-extra-large {
    font-size: 8em;
}
.icon-huge {
    font-size: 12em;
}

/*
 * Icons
 *
 * Icons are somewhat grouped so that you can easily pick the ones you like
 * if the whole file is too large for your project.
 *
 */

/* Home */
.icon-home {
    position: absolute;
    top: 0;
    left: .125em;
    width: .25em;
    height: .5em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-home:before,
.icon-home:after {
    content: "";
    position: absolute;
    border-style: solid;
}
.icon-home:before {
    top: .5em;
    left: 0;
    width: .25em;
    height: .3125em;
    border-width: .1875em .25em 0 .25em;
    border-color: rgb(102, 102, 102); /* #666 */
}
.icon-home:after {
    top: -.5em;
    left: -.125em;
    width: 0;
    height: 0;
    border-width: .5em;
    border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */
}

/* Arrows */
.icon-arrowRight,
.icon-arrowLeft,
.icon-arrowDown,
.icon-arrowUp {
    position: absolute;
    width: .5em;
    height: .5em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-arrowRight:after,
.icon-arrowLeft:after,
.icon-arrowDown:after,
.icon-arrowUp:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: .5em;
    border-style: solid;
}
/* Arrows - Left and Right */
.icon-arrowRight,
.icon-arrowLeft {
    top: .25em;
}
.icon-arrowRight {
    left: 0;
}
.icon-arrowLeft {
    right: 0;
}
.icon-arrowRight:after,
.icon-arrowLeft:after {
    top: -.25em;
}
.icon-arrowRight:after {
    left: .5em;
    border-color: transparent transparent transparent rgb(102, 102, 102); /* #666 */
}
.icon-arrowLeft:after {
    right: .5em;
    border-color: transparent rgb(102, 102, 102) transparent transparent; /* #666 */
}
/* Arrows -  Down and Up */
.icon-arrowDown,
.icon-arrowUp {
    left: .25em;
}
.icon-arrowDown {
    top: 0;
}
.icon-arrowUp,
.icon-arrowDown:after {
    top: .5em;
}
.icon-arrowDown:after,
.icon-arrowUp:after {
    left: -.25em;
}
.icon-arrowDown:after {
    border-color: rgb(102, 102, 102) transparent transparent transparent; /* #666 */
}
.icon-arrowUp:after {
    top: -1em;
    border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */
}

/* Comments */
.icon-comment,
.icon-comment-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: .75em;
    background-color: rgb(102, 102, 102); /* #666 */
    /* for browsers that supports */
    border-radius: .125em;
}
.icon-comment:after,
.icon-comment-text:before,
.icon-comment-text:after {
    content: "";
    position: absolute;
    border-style: solid;
}
.icon-comment-text:before {
    top: .1875em;
    left: .125em;
    width: .75em;
    height: .125em;
    border-width: .09375em 0;
    border-color: rgb(249, 249, 249); /* #f9f9f9 */
}
.icon-comment:after,
.icon-comment-text:after {
    top: .75em;
    left: .25em;
    width: 0;
    height: 0;
    border-width: .125em;
    border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102); /* #666 */
}

/* Mail */
.icon-mail {
    position: absolute;
    top: .15625em;
    left: 0;
    width: 1em;
    height: .75em;
    background-color: rgb(102, 102, 102); /*#666*/
}
.icon-mail:before,
.icon-mail:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-width: .4em .5em;
    border-style: solid;
}
.icon-mail:before {
    top: 0;
    border-color: rgb(249, 249, 249) transparent transparent transparent; /* #f9f9f9 */
}
.icon-mail:after {
    top: -.0625em;
    border-color: rgb(102, 102, 102) transparent transparent transparent; /* #666 */
}

/* Calendar */
.icon-calendar{
    position: absolute;
    top: .125em;
    left: 0;
    width: .875em;
    height: .6875em;
    border-width: .125em .0625em .0625em .0625em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    background-color: rgb(249, 249, 249); /* #f9f9f9 */
    /* for browsers that supports */
    border-radius: .0625em;
}
.icon-calendar:before{
    content: "";
    position: absolute;
    top: -.25em;
    left: .125em;
    width: .375em;
    height: .125em;
    border-width: 0 .125em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
}
.icon-calendar:after{
    content: "15";
    position: absolute;
    top: -.25em;
    left: .25em;
    font-family: Arial, sans-serif;
    font-size: .5em;
    font-weight: bold;
    color: rgb(102, 102, 102); /* #666 */
}

/* Plus */
.icon-plus,
.icon-plus:after {
    position: absolute;
    width: .375em;
    height: .375em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
}
.icon-plus {
    top: 0;
    left: 0;
    border-width: 0 .25em .25em 0;
}
.icon-plus:after {
    content: "";
    top: .375em;
    left: .375em;
    border-width: .25em 0 0 .25em;
}

/* Minus */
.icon-minus {
    position: absolute;
    top: .375em;
    left: 0;
    width: 1em;
    height: .25em;
    background-color: rgb(102, 102, 102); /* #666 */
}

/* File */
.icon-file {
    position: absolute;
    top: 0;
    left: .125em;
    width: .5em;
    height: .75em;
    border-width: .125em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    background-color: rgb(249, 249, 249); /* #f9f9f9 */
    /* for browsers that supports */
    border-radius: .0625em;
}
.icon-file:before {
    content: "";
    position: absolute;
    top: -.125em;
    left: -.125em;
    width: 0;
    height: 0;
    border-width: .15625em;
    border-style: solid;
    border-color: rgb(255, 255, 255) rgb(102, 102, 102) rgb(102, 102, 102) rgb(255, 255, 255); /* #fff and #666 - #fff has to mach body bg*/
}
.icon-square .icon-file:before,
.icon-rounded .icon-file:before {
    border-color: rgb(242, 242, 242) rgb(102, 102, 102) rgb(102, 102, 102) rgb(242, 242, 242); /* #f2f2f2 and #666 - #f2f2f2 has to mach with .icon-square and .icon-rounded bg*/
}

/* Folder */
.icon-folder {
    position: absolute;
    top: .125em;
    left: 0;
    width: 1em;
    height: .875em;
    background-color: rgb(102, 102, 102); /* #666 */
    /* for browsers that supports */
    border-bottom-left-radius: .0625em;
    border-bottom-right-radius: .0625em;
}
.icon-folder:before {
    content: "";
    position: absolute;
    top: -.125em;
    left: .125em;
    width: .375em;
    height: .125em;
    background-color: rgb(102, 102, 102); /* #666 */
    /* for browsers that supports */
    border-top-left-radius: .0625em;
    border-top-right-radius: .0625em;
}

/* Tag */
.icon-tag {
    position: absolute;
    top: 0;
    left: .25em;
    width: .5em;
    height: .75em;
    background-color: rgb(102, 102, 102); /* #666 */
    /* for browsers that supports */
    border-top-left-radius: .0625em;
    border-top-right-radius: .0625em;
}
.icon-tag:before,
.icon-tag:after {
    content: "";
    position: absolute;
    top: .75em;
    width: 0;
    height: 0;
    border-width: .125em;
    border-style: solid;
}
.icon-tag:before {
    left: 0;
    border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102); /* #666 */
}
.icon-tag:after {
    left: .25em;
    border-color: rgb(102, 102, 102) rgb(102, 102, 102) transparent transparent; /* #666 */
}

/* Desktop */
.icon-desktop {
    position: absolute;
    top: 0;
    left: 0;
    width: .875em;
    height: .625em;
    border-width: .0625em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    background-color: rgb(249, 249, 249); /* #f9f9f9 */
    /* for browsers that supports */
    border-radius: .0625em;
}
.icon-desktop:before,
.icon-desktop:after {
    content: "";
    position: absolute;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-desktop:before {
    top: .6875em;
    left: .3125em;
    width: .25em;
    height: .1875em;
}
.icon-desktop:after {
    top: .875em;
    left: .125em;
    width: .625em;
    height: .0625em;
}

/* Tablet */
.icon-tablet {
    position: absolute;
    top: .0625em;
    left: 0;
    width: .75em;
    height: .625em;
    border-width: .125em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    background-color: rgb(249, 249, 249); /* #f9f9f9 */
    /* for browsers that supports */
    border-radius: .0625em;
}
.icon-tablet:before {
    content: "";
    position: absolute;
    top: .28125em;
    left: -.09375em;
    width: .0625em;
    height: .0625em;
    background-color: rgb(255, 255, 255); /* #fff */
    /* for browsers that supports */
    border-radius: .0625em;
}

/* Phone */
.icon-phone {
    position: absolute;
    top: 0;
    left: .1875em;
    width: .5em;
    height: .75em;
    border-width: .125em .0625em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    background-color: rgb(249, 249, 249); /* #f9f9f9 */
    /* for browsers that supports */
    border-radius: .0625em;
}
.icon-phone:after {
    content: "";
    position: absolute;
    top: .78125em;
    left: .21875em;
    width: .0625em;
    height: .0625em;
    background-color: rgb(255, 255, 255); /* #fff */
    /* for browsers that supports */
    border-radius: .0625em;
}

/* Menu */
.icon-menu,
.icon-menu:before,
.icon-menu:after {
    position: absolute;
    left: 0;
    width: 1em;
    height: .25em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-menu {
    top: .0625em;
}
.icon-menu:before {
    content: "";
    top: .3125em;
}
.icon-menu:after {
    content: "";
    top: .625em;
}

/* Download  and Upload */
.icon-download,
.icon-upload {
    position: absolute;
    left: .375em;
    width: .25em;
    height: .5em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-download {
    top: 0;
}
.icon-upload {
    top: .25em;
}
.icon-download:before,
.icon-upload:before {
    content: "";
    position: absolute;
    left: -.125em;
    width: 0;
    height: 0;
    border-width: .25em;
    border-style: solid;
}
.icon-download:before {
    top: .5em;
    border-color: rgb(102, 102, 102) transparent transparent transparent; /* #666 */
}
.icon-upload:before {
    top: -.5em;
    border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */
}
.icon-download:after,
.icon-upload:after {
    content: "";
    position: absolute;
    left: -.375em;
    width: .75em;
    height: .125em;
    border-width: 0 .125em .125em .125em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
}
.icon-download:after {
    top: .75em;
}
.icon-upload:after {
    top: .5em;
}

/* Page Templates */
.icon-tpl-full,
.icon-tpl-side-r,
.icon-tpl-side-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: .25em;
    background-color: rgb(102, 102, 102);
}
.icon-tpl-full:after,
.icon-tpl-side-r:before,
.icon-tpl-side-r:after,
.icon-tpl-side-l:before,
.icon-tpl-side-l:after {
    content: "";
    position: absolute;
    top: .3125em;
    height: .6875em;
    background-color: rgb(102, 102, 102);
}
.icon-tpl-full:after,
.icon-tpl-side-r:before,
.icon-tpl-side-l:before {
    left: 0;
}
.icon-tpl-full:after {
    width: 1em;
}
.icon-tpl-side-r:before,
.icon-tpl-side-l:after {
    width: .6875em;
}
.icon-tpl-side-r:after,
.icon-tpl-side-l:before {
    width: .25em;
}
.icon-tpl-side-r:after {
    left: .75em;
}
.icon-tpl-side-l:after {
    left: .3125em;
}

/* Views */
/* List view */
.icon-list-view,
.icon-list-view:before,
.icon-list-view:after {
    position: absolute;
    width: .0625em;
    height: .25em;
    border-width: 0 .6875em 0 .25em;
    border-style: solid;
    border-color: rgb(102, 102, 102);
}
.icon-list-view {
    top: .0625em;
    left: 0;
}
.icon-list-view:before,
.icon-list-view:after {
    content: "";
    left: -.25em;
}
.icon-list-view:before {
    top: .3125em;
}
.icon-list-view:after {
    top: .625em;
}
/* Grid view */
.icon-grid-view,
.icon-grid-view:before {
    position: absolute;
    width: .0625em;
    height: .46875em;
    border-width: 0 .46875em;
    border-style: solid;
    border-color: rgb(102, 102, 102);
}
.icon-grid-view {
    top: 0;
    left: 0;
}
.icon-grid-view:before {
    content: "";
    top: .53125em;
    left: -.46875em;
}

/* Camera */
.icon-camera {
    position: absolute;
    top: .25em;
    left: 0;
    width: .75em;
    height: .5em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-camera:after {
    content: "";
    position: absolute;
    top: 0;
    left: .5em;
    width: 0;
    height: 0;
    border-width: .25em;
    border-style: solid;
    border-color: transparent rgb(102, 102, 102) transparent transparent; /* #666 */
}

/* Image */
.icon-image {
    position: absolute;
    top: .125em;
    left: 0;
    width: .875em;
    height: .625em;
    border-width: .0625em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    /* for browsers that supports */
    border-radius: .0625em;
}
.icon-image:before,
.icon-image:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */
}
.icon-image:before {
    left: 0;
    border-width: .25em .25em .125em .125em;
}
.icon-image:after {
    right: 0;
    border-width: .25em .25em .375em .375em;
}

/* Player controls */
/* Play */
.icon-play {
    position: absolute;
    top: 0;
    left: .1875em;
    width: 0;
    height: 0;
    border-width: .5em .625em;
    border-style: solid;
    border-color: transparent transparent transparent rgb(102, 102, 102); /* #666 */
}
/* Stop */
.icon-stop {
    position: absolute;
    top: .0625em;
    left: .0625em;
    width: .875em;
    height: .875em;
    background-color: rgb(102, 102, 102); /* #666 */
}
/* Pause */
.icon-pause,
.icon-pause:after {
    position: absolute;
    width: .25em;
    height: .875em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-pause {
    top: .0625em;
    left: .21875em;
}
.icon-pause:after {
    content: "";
    top: 0;
    left: .3125em;
}
/* Forward, Next, Rewind and Prev */
.icon-forward,
.icon-next,
.icon-rewind,
.icon-prev,
.icon-forward:after,
.icon-next:before,
.icon-rewind:after,
.icon-prev:before {
    position: absolute;
    width: 0;
    height: 0;
    border-width: .4375em;
    border-style: solid;
}
.icon-forward,
.icon-next,
.icon-rewind,
.icon-prev {
    top: .0625em;
}
.icon-forward:after,
.icon-next:before,
.icon-rewind:after,
.icon-prev:before,
.icon-next:after,
.icon-prev:after {
    content: "";
    top: -.4375em;
}
.icon-forward,
.icon-next,
.icon-forward:after,
.icon-next:before {
    border-color: transparent transparent transparent rgb(102, 102, 102); /* #666 */
}
.icon-rewind,
.icon-prev,
.icon-rewind:after,
.icon-prev:before {
    border-color: transparent rgb(102, 102, 102) transparent transparent; /* #666 */
}
.icon-forward {
    left: .0625em;
}
.icon-rewind {
    right: .0625em;
}
.icon-next,
.icon-forward:after,
.icon-next:before {
    left: 0;
}
.icon-prev,
.icon-rewind:after,
.icon-prev:before {
    right: 0;
}
.icon-next:after,
.icon-prev:after {
    position: absolute;
    width: .125em;
    height: .875em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-next:after {
    left: .4375em;
}
.icon-prev:after {
    right: .4375em;
}

/* Stats */
.icon-stats,
.icon-stats:before {
    position: absolute;
    width: .3125em;
    border-width: 0 .1875em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
}
.icon-stats {
    top: 0;
    left: 0;
    height: .875em;
}
.icon-stats:before {
    content: "";
    top: .3125em;
    left: .0625em;
    height: .5625em;
}
.icon-stats:after {
    content: "";
    position: absolute;
    top: .875em;
    left: -.1875em;
    width: 1em;
    height: .125em;
    background-color: rgb(102, 102, 102); /* #666 */
}

/* Battery */
.icon-battery-empty,
.icon-battery-1_4,
.icon-battery-half,
.icon-battery-3_4,
.icon-battery-full {
    position: absolute;
    top: .25em;
    left: 0;
    width: .75em;
    height: .375em;
    border-width: .0625em;
    border-style: solid;
    border-color: rgb(102, 102, 102); /* #666 */
    background-color: rgb(249, 249, 249); /* #f9f9f9 */
}
.icon-battery-empty:after,
.icon-battery-1_4:after,
.icon-battery-half:after,
.icon-battery-3_4:after,
.icon-battery-full:after {
    content: "";
    position: absolute;
    top: .0625em;
    left: .8125em;
    width: .125em;
    height: .25em;
    background-color: rgb(102, 102, 102); /* #666 */
}
.icon-battery-1_4:before,
.icon-battery-half:before,
.icon-battery-3_4:before,
.icon-battery-full:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: .375em;
    background-color: rgb(153, 153, 153); /* #999 */
}
.icon-battery-1_4:before {
    width: .1875em;
}
.icon-battery-half:before {
    width: .375em;
}
.icon-battery-3_4:before {
    width: .5625em;
}
.icon-battery-full:before {
    width: .75em;
}

/* Sound */
.icon-sound-mute,
.icon-sound-normal,
.icon-sound-loud {
    position: absolute;
    top: .375em;
    left: .09375em;
    width: .25em;
    height: .25em;
    background-color: rgb(102, 102, 102);
}
.icon-sound-mute:before,
.icon-sound-normal:before,
.icon-sound-loud:before {
    content: "";
    position: absolute;
    top: -.3125em;
    left: -.3125em;
    width: .375em;
    height: .375em;
    border-width: .25em;
    border-style: solid;
    border-color: transparent rgb(102, 102, 102) transparent transparent;
}
.icon-sound-normal:after,
.icon-sound-loud:after {
    content: "";
    position: absolute;
    top: -.125em;
    left: .625em;
    width: .0625em;
    height: .53125em;
    border-style: solid;
    border-color: rgb(102, 102, 102);
}
.icon-sound-normal:after {
    border-width: 0 0 0 .0625em;
}
.icon-sound-loud:after {
    border-width: 0 .0625em;
}
View Code

 

相关文章