前端封装原理与知识点（HTML手册)-2019年9月11日
程序员文章站
2022-03-11 14:15:07
...
前端小框架
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>>html查询手册</title>
<link rel="stylesheet" href="./static/css/style.css">
</head>
<body>
<div class="cy-fluid" style="padding:0;">
<!-- 顶部 -->
<div class="cy-row">
<div class="cy-col-md-12 cy-bg-gray cy-p-10">
<h1 class="cy-color-deepgray cy-ml-40" ><span class="cy-color-coral" style="text-shadow: 2px 2px 1px #333; font-weight: bolder">html </span> 查询手册</h1>
</div>
</div>
<div class="cy-row">
<div class="cy-col-md2 cy-col-sm2 cy-bg-eee">
<ul class="cy-p-30 cy-lh-normal cy-ml-20" id="nav" style="min-height: 800px;">
<li style="cursor: pointer;"><strong>HTML基础教程</strong>
<ul class="cy-ml-20 cy-dl-n" >
<li><a href="./base/1_HTML基础.html" target="content">HTML基础</a></li>
<li><a href="./base/2_HTML元素.html" target="content">HTML元素</a></li>
<li><a href="./base/3_HTML属性.html" target="content">HTML属性</a></li>
<li><a href="./base/4_HTML标题.html" target="content">HTML标题</a></li>
<li><a href="./base/5_HTML锻落.html" target="content">HTML锻落</a></li>
<li><a href="./base/6_HTML样式.html" target="content">HTML样式</a></li>
<li><a href="./base/7_HTML链接.html" target="content">HTML链接</a></li>
<li><a href="./base/8_HTML图片.html" target="content">HTML图片</a></li>
<!-- <li><a href="">Flex弹性布局</a></li>-->
<!-- <li><a href="">媒体查询</a></li>-->
</ul>
</li>
<li style="cursor: pointer;"><strong>HTML 表单</strong>
<ul class="cy-ml-20 cy-dl-n">
<li><a href="./component/1_HTML表单元素.html" target="content">HTML表单元素</a></li>
<li><a href="./component/2_HTML输入类型.html" target="content">HTML输入类型</a></li>
<li><a href="./component/3_HTMLInput属性.html" target="content">HTMLInput属性
</a></li>
</ul>
</li>
</ul>
<p class="cy-mb-10 cyn-tx-c"><a href="https://www.icaoyuan.cn/">曹渊博客</a>©版权所有(2019)</p>
</div>
<div class="cy-col-md10 cy-col-sm10 cy-p-30" style="min-height: 800px;" id="content">
<!-- 文档内容区-->
<iframe src="welcome.html" frameborder="0" name="content" width="100%" height="900"></iframe>
</div>
</div>
</div>
</div>
<script>
// 控制导航折叠
var menus = document.querySelectorAll('#nav > li');
menus.forEach(function (menu){
menu.firstElementChild.addEventListener('click', function (evt) {
evt.target.nextElementSibling.classList.toggle('cy-dl-n');
}, false);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
syle.css CSS样式
实例
@import "style/reset.css"; @import "style/predefine.css"; @import "style/layout.css"; @import "style/component.css";
运行实例 »
点击 "运行实例" 按钮查看在线实例
reset.css 样式
实例
h1, h2, h3, h4, h5, h6 {
font-weight: 400
}
blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:active, a:hover {
outline: 0
}
a {
text-decoration: none
}
a cite {
font-style: normal;
*cursor: pointer
}
img {
border: none
}
li {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button, input, optgroup, option, select, textarea {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
outline: 0
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word
}
body {
line-height: 24px;
font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif；
}
hr {
height: 1px;
margin: 10px 0;
border: 0;
clear: both
}
a {
color: #333;
text-decoration: none
}
a:hover {
color: lightseagreen;
font-weight: bold;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
predefine.css
实例
.cy-main {
width: 1200px;
padding: 15px 0;
}
.cy-l {
float: left;
}
.cy-r {
float: right;
}
.cy-l-li li {
float: left;
}
.cy-r-li li {
float: right;
}
.cy-auto {
margin: 0 auto;
}
.cy-p-10 > * {
padding: 10px;
}
.cy-pl-5 {
padding: 5px;
}
.cy-pd-10 {
padding: 10px;
}
.cy-p-20 {
padding: 20px;
}
.cy-p-30 {
padding: 30px;
}
.cy-p-40 {
padding: 40px;
}
.cy-p-50 {
padding: 50px;
}
.cy-m-5 {
margin: 5px;
}
.cy-m-10 {
margin: 10px;
}
.cy-m-20 {
margin: 20px;
}
.cy-m-30 {
margin: 30px;
}
.cy-m-40 {
margin: 40px;
}
.cy-m-50 {
margin: 50px;
}
.hovers {
background: #2f97f1;
color: #fff;
}
.cy-mr-5 {
margin-right: 5px !important;
}
.cy-mr-10 {
margin-right: 10px !important;
}
.cy-mr-20 {
margin-right: 20px !important;
}
.cy-mr-30 {
margin-right: 30px !important;
}
.cy-mt-5 {
margin-top: 5px !important;
}
.cy-bg-e {
background: #eee;
}
.cy-mt-10 {
margin-top: 10px !important;
}
.cy-mt-20 {
margin-top: 20px !important;
}
.cy-mt-30 {
margin-top: 30px !important;
}
.cy-mt-40 {
margin-top: 40px !important;
}
.cy-mt-50 {
margin-top: 50px !important;
}
.cy-mt-60 {
margin-top: 60px !important;
}
.cy-mt-80 {
margin-top: 80px !important;
}
.cy-mb-5 {
margin-bottom: 5px !important;
}
.cy-mb-10 {
margin-bottom: 10px !important;
}
.cy-mb-20 {
margin-bottom: 20px !important;
}
.cy-mb-30 {
margin-bottom: 30px !important;
}
.cy-mb-40 {
margin-bottom: 40px !important;
}
.cy-mb-60 {
margin-bottom: 60px !important;
}
.cy-ml-5 {
margin-left: 5px !important;
}
.cy-ml-10 {
margin-left: 10px !important;
}
.cy-ml-20 {
margin-left: 20px !important;
}
.cy-ml-30 {
margin-left: 30px !important;
}
.cy-ml-40 {
margin-left: 40px !important;
}
.cy-pt-30 {
padding-top: 30px !important;
}
.cy-pr-30 {
padding-right: 30px !important;
}
.cy-pr-20 {
padding-right: 20px !important;
}
.cy-pr-10 {
margin-right: 10px !important;
}
.cy-pb-30 {
padding-bottom: 30px !important;
}
.cy-pt-20 {
padding-top: 20px !important;
}
.cy-pt-10 {
padding-top: 10px !important;
}
.cy-pt-5 {
padding-top: 5px !important;
}
.cy-pt-40 {
padding-top: 40px !important;
}
.cy-pb-20 {
padding-bottom: 20px !important;
}
.cy-pb-10 {
padding-bottom: 10px !important;
}
.cy-pb-60 {
padding-bottom: 60px !important;
}
.cy-pb-40 {
padding-bottom: 40px !important;
}
.cy-pl-10 {
padding-left: 10px !important;
}
.cy-pl-20 {
padding-left: 20px !important;
}
.cy-pl-30 {
padding-left: 30px !important;
}
.cy-t-30 {
top: 30px;
}
.cy-ps-r {
position: relative;
}
.cy-ps-a {
position: absolute;
}
.cy-dl-b {
display: block;
}
.cy-box-s {
box-shadow: 2px 10px 10px rgba(0, 0, 0, .08);
}
.cy-box-s-z {
box-shadow: 0 0 1px 1px rgba(20, 23, 28, .1), 0 3px 1px 0 rgba(20, 23, 28, .1);
}
.cy-bg-fff {
background-color: #fff;
}
.cy-bg-000 {
background-color: #000;
}
.cy-bg-eee {
background-color: #eee;
}
.cy-b-r12 {
border-radius: 12px;
}
.cy-b-r8 {
border-radius: 8px;
}
.cy-bd {
border: 1px solid #D9DDE1;
}
.cy-clear {
clear: both;
*zoom: 1;
}
.cy-clear:after {
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.cy-tx-c {
text-align: center;
}
.cy-tx-r {
text-align: right;
}
.cy-tx-l {
text-align: left !important;
}
.cy-dp-f {
display: flex;
justify-content: space-around;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
}
.php-disableds {
cursor: not-allowed !important;
}
.cy-custom {
padding: 9px 15px 9px 0;
float: left;
margin-left: 150px;
}
.cy-width300 {
width: 300px !important;
}
/*custom*/
/*列表标识符*/
.cy-li-disc {
list-style-type: disc;
}
.cy-li-circle {
list-style-type: circle;
}
.cy-li-num {
list-style-type: decimal;
}
/*行高*/
.cy-lh-normal {
line-height: 1.5rem;
}
.cy-lh-large {
line-height: 2rem;
}
.cy-lh-larger {
line-height: 2.5rem;
}
.cy-color-lightgrey
{
color: #aaa;
}
.cy-bg-wheat
{
background-color: wheat;
}
.cy-dl-n {
display: none;
}
.cy-color-coral {
color: coral;
}
.cy-color-deepgray {
color: #555;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
layout.css
实例
/*布局*/
.cy-container {
position: relative;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box
}
.cy-fluid {
position: relative;
margin: 0 auto;
padding: 0 15px
}
.cy-row:after, .cy-row:before {
content: '';
display: block;
clear: both
}
.cy-col-lg1, .cy-col-lg10, .cy-col-lg11, .cy-col-lg12, .cy-col-lg2, .cy-col-lg3, .cy-col-lg4, .cy-col-lg5, .cy-col-lg6, .cy-col-lg7, .cy-col-lg8, .cy-col-lg9, .cy-col-md1, .cy-col-md10, .cy-col-md11, .cy-col-md12, .cy-col-md2, .cy-col-md3, .cy-col-md4, .cy-col-md5, .cy-col-md6, .cy-col-md7, .cy-col-md8, .cy-col-md9, .cy-col-sm1, .cy-col-sm10, .cy-col-sm11, .cy-col-sm12, .cy-col-sm2, .cy-col-sm3, .cy-col-sm4, .cy-col-sm5, .cy-col-sm6, .cy-col-sm7, .cy-col-sm8, .cy-col-sm9, .cy-col-xs1, .cy-col-xs10, .cy-col-xs11, .cy-col-xs12, .cy-col-xs2, .cy-col-xs3, .cy-col-xs4, .cy-col-xs5, .cy-col-xs6, .cy-col-xs7, .cy-col-xs8, .cy-col-xs9 {
position: relative;
display: block;
box-sizing: border-box
}
.cy-col-xs1, .cy-col-xs10, .cy-col-xs11, .cy-col-xs12, .cy-col-xs2, .cy-col-xs3, .cy-col-xs4, .cy-col-xs5, .cy-col-xs6, .cy-col-xs7, .cy-col-xs8, .cy-col-xs9 {
float: left;
}
.cy-col-xs1 {
width: 8.33333333%
}
.cy-col-xs2 {
width: 16.66666667%
}
.cy-col-xs3 {
width: 25%
}
.cy-col-xs4 {
width: 33.33333333%
}
.cy-col-xs5 {
width: 41.66666667%
}
.cy-col-xs6 {
width: 50%
}
.cy-col-xs7 {
width: 58.33333333%
}
.cy-col-xs8 {
width: 66.66666667%
}
.cy-col-xs9 {
width: 75%
}
.cy-col-xs10 {
width: 83.33333333%
}
.cy-col-xs11 {
width: 91.66666667%
}
.cy-col-xs12 {
width: 100%
}
.cy-col-xs-offset1 {
margin-left: 8.33333333%
}
.cy-col-xs-offset2 {
margin-left: 16.66666667%
}
.cy-col-xs-offset3 {
margin-left: 25%
}
.cy-col-xs-offset4 {
margin-left: 33.33333333%
}
.cy-col-xs-offset5 {
margin-left: 41.66666667%
}
.cy-col-xs-offset6 {
margin-left: 50%
}
.cy-col-xs-offset7 {
margin-left: 58.33333333%
}
.cy-col-xs-offset8 {
margin-left: 66.66666667%
}
.cy-col-xs-offset9 {
margin-left: 75%
}
.cy-col-xs-offset10 {
margin-left: 83.33333333%
}
.cy-col-xs-offset11 {
margin-left: 91.66666667%
}
.cy-col-xs-offset12 {
margin-left: 100%
}
@media screen and (max-width: 768px) {
.cy-hide-xs {
display: none !important
}
.cy-show-xs-block {
display: block !important
}
.cy-show-xs-inline {
display: inline !important
}
.cy-show-xs-inline-block {
display: inline-block !important
}
}
@media screen and (min-width: 768px) {
.cy-container {
width: 750px
}
.cy-hide-sm {
display: none !important
}
.cy-show-sm-block {
display: block !important
}
.cy-show-sm-inline {
display: inline !important
}
.cy-show-sm-inline-block {
display: inline-block !important
}
.cy-col-sm1, .cy-col-sm10, .cy-col-sm11, .cy-col-sm12, .cy-col-sm2, .cy-col-sm3, .cy-col-sm4, .cy-col-sm5, .cy-col-sm6, .cy-col-sm7, .cy-col-sm8, .cy-col-sm9 {
float: left
}
.cy-col-sm1 {
width: 8.33333333%
}
.cy-col-sm2 {
width: 16.66666667%
}
.cy-col-sm3 {
width: 25%
}
.cy-col-sm4 {
width: 33.33333333%
}
.cy-col-sm5 {
width: 41.66666667%
}
.cy-col-sm6 {
width: 50%
}
.cy-col-sm7 {
width: 58.33333333%
}
.cy-col-sm8 {
width: 66.66666667%
}
.cy-col-sm9 {
width: 75%
}
.cy-col-sm10 {
width: 83.33333333%
}
.cy-col-sm11 {
width: 91.66666667%
}
.cy-col-sm12 {
width: 100%
}
.cy-col-sm-offset1 {
margin-left: 8.33333333%
}
.cy-col-sm-offset2 {
margin-left: 16.66666667%
}
.cy-col-sm-offset3 {
margin-left: 25%
}
.cy-col-sm-offset4 {
margin-left: 33.33333333%
}
.cy-col-sm-offset5 {
margin-left: 41.66666667%
}
.cy-col-sm-offset6 {
margin-left: 50%
}
.cy-col-sm-offset7 {
margin-left: 58.33333333%
}
.cy-col-sm-offset8 {
margin-left: 66.66666667%
}
.cy-col-sm-offset9 {
margin-left: 75%
}
.cy-col-sm-offset10 {
margin-left: 83.33333333%
}
.cy-col-sm-offset11 {
margin-left: 91.66666667%
}
.cy-col-sm-offset12 {
margin-left: 100%
}
}
@media screen and (min-width: 992px) {
.cy-container {
width: 970px
}
.cy-hide-md {
display: none !important
}
.cy-show-md-block {
display: block !important
}
.cy-show-md-inline {
display: inline !important
}
.cy-show-md-inline-block {
display: inline-block !important
}
.cy-col-md1, .cy-col-md10, .cy-col-md11, .cy-col-md12, .cy-col-md2, .cy-col-md3, .cy-col-md4, .cy-col-md5, .cy-col-md6, .cy-col-md7, .cy-col-md8, .cy-col-md9 {
float: left
}
.cy-col-md1 {
width: 8.33333333%
}
.cy-col-md2 {
width: 16.66666667%
}
.cy-col-md3 {
width: 25%
}
.cy-col-md4 {
width: 33.33333333%
}
.cy-col-md5 {
width: 41.66666667%
}
.cy-col-md6 {
width: 50%
}
.cy-col-md7 {
width: 58.33333333%
}
.cy-col-md8 {
width: 66.66666667%
}
.cy-col-md9 {
width: 75%
}
.cy-col-md10 {
width: 83.33333333%
}
.cy-col-md11 {
width: 91.66666667%
}
.cy-col-md12 {
width: 100%
}
.cy-col-md-offset1 {
margin-left: 8.33333333%
}
.cy-col-md-offset2 {
margin-left: 16.66666667%
}
.cy-col-md-offset3 {
margin-left: 25%
}
.cy-col-md-offset4 {
margin-left: 33.33333333%
}
.cy-col-md-offset5 {
margin-left: 41.66666667%
}
.cy-col-md-offset6 {
margin-left: 50%
}
.cy-col-md-offset7 {
margin-left: 58.33333333%
}
.cy-col-md-offset8 {
margin-left: 66.66666667%
}
.cy-col-md-offset9 {
margin-left: 75%
}
.cy-col-md-offset10 {
margin-left: 83.33333333%
}
.cy-col-md-offset11 {
margin-left: 91.66666667%
}
.cy-col-md-offset12 {
margin-left: 100%
}
}
@media screen and (min-width: 1200px) {
.cy-container {
width: 1170px
}
.cy-hide-lg {
display: none !important
}
.cy-show-lg-block {
display: block !important
}
.cy-show-lg-inline {
display: inline !important
}
.cy-show-lg-inline-block {
display: inline-block !important
}
.cy-col-lg1, .cy-col-lg10, .cy-col-lg11, .cy-col-lg12, .cy-col-lg2, .cy-col-lg3, .cy-col-lg4, .cy-col-lg5, .cy-col-lg6, .cy-col-lg7, .cy-col-lg8, .cy-col-lg9 {
float: left
}
.cy-col-lg1 {
width: 8.33333333%
}
.cy-col-lg2 {
width: 16.66666667%
}
.cy-col-lg3 {
width: 25%
}
.cy-col-lg4 {
width: 33.33333333%
}
.cy-col-lg5 {
width: 41.66666667%
}
.cy-col-lg6 {
width: 50%
}
.cy-col-lg7 {
width: 58.33333333%
}
.cy-col-lg8 {
width: 66.66666667%
}
.cy-col-lg9 {
width: 75%
}
.cy-col-lg10 {
width: 83.33333333%
}
.cy-col-lg11 {
width: 91.66666667%
}
.cy-col-lg12 {
width: 100%
}
.cy-col-lg-offset1 {
margin-left: 8.33333333%
}
.cy-col-lg-offset2 {
margin-left: 16.66666667%
}
.cy-col-lg-offset3 {
margin-left: 25%
}
.cy-col-lg-offset4 {
margin-left: 33.33333333%
}
.cy-col-lg-offset5 {
margin-left: 41.66666667%
}
.cy-col-lg-offset6 {
margin-left: 50%
}
.cy-col-lg-offset7 {
margin-left: 58.33333333%
}
.cy-col-lg-offset8 {
margin-left: 66.66666667%
}
.cy-col-lg-offset9 {
margin-left: 75%
}
.cy-col-lg-offset10 {
margin-left: 83.33333333%
}
.cy-col-lg-offset11 {
margin-left: 91.66666667%
}
.cy-col-lg-offset12 {
margin-left: 100%
}
}
.cy-col-space1 {
margin: -.5px
}
.cy-col-space1 > * {
padding: .5px
}
.cy-col-space3 {
margin: -1.5px
}
.cy-col-space3 > * {
padding: 1.5px
}
.cy-col-space5 {
margin: -2.5px
}
.cy-col-space5 > * {
padding: 2.5px
}
.cy-col-space8 {
margin: -3.5px
}
.cy-col-space8 > * {
padding: 3.5px
}
.cy-col-space10 {
margin: -5px
}
.cy-col-space10 > * {
padding: 5px
}
.cy-col-space12 {
margin: -6px
}
.cy-col-space12 > * {
padding: 6px
}
.cy-col-space15 {
margin: -7.5px
}
.cy-col-space15 > * {
padding: 7.5px
}
.cy-col-space18 {
margin: -9px
}
.cy-col-space18 > * {
padding: 9px
}
.cy-col-space20 {
margin: -10px
}
.cy-col-space20 > * {
padding: 10px
}
.cy-col-space22 {
margin: -11px
}
.cy-col-space22 > * {
padding: 11px
}
.cy-col-space25 {
margin: -12.5px
}
.cy-col-space25 > * {
padding: 12.5px
}
.cy-col-space30 {
margin: -15px
}
.cy-col-space30 > * {
padding: 15px
}
/*布局结束*/运行实例 »
点击 "运行实例" 按钮查看在线实例
component.css
实例
/*列表头*/
.cy-list-header select {
width: 98%;
height: 32px !important;
}
.cy-list-header .cy-form-item {
margin-bottom: 0 !important;
}
.cy-list-header button, .cy-list-header select, .cy-list-header input {
line-height: 1.499;
display: inline-block;
font-weight: 400;
white-space: nowrap;
background-image: none;
box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
cursor: pointer;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
height: 32px;
font-size: 14px;
border-radius: 4px;
color: rgba(0, 0, 0, .65);
background-color: #fff;
border: 1px solid #d9d9d9;
}
.cy-list-header input {
color: rgba(0, 0, 0, .65);
}
.cy-list-header button {
margin-right: inherit;
}
.cy-list-header .line {
color: #e8e8e8;
margin: 0 10px;
}
.cy-list-header .expert-search {
position: absolute;
top: 10px;
right: 0;
font-size: 12px;
}
.cy-list-header .expert-search a, .cy-list-header .expert-search i {
color: #1890ff;
}
.cy-list-header-expert-search {
display: none;
background: #eee;
}
/*列表头结束*/
.cy-button-square {
border-radius: 0px !important;
}
.cy-button-hover {
opacity: .8;
filter: alpha(opacity=80);
color: #fff;
outline: 0;
-webkit-appearance: none;
transition: all .3s;
-webkit-transition: all .3s;
box-sizing: border-box;
}
/*button结束*/
/*常用颜色*/
.cy-color-gray {
color: #d4d4d4 !important;
}
.cy-color-black {
color: #393D49 !important;
}
.cy-color-blue {
color: #0880d7 !important;
}
.cy-color-lite-green {
color: #A5DE37 !important;
}
.cy-color-green {
color: #5FB878 !important;
}
.cy-color-violet {
color: #5246e2 !important;
}
.cy-color-red {
color: #f64c59 !important;
}
.cy-color-yellow {
color: #FEAE1B !important;
}
.cy-color-white {
color: #fff !important;
}
.cy-color-999 {
color: #999;
}
/*常用颜色结束*/
/*背景颜色*/
.cy-bg-gray {
background-color: #d4d4d4 !important;
}
.cy-bg-black {
background-color: #393D49 !important;
}
.cy-bg-blue {
background-color: #0880d7 !important;
}
.cy-bg-lite-green {
background-color: #A5DE37 !important;
}
.cy-bg-green {
background-color: #5FB878 !important;
}
.cy-bg-violet {
background-color: #5246e2 !important;
}
.cy-bg-red {
background-color: #f64c59 !important;
}
.cy-bg-yellow {
background-color: #FEAE1B !important;
}
/*背景颜色*/
/*table表格*/
.cy-table {
width: 100%;
background-color: #fff;
color: #666
}
.cy-table tr {
transition: all .3s;
-webkit-transition: all .3s
}
.cy-table th {
text-align: left;
font-weight: 400
}
.cy-table tbody tr:hover, .cy-table thead tr, .cy-table-click, .cy-table-header, .cy-table-hover, .cy-table-mend, .cy-table-patch, .cy-table-tool, .cy-table-total, .cy-table-total tr, .cy-table[lay-even] tr:nth-child(even) {
background-color: #f2f2f2
}
.cy-table td, .cy-table th, .cy-table-col-set, .cy-table-fixed-r, .cy-table-grid-down, .cy-table-header, .cy-table-page, .cy-table-tips-main, .cy-table-tool, .cy-table-total, .cy-table-view, .cy-table[lay-skin=line], .cy-table[lay-skin=row] {
border-width: 1px;
border-style: solid;
border-color: #e6e6e6
}
.cy-table td, .cy-table th {
position: relative;
padding: 9px 15px;
min-height: 20px;
line-height: 20px;
font-size: 14px
}
/*table表格结束*/
/*分页开始*/
.cy-page a, .cy-page span {
display: inline-block;
height: 26px;
line-height: 26px;
font-size: 12px;
border: none;
background: 0 0;
padding: 0 8px;
margin-right: 5px;
}
.cy-page a:hover {
color: green;
}
.cy-page .cy-icon {
font-size: 12px;
}
.cy-page .on {
background-color: #009688;
color: #fff;
}
.cy-page input {
width: 26px;
margin: 0 10px;
padding: 0 3px;
text-align: center;
height: 26px;
line-height: 26px;
border: 1px solid #e2e2e2;
}
.cy-page button {
margin-left: 10px;
height: 26px;
font-size: 12px;
line-height: 26px;
padding: 0 10px;
background: #fff;
color: #000;
border: 1px solid #e2e2e2;
}
.cy-page select {
height: 26px;
padding: 3px;
border-radius: 2px;
cursor: pointer;
border: 1px solid #e2e2e2;
}
/*分页结束*/
/*进度条样式*/
.cy-progress .cy-ps-r {
height: 10px;
margin-top: 40px;
}
.cy-progress .cy-progress-percent {
position: absolute;
color: #666;
line-height: 26px;
font-size: 26px;
left: 0;
top: -10px;
}
.cy-progress .cy-progress-text {
position: absolute;
color: #999;
font-size: 14px;
right: 0;
top: -10px;
}
.cy-progress .cy-progress-bg {
position: relative;
height: 6px;
border-radius: 20px;
background-color: #e2e2e2;
}
.cy-progress .cy-progress-bg .cy-progress-bor {
display: block;
width: 10%;
height: 6px;
border-radius: 20px;
position: absolute;
left: 0;
}
/*进度条样式结束*/
/*常用共有样式结束*/
.cy-tree {
background: #000;
width: 12%;
height: 100%;
}
.cy-tree .logo {
background: #002140;
}
.cy-tree .tree li {
background: #000;
line-height: 50px;
color: #c9d1d6;
display: block !important;
}
.cy-tree .tree li h2 {
font-size: 14px;
display: block !important;
}
.cy-tree .tree li h2 span {
margin-right: 1px;
margin-left: 10px;
}
.cy-tree .tree li h2 i {
margin-right: 10px;
}
.cy-tree .tree li dl {
display: none;
}
.cy-tree .tree li a {
display: block;
color: #c9d1d6;
padding-left: 32px;
font-size: 12px;
background: #292929;
}
.cy-tree .tree li a:hover {
background: #2f97f1;
color: #fff;
}
.cy-content {
width: 88%;
background: #eee;
}
.cy-content .header {
background: #eee;
padding: 10px;
line-height: 30px;
height: 30px;
}
.cy-content .header .h-left {
background: #fff;
}
.cy-content .header .h-left li {
margin-left: 10px;
font-size: 14px;
}
.cy-content .header .h-left li:hover {
box-shadow: 3px 10px 30px 0 rgba(0, 1, 1, .10);
transform: scale(1.1, 1.1);
z-index: 2;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
position: relative;
}
.cy-content .header .h-left li input {
width: 120px;
line-height: 20px;
border: none;
padding: 5px;
}
.cy-content .header .h-left li i {
top: 0;
right: 10px;
}
.cy-tab-title ul {
height: 50px;
border-top: 1px solid #eee;
border-bottom: 1px solid #ccc;
background: #fff;
box-shadow: 2px 3px 10px rgba(27, 0, 0, .08);
}
.cy-tab-title ul li, .cy-tab-title ul .arrow {
position: relative;
float: left;
}
.cy-tab-title ul li dd, .cy-tab-title ul .arrow dd {
padding: 10px 25px;
border-right: 1px solid #eee;
display: block;
}
.cy-tab-title ul .on {
background: #eee;
}
.cy-tab-title ul .on i {
position: absolute;
top: 3px;
left: -1px;
background: #0593d3;
height: 3px;
width: 100%;
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
}
.cy-tab-title ul li dd a, .cy-tab-title ul .arrow dd a {
margin-left: 10px;
color: #C2C2C1;
}
.cy-tab-title ul li dd a:hover, .cy-tab-title ul .arrow dd a:hover {
background: #FF5722;
border-radius: 12px;
color: #fff;
}
.cy-tab-title ul li i, .cy-tab-title ul .arrow i {
position: absolute;
top: 3px;
left: -1px;
background: #0593d3;
height: 3px;
width: 0%;
transition: width 0.5s;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
-o-transition: width 0.5s;
}
.cy-tab-title ul li ii {
width: 100%;
}
.cy-menu li {
text-align: center;
}
.cy-menu li:hover {
transform: scale(1.1, 1.1);
transition: all .3s cubic-bezier(.4, 0, .2, 1);
position: relative;
z-index: 2;
}
.cy-menu li cite {
position: relative;
top: 2px;
display: block;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.cy-menu li .cy-icon {
display: inline-block;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 2px;
font-size: 30px;
background-color: #F8F8F8;
color: #333;
transition: all .3s;
-webkit-transition: all .3s;
}
.card {
padding: 10px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.backlog a {
display: block;
padding: 9px 15px;
background-color: #f8f8f8;
color: #999;
border-radius: 2px;
transition: all .3s;
-webkit-transition: all .3s;
}
.backlog h3 {
padding-bottom: 10px;
font-size: 12px;
}
.backlog p {
font-style: normal;
font-size: 30px;
font-weight: 300;
color: #009688;
}
.system dl {
}
.cy-dl {
}
.top {
height: 40px;
background: #053563;
color: #fff;
font-size: 11px;
padding: 0 20px;
line-height: 40px;
min-width: 800px;
}
.top .user {
}
.top .user span {
position: relative;
display: block;
float: left;
width: 100px;
color: #fff;
text-align: center;
font-size: 11px;
margin-left: 10px;
}
.top .user .bgcolor {
background: #2f97f1;
color: #fff;
}
.top .user dl {
position: absolute;
top: 39px;
left: -1;
width: 99px;
border: 1px solid #ccc;
border-top: none;
}
.top .user dl {
display: none;
background: #fff;
}
.top .user dl a {
display: block;
color: #000;
line-height: 25px;
padding: 5px;
}
.top .user dl a:hover {
background: #2f97f1;
color: #fff;
}
.cy-form-admin-input {
width: 190px !important;
}
#main_frame {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.mail_send_top {
margin-top: 75px;
}
.test_email {
margin-top: -75px;
}
.category-left-parent {
width: 50%;
box-sizing: border-box;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
上一篇： JS对象和简单的事件 20191023