tool bar css

来源：互联网发布：南大老师知乎编辑：程序博客网时间：2024/06/05 02:53

css

/*toolbar start*/
.div-toolbar {
    border: solid 1px #8ca1bc;
    width: 945px;
    margin: 0;
}

.ul-toolbar {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(217, 229, 242);
    background-image: url('Images/toolbar-background.png');
    background-origin: border-box;
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat: repeat-x;
    background-size: auto;
    border: solid 1px #d9e5f2;
    padding: 1px;
    height: 27px;
}

    .ul-toolbar li {
        float: left;
        list-style-type: none;
        vertical-align: middle;
    }

        .ul-toolbar li img {
            width: 14px;
            height: 14px;
        }

        .ul-toolbar li a {
            padding: 5px 6px 3px;
            border: solid 1px #E3ECF7;
            display: block;
            text-decoration: none;
            color: black;
            outline-color: invert;
        }

            .ul-toolbar li a:hover {
                border: solid 1px #8ca1bc;
                background-image: url('Images/toolbar-menu.png');
            }

        .ul-toolbar li span {
            padding-left: 1px;
        }
/*toolbar end*/

html

<div class="div-toolbar">
    <ul class="ul-toolbar">
        <li>
            <a href="javascript:void(0)" onclick="">
                <img src="~/Content/Images/icon_print.png" />
                <span>Print</span></a></li>
        <li>
            <a href="javascript:void(0)" onclick="">
                <img src="~/Content/Images/icon-back.png" />
                <span>Back</span>
            </a>
        </li>
        <div class="clear"></div>
    </ul>
</div>