wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge css

Browse Source
This commit is contained in:
wolegca 2019-09-13 22:35:43 +08:00
parent 4c5ada13e7
commit 2a53cd880d
3 changed files with 231 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
base.js
View File

@ -4,7 +4,7 @@ $(function () {
window.ondragstart = block; window.ondragstart = block;
$('.msg-header').Drag($('.msg-container')); $('.msg-header').Drag($('.msg-container'));
$('.menu-container ul li span').on('click',function(){ $('.menu-container ul li span').on('click',function(){
message.alert('这里是','<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:40px;text-align:center">AHPU-老中医</div>的博客&nbsp;&nbsp;&nbsp;</div>'); message.alert('这里是','<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客&nbsp;&nbsp;&nbsp;</div>');
}); });
function block() { function block() {
return false; return false;

233
index.css
View File

@ -1,233 +0,0 @@
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
body {
background: black url(bg.jpg) no-repeat center;
background-size: cover;
width: 200%;
z-index: 0
}
input#menu-control {
display: none
}
div.menu-container {
display: block;
position: relative;
float: left;
top: 0;
left: 0;
height: 100%;
width: 0;
box-sizing: border-box;
padding-top: 50px;
transition: all .2s ease;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
box-shadow: 2px 0px 8px black
}
div.menu-container ul {
position: relative;
padding: 0;
margin: 0;
top: 30%;
transform: translateY(-50%)
}
div.menu-container ul li {
list-style: none;
text-align: center;
white-space: nowrap
}
div.menu-container ul li * {
text-decoration: none;
color: white;
display: block;
padding: 8px 0 0;
transition: all .3s ease;
font-size: 24px;
height: 40px;
cursor: pointer
}
div.menu-container ul li *:hover {
background-color: rgba(255, 255, 255, .2);
/*color: black*/
}
div.menu-container ul li *:active {
background-color: gray;
}
div.menu-container ul>li+li:before {
content: '';
display: block;
height: 1px;
margin: 2px 2px
}
label[for=menu-control].menu-button-container {
display: block;
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 30px;
cursor: pointer !important;
z-index: 3;
}
label[for=menu-control].menu-button-container:hover span {
background-color: white;
}
label[for=menu-control].content-mask {
display: block;
position: relative;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
float: left;
z-index: 1;
transition: all .5s ease;
opacity: 0;
visibility: hidden
}
div.menu-button span {
width: 44px;
height: 3px;
background-color: #ccc;
display: block;
margin: 5px 0 0 3px;
cursor: pointer;
transition: all .5s ease;
}
div.content-border {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
padding: 50px 50px 25px;
overflow-y: scroll;
transition:padding .5s ease
}
div.content {
min-height: 200px;
max-width: 800px;
background-color: rgba(255, 255, 255, .5);
border-radius: 15px;
opacity: 1;
transition: opacity .5s ease, transform .5s ease;
cursor: default;
padding: 15px;
margin-bottom: 25px;
text-overflow: ellipsis;
z-index: 1;
text-align: center
}
div.content:hover {
opacity: 1;
}
div.content img {
margin: 0 auto;
max-width: 100%;
max-height: 100%
}
div.content p {
font-size: 18px;
text-align: left
}
div.content span {
font-size: 24px;
font-weight: bold
}
div.content span+p:first-letter {
float: left;
font-size: 36px;
font-weight: bold
}
div.content p~p {
text-indent: 36px;
}
input#menu-control:checked~label.content-mask {
opacity: 1;
visibility: visible
}
@media screen and (max-width:700px) {
body {
width: 100%
}
div.content {
opacity:1
}
input#menu-control:checked+div.menu-container {
width: 100%;
}
input#menu-control:checked~label.content-mask {
opacity: 0;
visibility: hidden
}
div.content-border {
padding: 50px 5px 25px;
}
}
@media screen and (min-width:700px) {
input#menu-control:checked+div.menu-container {
width: 350px;
left: 0
}
div.content {
margin-left: auto;
margin-right: auto
}
/* div.content:hover {
transform: scale(1.01)
} */
}
* {
-webkit-tap-highlight-color: transparent
}
#blog-title {
color: white;
white-space: nowrap;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
font-size: 24px;
background-color: rgba(25, 25, 25, .9);
width: 100%;
z-index: 2;
cursor: default
}

239
myui.css
View File

@ -1,5 +1,194 @@
* { * {
touch-action: pan-y; touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
body {
background: black url(bg.jpg) no-repeat center;
background-size: cover;
width: 200%;
z-index: 0
}
#menu-control {
display: none
}
#menu-control:checked~label.content-mask {
opacity: 1;
visibility: visible
}
#blog-title {
color: white;
white-space: nowrap;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
font-size: 24px;
background-color: rgba(25, 25, 25, .9);
width: 100%;
z-index: 2;
cursor: default
}
.menu-container {
display: block;
position: relative;
float: left;
top: 0;
left: 0;
height: 100%;
width: 0;
padding-top: 50px;
transition: all .2s ease;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
box-shadow: 2px 0px 8px black
}
.menu-container ul {
position: relative;
padding: 0;
margin: 0;
top: 30%;
transform: translateY(-50%)
}
.menu-container ul li {
list-style: none;
text-align: center;
white-space: nowrap
}
.menu-container ul li * {
text-decoration: none;
color: white;
display: block;
padding: 8px 0 0;
transition: all .3s ease;
font-size: 24px;
height: 40px;
cursor: pointer
}
.menu-container ul li *:hover {
background-color: rgba(255, 255, 255, .2);
/*color: black*/
}
.menu-container ul li *:active {
background-color: gray;
}
.menu-container ul>li+li:before {
content: '';
display: block;
height: 1px;
margin: 2px 2px
}
[for=menu-control].menu-button-container {
display: block;
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 30px;
cursor: pointer !important;
z-index: 3;
}
[for=menu-control].menu-button-container:hover span {
background-color: white;
}
[for=menu-control].content-mask {
display: block;
position: relative;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
float: left;
z-index: 1;
transition: all .5s ease;
opacity: 0;
visibility: hidden
}
.menu-button span {
width: 44px;
height: 3px;
background-color: #ccc;
display: block;
margin: 5px 0 0 3px;
cursor: pointer;
transition: all .5s ease;
}
.content-border {
width: 100%;
height: 100%;
position: absolute;
padding: 50px 50px 25px;
overflow-y: scroll;
transition: padding .5s ease
}
.content {
min-height: 200px;
max-width: 800px;
background-color: rgba(255, 255, 255, .5);
border-radius: 15px;
opacity: 1;
transition: opacity .5s ease, transform .5s ease;
cursor: default;
padding: 15px;
margin-bottom: 25px;
text-overflow: ellipsis;
z-index: 1;
text-align: center
}
.content:hover {
opacity: 1;
}
.content img {
margin: 0 auto;
max-width: 100%;
max-height: 100%
}
.content p {
font-size: 18px;
text-align: left
}
.content span {
font-size: 24px;
font-weight: bold
}
.content span+p:first-letter {
float: left;
font-size: 36px;
font-weight: bold
}
.content p~p {
text-indent: 36px;
} }
.msg-container { .msg-container {
@ -15,7 +204,6 @@
padding-bottom: 40px; padding-bottom: 40px;
cursor: default; cursor: default;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box;
box-shadow: 3px 2px 8px rgb(0, 0, 0); box-shadow: 3px 2px 8px rgb(0, 0, 0);
opacity: 0; opacity: 0;
animation: fadeIn .3s forwards; animation: fadeIn .3s forwards;
@ -34,7 +222,6 @@
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
box-sizing: border-box;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word word-break: break-word
} }
@ -47,7 +234,6 @@
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
cursor: default; cursor: default;
padding: 10px; padding: 10px;
box-sizing: border-box;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word word-break: break-word
} }
@ -63,7 +249,6 @@
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
padding: 10px; padding: 10px;
text-align: right; text-align: right;
box-sizing: border-box;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word word-break: break-word
} }
@ -83,13 +268,13 @@
color: rgb(50, 50, 50) color: rgb(50, 50, 50)
} }
.mask{ .mask {
position: absolute; position: absolute;
display: none; display: none;
width:100%; width: 100%;
height:100%; height: 100%;
background-color:rgba(95, 95, 95, 0.7); background-color: rgba(95, 95, 95, 0.7);
z-index:998; z-index: 998;
opacity: 0; opacity: 0;
} }
@ -118,3 +303,39 @@
max-width: 250px; max-width: 250px;
} }
} }
@media screen and (max-width:700px) {
body {
width: 100%
}
div.content {
opacity: 1
}
input#menu-control:checked+div.menu-container {
width: 100%;
}
input#menu-control:checked~label.content-mask {
opacity: 0;
visibility: hidden
}
div.content-border {
padding: 50px 5px 25px;
}
}
@media screen and (min-width:700px) {
input#menu-control:checked+div.menu-container {
width: 350px;
left: 0
}
div.content {
margin-left: auto;
margin-right: auto
}
}