首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS模拟并美化的表单控件完整实例

Posted in Javascript onAugust 19, 2015

本文实例讲述了JS模拟并美化的表单控件效果实例。分享给大家供大家参考。具体如下：

这里演示使用JS美化并模拟网页表单控件，十分漂亮的表单效果，使用时可以将代码内的JS保存为文件, 方便调用，使用方法：WellForm(element) //element 为表单元素。

运行效果截图如下：

JS模拟并美化的表单控件完整实例

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟表单控件</title>
<style type="text/css"> 
/* ----表单控件CSS开始---- ↓ */
.WellForm *{margin:0;padding:0;}
.WellForm{font-size:12px;font-family:arial;line-height:21px;}
.WellForm pre{float:left;margin-right:10px;}
/*background*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText,
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM,
.WellForm .WellRadio,
.WellForm .WellCheckBox,
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton
{background:url(images/WellForm.gif) no-repeat;}
/*WellText*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}
.WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}
.WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}
.WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px\9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}
.WellForm .WellTextH{background-position:0 -63px;}
/*WellSelect*/
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}
.WellForm .SelectL{width:3px;background-position:0 -84px;}
.WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}
.WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}
.WellForm .WellSelect select{display:none;}
.WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}
.WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}
.WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}
.WellForm .WellSelect ul li.hover{background:#333;}
/*WellTextArea*/
.WellForm .WellTextArea{float:left;}
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM
{height:5px;overflow:hidden;}
.WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}
.WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}
.WellForm .WellTextArea .T .TL{background-position:0 -126px;}
.WellForm .WellTextArea .TH .TL{background-position:0 -131px;}
.WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}
.WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}
.WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}
.WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}
.WellForm .WellTextArea .B .BL{background-position:0 -146px;}
.WellForm .WellTextArea .BH .BL{background-position:0 -151px;}
.WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}
.WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}
.WellForm .WellTextArea .M,
.WellForm .WellTextArea .M .MR
{float:left;background:url(images/TextArea-1.gif) repeat-y;}
.WellForm .WellTextArea .M{background-position:0 0;}
.WellForm .WellTextArea .M .MR{background-position:right 0;}
.WellForm .WellTextArea .MH,
.WellForm .WellTextArea .MH .MR
{float:left;background:url(images/TextArea-2.gif) repeat-y;}
.WellForm .WellTextArea .MH{background-position:0 0;}
.WellForm .WellTextArea .MH .MR{background-position:right 0;}
.WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(images/TextArea.gif);font-family:arial;font-size:12px;resize:none;}
/*WellRadio*/
.WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}
.WellForm .WellRadioH{background-position:-15px -284px;}
.WellForm .WellRadio input{margin-top:13px;display:none;}
/*WellCheckBox*/
.WellForm .WellCheckBox{float:left; width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}
.WellForm .WellCheckBoxH{background-position:0 -283px;}
.WellForm .WellCheckBox input{margin-top:12px;display:none;}
/*WellButton*/
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}
.WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}
.WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}
.WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0\9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}
.WellForm .WellButtonH{background-position:0 -244px;}
/* ----表单控件CSS结束---- ↑ */
form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}
form .item{float:left;clear:both;width:100%;margin-bottom:10px;}
.WellForm label{float:left;width:4em;height:21px;text-align:right;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var aForm = document.getElementsByTagName("form");
 //多个表单
 for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);
};
/*------------------------------------------------- +
 可以将以下JS保存为文件, 方便调用
 使用方法：WellForm(element) //element 为表单元素
 +------------------------------------------------- */
// 获取class
function getClass(sClass, oParent)
{
 var aClass = []; 
 var reClass = new RegExp("(^| )" + sClass + "( |$)");
 var aElem = (oParent || document).getElementsByTagName("*");
 for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
 return aClass
}
// class是否存在
function hasClass(obj, sClass)
{
 var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
 return reg.test(obj.className)
}
// 添加class
function addClass(obj, sClass)
{
 hasClass(obj, sClass) || (obj.className += " "+sClass)
}
// 删除class
function removeClass(obj, sClass)
{
 if (hasClass(obj, sClass))
 {
  var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
  obj.className = obj.className.replace(reg, "");
 }
}
// 上一个元素
function prevElement(obj)
{
 return obj.previousSibling || obj.previousElementSibling || null 
}
// 下一个元素
function nextElement(obj)
{
 return obj.nextSibling || obj.nextElementSibling || null 
}
// 自定义表单函数
function WellForm(form)
{
 var i = 0;
 var zIndex = 1;
 var aInput = form.getElementsByTagName("input"); 
 var aSelect = form.getElementsByTagName("select");
 var aTextArea = form.getElementsByTagName("textarea");
 form.className = "WellForm";
 /* 单行文本框 */
 var aText = [];
 for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]);
 for (i = 0; i < aText.length; i++)
 {
  var oTextL = document.createElement("div");
  var oTextR = document.createElement("div"); 
  oTextL.className = "TextL";
  oTextR.className = "TextR";
  aText[i].className = "WellText";
  aText[i].parentNode.insertBefore(oTextL, aText[i]);  
  aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i]));
  //获取焦点
  aText[i].onfocus = function ()
  {
   addClass(this, "WellTextH");
   addClass(prevElement(this), "TextLH");
   addClass(nextElement(this), "TextRH")
  };
  //失去焦点
  aText[i].onblur = function ()
  {
   removeClass(this, "WellTextH");
   removeClass(prevElement(this), "TextLH");
   removeClass(nextElement(this), "TextRH")
  }
 }
 /* 多行文本框 */ 
 for (i = 0; i < aTextArea.length; i++)
 {
  var oTextArea = document.createElement("div");
  oTextArea.className = "WellTextArea";
  //上边框
  var oT = document.createElement("div");
  var oTL = document.createElement("div");
  var oTM = document.createElement("div");  
  oT.className = "T";
  oTL.className = "TL";
  oTM.className = "TM";  
  oTL.appendChild(oTM);
  oT.appendChild(oTL);
  //中间边框
  var oM = document.createElement("div");
  var oMR = document.createElement("div");  
  oM.className = "M";
  oMR.className = "MR";  
  oM.appendChild(oMR);
  //下边框
  var oB = document.createElement("div");
  var oBL = document.createElement("div");
  var oBM = document.createElement("div");  
  oB.className = "B";
  oBL.className = "BL";
  oBM.className = "BM";  
  oBL.appendChild(oBM);
  oB.appendChild(oBL);  
  //插入结构
  aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]);  
  oMR.appendChild(aTextArea[i]);
  oTextArea.appendChild(oT);  
  oTextArea.appendChild(oM);
  oTextArea.appendChild(oB);  
  oTextArea.style.width = oMR.offsetWidth + "px";
  //获取焦点
  aTextArea[i].onfocus = function ()
  {
   var M = this.parentNode.parentNode;
   addClass(M, "MH");
   addClass(prevElement(M), "TH");
   addClass(nextElement(M), "BH")
  };
  aTextArea[i].onblur = function ()
  {
   var M = this.parentNode.parentNode;
   removeClass(M, "MH");
   removeClass(prevElement(M), "TH");
   removeClass(nextElement(M), "BH")
  }
 }
 /* 单选框 */
 var aRadio = [];
 for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]);
 for (i = 0; i < aRadio.length; i++)
 {
  var oRadio = document.createElement("div");
  oRadio.className = "WellRadio"; 
  aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]);
  oRadio.appendChild(aRadio[i]);
  aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH");
  oRadio.onclick = function ()
  {
   var siblings = getClass("WellRadio", this.parentNode);
   for (i = 0; i < siblings.length; i++)
   {
    removeClass(siblings[i], "WellRadioH");
    siblings[i].children[0].checked = false;
   }
   addClass(this, "WellRadioH");
   this.children[0].checked = true
  }
 }
 /* 复选框 */
 var aCheckBox = [];
 for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]);
 for (i = 0; i < aCheckBox.length; i++)
 {
  var oCheckBox = document.createElement("div");
  oCheckBox.className = "WellCheckBox"; 
  aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]);
  oCheckBox.appendChild(aCheckBox[i]);
  aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH");
  oCheckBox.onclick = function ()
  {   
   this.children[0].checked = !this.children[0].checked;
   this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH")
  }
 }
 /* 按钮 */
 var aButton = [];
 for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]);
 for (i = 0; i < aButton.length; i++)
 {
  var oBtnL = document.createElement("div");
  var oBtnR = document.createElement("div");  
  oBtnL.className = "ButtonL";
  oBtnR.className = "ButtonR";  
  aButton[i].className = "WellButton";
  aButton[i].parentNode.insertBefore(oBtnL, aButton[i]);
  aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i]));
  //鼠标移入
  aButton[i].onmouseover = function ()
  {
   addClass(this, "WellButtonH");
   addClass(prevElement(this), "ButtonLH");
   addClass(nextElement(this), "ButtonRH"); 
  };
  //鼠标移出
  aButton[i].onmouseout = function ()
  {
   removeClass(this, "WellButtonH");
   removeClass(prevElement(this), "ButtonLH");
   removeClass(nextElement(this), "ButtonRH"); 
  }
 }
 /* 下拉菜单 */
 for (i = 0; i < aSelect.length; i++)
 {
  var oFragment = document.createDocumentFragment();
  var oSelectL = document.createElement("div");
  var oSelectR = document.createElement("div");
  var oWellSelect = document.createElement("div");
  var oEm = document.createElement("em");
  var oUl = document.createElement("ul");
  oSelectL.className = "SelectL";
  oSelectR.className = "SelectR";
  oWellSelect.className = "WellSelect";  
  //插入结构
  aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]);
  aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i]));
  oUl.style.width = oWellSelect.style.width = aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px";  
  for (var j = 0; j < aSelect[i].options.length; j++)
  {
   var oLi = document.createElement("li");
   oLi.innerHTML = aSelect[i].options[j].text;
   oLi["sValue"] = aSelect[i].options[j].value;
   oFragment.appendChild(oLi);
   aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text)
  }
  oUl.appendChild(oFragment);
  oWellSelect.appendChild(oEm);
  oWellSelect.appendChild(oUl);
  aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]);
  oWellSelect.appendChild(aSelect[i]);
  oWellSelect.onclick = oSelectR.onclick = function (event)
  {
   var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0];
   var aUl = form.getElementsByTagName("ul");
   this.parentNode.style.position = "relative";
   this.parentNode.style.zIndex = zIndex++;
   o.style.display = o.style.display == "block" ? "none" : "block";
   for (i = 0; i < aUl.length; i++)
   {
    if (o == aUl[i]) continue;
    aUl[i].style.display = "none";
   }
   var aLi = o.getElementsByTagName("li");
   for (i = 0; i < aLi.length; i++)
   {
    aLi[i].onmouseover = function ()
    {
     this.className = "hover" 
    };
    aLi[i].onmouseout = function ()
    {
     this.className = "" 
    };
    aLi[i].onclick = function ()
    {
     prevElement(this.parentNode).innerHTML = this.innerHTML;
     nextElement(this.parentNode).value = this.sValue
    }
   }
   (event || window.event).cancelBubble = true;
   document.onclick = function ()
   {
    o.style.display = "none" 
   }
  }
 }
}
</script>
</head>
<body>
<form>
 <div class="item"><label>姓名：</label><input type="text" name="name" /></div>
 <div class="item"><label>电话：</label><input type="text" name="tel" /></div>
 <div class="item">
  <label>性别：</label>
  <select name="sex">
   <option value="男孩">男孩</option>
   <option value="女孩" selected="selected">女孩</option>
   <option value="人妖">人妖</option>
  </select>
 </div>
 <div class="item">
  <label>生日：</label>
  <select name="month">
   <option value="1">1月</option>
   <option value="2">2月</option>
   <option value="3">3月</option>
   <option value="4">4月</option>
   <option value="5">5月</option>
   <option value="6">6月</option>
   <option value="7" selected="selected">7月</option>
   <option value="8">8月</option>
   <option value="9">9月</option>
   <option value="10">10月</option>
  </select>
  <select name="day">
   <option value="1">1号</option>
   <option value="2">2号</option>
   <option value="3">3号</option>
   <option value="4">4号</option>
   <option value="5">5号</option>
   <option value="6" selected="selected">6号</option>
   <option value="7">7号</option>
   <option value="8">8号</option>
   <option value="9">9号</option>
   <option value="10">10号</option>
   <option value="11">11号</option>
   <option value="12">12号</option>
   <option value="13">13号</option>
   <option value="14">14号</option>
   <option value="15">15号</option>
   <option value="16">16号</option>
  </select>
  <select name="year">
   <option value="2000">2000年</option>
   <option value="2001">2001年</option>
   <option value="2002">2002年</option>
   <option value="2003">2003年</option>
   <option value="2004">2004年</option>
   <option value="2005">2005年</option>
   <option value="2006">2006年</option>
   <option value="2007">2007年</option>
   <option value="2008">2008年</option>
   <option value="2009">2009年</option>
   <option value="2010" selected="selected">2010年</option>
   <option value="2011">2011年</option>
   <option value="2012">2012年</option>
   <option value="2013">2013年</option>
  </select>
 </div>
 <div class="item">
  <label>婚姻：</label>
  <input type="radio" name="marry" value="已婚" /><pre>已婚</pre>
  <input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre>
 </div>
 <div class="item">
  <label>爱好：</label>
  <input type="checkbox" name="like" value="吃饭" /><pre>吃饭</pre>
  <input type="checkbox" name="like" value="睡觉" /><pre>睡觉</pre>
  <input type="checkbox" name="like" value="上网" checked="checked" /><pre>上网</pre>
  <input type="checkbox" name="like" value="打游戏" checked="checked" /><pre>打游戏</pre>
 </div>
 <div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div>
 <div class="item"><label>备注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div>
 <div class="item"><label>说明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div>
 <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
<form>
 <div class="item"><label>用户名：</label><input type="text" name="username" /></div>
 <div class="item"><label>密码：</label><input type="password" name="pwd" /></div>
 <div class="item"><label>验证码：</label><input type="text" name="code" style="width:60px;" /></div>
 <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS模拟并美化的表单控件完整实例

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
jquery小火箭返回顶部代码分享
Aug 19 #Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 #Javascript
js实现当前输入框高亮显示的方法
Aug 19 #Javascript
jQuery实现的仿select功能代码
Aug 19 #Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 #Javascript
Sqlite(2) 多维数组(1) android studio(3) 安卓(1) IDEA(2) 移动开发(2) 嵌套(1) 循环(3) 多线程(6) OpenLayer(1)
You might like
php MySQL与分页效率
2008/06/04 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Node.js实现用户评论社区功能（体验前后端开发的乐趣）
2019/05/09 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python 中如何写注释
2020/08/28 Python
介绍一下Make? 为什么使用make
2016/07/31 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
球队口号
2014/06/18 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
小学三年级作文之写景
2019/11/05 职场文书
keepalived + nginx 实现高可用方案
2022/12/24 Servers