弘帝通用框架——Hondy.CSS

admin

为什么弘帝框架目前是基于Bootstrap4设计的，未来会与Bootstrap合并，吸取精华，摒弃臃杂。
弘帝是基于以下原因考虑的：
1、Bootstrap作国际上最广泛使用的系统，有着大量的体验用户。直接拿来，是为了让Bootstrap使用者能轻松上手，弘帝建站系统学习起来更轻松。
2、自2018年起，弘帝开始支持Bootstrap框架，这使得部分客户迁移到hondy.css，最大可能的减少需要修改的脚本。
3、可以预见的未来，hondy.css将越来越规范和庞大，hondy.css将吸收更多的前端框架，打造属于自己特色的前端框架，对弘帝建站系统的支持越来越好。
4、随着CSS3与HTML5的成熟与稳定，特别是WIN7与WIN8退出历史舞台（就不用考虑IE兼容了），我们预计2020年左右正式推出可公开测试的hondy.css，欢迎大家指正。

以下文件名为hondy.css，放在模板css文件夹下。
@import url(../../../SysThemes/css/bootstrap.min.css);@import url(../../../SysThemes/css/awesome.css);@import url(../../../SysThemes/css/wow.css);:root{font-size:0.875rem}::after,::before{font-family:fontawesome}html{overflow-x:hidden}@-ms-viewport{width:device-width}a,a:hover{text-decoration:none}body{margin:0}menu{margin:0;padding:0}menu ul{display:flex;flex-flow:row nowrap;justify-content:space-between;margin-bottom:0}menu ul li{flex:1;position:relative}menu ul li a{display:flex;justify-content:center;padding:8px 10px}menu ul li ul{display:none;flex-flow:column nowrap;position:absolute;z-index:1000;min-width:100%}menu ul li ul li a{white-space:nowrap;padding-top:8px;padding-bottom:8px;color:#fff}ul li{position:relative;box-sizing:border-box}.bb-gray-1{border-bottom:1px solid #eee}.bb-grey-1{border-bottom:1px solid #bebebe}.blue{background-color:#1E61BA;color:#fff}.blue *{color:#fff}.bottom{font-size:.75rem}.bottom h3{font-size:1rem;font-weight:700}.dark{background:#383838;color:#eee}.dark *{color:#eee}.dark .bottom{color:#bebebe}.dark .bottom *{color:#bebebe}.gray{background-color:#eee}.light{background-color:#f8f8f8}.menu{display:none;width:100%;position:fixed;left:0;z-index:2000;background:#000}.menu ul{display:flex;flex-flow:column wrap;width:100%;padding:10px}.menu ul li{background:rgba(255,255,255,0.2);margin:2px}.menu ul li a{display:flex;align-items:center;line-height:2em;color:#fff}.menu ul li a b{width:0;height:0;margin-top:0px;margin-left:10px;border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.menu ul li ul{display:none;padding-top:5px;padding-bottom:5px}.menu ul li ul li a{white-space:pre-wrap;line-height:1.5em;padding:10px}.nav{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:baseline;margin-bottom:30px}.nav menu{display:none}.nav .title{font-size:1.2rem;border-bottom:1px dotted #ccc}.nav .path{font-size:75%}.nav .path *{font-size:75%}dd,li,ul{padding:0;margin:0;list-style:none}sign{margin-left:5px;margin-right:5px}.power .dd{padding-left:1em;padding-right:1em}.navbar-toggler{display:inline-flex;width:50px;height:50px;border-radius:5px;align-items:center;justify-content:center}.navbar-toggler::before{font-size:30px}.wp-fixed .navbar-toggler{position:fixed;z-index:2000;top:15px;right:15px}.about .intro{line-height:200%}.hidden,.hide{display:none}.body{margin-top:2em;min-height:380px}.order{display:flex;flex-flow:column wrap}.phone .Margin{text-align:right}.phone .Margin .hotline{display:inline-flex;flex-direction:column;text-align:left;padding-left:60px;position:relative}.phone .Margin .hotline::before{display:flex;content:'\f098';line-height:1em;margin-right:10px;color:#54BA19;font-size:4.5rem;position:absolute;left:0;top:0;align-items:center}.phone .Margin .hotline .dd{display:block;clear:both;font-size:2.5rem;line-height:1em;font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color:#f90}#ArticleIntro ul{display:flex;flex-flow:column wrap}#ArticleIntro ul li{margin-bottom:20px}#ArticleIntro ul li .detail{position:relative;padding-left:88px}#ArticleIntro ul li .detail .intro{color:#888;position:relative}#ArticleIntro ul li .detail .intro .enter{position:absolute;bottom:0;right:0}#ArticleIntro ul li .detail .intro .enter a{text-transform:uppercase;background:#eee;padding:0 10px;color:#666;font-size:12px}#ArticleIntro ul li .detail .LongDatePlus{position:absolute;z-index:10;left:0;top:6px;padding:8px;margin-right:20px;text-align:center}#ArticleIntro ul li .detail .LongDatePlus .dd{display:block;font-size:28px;font-weight:700;line-height:30px}#ArticleList ul li{margin-bottom:10px}#ArticleList ul li .Article{display:flex;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ArticleList ul li .Article h6{margin-bottom:0}#ArticleList ul li .Article h6 a{display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ArticleList ul li .Article h6 a::before{display:inline-flex;content:'\f0da';margin-right:10px;overflow-x:auto;text-overflow:inherit}#ArticleView ul,#ProductView ul{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-bottom:0}#ArticleView ul li,#ProductView ul li{display:flex;flex-flow:column wrap;width:50%;padding:10px;max-height:320px;min-width:110px;overflow:hidden}#ArticleView ul li .thumbs,#ProductView ul li .thumbs{display:flex;width:100%;height:calc(100% - 3em)}#ArticleView ul li .thumbs a,#ProductView ul li .thumbs a{display:flex;justify-content:center;width:100%;max-width:100%;height:100%;align-items:center;justify-content:center}#ArticleView ul li .thumbs a img,#ProductView ul li .thumbs a img{width:100%;height:100%;max-width:100%;max-height:100%}#ArticleView ul li>span a,#ArticleView ul li>a,#ProductView ul li>span a,#ProductView ul li>a{display:block;width:100%;height:3em;line-height:3em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ArticleView ul li>span a:hover,#ArticleView ul li>a:hover,#ProductView ul li>span a:hover,#ProductView ul li>a:hover{overflow-x:auto;text-overflow:inherit}#ArticleView ul li>span a:hover::-webkit-scrollbar-track,#ArticleView ul li>a:hover::-webkit-scrollbar-track,#ProductView ul li>span a:hover::-webkit-scrollbar-track,#ProductView ul li>a:hover::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:#f8f8f8;border-radius:5px}#ArticleView ul li>span a:hover::-webkit-scrollbar,#ArticleView ul li>a:hover::-webkit-scrollbar,#ProductView ul li>span a:hover::-webkit-scrollbar,#ProductView ul li>a:hover::-webkit-scrollbar{height:5px;background-color:#f8f8f8}#ArticleView ul li>span a:hover::-webkit-scrollbar-thumb,#ArticleView ul li>a:hover::-webkit-scrollbar-thumb,#ProductView ul li>span a:hover::-webkit-scrollbar-thumb,#ProductView ul li>a:hover::-webkit-scrollbar-thumb{background-color:#bebebe;border-radius:5px;background-image:-webkit-linear-gradient(45deg, rgba(0,0,0,0.3) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 75%, transparent 75%, transparent)}#ArticleDetail .Title{display:block;text-align:center;font-size:30px;font-weight:700;line-height:1.5em;padding:20px 0}#ArticleDetail .Detail{color:inherit;font-size:inherit;line-height:1.8em}#ArticleDetail .Detail *{color:inherit;font-size:inherit}#ArticleDetail .Detail p{margin:10px auto;line-height:1.8em;text-indent:2em}#ArticleDetail img{max-width:100%}#ProductDetail h1{text-align:center}#ProductDetail img{max-width:100%}#ProductDetail .Subject{font-size:1.28em;margin-top:20px;margin-bottom:10px}.Log{display:block;text-align:center;background:#f8f8f8;color:#888;margin-bottom:20px;padding:10px 0}.Log *{color:#888}.Picture{text-align:center}.Picture img{max-width:100%}.Pagination{display:block;clear:both;text-align:center;padding:10px 0;background:#f8f8f8;margin-top:30px}.Pagination a{padding:0 2px}.Pagination #page{text-align:center;line-height:1em}.RowsTitle{margin-bottom:30px}.RowsTitle h3{position:relative}.RowsTitle h3 .cn{display:block;margin:0}.RowsTitle h3 .en{display:block;font-weight:400}.search{padding-left:15px;padding-right:15px}.search .RowsTitle{display:none;margin-right:1rem;margin-bottom:5px}.search .RowsTitle h3{display:flex;margin-bottom:0;font-size:1.125rem;line-height:1.5}.search .RowsTitle h3:before{display:inline-flex;content:'\f1b0';font-size:1.125rem;margin-right:10px}.search .Content{flex-grow:1}.search form{display:flex;flex-flow:row nowrap;border:1px solid #eee;margin-left:auto;margin-right:0}.search input{height:30px;line-height:28px;padding:0 10px;font-size:14px;border-style:none}.search input[name=kw]{flex:1;border-right:0 solid transparent}.search input[type=submit]{background-color:#eee}.search select{height:30px;line-height:28px;padding:0 0 0 5px;font-size:14px;border-style:none}.search .Subject{display:none;margin-bottom:5px;flex-grow:1}.search .Subject .Descript{text-align:left}.circle form{border-radius:10px}.circle form input[name=kw]{border-top-left-radius:10px;border-bottom-left-radius:10px}.circle form input[type=submit]{border-top-right-radius:10px;border-bottom-right-radius:10px}.ShortDate{white-space:nowrap;margin-right:5px}.sider .RowsTitle{margin-bottom:0;border-bottom:1px solid #ccc}.sider .RowsTitle .Title{flex-direction:row;justify-content:flex-start;padding-top:20px;padding-bottom:20px}.sider ul li{border-bottom:1px solid #eee}.sider ul li a{display:block;line-height:4rem;text-align:center;font-size:125%}.sider ul li ul li{border-bottom:0;padding-top:0;padding-bottom:0}.sider ul li ul li a{display:block;text-indent:30px}.sider ul li ul li a::before{content:""}.guide.line-through{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:flex-end}.guide.line-through .title{font-size:150%}.guide .path{display:none}#Telephonist{background:url(../images/telephonist.jpg) no-repeat;padding-top:250px;margin-bottom:50px;overflow:hidden}#Telephonist .CompanyName{font-size:1.5em;font-weight:bold}#map{height:500px;border:1px solid #ccc}#map .tiplabel{height:20px;padding:0 10px}.MessageTable{font-size:1.25rem;font-weight:bold;margin-bottom:10px}.MessageTable::before{content:'\f0e5';font-size:1.5rem;margin-right:10px}.MessageTable red{color:red}.message [type=text]{width:100%;padding:5px}.message [type=submit]{margin-top:10px;padding:5px 30px}.message textarea{width:100%;height:10em;padding:5px}.message.common .title{margin-top:5px;line-height:2em}@media (min-width: 576px){.search .RowsTitle{display:flex}}@media (min-width: 992px){.about .Margin{display:flex;flex-flow:row nowrap}.about .Margin .card{flex:1;padding:10px;border:1px solid #eee;margin-right:30px;overflow:hidden}.about .Margin .card img{height:100%}.about .Margin .intro{flex:1}.about .Margin .clear{flex:0}.search .RowsTitle{display:flex;margin-bottom:0}.search .Subject{display:flex;margin-bottom:0}.navbar-toggler{display:none}#Telephonist{padding-top:0px;padding-left:350px}.li-lg-2 #ArticleIntro ul{display:flex;flex-flow:row wrap}.li-lg-2 #ArticleIntro ul li{width:calc(50% - 15px)}.li-lg-2 #ArticleIntro ul li:nth-child(2n+1){margin-right:30px}.menu{display:flex;position:inherit;top:0;left:0;z-index:auto;background:none}.menu ul{flex-flow:row nowrap;justify-content:space-between;padding:0}.menu ul li{margin:0;background:none}.menu ul li a{line-height:3rem;color:#fff;text-align:center}.menu ul li a b{margin-top:5px;border-top:5px solid #fff;border-left:5px solid transparent;border-right:5px solid transparent}.menu ul li ul{display:none;flex-flow:column wrap;left:0;padding-top:5px;padding-bottom:5px}.menu ul li ul li a{white-space:pre-wrap;line-height:1.5em;padding:10px}.menu ul li:hover ul{display:flex}.nav menu{display:block;width:100%}.nav menu ul{display:flex;justify-content:center;align-items:center}.nav menu ul li{text-align:center}.guide .path{display:flex}.search .Content{max-width:400px}}

温馨提醒：hondy.css在研发阶段，几乎每天都在变化，请及时更新最新版弘帝框架，新版可能会破坏老版设计。

admin

rows：一般是指多行，顶部对齐，需与container组合使用，否则两边会跨出15px。
row：特此一行，元素垂直居中对齐

admin

图片变灰，鼠标指向时还原色彩
.reduction img{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray;}
.reduction img:hover{-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-o-filter:grayscale(0%);filter:grayscale(0%);filter:none;}

admin

.cn-line-through .RowsTitle .Title::before{position:absolute;z-index:-1;left:0;width:100%;height:2em;content:"";border-bottom:1px solid #ccc;}