* { margin:0; padding:0; } li { list-style-type:none; } label { cursor:pointer; } img { display:inline-block; } #wrap { width:80%; height:400px; margin:20px auto; box-shadow:#272727 0px 0px 5px; position:relative; overflow:hidden; } .menu { width:100%; height:auto; border-bottom:1px solid #272727; float:left; } .menu > li { line-height:49px; height:49px; float:left; padding:0 10px; cursor:pointer; text-align:center; position:relative; } .menu > li:after { content:"|"; width:5px; position:absolute; right:0; top:0; } .menu > li label { width:100%; height:100%; display:inline-block; } .wrap { width:100%; height:calc(100% - 50px); overflow:auto; position:relative; } .edit_wrap { width:96%; padding:2%; height:auto; overflow:auto; line-height:1.5; outline:none; } .btnBox { display:none; position:absolute; left:0; top:49px; width:100%; } .btnBox > li { width:100%; height:35px; line-height:35px; text-align:center; background:#fff; } input { border:none; width:100%; height:100%; cursor:pointer; outline:none; font-size:16px; background:inherit; } .menu li:hover ul { display:block; z-index:20; } .btnBox > li:hover,.menu > li:hover { background:#CCCCCC; } .item { list-style-type:square!important; margin-left:10px; } #dialog { width:50%; height:150px; position:absolute; top:50%; left:50%; margin:-15% 0 0 -25%; background:#fff; border-radius:10px 10px 0 0; overflow:hidden; box-shadow:0 0 5px #808080; display:none; } #dialog h1 { width:100%; height:45px; background:#03A9F4; color:#fff; text-align:center; line-height:45px; font-size:20px; } #dialog input { width:90%; height:30px; margin:10px auto; display:block; background:ghostwhite; cursor:auto; } #dialog span { display:block; margin:25px auto; width:60%; } #dialog button { display:inline-block; outline:none; width:40%; height:30px; border:solid #03A9F4 1px; background:#fff; cursor:pointer; } #dialog button:last-child { float:right; } #handleWrap { position:absolute; display:none; } #handleWrap ul { width:100%; height:100%; position:relative; border:2px solid #03A9F4; } #handleWrap ul li { width:20px; height:20px; position:absolute; border:1px solid #03A9F4; background:#03A9F4; border-radius:60%; bottom:0; right:0; margin:0 -10px -10px 0px; cursor:move; } /*#handleWrap ul li:first-child { top:0; left:0; margin:-10px 0 0 -10px; cursor:nw-resize; } */ /*#handleWrap ul li:nth-child(2) { top:0; right:0; margin:-10px -10px 0 0; cursor:ne-resize; } */ /*#handleWrap ul li:nth-child(3) { bottom:0; left:0; margin:0 0 -10px -10px; cursor:sw-resize; } */ /*#handleWrap ul li:nth-child(4) { bottom:0; right:0; margin:0 -10px -10px 0; cursor:se-resize; } */ @media only screen and (min-width:510px) and (max-width:939px) { .wrap { height:calc(100% - 100px); } }@media only screen and (min-width:321px) and (max-width:509px) { .wrap { height:calc(100% - 150px); } }@media only screen and (min-width:100px) and (max-width:320px) { .wrap { height:calc(100% - 200px); } }