1、网页的主要的html
<@fn.html css=["${basePath}/css/help/guideCommon.css${versionControl}"]title="帮助"> <body> <div class="headerBar"> <div class="headerContent"> <a href="${basePath}/help?guide=main">帮助中心</a> <span>></span> <a href="">添加工单</a> </div> </div> <div class="main"> <div class="title">添加工单</div> <div class="contentBlock"> <div class="operationWord"> <p class="p"> <span class="procedure">第一步:工单基本信息</span><br/> </p> <ol class="ol"> <li>点击左侧【添加工单】按钮,</li> <li>在”工单基本信息”标签页填写工单信息</li> </ol> </div> <div class="operationImg"> <img src="${basePath}/images/help/addworkStep1.jpg" class="img"> </div> </div> <div class="contentBlock"> <div class="operationWord"> <p class="p"> <span class="procedure">第二步:车辆定损</span><br/> </p> <ol class="ol"> <li>若有需要,录入完成后,可以使用左下方打印按钮印出纸质工单。</li> </ol> </div> <div class="operationImg"> <img src="${basePath}/images/help/addworkStep2.jpg" class="img"><br/> <img src="${basePath}/images/help/addworkStep3.jpg" class="img"><br/> </div> </div> <div class="contentFoot"> <a class="pre" href="${basePath}/help?guide=boardDescription">上一篇</a> <a class="next" href="${basePath}/help?guide=dispatchingOperation">下一篇</a> </div> </div> <#include "/include/main_footer.ftl"/> </body> </@fn.html>
2、页面的底部html
<div class="footContainer"> <div class="foot"> <div class="concern"> <img src="${basePath}/images/help/barcodes.png" class="barcodes"> <span class="concern-word">关注智七微信服务号<br/> 获取更多帮助与动态资讯 </span> </div> <div class="contract"> <span> 客服电话<br/> <span class="contractNumber">400-720-2727</span><br/> 对智七有任何意见与建议<br/> 邮箱留言 <a href="Mailto:test@163.com" style="color:5154ef">ez4s@enmore.com</a> </span> </div> <span class="clear"></span> </div> </div>
3、共通的css代码
html,body{overflow:auto;background:#eff0f3;overflow-x: auto;} .headerBar{height:35px;width:100%;line-height: 35px;color:#999999;font-size:12px;border-bottom:1px solid #dadbde;} .headerContent,.main{width:1000px;margin:0 auto;text-align:left;} .headerContent a{color:#999999;} .headerContent a:hover{color:#242efa} .title{width:1000px;height:40px;line-height: 40px;color:#c19b74;font-size:16px;border-bottom:1px solid #dadbde;} .contentBlock{width:1000px;overflow:hidden;border-bottom:1px solid #dadbde;} .operationWord{width:517px;float:left;} .operationImg{width:462px;float:right;margin-top:150px;margin-bottom:10px;} .p{font-size:16px;padding:21px 0px 9px 0px;color:#333;} .ol{list-style:decimal inside;color:#666;list-style-position:outside;padding-left:18px;} .ul{color:#666;list-style-image:url("/images/help/list-style.png");list-style-type:square;list-style-position:outside;padding-left:18px;} .ol li,.ul li{line-height:2.5;font-size:12px;} .img{width:460px;border:1px solid #678ecf;margin-bottom:10px;} .imgsmall{width:230px;border:1px solid #678ecf;margin-bottom:10px;} .contentFoot{height:55px;width:100%;text-align:center;padding-top:20px;} .pre,.next{padding:5px 26px;border: 1px solid #c19b74;border-radius:4px;cursor:pointer;display:inline-block;} .pre:hover,.next:hover{color:#242efa} .footContainer{height:80px;width:100%;background:#e2e4e9;padding:20px 0px;color:#666;} .foot{width:1000px;margin:0 auto;} .concern,.contract{float:left;} .concern{padding-left:144px;width:356px;} .contract{padding-left:90px;width:410px;} .barcodes{vertical-align: bottom;} .concern-word{display:inline-block;padding-left:10px;} .contractNumber{font-size:20px;color:#c19b74;font-weight:bold;}
目录如下:
这些文件都引用了同一份css文件,只要写入标准的html结构,样式对应的就会使一样的,这样整个系统的风格就保持了一致。
css模块化开发,我不推荐使用,在我的项目里,我发现那样做,工作量很大,而且不容易维护,开发效率低,维护成本高,虽然可以拆分,但是先在有更好的做法,把相似结构的页面抽出来,写成一个共同的css文件,然后共同引用,这样只需要改动一处代码就可以全部修改了