##CSS樣式（webuploader中添加styl.css樣式）
```
body {
margin-top: 50px;
font-size: 16px;
font-family: "Myriad Pro", "Hiragino Sans GB","Microsoft YaHei","微軟雅黑", Calibri, Helvetica, tahoma,arial,simsun,"宋體", sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.jumbotron {
background: transparent url(../images/banner.jpg) repeat-x 50% 0%;
color: #fff;
text-shadow: 1px 1px 1px #3b3262;
margin-bottom: 0;
}
.jumbotron .container {
position: relative;
}
.jumbotron .github-btns {
position: absolute;
bottom: 0;
right: 0;
}
.fetature {
margin-top: 30px;
}
.page-body {
min-height: 450px;
}
.page-container {
margin-top: 10px;
}
.page-container h1,
.page-container h2,
.page-container h3 {
padding-top: 70px;
margin-top: -50px;
}
.logo {
position: relative;
padding-left: 60px;
}
.logo span {
position: absolute;
left: 15px;
top: 8px;
font-size: 2em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.logo.active {
color: #fff;
}
@media (min-width: 768px) {
.fetature .row .col-lg-4 {
min-height: 250px;
}
}
.footer {
width: 100%;
overflow: hidden;
color: #f2f2f2;
background: #212121;
margin-top: 50px;
}
.footer-fixed-bottom {
position: fixed;
bottom: 0;
}
.footer a {
color: #f2f2f2;
}
.footer .footer-inner {
margin: 15px;
}
.wu-example {
position: relative;
padding: 45px 15px 15px;
margin: 15px 0;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
.wu-example:after {
content:"示例";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.bs-example {
margin-left: 0;
margin-right: 0;
background-color: #fff;
border-width: 1px;
border-color: #ddd;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
}
.post-toc {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 0 #fff;
background-color: #f7f5fa;
border-radius: 5px;
}
.post-toc .nav > li > a {
display: block;
color: #716b7a;
padding: 5px 20px;
}
.post-toc .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}
.post-toc.affix {
position: static;
}
.post-toc .nav .nav {
display: none;
margin-bottom: 8px;
}
@media (min-width: 992px) {
.post-toc.affix {
position: fixed;
width: 213px;
top: 50px;
}
.post-toc .nav > .active > ul {
display: block;
}
}
@media (min-width: 1200px) {
.post-toc.affix {
width: 263px;
}
.post-toc .nav > .active > ul {
display: block;
}
}
.post-toc .nav > .active > a,
.post-toc .nav > .active:hover > a,
.post-toc .nav > .active:focus > a {
font-weight: bold;
color: #563d7c;
background-color: transparent;
border-right: 1px solid #563d7c;
}
.friends-links {
margin: 0;
padding: 0;
list-style: none;
}
.weixin {
text-align: center;
display: inline-block;
}
.weixin img {
width: 80px;
}
/********************************
*
* COMMENTS
*
********************************/
.comment {
background-color: transparent;
border-color: #CACACA;
border-style: solid;
border-width: 1px;
color: black;
display: block;
margin-bottom: 10px;
margin-top: 10px;
padding: 0px;
width: 100%;
}
.comment .commentheader {
border-bottom-color: #CACACA;
border-bottom-style: solid;
border-bottom-width: 1px;
color: black;
background-image: -webkit-linear-gradient(#F8F8F8,#E1E1E1);
background-image: -moz-linear-gradient(#F8F8F8,#E1E1E1);
color: black;
display: block;
float: left;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 33px;
line-height: 33px;
margin: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
text-overflow: ellipsis;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 100%;
}
.comment .commentheader .commentgravatar {
background-attachment: scroll;
background-clip: border-box;
background-color: white;
background-image: none;
background-origin: padding-box;
border-color: #C8C8C8;
border-style: solid;
border-width: 1px;
color: black;
display: inline-block;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 1px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 24px;
line-height: 1px;
margin-left: 5px;
margin-right: 3px;
margin-top: -2px;
overflow-x: visible;
overflow-y: visible;
padding: 1px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
vertical-align: middle;
white-space: nowrap;
width: 24px;
}
.comment .commentheader a:link {
text-decoration: none;
}
.comment .commentheader a:hover {
border-bottom:1px solid;
}
.comment .commentheader .commentuser {
background-color: transparent;
color: black;
display: inline;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 0px;
line-height: 16px;
margin-left: 5px;
margin-right: 10px;
overflow-x: visible;
overflow-y: visible;
padding: 0px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 0px;
}
.comment .commentheader .commentdate {
background-color: transparent;
color: #777;
display: inline;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 0px;
line-height: 33px;
margin: 0px;
overflow-x: visible;
overflow-y: visible;
padding: 0px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 20em;
}
.comment .commentbody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
color: #333;
display: block;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
margin-top: 40px;
overflow-x: visible;
overflow-y: visible;
padding: 0em;
position: static;
width: 96%;
word-wrap: break-word;
}
.comment .commentbody p {
margin-bottom: 0.5em;
margin-top: 0.5em;
margin-left: 0em;
margin-right: 0em;
}
.comment .commentbody pre {
border: 0px solid #ddd;
background-color: #eef;
padding: 0 .4em;
}
.comment .commentbody pre code {
border: 0px solid #ddd;
}
.comment .commentbody code {
border: 1px solid #ddd;
background-color: #eef;
font-size: 85%;
padding: 0 .2em;
}
/*demo樣式*/
#picker {
display: inline-block;
line-height: 1.428571429;
vertical-align: middle;
margin: 0 12px 0 0;
}
#picker .webuploader-pick {
padding: 6px 12px;
display: block;
}
#uploader-demo .thumbnail {
width: 110px;
height: 110px;
}
#uploader-demo .thumbnail img {
width: 100%;
}
.uploader-list {
width: 100%;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 0 20px 20px 0;
padding: 4px;
}
.file-item .error {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: red;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .info {
position: absolute;
left: 4px;
bottom: 4px;
right: 4px;
height: 20px;
line-height: 20px;
text-indent: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: 10;
}
.upload-state-done:after {
content:"\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
position: absolute;
bottom: 0;
right: 4px;
color: #4cae4c;
z-index: 99;
}
.file-item .progress {
position: absolute;
right: 4px;
bottom: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: 15;
margin:0;
padding: 0;
border-radius: 0;
background: transparent;
}
.file-item .progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: #d14 url(../images/progress.png) repeat-x;
-webit-transition: width 200ms linear;
-moz-transition: width 200ms linear;
-o-transition: width 200ms linear;
-ms-transition: width 200ms linear;
transition: width 200ms linear;
-webkit-animation: progressmove 2s linear infinite;
-moz-animation: progressmove 2s linear infinite;
-o-animation: progressmove 2s linear infinite;
-ms-animation: progressmove 2s linear infinite;
animation: progressmove 2s linear infinite;
-webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@-moz-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
a.travis {
position: relative;
top: -4px;
right: 15px;
}
```
##webuploader.css樣式內容
```
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
background: #00b7ee;
padding: 10px 15px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.webuploader-pick-hover {
background: #00a2d4;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}
/* ----------------Reset Css--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;
border: none;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
font-family: arial, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------ */
#wrapper {
width: 100%;
margin: 0 auto;
margin: 1em;
width: auto;
}
#container {
border: 1px solid #dadada;
color: #838383;
font-size: 12px;
margin-top: 10px;
background-color: #FFF;
}
#uploader .queueList {
margin: 20px;
}
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
#uploader .placeholder {
border: 3px dashed #e6e6e6;
min-height: 238px;
padding-top: 158px;
text-align: center;
background: url(image.png) center 93px no-repeat;
color: #cccccc;
font-size: 18px;
position: relative;
}
#uploader .placeholder .webuploader-pick {
font-size: 18px;
background: #00b7ee;
border-radius: 3px;
line-height: 44px;
padding: 0 30px;
color: #fff;
display: inline-block;
margin: 20px auto;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#uploader .placeholder .webuploader-pick-hover {
background: #00a2d4;
}
#uploader .placeholder .flashTip {
color: #666666;
font-size: 12px;
position: absolute;
width: 100%;
text-align: center;
bottom: 20px;
}
#uploader .placeholder .flashTip a {
color: #0785d1;
text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
text-decoration: underline;
}
#uploader .placeholder.webuploader-dnd-over {
border-color: #999999;
}
#uploader .placeholder.webuploader-dnd-over.webuploader-dnd-denied {
border-color: red;
}
#uploader .filelist {
list-style: none;
margin: 0;
padding: 0;
}
#uploader .filelist:after {
content: '';
display: block;
width: 0;
height: 0;
overflow: hidden;
clear: both;
}
#uploader .filelist li {
width: 110px;
height: 110px;
background: url(bg.png) no-repeat;
text-align: center;
margin: 0 8px 20px 0;
position: relative;
display: inline;
float: left;
overflow: hidden;
font-size: 12px;
}
#uploader .filelist li p.log {
position: relative;
top: -45px;
}
#uploader .filelist li p.title {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
top: 5px;
text-indent: 5px;
text-align: left;
}
#uploader .filelist li p.progress {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 8px;
overflow: hidden;
z-index: 50;
}
#uploader .filelist li p.progress span {
display: none;
overflow: hidden;
width: 0;
height: 100%;
background: #1483d8 url(progress.png) repeat-x;
-webit-transition: width 200ms linear;
-moz-transition: width 200ms linear;
-o-transition: width 200ms linear;
-ms-transition: width 200ms linear;
transition: width 200ms linear;
-webkit-animation: progressmove 2s linear infinite;
-moz-animation: progressmove 2s linear infinite;
-o-animation: progressmove 2s linear infinite;
-ms-animation: progressmove 2s linear infinite;
animation: progressmove 2s linear infinite;
-webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@-moz-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
#uploader .filelist li p.imgWrap {
position: relative;
z-index: 2;
line-height: 110px;
vertical-align: middle;
overflow: hidden;
width: 110px;
height: 110px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webit-transition: 200ms ease-out;
-moz-transition: 200ms ease-out;
-o-transition: 200ms ease-out;
-ms-transition: 200ms ease-out;
transition: 200ms ease-out;
}
#uploader .filelist li img {
width: 100%;
}
#uploader .filelist li p.error {
background: #f43838;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
height: 28px;
line-height: 28px;
width: 100%;
z-index: 100;
}
#uploader .filelist li .success {
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
z-index: 200;
text-indent:-9999px;
background: url(success.png) no-repeat right bottom;
}
#uploader .filelist div.file-panel {
position: absolute;
height: 0;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
background: rgba( 0, 0, 0, 0.5 );
width: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 300;
}
#uploader .filelist div.file-panel span {
width: 24px;
height: 24px;
display: inline;
float: right;
text-indent: -9999px;
overflow: hidden;
background: url(icons.png) no-repeat;
margin: 5px 1px 1px;
cursor: pointer;
}
#uploader .filelist div.file-panel span.rotateLeft {
background-position: 0 -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
background-position: 0 0;
}
#uploader .filelist div.file-panel span.rotateRight {
background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
background-position: -24px 0;
}
#uploader .filelist div.file-panel span.cancel {
background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
background-position: -48px 0;
}
#uploader .statusBar {
height: 63px;
border-top: 1px solid #dadada;
padding: 0 20px;
line-height: 63px;
vertical-align: middle;
position: relative;
}
#uploader .statusBar .progress {
border: 1px solid #1483d8;
width: 198px;
background: #fff;
height: 18px;
position: relative;
display: inline-block;
text-align: center;
line-height: 20px;
color: #6dbfff;
position: relative;
margin-right: 10px;
}
#uploader .statusBar .progress span.percentage {
width: 0;
height: 100%;
left: 0;
top: 0;
background: #1483d8;
position: absolute;
}
#uploader .statusBar .progress span.text {
position: relative;
z-index: 10;
}
#uploader .statusBar .info {
display: inline-block;
font-size: 14px;
color: #666666;
}
#uploader .statusBar .btns {
position: absolute;
top: 10px;
right: 20px;
line-height: 40px;
}
#filePicker2 {
display: inline-block;
float: left;
}
#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
background: #ffffff;
border: 1px solid #cfcfcf;
color: #565656;
padding: 0 18px;
display: inline-block;
border-radius: 3px;
margin-left: 10px;
cursor: pointer;
font-size: 14px;
float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn:hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
background: #f0f0f0;
}
#uploader .statusBar .btns .uploadBtn {
background: #00b7ee;
color: #fff;
border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn:hover {
background: #00a2d4;
}
#uploader .statusBar .btns .uploadBtn.disabled {
pointer-events: none;
opacity: 0.6;
}
/*--------------華麗分割線--------------------*/
#wrapperx {
width: 100%;
margin: 0 auto;
margin: 1em;
width: auto;
}
#containerx {
border: 1px solid #dadada;
color: #838383;
font-size: 12px;
margin-top: 10px;
background-color: #FFF;
}
#uploaderx .queueList {
margin: 20px;
}
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
#uploaderx .placeholder {
border: 3px dashed #e6e6e6;
min-height: 238px;
padding-top: 158px;
text-align: center;
background: url(image.png) center 93px no-repeat;
color: #cccccc;
font-size: 18px;
position: relative;
}
#uploaderx .placeholder .webuploader-pick {
font-size: 18px;
background: #00b7ee;
border-radius: 3px;
line-height: 44px;
padding: 0 30px;
color: #fff;
display: inline-block;
margin: 20px auto;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#uploaderx .placeholder .webuploader-pick-hover {
background: #00a2d4;
}
#uploaderx .placeholder .flashTip {
color: #666666;
font-size: 12px;
position: absolute;
width: 100%;
text-align: center;
bottom: 20px;
}
#uploaderx .placeholder .flashTip a {
color: #0785d1;
text-decoration: none;
}
#uploaderx .placeholder .flashTip a:hover {
text-decoration: underline;
}
#uploaderx .placeholder.webuploader-dnd-over {
border-color: #999999;
}
#uploaderx .placeholder.webuploader-dnd-over.webuploader-dnd-denied {
border-color: red;
}
#uploaderx .filelist {
list-style: none;
margin: 0;
padding: 0;
}
#uploaderx .filelist:after {
content: '';
display: block;
width: 0;
height: 0;
overflow: hidden;
clear: both;
}
#uploaderx .filelist li {
width: 110px;
height: 110px;
background: url(bg.png) no-repeat;
text-align: center;
margin: 0 8px 20px 0;
position: relative;
display: inline;
float: left;
overflow: hidden;
font-size: 12px;
}
#uploaderx .filelist li p.log {
position: relative;
top: -45px;
}
#uploaderx .filelist li p.title {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
top: 5px;
text-indent: 5px;
text-align: left;
}
#uploaderx .filelist li p.progress {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 8px;
overflow: hidden;
z-index: 50;
}
#uploaderx .filelist li p.progress span {
display: none;
overflow: hidden;
width: 0;
height: 100%;
background: #1483d8 url(progress.png) repeat-x;
-webit-transition: width 200ms linear;
-moz-transition: width 200ms linear;
-o-transition: width 200ms linear;
-ms-transition: width 200ms linear;
transition: width 200ms linear;
-webkit-animation: progressmove 2s linear infinite;
-moz-animation: progressmove 2s linear infinite;
-o-animation: progressmove 2s linear infinite;
-ms-animation: progressmove 2s linear infinite;
animation: progressmove 2s linear infinite;
-webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@-moz-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
#uploaderx .filelist li p.imgWrap {
position: relative;
z-index: 2;
line-height: 110px;
vertical-align: middle;
overflow: hidden;
width: 110px;
height: 110px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webit-transition: 200ms ease-out;
-moz-transition: 200ms ease-out;
-o-transition: 200ms ease-out;
-ms-transition: 200ms ease-out;
transition: 200ms ease-out;
}
#uploaderx .filelist li img {
width: 100%;
}
#uploaderx .filelist li p.error {
background: #f43838;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
height: 28px;
line-height: 28px;
width: 100%;
z-index: 100;
}
#uploaderx .filelist li .success {
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
z-index: 200;
text-indent:-9999px;
background: url(success.png) no-repeat right bottom;
}
#uploaderx .filelist div.file-panel {
position: absolute;
height: 0;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
background: rgba( 0, 0, 0, 0.5 );
width: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 300;
}
#uploaderx .filelist div.file-panel span {
width: 24px;
height: 24px;
display: inline;
float: right;
text-indent: -9999px;
overflow: hidden;
background: url(icons.png) no-repeat;
margin: 5px 1px 1px;
cursor: pointer;
}
#uploaderx .filelist div.file-panel span.rotateLeft {
background-position: 0 -24px;
}
#uploaderx .filelist div.file-panel span.rotateLeft:hover {
background-position: 0 0;
}
#uploaderx .filelist div.file-panel span.rotateRight {
background-position: -24px -24px;
}
#uploaderx .filelist div.file-panel span.rotateRight:hover {
background-position: -24px 0;
}
#uploaderx .filelist div.file-panel span.cancel {
background-position: -48px -24px;
}
#uploaderx .filelist div.file-panel span.cancel:hover {
background-position: -48px 0;
}
#uploaderx .statusBar {
height: 63px;
border-top: 1px solid #dadada;
padding: 0 20px;
line-height: 63px;
vertical-align: middle;
position: relative;
}
#uploaderx .statusBar .progress {
border: 1px solid #1483d8;
width: 198px;
background: #fff;
height: 18px;
position: relative;
display: inline-block;
text-align: center;
line-height: 20px;
color: #6dbfff;
position: relative;
margin-right: 10px;
}
#uploaderx .statusBar .progress span.percentage {
width: 0;
height: 100%;
left: 0;
top: 0;
background: #1483d8;
position: absolute;
}
#uploaderx .statusBar .progress span.text {
position: relative;
z-index: 10;
}
#uploaderx .statusBar .info {
display: inline-block;
font-size: 14px;
color: #666666;
}
#uploaderx .statusBar .btns {
position: absolute;
top: 10px;
right: 20px;
line-height: 40px;
}
#filePicker2x {
display: inline-block;
float: left;
}
#uploaderx .statusBar .btns .webuploader-pick,
#uploaderx .statusBar .btns .uploadBtn,
#uploaderx .statusBar .btns .uploadBtn.state-uploading,
#uploaderx .statusBar .btns .uploadBtn.state-paused {
background: #ffffff;
border: 1px solid #cfcfcf;
color: #565656;
padding: 0 18px;
display: inline-block;
border-radius: 3px;
margin-left: 10px;
cursor: pointer;
font-size: 14px;
float: left;
}
#uploaderx .statusBar .btns .webuploader-pick-hover,
#uploaderx .statusBar .btns .uploadBtn:hover,
#uploaderx .statusBar .btns .uploadBtn.state-uploading:hover,
#uploaderx .statusBar .btns .uploadBtn.state-paused:hover {
background: #f0f0f0;
}
#uploaderx .statusBar .btns .uploadBtn {
background: #00b7ee;
color: #fff;
border-color: transparent;
}
#uploaderx .statusBar .btns .uploadBtn:hover {
background: #00a2d4;
}
#uploaderx .statusBar .btns .uploadBtn.disabled {
pointer-events: none;
opacity: 0.6;
}
```
##需要用到的圖片
- 翼通長租公寓管理系統
- 版本升級
- 操作手冊
- 添加新店
- 給新店分配管理員(店長)
- 新店必須完成的基礎信息
- 常見問題
- 翼通經銷商管理系統
- 版本升級
- 聚源達印刷管理系統
- 0、升級說明及重要問題注意
- 1、訂單狀態說明（兼容老系統）
- 四月顯示之僵尸產品
- 打印
- Html5中localStorage存儲JSON數據并讀取JSON數據的實現方法
- 功能說明
- 2.各種操作說明
- 升級說明
- 物聯網
- CentosARM
- 樹莓派(RPi) CentOS7擴展內存卡剩余空間
- 翼通管理系統快速開發框架LayUI版
- layui模塊使用方法
- 默認顯示自定義排序方法
- linq查詢輸出json小例子
- layui json格式
- treetable借鑒
- layui表單驗證
- layui圖標
- 第一書記信息管理系統
- 多條件查詢搜索
- 年齡計算
- 家庭數據打印
- 數據打印框架
- 后臺處理獲取需打印數據
- js打印方法
- 圖片上傳
- 單圖上傳
- 多圖上傳
- 多圖上傳CSS樣式
- 圖片保存
- 高級大招
- SqlServer
- sqlserver 去重復并查詢的一列數據拼接用逗號隔開顯示
- 修復SqlServer孤立用戶
- VS2017提高開發效率的幾大技巧看過終生受用，錯過繼續盲目忙碌。
- 微信開發
- 微信開發基礎
- 1、微信公眾平臺測試帳號的注冊與使用
- 2、NuGet引用Senparc微信開發類
- 3、微信接入應答問文件
- 微信開發進階
- 1、綁定用戶把openid、用戶頭像、昵稱綁定到數據庫
- 2、阿里大魚發送驗證短信
- 3、測試用戶是否關注公眾號
- 人人商城
- 1、公眾號接入配置
- 2、公眾號支付配置
- 3、手機短信配置
- 4、小程序配置
- 5、店鋪可視化裝修
- 6、三級分銷配置
- MarkDown
- 1、markdown寫流程圖幫助文檔
- 阿里短信
- 常用短信模板
- 中國翼通基類庫
- 一、說明
- 二、基類庫代碼（用法索引）
- 1、阿里大魚短信
- 2、阿里云短信類
- 3、web.config操作類
- 4、字符操作類
- 5、隨機數
- 6、拼音類
- 7、身份證類
- 8、SqlServer數據庫操作sqleasy
- 9、JSON類
- 999、日志調試類
- 10、QRCode生成二維碼
- 11、保存遠程圖片到本地
- 12、Session類
- 13、ip類
- 14、驗證碼
- 15、base64類
- 翼通CMS版本升級
- 昆明市公安局政治部
- 3D打印
- 老撾消費機
- 幫助文檔
- 工作流開發
- 工作流數據庫結構
- 工作流借鑒
- 思想
- 設計工作流要注意的問題
- 編譯錯誤
- 缺少編譯器要求的成員“Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create"
- EasyUI操作例子
- combogrid綁定
- linq
- 建立linqToSqlServer連接
- 公租房管理系統
- 改進升級更新
- 云南民間工藝傳承協會
- 思路
- 問題
- 云南麥根科技有限公司
- 月嫂多APP
- 嫂多點APP
- 管理后臺
- Laravel
- 一、開發環境搭建
- 二、如何正確使用 Composer 安裝 Laravel 擴展包
- 三、修改數據庫連接
- 四、創建一個簡單的Laravel例子
- 五. laravel維護日記
- 六、nginx下偽靜態配置
- 七、增刪查改知識點
- 騰訊借貸反欺詐開發
- ThinkPHP
- 0、ThinkPHP安裝
- 2、Zend Studio 13.6.1 的安裝和破解
- 1、thinkphp自由查詢語句分頁
- 3、thinkphp M R 方法詳解
- 4、前臺循環
- 5、laiui提交表單
- 翼通云官方網站(里面有內容)
- 開發過程中各種問題
- 小鳥云系統的坑
- 更新日志
- 單頁面模板
- 翼通智慧網站策劃
- 4.05到4.10升級
- phpstom
- 一、設置字體、外觀
- 二、phpstom運行php教程
- 三、phpstom debug調試
- 四、PHPStorm 提示502 Bad Gateway
- vscode
- vscode常用插件
- vscode使用git翼通教程
- Git忽略提交規則 - .gitignore配置運維總結
- Git忽略文件不起作用解決方案
- vscode添加新建文件頭部注釋和函數注釋
- git命令
- git命令大全
- vscode每次打開都會覆蓋窗口
- git忽略文件格式
- ios au 更新APP store教程
- iOS APP版本更新升級教程
- 上傳ipa常見錯誤解決方案
- 上傳ipa報錯版本號重復問題解決教程
- hbuider
- Hbuider制作app升級包的簡單辦法 (升級官方提供的案例)
- linux
- wdcp后臺訪問安全設置即限制域名/IP訪問設置及清除方法
- MSSQL數據庫
- 恢復
- SqlServer將沒有log文件的數據庫文件附加到服務器中
- 1、mssql2019報18456不能登錄
- [簡易版]幼兒園新生入學報名管理系統
- 物流園電子出門條系統
- 電腦自選超市開發
- 服務商操作手冊
- 管理員操作手冊
- EcShop
- 一、EcShop5.3升級5.6遇到問題
- 2、ECShop 時間相差8小時、時間不對的問題
- 3、數據庫操作
- 3、嵌入類的方法
- 4、入駐商列表sql