Html
    Css
    Js

    
                        
body{
            margin:0;
            padding:0;
            box-sizing: border-box;
            text-align: center;width:100%;
        }
        div{
            margin:10px;
            padding:10px;
            text-align: center;
            vertical-align: middle;
        }
        button{
            cursor: pointer;
        }
        .vertical-rl-con{
            width:100%;
            text-align: center;
            box-sizing: border-box;
            padding-left:calc(50% - 20px);
        }
        .vertical-rl {
            padding:0 0;
            margin:0 0;
            width:20px;
            writing-mode:vertical-rl;
            writing-mode:tb-rl;
            -webkit-writing-mode:vertical-rl;
        }
        .liner-background-mine1,.liner-background-mine2{
            width:calc(50% - 40px);
            height:100px;
            line-height: 100px;
            float: left;
        }
        .liner-background-mine1 {
            background:-webkit-linear-gradient(#bdade6,#6af181,skyblue) ;
            /* Safari 5.1 - 6.0 */
          background:-o-linear-gradient(#bdade6,#6af181,skyblue) ;
            /* Opera 11.1 - 12.0 */
          background:-moz-linear-gradient(#bdade6,#6af181,skyblue) ;
            /* Firefox 3.6 - 15 */
          background:linear-gradient(#bdade6,#6af181,skyblue) ;
            /* 标准的语法 */
        }
        .liner-background-mine2 {
            background:-webkit-linear-gradient(#d0d738,#6af181,#b33ddc) ;
            /* Safari 5.1 - 6.0 */
          background:-o-linear-gradient(#d0d738,#6af181,#b33ddc) ;
            /* Opera 11.1 - 12.0 */
          background:-moz-linear-gradient(#d0d738,#6af181,#b33ddc) ;
            /* Firefox 3.6 - 15 */
          background:linear-gradient(#d0d738,#6af181,#b33ddc) ;
            /* 标准的语法 */
        }
        .clear{
            display: block;
            clear: both;
            width:0;
            height: 0;
        }
        .opacity{
            background:transparent;/**背景透明*/
            background-color:rgba(9, 126, 85, 0.2);/**背景颜色,最后一位为透明度0-1的值*/
            border:none;/**无边框*/
            border-radius:20px;/**边框弧度*/
            font-weight: bold;
        }
        .bg-15adf0{
            background: #15adf0;
        }
        .entry_s{
            height: 300px;
            background: #46aaaa;
            padding:30px;
            font-size: 17px;
            text-align: justify;
        }
        .back2top{
            width:30px;
            height: 30px;
            border-radius:3px;
            background-color:#194141;
            transform: rotate(20deg);
            text-align: center;
            vertical-align: middle;
            position: fixed;
            right:10px;
            bottom:5px;
            cursor: pointer;
        }
        .back2top:hover{
            transform: rotate(0deg);
            background-color: #316072;
        }
        .back2top>div{
            background-color:transparent;
            border:5px solid #050a17;
            border-radius:4px;
            border-left:none;
            border-bottom:none;
            transform: rotate(-45deg);
            width:0px;
            height: 0px;
            margin:25% auto;
        }
        ._lock_top{
            background-color: #28406a;
            padding:0;
            margin:0;
            font-weight: bold;
            position: relative;
            height: 50px;
            line-height: 100%;
            vertical-align: middle;
            width:100%;
        }
        ._lock_top._fixed{
            position: fixed;
            top:0;
        }
        ._navgation{
            background-color: transparent;
            display: block;
            padding:0;
            margin:1px;
            height: calc(100%);
        }
        ._navgation>li{
            float:left;
            display: block;
            cursor: pointer;
            list-style: none;
            padding:2px;
            width:140px;
            height:calc(100%);
            line-height: 45px;
            vertical-align: middle;
        }
        ._navgation>li:hover{
            background-color: #3a646a;
            color: #fff;
        }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

JSCSS经验代码

几个简单的 小代码,供大家赏玩!

0