博客园自定义的导航栏单页样式

<html>
<head>
        <style>
             body{
                margin: 40px auto;
                /*width: 500px;*/
            }
            
            .blog-alert-success {
                color: #3c763d;
                background-color: #dff0d8;
                border-color: #d6e9c6;
            }

            .blog-alert {
                padding: 15px;
                margin-bottom: 20px;
                border: 1px solid transparent;
                border-radius: 4px;
            }
            

            /* -------------------------------------- */

            ol{
                counter-reset: li;
                list-style: none;
                *list-style: decimal;
                font: 15px 'trebuchet MS', 'lucida sans';
                padding: 0;
                margin-bottom: 4em;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
                width: 550px;
            }

            ol ol{
                margin: 0 0 0 2em;
            }

            /* -------------------------------------- */            

            .rounded-list a{
                position: relative;
                display: block;
                padding: .4em .4em .4em 2em;
                *padding: .4em;
                margin: .5em 0;
                background: #ddd;
                color: #444;
                text-decoration: none;
                -moz-border-radius: .3em;
                -webkit-border-radius: .3em;
                border-radius: .3em;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;    
            }

            .rounded-list a:hover{
                background: #eee;
            }

            .rounded-list a:hover:before{
                -moz-transform: rotate(360deg);
                  -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);    
            }

            .rounded-list a:before{
                content: counter(li);
                counter-increment: li;
                position: absolute;    
                left: -1.3em;
                top: 50%;
                margin-top: -1.3em;
                background: #87ceeb;
                height: 2em;
                width: 2em;
                line-height: 2em;
                border: .3em solid #fff;
                text-align: center;
                font-weight: bold;
                -moz-border-radius: 2em;
                -webkit-border-radius: 2em;
                border-radius: 2em;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;
            }
        </style>
    <style id="tsbrowser_video_independent_player_style" type="text/css">
      [tsbrowser_force_max_size] {
        width: 100% !important;
        height: 100% !important;
        left: 0px !important;
        top: 0px !important;
        margin: 0px !important;
        padding: 0px !important;
        transform: none !important;
      }
      [tsbrowser_force_fixed] {
        position: fixed !important;
        z-index: 9999 !important;
        background: black !important;
      }
      [tsbrowser_force_hidden] {
        opacity: 0 !important;
        z-index: 0 !important;
      }
      [tsbrowser_hide_scrollbar] {
        overflow: hidden !important;
      }
      [tsbrowser_display_none] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
      [tsbrowser_force_show] {
        display: black !important;
        visibility: visible !important;
        opacity: 0;
      }</style></head>
    <body>
        <div class="blog-alert blog-alert-success" role="alert">
            MQ: 异步处理、应用解耦、流量削峰、日志处理、消息通讯
        </div>
        <ol class="rounded-list">
            <li><a href="javascript:void(0);">Kafka</a>
                <ol>
                    <li><a href="#" target="_blank">List sub item</a></li>
                    <li><a href="#" target="_blank">List sub item</a></li>
                    <li><a href="#" target="_blank">List sub item</a></li>
                </ol>
            </li>
            <li><a href="javascript:void(0);">RocketMQ</a>
                <ol>
                    <li><a href="#" target="_blank">List sub item</a></li>
                    <li><a href="#" target="_blank">List sub item</a></li>
                    <li><a href="#" target="_blank">List sub item</a></li>
                </ol>
            </li>
            <li><a href="javascript:void(0);">ZeroMQ</a>
                <ol>
                    <li><a href="#" target="_blank">List sub item</a></li>
                    <li><a href="#" target="_blank">List sub item</a></li>
                    <li><a href="#" target="_blank">List sub item</a></li>
                </ol>
            </li>                        
        </ol>
</body>
</html>
博客园自定义的导航栏单页样式

猜你喜欢
