前端封装原理与知识点（HTML手册)-2019年9月11日 - 前端开发

Community Learn Tools Library Leisure

English

Home > List of blog posts > 前端封装原理与知识点（HTML手册)-2019年9月11日

Blogger Information

Blog 27

fans 0

comment 0

visits 26651

Special Recommendation

More>

Related recommendations

实例

<!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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图

9月12日前端框架.png

Correction status：qualified

Teacher's comments：看样子, 还不错, 一切学习都是从模仿开始, 祝你成功

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

会话实战（网页派发器）2019年9月27日

2019-10-07 11:35:54