html 纵向分割,HTML5可拖拉垂直分割窗口交互设计

CSS

语言：

CSSSCSS

确定

html,

body {

padding: 0px;

margin: 0px;

background: #f6f7fa;

font-family: 'Raleway', sans-serif;

color: #FFF;

height: 100%;

}

.container {

z-index: 1;

max-width: 500px;

margin: 100px auto;

background: #FFF;

box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);

color: rgba(0, 0, 0, 0.8);

border-radius: 3px;

}

.top {

padding: 30px 30px 22px 30px;

ccborder-bottom: 1px solid #ddd;

background: #FFF;

box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

z-index: 10;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

position: relative;

}

.top .title {

text-transform: capitalize;

width: 100%;

}

.top .icons {

text-align: right;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

vertical-align: top;

width: 180px;

top: -3px;

position: relative;

}

.top .icons .icon {

width: 25px;

height: 25px;

box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

margin: 0px 5px;

border-radius: 100%;

background: #555;

}

.view {

z-index: 0;

position: relative;

height: 300px;

}

.view .code,

.view .example {

position: absolute;

top: 0px;

left: 0px;

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/app.png");

background-color: #f3f3f3;

background-repeat: no-repeat;

background-position: cover;

background-size: 500px;

width: 100%;

height: 100%;

}

.view .example {

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/vuelikenotes.png");

}

.view .handle {

position: absolute;

width: 10px;

height: 100%;

background: #fff;

ccborder-left: 1px solid #cdcdcd;

ccborder-right: 1px solid #cdcdcd;

box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);

left: 50%;

top: 0px;

cursor: -webkit-grab;

cursor: grab;

z-index: 10;

}

.view .handle:before {

content: '';

border-radius: 100%;

width: 50px;

height: 50px;

top: 50%;

background: #FFF;

position: absolute;

ccborder: 1px solid #cdcdcd;

box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

.view .handle:after {

content: '';

width: 4px;

height: 24px;

background: #cdcdcd;

position: absolute;

top: 138px;

left: -6px;

border-radius: 0px;

box-shadow: 9px 0px 0px #cdcdcd, 18px 0px 0px #cdcdcd;

}

.view .handle .tracker {

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background: #000;

opacity: 0;

display: none;

z-index: 1000;

}