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

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

Blogger Information

Blog 27

fans 0

comment 0

visits 26611

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

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例

实例

实例