jquery网站地图编辑器效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery网站地图编辑器效果代码,可编辑网站栏目地图。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,300,400' rel='stylesheet' type='text/css'> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700); body { font-family: "Open Sans", sans-serif; background-color: #BFBFBF; } ::selection { background: black; color: white; } ::-moz-selection { background: black; color: white; } .transition, .col .deleteCol, .page .delete, .addCol, .item .plus, #show { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } #app { display: none; background-color: #f0f0f0; } #preview { height: 400px; width: 100%; position: relative; background-color: #f0f0f0; background-image: url(""); background-size: cover; background-attachment: fixed; } .learn { width: 100%; text-align: center; color: black; padding: 1em 0; text-decoration: none; background-color: #D1D1D1; } a { text-decoration: none; } #show { cursor: pointer; width: 200px; text-align: center; padding: 1em 0 1em 0; border-radius: 20px; background-color: #357fc9; color: white; margin: 8.5em auto 0 auto; } #show:hover { background-color: #335e88; border-radius: 0; } #about { background-color: #335e88; text-align: center; color: white; padding: 1em 0 1em 0; box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5); } #intro { width: 100%; background-color: #357fc9; } #introText { text-align: center; width: 100%; background-color: rgba(53, 127, 201, 0.7); } #intro h1 { padding: 1em 0 0.8em 0; font-size: 4em; color: white; font-weight: 300; } .title { background-color: #335e88; width: 100%; font-family: "rokkitt", sans-serif; color: white; text-align: center; font-size: 1.7em; padding: 0.5em 0 0.5em 0; box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2); } #appArea { width: 100%; max-width: 1200px; margin: 1em auto; min-height: 400px; } @media screen and (max-width: 1200px) { #appArea { width: 90%; margin-left: 5%; } } .item { width: 100%; margin-bottom: 0.75em; } .item .box { padding: 0.75em; border-radius: 3px; font-size: 1.2em; text-align: center; margin-bottom: 0.75em; } .item .head { background-color: #357fc9; color: #f0f0f0; border: none; } .item .sub { border: 4px solid #7cadde; } .item .plus { background-color: #D1D1D1; width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; text-align: center; cursor: pointer; } .item .plus:hover { background-color: #BDBCBC; } .item .plus p { padding-top: 2px; } .col { width: 14%; margin: 1em 0.5em 1.25em 0.5em; display: inline-block; vertical-align: top; } @media screen and (max-width: 800px) { .col { width: 22%; } } @media screen and (max-width: 650px) { .col { width: 30%; } } @media screen and (max-width: 585px) { .col { width: 46%; margin-right: 0.3em; } } @media screen and (max-width: 420px) { .col { width: 93%; margin: 1em 0 1.25em 5%; } } .inline { display: inline-block !important; } .addCol { text-align: center; width: 100px; margin: 0 auto 1em auto; padding: 0.5em; border-radius: 2px; background-color: #D1D1D1; cursor: pointer; font-size: 0.8em; } .addCol:hover { background-color: #BDBCBC; } .page { display: none; position: relative; } .page .delete { position: absolute; top: 10px; left: 0.7em; background-color: #D1D1D1; width: 15px; height: 15px; border-radius: 50%; text-align: center; cursor: pointer; } .page .delete:hover { background-color: #BDBCBC; } .page .delete p { margin-top: -2px; } .new { display: none; } #print { background-color: #e8e8e8; width: 100%; cursor: pointer; } #print h3 { text-align: center; width: 210px; background-color: #357fc9; margin: 0 auto 0 auto; padding: 0.5em 0 0.5em 0; color: white; font-size: 0.9em; } #print h3:hover { background-color: #335e88; } #print h4 { width: 100%; padding: 0.5em 0 0.5em 0; text-align: center; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0