merge css
This commit is contained in:
parent
4c5ada13e7
commit
2a53cd880d
2
base.js
2
base.js
@ -4,7 +4,7 @@ $(function () {
|
||||
window.ondragstart = block;
|
||||
$('.msg-header').Drag($('.msg-container'));
|
||||
$('.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>的博客 </div>');
|
||||
message.alert('这里是','<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客 </div>');
|
||||
});
|
||||
function block() {
|
||||
return false;
|
||||
|
||||
233
index.css
233
index.css
@ -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
239
myui.css
@ -1,5 +1,194 @@
|
||||
* {
|
||||
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 {
|
||||
@ -15,7 +204,6 @@
|
||||
padding-bottom: 40px;
|
||||
cursor: default;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 3px 2px 8px rgb(0, 0, 0);
|
||||
opacity: 0;
|
||||
animation: fadeIn .3s forwards;
|
||||
@ -34,7 +222,6 @@
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
@ -47,7 +234,6 @@
|
||||
background-color: rgb(50, 50, 50);
|
||||
cursor: default;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
@ -63,7 +249,6 @@
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
padding: 10px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
@ -83,13 +268,13 @@
|
||||
color: rgb(50, 50, 50)
|
||||
}
|
||||
|
||||
.mask{
|
||||
.mask {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:rgba(95, 95, 95, 0.7);
|
||||
z-index:998;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(95, 95, 95, 0.7);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -117,4 +302,40 @@
|
||||
.msg-container {
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user