html{ font-size: 50px; max-width:640px; margin: 0 auto; } *{ padding: 0; box-sizing: border-box; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; color: #000; } body{ max-width:640px; margin: 0 auto; color: #666; font: 0.28rem arial, "microsoft yahei"; } i{ font-style: normal; font-family: iconfont; } .container{ width: 7.1rem; margin: 0 auto; } @media screen and (min-width: 320px){ html{ font-size: 42.6666667px; } } @media screen and (min-width: 360px){ html{ font-size: 48px; } } @media screen and (min-width: 375px){ html{ font-size: 50px; } } @media screen and (min-width: 411px){ html{ font-size: 54.8px; } } @media screen and (min-width: 414px){ html{ font-size: 55.2px; } } @media screen and (min-width: 750px){ html{ font-size:100px; } } @media screen and (min-width: 768px){ html{ font-size:102.4px; } } @media screen and (min-width: 1024px){ html{ font-size:136.5333px; } } header,nav,article,section,aside,footer{display:block;} /* 头部开始 */ .header { background-color: #5cbf4c; height: 0.8rem; width: 100%; padding: 0 0.2rem; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; } .header img{ height: 0.4rem; } /*头部结束*/ /*轮播图开始*/ .banner{ width: 100%; height: 3.5rem; } .banner img{ width:7.5rem; height: 3.5rem; } /*轮播图结束*/ /*少儿简笔开始*/ .chi{ width: 100%; height: auto; padding-left: 0.2rem; } .chititle{ padding-top: 0.3rem; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; padding-right: 0.2rem; padding-bottom: 0.2rem; } .chititle h2 { font-size: 0.34rem; color: #333333; } .chititle h2 span{ font-size: 0.24rem; color: #808080; margin-left: 0.1rem; } .chititle a{ font-size: 0.24rem; color: #808080; padding-top: 0.1rem; } .chilists{ width: 100%; height: auto; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .chilist{ width:3.45rem; margin-right: 0.2rem; margin-bottom: 0.2rem; } .chilistimg{ width: 100%; height: 2.37rem; position: relative; } .chilistimg img{ width: 100%; height: 100%; border-radius: 0.08rem; } .chilist p{ margin-top: 0.2rem; font-size: 0.32rem; color: #333333; padding: 0 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .chilistcon{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 0.78rem; height: 0.78rem; } .chilistcon img{ width: 100%; height: 100%; } /*少儿简笔结束*/ /*文学故事开始*/ .lit{ width: 100%; } .littitle{ border-top: 0.05rem solid #e5e5e5; padding: 0.3rem 0.2rem 0.2rem; } .litimg{ padding: 0 0.2rem; width: 100%; height: 3.8rem; border-radius: 0.08rem; position:relative ; } .litimg>img{ width: 100%; height: 100%; } .litlists{ padding-left: 0.2rem; } .lit p{ font-size: 0.32rem; color: #333333; margin: 0.3rem 0.2rem; } /*文学故事结束*/ /*资讯推荐开始*/ .informationlists{ padding: 0 0.2rem; } .informationlist{ width: 100%; border-bottom:0.02rem solid #e6e6e6 ; padding-bottom: 0.2rem; overflow: hidden; padding-top: 0.2rem; } .informationlist.active{ border-bottom: none; } .informationlistlife{ width: 4.58rem; float: left; } .informationlisttext{ font-size:16px; line-height: 0.45rem; color: #333333; height: 0.9rem; overflow: hidden; position: relative; } .informationlistlifetime{ font-size: 14px; color: #777; } .informationlisttext:after{ content: ""; position: absolute; display: block; } .informationlistimg{ width:108px; height:70px; border-radius: 0.08rem; float: right; } .informationlistimg img{ width: 100%; height: 100%; } /*资讯推荐结束*/ /*footer*/ .footer { display: block; clear: both; text-align: center; background-color: #f7f7f7; border-top: 0.02rem solid #e3e3e3; padding: 0.2rem 0; margin-top: 0.2rem; font-size: 0.24rem; } /*swiper*/ html, body { position: relative; height: 100%; } body { font-family: helvetica neue, helvetica, arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-pagination-bullet{ background-color: #ffffff; opacity: 0.5; } .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1; } /* 组词 笔画板块 */ .bihua_search{width: 7.1rem;height: 0.7rem;background: #ffffff;border: 1px solid #cccccc;border-radius: 0.09rem;position: relative;overflow: hidden;margin: 0 auto;margin-bottom: 0.5rem;margin-top: 0.2rem;} .bihua_search img{position: absolute;width: 0.32rem;height: 0.32rem;left: 0.18rem;top: 0.18rem;} .bihua_search input{float: left;padding-left: 0.66rem;font-size: 0.26rem;font-weight: 500;color: #333333;line-height: 0.7rem;border: none;outline: none;width: 5.66rem;box-sizing: border-box;} .bihua_search button{width: 1.4rem;height: 0.7rem;background: #5cbf4c;border-radius: 0px 0.09rem 0.09rem 0px;box-sizing: border-box;float: left;font-size: 0.26rem;line-height: 0.26rem;font-weight: 500;text-align: center;color: #ffffff;border: none;outline: none;} .right_bihua_title{font-size: 0.3rem;font-weight: bold;text-align: left;color: #333333;line-height: 0.6rem;margin: 0.2rem 0;} .right_bihua_title_list {overflow: hidden; padding: 0 0.25rem;} .right_bihua_title_list li{float: left;margin-right: 0.45rem;margin-bottom: 0.3rem;} .right_bihua_title_list li:nth-of-type(5n){margin-right: 0;} .right_bihua_title_list li p{width: 1.04rem;height: 1.04rem;background: url(/uploads/image/tsimg/bhbg.png)no-repeat center center;background-size: contain;text-align: center;line-height: 1.04rem;font-size: 0.6rem;font-weight: 500;color: #333333;} .right_bihua_title span{width: 0.12rem;height: 0.12rem;border-radius: 50%;background: #5cbf4c;display: inline-block;margin-right: 0.15rem; position: relative; top: -0.05rem;margin-left: 0.2rem;} .zuci_list{overflow: hidden; padding: 0 0.15rem;} .zuci_list li{ padding: 0 0.2rem;box-sizing: border-box;float: left;width: 1.6rem;height: 0.6rem;border: 1px solid #e6e6e6;border-radius: 0.05rem;margin-right: 0.2rem;margin-bottom: 0.28rem;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .zuci_list li a{font-size: 0.26rem;font-weight: 500;line-height: 0.58rem;} .zuci_list li:nth-of-type(4n){margin-right: 0;} .hide{display: none;} /* 友情链接 */ .mlinks { float: left; width: 100%; height: 0.8rem; line-height: 0.8rem; } .mlinks h4 { float: left; padding: 0 0 0 0.1rem; font-size: 0.32rem; font-family: "\5fae\8f6f\96c5\9ed1"; font-weight: 400; color: #5cbf4c; } .mlinkscont { float: left; width: 100%; padding: 0.04rem 0; } .mlinkscont .cont { padding: 0 0.1rem; } .mlinkscont .cont p { border: 1px solid #ebebeb; background: #fff; padding: 0.2rem 0.1rem; } .mlinkscont .cont p a { line-height: 0.24rem; padding: 0 0.06rem 0 0; color: #888; display: inline; }