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

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程序设计有所帮助。

js+css实现select的美化效果

- Author -

秋荷雨翔

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

Javascript 相关文章推荐
html+js实现动态显示本地时间
Sep 21 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
原生js的数组除重复简单实例
May 24 Javascript
js注入 黑客之路必备！
Sep 14 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
php register_shutdown_function函数详解
Jul 23 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JS实现动态倒计时功能（天数、时、分、秒）
Dec 12 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
我的世界(1) Docker(14) 城市猎人(1) explain(2) 帝国时代(1) 暴雪(1) 艾尔登法环(1) 最终幻想(1) 守望先锋(1) 巫师(1)
You might like
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JS实现环形进度条（从0到100%）效果
2016/07/05 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
深入了解js原型模式
2019/05/30 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python for和else语句趣谈
2019/07/02 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
德国箱包网上商店：koffer24.de
2016/07/27 全球购物
英国当代时尚和街头服饰店：18montrose
2018/12/15 全球购物
NYX Professional Makeup俄罗斯官网：世界知名的化妆品品牌
2019/12/26 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
市场营销战略计划书
2014/05/06 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
副总经理岗位职责
2015/02/02 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
素质教育学习心得体会
2016/01/19 职场文书
职场：企业印章管理制度（模板）
2019/10/18 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS