Navigator弘帝框架示范脚本

admin

效果一：

DIV:
必选参数：nav=Navigator,title=10

CSS:
#Navigator .RowsTitle{ text-align:center; position:relative;}
#Navigator .RowsTitle .CLeft{ display:block; width:500px; margin:0 auto; height:50px; border-bottom:1px solid #CCC; position:absolute; z-index:80; top:100px; left:50%; margin-left:-250px;}
#Navigator .RowsTitle .CRight{ display:block; width:20px; height:50px; border-bottom:2px solid #c00; position:absolute; z-index:90; top:100px; left:50%; margin-left:-10px;}
#Navigator .RowsTitle .Title{ text-align:center; position:relative;}
#Navigator .RowsTitle .Title .cn{ position:relative; z-index:100; top:88px; font-size:24px; color:#005ea6; font-weight:bold; text-shadow:0px 0px 5px #fff;}
#Navigator .RowsTitle .Title .en{ font-family:impact; font-size:72px; opacity:.1; color:#888; text-transform:uppercase;}

admin

效果图：


DIV：
必须参数：navi=Navigator,title=21

CSS：
#Navigator .RowsTitle{ display:inline-block; font-size:0; width:100%; margin-bottom:56px;}
#Navigator .RowsTitle .Title{ text-align:center;}
#Navigator .RowsTitle .Title .en,.RowsTitle .Title .en a{ display:block; font-size:60px; color:#000; line-height:1.2em; text-align:center; font-weight:bold;}
#Navigator .RowsTitle .Title .cn{ display:block; height:18px; border-bottom:1px solid #ccc;}
#Navigator .RowsTitle .Title .cn a{ display:inline-block; font-size:30px; color:#000; text-align:center; line-height:1.2em; background:#fff; padding:0 30px;}

法二:利用before,after,实现自适应

1. .RowsTitle .Title{text-align:center}
   
2. .RowsTitle .Title .cn{font-size:200%}
   
3. .RowsTitle .Title .en{display:flex;flex-flow:row nowrap;justify-content:center;font-size:125%;position: relative;}
   
4. .RowsTitle .Title .en:before,.RowsTitle .Title .en:after{display:inline-flex;content:"";flex:1;border-bottom:1px solid #333;width:30%; max-width:180px;height:50%;margin-top:15px;}
   
5. .RowsTitle .Title .en::before{margin-right:20px;}
   
6. .RowsTitle .Title .en:after{margin-left:20px;}

复制代码

admin

#Navigator{display: inline-block; width:100%; padding-bottom: 110px; position: relative;}
#Navigator .RowsTitle{ text-align:center;}
#Navigator .RowsTitle .CRight{ display:block; width:40px; height:68px; border-bottom:2px solid #c00; position:absolute; top:0px; left:50%; margin-left:-20px;}
#Navigator .RowsTitle .Title{ text-align:center; position:relative; font-size:28px; font-weight:bold; }
#Navigator .RowsTitle .More{position: absolute; width:180px; bottom: 30px; left: 50%; margin-left: -90px;}
#Navigator .RowsTitle .More a{ display: block; background: #c00; color: #fff; text-align: center; line-height: 50px;}
#Navigator .Content{ padding-top: 50px;}

admin

$func_about(navi=Navigator,para=About,title=1,plus=card,memo=1,len=250)$
CSS:
#Navigator .RowsTitle{ position: relative; margin-bottom:30px;}
#Navigator .RowsTitle::after{position: absolute; bottom: -18px; left: 50%; margin-left: -55px; display: block; content: ""; width:100px; height: 2px; background-image: linear-gradient(90deg,red 25%,blue 25%,blue 50%,#FF00FB 50%,#FF00FB 75%,green 75%,green 100%)}
#Navigator .RowsTitle .Title,#Navigator .RowsTitle .Title a{ display: block; font-size: 25px; line-height: 1.2em; letter-spacing: 10px; font-weight: bold;}
#Navigator .Descript{ font-size: 14px;}


$func_about(navi=Navigator,para=About,plus=card,memo=1,len=250,more=enter)$
CSS:
#Navigator .RowsTitle .Title{ font-size: 25px; line-height: 1.2em; letter-spacing: 2px; font-weight: bold;}
#Navigator .RowsTitle .More{ border-bottom: 1px dotted #ccc; height: 20px; margin-top:20px; margin-bottom: 40px;}
#Navigator .RowsTitle .More a{display: inline-block; color: #fff; width: 120px; height: 40px; border-top-left-radius: 60px 20px; border-bottom-left-radius: 60px 20px; border-top-right-radius: 60px 20px; border-bottom-right-radius: 60px 20px; line-height: 40px; font-size: 20px; text-transform:uppercase; background: #ccc;}
#Navigator .Descript{ font-size: 14px;}
#Navigator .Content{ padding-top: 30px;}

admin

DIV：
<div class="container"><div class="p-t-b-60">$func_article(navi=epen,para=Case,len=12,title=10,memo=1,more=MORE +,show=title|memo|content|more)$</div></div>
CSS:
#epen .RowsTitle .Title{display: flex; flex-direction: row-reverse;flex-wrap: nowrap; justify-content: center; align-items: center;}
#epen .RowsTitle .Title .cn{ display: inline-block; font-size: x-large; font-weight: bold; margin:0 0.5em;}
#epen .RowsTitle .Title .en{ display: inline-block; font-size: xx-large; color:#FB0B28; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
#epen .Subject{ margin-bottom: 20px; text-align: center; text-shadow: 1px 1px 3px #fff;}
#epen .More{ text-align: center;}
#epen .More a{ display: inline-block; padding:10px 50px; background: #FB0B28; color:#fff; line-height:2em;}

优化效果：给中英文加上下划线
#epen .RowsTitle{ margin-bottom: 10px;}
#epen .RowsTitle .Title{display: flex; flex-direction: row-reverse;flex-wrap: nowrap; justify-content: center; align-items: center;}
#epen .RowsTitle .Title .cn{ display: inline-block; font-size: x-large; font-weight: bold; border-bottom:2px solid #B03840; line-height:48px; margin: 0; padding:0 10px;}
#epen .RowsTitle .Title .en{ display: inline-block; font-size: xx-large; color:#FB0B28; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; border-bottom:2px solid #ccc; padding:0 10px;}
#epen .Subject{ margin-bottom: 20px; text-align: center; text-shadow: 1px 1px 3px #fff;}
#epen .More{ text-align: center;}
#epen .More a{ display: inline-block; padding:10px 50px; background: #FB0B28; color:#fff; line-height:2em;}