Heim >Web-Frontend >HTML-Tutorial >CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose
CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:03912Durchsuche
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> 界面显示如下图所示
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：在DIV中自动换行_html/css_WEB-ITnoseNächster Artikel：开发一个基于纯网页的棋牌游戏，需要掌握那些技术？_html/css_WEB-ITnose