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. WPF 窗口自适应

    窗口自适应就是说,当主窗口缩放的时候,内部的控件位置自动的调整,而不是隐藏掉.这主要依赖于Grid布局. 1.比如这个groupbox 本身是在一个Grid的Row中的.缩放之后,左边的button不 ...

  2. python--批量下载豆瓣图片

    溜达豆瓣的时候,发现一些图片,懒得一个一个扒,之前写过c#和python版本的图片下载,因此拿之前的Python代码来改了改,折腾出一个豆瓣版本,方便各位使用 # -*- coding:utf8 -* ...

  3. [nRF51822] 5、 霸屏了——详解nRF51 SDK中的GPIOTE（从GPIO电平变化到产生中断事件的流程详解）

    :由于在大多数情况下GPIO的状态变化都会触发应用程序执行一些动作.为了方便nRF51官方把该流程封装成了GPIOTE,全称:The GPIO Tasks and Events (GPIOTE) . ...

  4. java.rmi.NoSuchObjectException: no such object in table

    jmx链接的时候,最简单的例子都行不通,郁闷,出现了: 参考:http://reiz6153.blog.163.com/blog/static/401089152009442723208/ 代码: M ...

  5. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  6. 缓存篇(Cache)~第一回　使用static静态成员实现服务器端缓存(导航面包屑)

    返回目录 今天写缓存篇的第一篇文章,在写完目录后,得到了一些朋友的关注,这给我之后的写作带来了无穷的力量,在这里,感谢那几位伙伴,哈哈! 书归正传,今天我带来一个Static静态成员的缓存,其实它也不 ...

  7. Bootstrap~日期控制

    回到目录 一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/ ...

  8. atitit 点播系统 概览 v2 qb1.docx

    atitit 点播系统 概览 v2 qb1.docx 1.1. 多界面(可以挂载多个不同的界面主题)1 1.2. 独立的选片模块(跨设备,跨平台)2 1.3. 跨设备平台(android安卓盒子,pc ...

  9. SQL Server 2014新特性-原生备份加密

    注:本篇文章是IT68找我的约稿,原文地址:http://tech.it168.com/a2014/0610/1633/000001633147.shtml       SQL Server 2014 ...

  10. IO流-ZIP文档

    java中通常使用ZipInputStream来读ZIP文档 ZIP文档(通常)以压缩格式存储了一个或多个文件,每个ZIP文档都有一个包含诸如文件 名字和所使用的压缩方法等信息的头.在Java中,可以 ...