CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose-HTML-Tutorial-php.cn

CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose
WBOY
Freigeben： 2016-06-24 11:54:03
Original
915 Leute haben es durchsucht
 1 <!doctype html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS压缩混淆 / 格式化 / 美化工具</title> 5 <style type="text/csss"> 6 @charset "utf-8"; 7 /* CSS Document */ 8  9 *{margin:0; padding:0; font-family:"Microsoft YaHei UI"; font-size:14px; color:#444;}10 img{border:none;}11 li {list-style:none;}12 a{text-decoration:none}13 #wrap{ width:960px; margin:0 auto;}14 #head, #mainbody, #foot{ width:100%;}15 16 /*表单控件样式 start*/17 .tarea { margin-left:20px; width:90%; height:220px; border:1px solid #e6e6e6; margin-bottom:12px; box-shadow:inset 1px 1px 1px #eee; padding:4px; border-radius:2px; line-height:18px; color:#CCC; font-size:12px;}18 .tarea-on{color:#000;}19 textarea{ overflow:auto; vertical-align:top;}20 .sbtn{ cursor:pointer; display: inline-block; vertical-align:middle;height:27px; line-height:27px; padding:0 12px; border-radius:2px; border:1px solid #ddd; text-align:center;}21 /*表单控件样式 end*/22 23 .subbtn { margin-left:50px; margin-bottom:10px;}24 .center h2{ margin-left:30px;}25 .sitetip{ margin-bottom:12px;}26 27 </style>28 </head>29 <body>30 <div id="wrap">31     <div id="head"></div>32     <div id="mainbody">33         <div class="center">34             <h1>CSS压缩混淆 / 格式化 / 美化工具</h1>35             <hr />36             <h2 class="sitetip">贴入要格式化或压缩的CSS代码：</h2>37             <textarea id="code" class="tarea">格式化或压缩的CSS代码</textarea>38             <div class="subbtn">39                 <input type="button" onClick="CSS('packAdv')" value="高级压缩" class="sbtn" />40                 <input type="button" onClick="CSS('pack')" value="普通压缩" class="sbtn" />41                 <input type="button" onClick="CSS('format')" value="格式化" class="sbtn" />42             </div>43             <h2 class="sitetip">转换后的css代码： </h2>44             <textarea id="packer" class="tarea tarea-on"></textarea>45         </div>46     </div>47     <div id="foot"></div>48 </div>49 <script type="text/javascript">50 /**51 * css 压缩 格式化52 */53 var CSSCoder = {54     format: function (s) {//格式化55         s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");56         s = s.replace(/;\s*;/g, ";");57         s = s.replace(/\,[\s\.\#\d]*{/g, "{");58         s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");59         s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");60         s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");61         return s;62     },63     packAdv: function (s) {//高级压缩64         s = s.replace(/\/\*(.|\n)*?\*\//g, "");65         s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");66         s = s.replace(/\,[\s\.\#\d]*\{/g, "{");67         s = s.replace(/;\s*;/g, ";");68         s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);69         return (s == null) ? "" : s[1];70     },71     pack: function (s) {//普通压缩72         s = s.replace(/\/\*(.|\n)*?\*\//g, "");73         s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");74         s = s.replace(/\,[\s\.\#\d]*\{/g, "{");75         s = s.replace(/;\s*;/g, ";");76         s = s.replace(/;\s*}/g, "}");77         s = s.replace(/([^\s])\{([^\s])/g, "$1{$2");78         s = s.replace(/([^\s])\}([^\n]s*)/g, "$1}\n$2");79         return s;80     }81 };82 83 function CSS(s) {84     document.getElementById("packer").value = CSSCoder[s](document.getElementById("code").value);85 }86 </script>87 </body>88 </html>
Nach dem Login kopieren
界面显示如下图所示