js+css实现select的美化效果


Posted in Javascript onMarch 24, 2016

先给大家看一看美化之后的效果图:

js+css实现select的美化效果

CSS:

.div-select
{
  border: solid 1px #999;
  height: 40px;
  line-height: 40px;
  cursor: default;
}

.div-select-text
{
  float: left;
  background-color: #fff;
  height: 100%;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

  .div-select-text > div
  {
    padding: 3px;
    line-height: 34px;
  }

.div-select-arrow
{
  background-color: #fff;
  float: right;
  width: 40px;
  height: 100%;
  color: #999;
  cursor: default;
}

  .div-select-arrow > div
  {
    border: solid 1px #999;
    margin: 2px;
    height: 34px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
  }

.div-select-list
{
  position: absolute;
  float: left;
  top: 100px;
  left: 100px;
  border: solid 1px #999;
  max-height: 300px;
  overflow: auto;
  background-color: #9f9;
  display: none;
  z-index: 9100;
}

  .div-select-list .div-select-item:nth-child(2n+1)
  {
    background-color: #fff;
  }

.div-select-item
{
  height: 50px;
  line-height: 50px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #f2f2f2;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

.div-select-item-hover
{
  background-color: #3399ff!important;
}

.div-select-selected
{
  background-color: #3399ff !important;
}

JS:

//select美化
var divSelectListIndex = 0;

$(function () {
  initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
  $(".div-select-target").each(function () {
    divSelectListIndex++;
    var select = $(this);

    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }

    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
    }

    var div = select.next("div");
    var divText = div.find(".div-select-text");
    var divSelect = div.find(".div-select");
    var divArrow = div.find(".div-select-arrow");
    var list = $(".div-select-list-" + divSelectListIndex);

    function updateText(item) {
      divText.find("div").html(item.html());
    }

    select.find("option").each(function () {
      var option = $(this);
      var text = option.html();
      var value = option.attr("value");
      list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      list.find(".div-select-item:last").click(function () {
        var item = $(this);
        var value = item.attr("value");
        select.val(value);
        select.change();
        list.find(".div-select-selected").removeClass("div-select-selected");
        item.addClass("div-select-selected");
        updateText(item);
        list.hide();
      });

      list.find(".div-select-item:last").mouseenter(function () {
        var item = $(this);
        var selectedMark = list.find(".div-select-selected");
        selectedMark.removeClass("div-select-selected");
        selectedMark.addClass("div-select-selected-mark");
        list.find(".div-select-item-hover").removeClass("div-select-item-hover");
        item.addClass("div-select-item-hover");
        updateText(item);
      });
    });

    list.mouseleave(function () {
      var selectedMark = list.find(".div-select-selected-mark");
      if (list.find(".div-select-selected").length == 0) {
        selectedMark.addClass("div-select-selected");
        updateText(selectedMark);
      }
      selectedMark.removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
    });

    if (select.attr("width")) {
      divSelect.width(select.attr("width") - 2);
      divText.width(divSelect.width() - divArrow.width());
      if (select.attr("width") > list.width()) {
        list.width(divSelect.width());
      }
    }

    div.keydown(function (e) {
      list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").addClass("div-select-selected");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
      if (e.keyCode == 40) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.next(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:first");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(0);
        } else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() + nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        return false;
      }
      if (e.keyCode == 38) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.prev(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:last");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(list.find(".div-select-item").length * nextSelected.height());
        }
        else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() - nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        return false;
      }
      if (e.keyCode == 13) {
        var selectedItem = list.find(".div-select-selected");
        var value = selectedItem.attr("value");
        select.val(value);
        list.hide();
        select.change();
      }
    });

    divSelect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
      });

      if (list.css("display") == "none") {
        list.show();
      }
      else {
        list.hide();
      }

      list.css("top", divSelect.offset().top + divSelect.height() + 1);
      list.css("left", divSelect.offset().left);
      if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divSelect.width()) {
        list.width(divSelect.width());
      }

      var currentSelected = list.find(".div-select-selected");
      if (currentSelected.position().top > list.height() - currentSelected.height()) {
        list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);
      }
      return false;
    });

    $("html,body").bind("click", function () {
      list.hide();
    });
    list.click(function () {
      return false;
    });

    function initSelect() {
      list.find(".div-select-selected").removeClass("div-select-selected");
      var matchItem = list.find(".div-select-item[value='" + select.val() + "']");
      if (matchItem.length > 0) {
        matchItem.addClass("div-select-selected");
        updateText(matchItem);
      }
    }
    initSelect();
    select.change(function () {
      initSelect();
    });
  }); // $(".div-select-target").each
}

2、如何使用:

 第1步、引用CSS和JS:

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

第2步、给select控件加上class="div-select-target" width="200",其中class="div-select-target"是必须的,width="200"是可选的。完整HTML代码如下:

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">
  <select name="sel" class="div-select-target" width="200" >
    <option value="1">中国</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
    <option value="4">英国</option>
    <option value="5">俄罗斯</option>
    <option value="6">德国</option>
    <option value="7">韩国</option>
    <option value="8">日本</option>
    <option value="9">印度</option>
    <option value="10">巴西</option>
    <option value="11">意大利</option>
    <option value="12">这个国家的名称很长很长很长很长很长很长很长很长</option>
    <option value="13">瑞士</option>
    <option value="14">越南</option>
    <option value="15">缅甸</option>
    <option value="16">泰国</option>
    <option value="17">加拿大</option>
    <option value="18" selected="selected">南非</option>
    <option value="19">澳大利亚</option>
    <option value="20">新西兰</option>
    <option value="21">挪威</option>
    <option value="22">巴勒斯坦</option>
    <option value="23">以色列</option>
    <option value="24">新加坡</option>
    <option value="25">马来西亚</option>
    <option value="26">波兰</option>
    <option value="27">国家27</option>
    <option value="28">国家28</option>
    <option value="29">国家29</option>
    <option value="30">国家30</option>
    <option value="31">国家31</option>
    <option value="32">国家32</option>
    <option value="33">国家33</option>
    <option value="34">国家34</option>
    <option value="35">国家35</option>
    <option value="36">国家36</option>
    <option value="37">国家37</option>
    <option value="38">国家38</option>
  </select>
</div>
<div style="border: solid 1px #f99; margin: 50px; padding: 50px; margin-top: 700px; margin-bottom: 700px;">
  <select name="sel" class="div-select-target" width="200" >
    <option value="1">中国</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
    <option value="4">英国</option>
    <option value="5">俄罗斯</option>
    <option value="6" selected="selected">德国</option>
    <option value="7">韩国</option>
    <option value="8">日本</option>
  </select>
</div>

二、滚动条美化版:

CSS:

.div-select
{
  border: solid 1px #999;
  height: 40px;
  line-height: 40px;
  cursor: default;
}

.div-select-text
{
  float: left;
  background-color: #fff;
  height: 100%;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
  font-size: 16px;
  font-family: 微软雅黑,雅黑;
}

  .div-select-text > div
  {
    padding: 3px;
    line-height: 34px;
  }

.div-select-arrow
{
  background-color: #fff;
  float: right;
  width: 40px;
  height: 100%;
  color: #999;
  cursor: default;
}

  .div-select-arrow > div
  {
    border: solid 1px #999;
    margin: 2px;
    height: 34px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
  }

.div-select-list
{
  position: absolute;
  float: left;
  top: 100px;
  left: 100px;
  border: solid 1px #999;
  max-height: 300px;
  overflow: hidden;
  background-color: #9f9;
  display: none;
  z-index: 9100;
  font-size: 16px;
  font-family: 微软雅黑,雅黑;
}

  .div-select-list .div-select-item:nth-child(2n+1)
  {
    background-color: #fff;
  }

.div-select-item
{
  height: 50px;
  line-height: 50px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #f2f2f2;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

.div-select-item-hover
{
  background-color: #3399ff!important;
}

.div-select-selected
{
  background-color: #3399ff !important;
}

.div-select-list-scrollbar
{
  position: absolute;
  float: left;
  border: solid 1px #999;
  border-left: 0;
  background-color: #e8e8ec;
  width: 40px;
  height: 300px;
  display: none;
  cursor: default;
  z-index: 9101;
}

.div-select-scrollbar-up
{
  border-bottom: solid 1px #fff;
  height: 39px;
  font-size: 22px;
  line-height: 39px;
  color: #999;
  background-color: #cdcdcd;
  text-align: center;
}

.div-select-scrollbar-pos
{
  height: 220px;
}

  .div-select-scrollbar-pos > div:last-child
  {
    width: 40px;
    height: 20px;
    background-color: #cdcdcd;
  }

.div-select-scrollbar-down
{
  border-top: solid 1px #fff;
  height: 39px;
  font-size: 22px;
  line-height: 39px;
  color: #999;
  background-color: #cdcdcd;
  text-align: center;
}

JS:

//select美化
var divSelectListIndex = 0;

$(function () {
  initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
  $(".div-select-target").each(function () {
    divSelectListIndex++;
    var select = $(this);

    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }

    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
    }

    var div = select.next("div");
    var divText = div.find(".div-select-text");
    var divSelect = div.find(".div-select");
    var divArrow = div.find(".div-select-arrow");
    var list = $(".div-select-list-" + divSelectListIndex);
    var scrollbar;
    var scrollbarPosTop;
    var scrollbarPos;
    var scrollbarScrollHeight;
    var scrollbarUp;
    var scrollbarDown;
    var itemHeight;
    var itemCount;
    var itemsHeight;
    var scrollFlag = false;

    function updateText(item) {
      divText.find("div").html(item.html());
    }

    select.find("option").each(function () {
      var option = $(this);
      var text = option.html();
      var value = option.attr("value");
      list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      list.find(".div-select-item:last").click(function () {
        var item = $(this);
        var value = item.attr("value");
        select.val(value);
        select.change();
        list.find(".div-select-selected").removeClass("div-select-selected");
        item.addClass("div-select-selected");
        updateText(item);
        list.hide();
        if (scrollbar) scrollbar.hide();
      });

      list.find(".div-select-item:last").mouseenter(function () {
        var item = $(this);
        var selectedMark = list.find(".div-select-selected");
        selectedMark.removeClass("div-select-selected");
        selectedMark.addClass("div-select-selected-mark");
        list.find(".div-select-item-hover").removeClass("div-select-item-hover");
        item.addClass("div-select-item-hover");
        updateText(item);
      });
    });

    list.mouseleave(function () {
      var selectedMark = list.find(".div-select-selected-mark");
      if (list.find(".div-select-selected").length == 0) {
        selectedMark.addClass("div-select-selected");
        updateText(selectedMark);
      }
      selectedMark.removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
    });

    if (select.attr("width")) {
      divSelect.width(select.attr("width") - 2);
      divText.width(divSelect.width() - divArrow.width());
    }
    else {
      divText.width(list.width());
    }

    div.keydown(function (e) {
      list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").addClass("div-select-selected");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
      if (e.keyCode == 40) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.next(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:first");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(0);
        } else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() + nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        updateScrollbarPos();
        return false;
      }
      if (e.keyCode == 38) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.prev(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:last");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(list.find(".div-select-item").length * nextSelected.height());
        }
        else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() - nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        updateScrollbarPos();
        return false;
      }
      if (e.keyCode == 13) {
        var selectedItem = list.find(".div-select-selected");
        var value = selectedItem.attr("value");
        select.val(value);
        list.hide();
        if (scrollbar) scrollbar.hide();
        select.change();
      }
    });

    itemHeight = list.find(".div-select-item:first").height();
    itemCount = list.find(".div-select-item").length;
    itemsHeight = itemHeight * itemCount;
    if (itemsHeight > list.height()) {
      $("body").append('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divSelectListIndex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');
    }
    scrollbar = $(".div-select-list-scrollbar-" + divSelectListIndex);
    scrollbarPosTop = scrollbar.find(".div-select-scrollbar-pos").find("div:first");
    scrollbarPos = scrollbar.find(".div-select-scrollbar-pos").find("div:last");
    scrollbarScrollHeight = scrollbarPos.parent().height() - scrollbarPos.height();
    scrollbarUp = scrollbar.find(".div-select-scrollbar-up");
    scrollbarDown = scrollbar.find(".div-select-scrollbar-down");
    scrollbar.click(function () {
      return false;
    });
    scrollbarUp.click(function () {
      list.scrollTop(list.scrollTop() - list.height());
      updateScrollbarPos();
    });
    scrollbarDown.click(function () {
      list.scrollTop(list.scrollTop() + list.height());
      updateScrollbarPos();
    });
    scrollbar.mousedown(function () {
      scrollFlag = true;
    });
    scrollbar.mouseup(function () {
      scrollFlag = false;
    });
    scrollbar.mousemove(function (e) {
      if (scrollFlag) {
        var pos = e.pageY - scrollbar.offset().top - 50;
        if (pos <= scrollbarScrollHeight) {
          scrollbarPosTop.height(pos);
          list.scrollTop(scrollbarPosTop.height() / scrollbarScrollHeight * (itemsHeight - list.height()));
        }
      }
    });

    function updateScrollbarPos() {
      scrollbarPosTop.height(scrollbarScrollHeight * list.scrollTop() * 1.0 / (itemsHeight - list.height()));
      if (list.scrollTop() + list.height() == itemsHeight) {
        scrollbarPosTop.height(scrollbarScrollHeight);
      }
    }

    divSelect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
        scrollbar.hide();
      });

      if (list.css("display") == "none") {
        list.show();
        scrollbar.show();
      }
      else {
        list.hide();
        scrollbar.hide();
      }

      list.css("top", divSelect.offset().top + divSelect.height() + 1);
      list.css("left", divSelect.offset().left);
      var listOffsetTop = list.offset().top;
      if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divSelect.width()) {
        if (!(itemsHeight > list.height())) {
          list.width(divSelect.width());
        }
        else {
          list.width(divSelect.width() - scrollbar.width());
        }
      }

      scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0);
      scrollbar.css("left", divSelect.offset().left + list.width() + 1);
      scrollbar.css("top", divSelect.offset().top + divSelect.height() + 1);
      if ($(window).scrollTop() + $(window).height() < listOffsetTop + list.height() + 2) {
        scrollbar.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }

      var currentSelected = list.find(".div-select-selected");
      if (currentSelected.position().top > list.height() - currentSelected.height()) {
        list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);
      }
      updateScrollbarPos();

      return false;
    });

    $("html,body").bind("click", function () {
      list.hide();
      scrollbar.hide();
    });
    list.click(function () {
      return false;
    });

    function initSelect() {
      list.find(".div-select-selected").removeClass("div-select-selected");
      var matchItem = list.find(".div-select-item[value='" + select.val() + "']");
      if (matchItem.length > 0) {
        matchItem.addClass("div-select-selected");
        updateText(matchItem);
      }
    }
    initSelect();
    select.change(function () {
      initSelect();
    });
  }); // $(".div-select-target").each
}

效果图:

js+css实现select的美化效果

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
基于jQuery Ajax实现上传文件
Mar 24 #Javascript
Angular.js如何从PHP读取后台数据
Mar 24 #Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 #Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 #Javascript
JavaScript驾驭网页-DOM
Mar 24 #Javascript
常用的JQuery函数及功能小结
Mar 24 #Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 #Javascript
You might like
cache_lite试用
2007/02/14 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jquery自定义表格样式
2015/11/23 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python解析xml文件实例分享
2013/12/04 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
员工离职证明范本
2015/06/12 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python