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文件，然后共同引用，这样只需要改动一处代码就可以全部修改了

共通css初次尝试的更多相关文章

  1. Android请求网络共通类——Hi_博客 Android App 开发笔记

    今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目 因为要从网络请求数据所以我们先来一个请求网络的共通类. ...

  2. 20145330《Java学习笔记》第一章课后练习8知识总结以及IDEA初次尝试

    20145330<Java学习笔记>第一章课后练习8知识总结以及IDEA初次尝试 题目: 如果C:\workspace\Hello\src中有Main.java如下: package cc ...

  3. 一个共通的viewModel搞定所有的编辑页面-经典ERP录入页面（easyui + knockoutjs + mvc4.0)

    http://www.cnblogs.com/xqin/archive/2013/06/06/3120887.html 前言 我写代码喜欢提取一些共通的东西出来,之前的一篇博客中说了如何用一个共通的v ...

  4. 共通脚本utils

    /** * 模块名:共通脚本 * 程序名: 通用工具函数 **/ var utils = {}; /** * 格式化字符串 * 用法: .formatString("{0}-{1}" ...

  5. 初次尝试使用jenkins+python+appium构建自动化测试

    初次尝试使用jenkins+python+appium构建自动化测试 因为刚刚尝试使用jenkins+python+appium尝试,只是一个Demo需要很多完善,先记录一下今天的成果,再接再厉 第一 ...

  6. 一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)

    前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出 ...

  7. List排序共通代码

    此共通方法可以根据特定字段进行排序 package com.gomecar.index.common.utils; import java.lang.reflect.Method; import ja ...

  8. 孤荷凌寒自学python第五十七天初次尝试使用python来连接远端MongoDb数据库

    孤荷凌寒自学python第五十七天初次尝试使用python来连接远端MongoDb数据库 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第三天.感觉这个东西学习起来还是那么困 ...

  9. 孤荷凌寒自学python第五十二天初次尝试使用python读取Firebase数据库中记录

    孤荷凌寒自学python第五十二天初次尝试使用python读取Firebase数据库中记录 (完整学习过程屏幕记录视频地址在文末) 今天继续研究Firebase数据库,利用google免费提供的这个数 ...

随机推荐

  1. sessionstorage，localstorage和cookie之间的区别以及各自的用法

    由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...

  2. C#在win10（win8）下读写记事本注意事项

    分析:由于windows10或者windows8系统机制问题,C#在读写txt文件的时候,可能会出现如下问题(对路径“”的访问被拒绝): 解决: 1.我们在C盘下面新建立一个记事本,会发下类似如下报错 ...

  3. Mybatis实战之自定义TypeHandler处理枚举

    在Mybatis中,处理枚举类的TypeHandler有两个: EnumTypeHandler: 用于保存枚举名 EnumOrdinalTypeHandler: 用于保存枚举的序号. 在实际项目中,以 ...

  4. JTextArea与TextArea自动换行和滚动条的区别对比

    最近在用Java写一个仿记事本的程序,但是发现用JTextArea写的效果有点差,但是用TextArea自动换行并不那么方便,经过对比和实践,我也发现自己对这两个标签认识存在不足,下面就来讨论一下他们 ...

  5. 使用jQuery操作DOM

    一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTM ...

  6. iSCS协议介绍

    1.iSCSI 协议说明 一种在 TCP/IP上进行数据块传输的标准,由Cisco 和 IBM 两家发起,并且得到了各大存储厂商的大力支持.iSCSI 可以实现在 IP 网络上运行SCSI协议,使其能 ...

  7. 自定义view（一）

    为什么标题会是自定义view(一)呢?因为自定义view其实内容很多,变化也很多,所以我会慢慢更新博客,争取多写的有关的东西,同时,如果我以后学到了新的有关于自定义view的东西,我也会及时写出来. ...

  8. 实现自动构建编译javaweb项目并发布到N台服务器

    前言 当你使用nginx实现了负载均衡,当你有了超过3台以上的应用服务器时,一个特别头疼的问题就来了,发布项目好麻烦. 你每次都要在本地编译打包一遍,然后手动复制到每一台服务器上面去,如果只有一两台服 ...

  9. KoaHub.JS基于Node.js开发的处理和显示日期代码

    moment Parse, validate, manipulate, and display dates      A lightweight JavaScript date library for ...

  10. node删除当前文件底下全部文件的正确姿势

    今天在项目上犯了一个很愚蠢的错误 执行如下,结果删除掉了项目根目录底下的所有配置文件,导致本地虚拟机挂掉,这次多一个/的给我教训真是莫大的...哎 正确的姿势为: