HTML的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:;

}

    .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：

//2015年2月8日

//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

}

如何使用：

第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:;

    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:;

    background-color: #e8e8ec;

    width: 40px;

    height: 300px;

    display: none;

    cursor: default;

    z-index:;

}

.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：

//2015年2月8日

//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

}

效果图：

HTML的select控件美化的更多相关文章

  1. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  2. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  3. IE6下div层被select控件遮住的问题解决方法

    Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...

  4. .net获取select控件中的文本内容

    .net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  6. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Asp.net绑定带层次下拉框（select控件）

    1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...

  8. Selenium webdriver 之select 控件封装，解决onchange问题

    使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...

  9. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

随机推荐

  1. Homework_4 四则运算 - C#版

    题目要求 :http://www.cnblogs.com/gdfhp/p/5311937.html 结对同伴: 姓名:胡仕辉   学号:130201225   博客地址:http://www.cnbl ...

  2. 面向对象架构模式之：领域模型（Domain Model）

    一:面向对象设计中最简单的部分与最难的部分 如果说事务脚本是 面向过程 的,那么领域模型就是 面向对象 的.面向对象的一个很重要的点就是:“把事情交给最适合的类去做”,即:“你得在一个个领域类之间跳转 ...

  3. 自制Unity小游戏TankHero-2D(2)制作敌方坦克

    自制Unity小游戏TankHero-2D(2)制作敌方坦克 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm)这个游戏制作的. ...

  4. 获取MySQL服务提供的sakila数据库（Example Databases）

    关于这个数据库也就是样例数据库,数据库,数据库,最可怕的就是没有数据了,对吧?没有数据你学个什么呀. 可是,没有数据,咱会自己insert,那只能适用于初学者.对于数据库的优化方面的学习,还是有大数据 ...

  5. write/wall 1

    linux:/opt/software/lktest/c # wallhellllllllllllllllllllooooooooooooooooo^[[AasZZZZZZ^Clinux:/opt/s ...

  6. javascript日常总结

    如何去除掉inline-block元素之间的默认间距 前几天写一个页面 1 2 3 4 div{width:900px;} div li{ display:inline-block; width:30 ...

  7. excel表格中如何将内容粘贴到筛选后的可见单元格[转]

    默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到 ...

  8. fir.im Weekly - 可能是 iOS 审核最全面的解决方案

    ipv6 被拒绝,后台定位被拒绝--让很多国内 iOS 开发者心力交瘁.这是一份关于 iOS 审核的终极免费方案,作者iOSWang对最近iOS 审核被拒问题给出了比较全面的方案:Solve-App- ...

  9. salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  10. js算法之最常用的排序

    引入 大学学习计算机语言的那几年,从c语言,到c++,再到数据结构JAVA..让我印象最深刻的还是最开始老师讲冒泡算法的时候,直到现在大四快毕业了我才渐渐通窍了.刚学前端的时候以为前端就是做出好看很炫 ...