339 lines
6.8 KiB
CSS
339 lines
6.8 KiB
CSS
@charset "utf-8";
|
|
*{
|
|
font-family:"consolas","Menlo","DejaVu Sans Mono","monaco","MonoSpace","courier new","微软雅黑","Microsoft Yahei";
|
|
font-weight:300;
|
|
background-repeat:no-repeat;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
::-webkit-scrollbar { display: none; }
|
|
h1{
|
|
font-size:2.75rem;
|
|
}
|
|
a{
|
|
cursor:pointer;
|
|
outline:none;
|
|
text-decoration:none;
|
|
}
|
|
a:hover{
|
|
outline-style:none;
|
|
}
|
|
img{
|
|
vertical-align: bottom;
|
|
}
|
|
span{
|
|
display:inline-block;
|
|
}
|
|
body{
|
|
margin:0px;
|
|
}
|
|
#h1_title{
|
|
margin:0px;
|
|
position:relative;
|
|
display:inline-block;
|
|
}
|
|
#h1_title:before{
|
|
content: 'Copyright© DebugST@Crystal_lz';
|
|
position: absolute;
|
|
top: 100%;
|
|
font-size: 0.75rem;
|
|
color: white;
|
|
width: 100%;
|
|
text-align:center;
|
|
}
|
|
#h1_title:after{
|
|
content: 'V 2.0';
|
|
font-size: 0.75rem;
|
|
position: absolute;
|
|
background-color: hotpink;
|
|
border-radius: 3px;
|
|
padding: 2px 5px;
|
|
color: white;
|
|
display: block;
|
|
top: 0px;
|
|
right: 0px;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
#div_top{
|
|
background-color:rgba(20,20,20,1);
|
|
background-image:url('../images/top_bg.jpeg');
|
|
background-size:cover;
|
|
text-shadow: 0px 1px 1px black;
|
|
}
|
|
#div_top_left{
|
|
padding: 30px;
|
|
display: inline-block;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
#div_top_right{
|
|
text-align:center;
|
|
color: white;
|
|
display: inline-block;
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
#div_top_left img{
|
|
width:100%;
|
|
}
|
|
#a_btn_down{
|
|
color: white;
|
|
background-color: rgba(255,255,255,.3);
|
|
padding: 0px 40px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
margin-bottom:30px;
|
|
height:40px;
|
|
line-height:40px;
|
|
position:relative;
|
|
}
|
|
#a_btn_down:hover{
|
|
background-color:coral;
|
|
}
|
|
#a_btn_down:before{
|
|
content:' ';
|
|
display:block;
|
|
width:40px;
|
|
height:40px;
|
|
background-image:url('../images/download.png');
|
|
background-size:cover;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
#a_btn_down:after{
|
|
content:'MIT LICENSE';
|
|
font-size:0.75rem;
|
|
height:1rem;
|
|
line-height:1rem;
|
|
display:block;
|
|
}
|
|
.a_icon{
|
|
width: 40px;
|
|
height: 40px;
|
|
display: inline-block;
|
|
background-color: rgba(255,255,255,.3);
|
|
line-height: 40px;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
background-size: contain;
|
|
margin:0px 10px;
|
|
}
|
|
.quote_symbol{
|
|
color:gray;
|
|
position:relative;
|
|
display:inline-block;
|
|
}
|
|
.quote_symbol:before{
|
|
content: "“";
|
|
font-size: 3rem;
|
|
color: lightgray;
|
|
position: absolute;
|
|
transform: translate(-100%, -50%);
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
.quote_symbol:after{
|
|
content: "”";
|
|
font-size: 3rem;
|
|
color: lightgray;
|
|
position: absolute;
|
|
top: 100%;
|
|
left:100%;
|
|
}
|
|
.span_mark{
|
|
background-color: gold;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-size:0.8rem;
|
|
margin:10px 10px 0px 10px;
|
|
}
|
|
.span_key{
|
|
background-color: lavender;
|
|
color: cornflowerblue;
|
|
padding: 0px 5px;
|
|
margin: 0px 2px;
|
|
border-radius: 5px;
|
|
}
|
|
/*.div_content_left{
|
|
position:absolute;
|
|
width:50%;
|
|
height:500px;
|
|
text-align:right;
|
|
display:inline-block;
|
|
}
|
|
.div_content_body{
|
|
height:500px;
|
|
}*/
|
|
.div_content_img img{
|
|
max-width:100%;
|
|
}
|
|
/*.div_content_img{
|
|
line-height:500px;
|
|
text-align:center;
|
|
}
|
|
.div_content_img img{
|
|
max-width:100%;
|
|
position:absolute;
|
|
left:50%;
|
|
top:50%;
|
|
transform:translate(-50%,-50%);
|
|
}
|
|
.div_content_right{
|
|
position:absolute;
|
|
left:50%;
|
|
height:500px;
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
.div_content_text{
|
|
margin:0px 50px 0px 30px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(0px, -50%);
|
|
}*/
|
|
.div_content_text h1{
|
|
margin-top:1rem;
|
|
}
|
|
.question_symbol:before{
|
|
content: '?';
|
|
font-size: 5rem;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 100%;
|
|
transform: rotate(45deg);
|
|
color: lightgray;
|
|
transform-origin:50% 100%;
|
|
}
|
|
.question_symbol:after{
|
|
content: '?';
|
|
font-size: 5rem;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 100%;
|
|
transform: rotate(90deg);
|
|
color: lightgray;
|
|
transform-origin:50% 100%;
|
|
}
|
|
#span_sticker:before{
|
|
content: ' ';
|
|
display: block;
|
|
width: 100px;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: -100px;
|
|
background-image: url(../images/sticker.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
top:0px;
|
|
}
|
|
#p_mengbi:after{
|
|
content:attr(attr_text);
|
|
position: absolute;
|
|
font-size: 0.8rem;
|
|
width: 100%;
|
|
left: 0px;
|
|
top: 100%;
|
|
color: gray;
|
|
}
|
|
#div_img_pannel{
|
|
position: relative;
|
|
width: 926px;
|
|
max-width: 100%;
|
|
display: inline-block;
|
|
}
|
|
#div_img_pannel img{
|
|
max-width:100%;
|
|
}
|
|
#a_fork_me{
|
|
display: block;
|
|
width: 300px;
|
|
background-color: green;
|
|
position: absolute;
|
|
height: 26px;
|
|
line-height: 26px;
|
|
box-shadow: 0px 0px 3px black;
|
|
text-shadow: 0px 0px 3px black;
|
|
color: white;
|
|
top: 60px;
|
|
right: -80px;
|
|
transform: rotate(45deg);
|
|
}
|
|
#a_fork_me:after{
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 2px;
|
|
bottom: 2px;
|
|
border-top: dashed 1px white;
|
|
border-bottom: dashed 1px white;
|
|
}
|
|
@media screen and (min-width:1080px){
|
|
#div_top_left{
|
|
margin-right: 400px;
|
|
}
|
|
#div_top_right{
|
|
width:370px;
|
|
padding: 30px 30px 0px 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
.div_content_body{
|
|
height:500px;
|
|
}
|
|
.div_content_left{
|
|
position:absolute;
|
|
width:50%;
|
|
height:500px;
|
|
text-align:right;
|
|
display:inline-block;
|
|
}
|
|
.div_content_img{
|
|
line-height:500px;
|
|
text-align:center;
|
|
}
|
|
.div_content_img img{
|
|
max-width:100%;
|
|
position:absolute;
|
|
left:50%;
|
|
top:50%;
|
|
transform:translate(-50%,-50%);
|
|
}
|
|
.div_content_right{
|
|
position:absolute;
|
|
left:50%;
|
|
height:500px;
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
.div_content_text{
|
|
margin:0px 50px 0px 30px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(0px, -50%);
|
|
}
|
|
}
|
|
@media screen and (max-width:1080px){
|
|
#div_top_right{
|
|
padding: 10px;
|
|
}
|
|
.div_content_body {
|
|
padding: 10px 0px;
|
|
overflow:hidden;
|
|
}
|
|
.div_content_text{
|
|
padding:10px;
|
|
}
|
|
.div_content_img{
|
|
text-align:center;
|
|
font-size:0px;
|
|
}
|
|
.div_content_text h1{
|
|
font-size:2rem;
|
|
display:block;
|
|
text-align:center;
|
|
}
|
|
} |