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; }
几个简单的 小代码,供大家赏玩!