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. IIS7.0发布后关于"不能在此路径中使用此配置节”的解决办法

    在系统为window sever2008,iis7.0上安装后发布出现 IIS Web Core 通知 BeginRequest 处理程序 尚未确定 错误代码 0x80070021 配置错误 不能在此 ...

  2. 分析下为什么spring 整合mybatis后为啥用不上session缓存

    因为一直用spring整合了mybatis,所以很少用到mybatis的session缓存. 习惯是本地缓存自己用map写或者引入第三方的本地缓存框架ehcache,Guava 所以提出来纠结下 实验 ...

  3. Flash、Ajax各自的优缺点，在使用中如何取舍？

    1.Flash ajax对比 Flash适合处理多媒体.矢量图形.访问机器:对CSS.处理文本上不足,不容易被搜索. Ajax对CSS.文本支持很好,支持搜索:多媒体.矢量图形.机器访问不足. 共同点 ...

  4. Maven常用插件简单配置

    好久不见,甚是想念.一日不见,如隔三秋. 从春节到现在已经很久没有回归博客园了,今天回来温习一下maven常用的一些插件的配置,学东西一个很简单的诀窍就是重复重复再重复,这样一定能把知识掌握的很牢靠. ...

  5. MINIDVD

    import java.util.*; public class MiniDVD { public static void main(String[] args){ //扫描器 Scanner inp ...

  6. JavaScript 基本类型值-String类型

    ▓▓▓▓▓▓ 大致介绍 String类型用于表示由零或多个16位Unicode字符组成的字符序列,即字符串.在JavaScript中没有单个的字符型,都是字符串.字符型就相当于只包含一个字符的字符串. ...

  7. 【CNMP系列】CNMP之路，系统起步。

    简单的来理解,我所说的CNMP,不是CNM+P,而是CentOs+Nginx+MySql+PHP,也可以单纯的理解为LNMP,但是系统是我们自己选的,虽说是Linux的一个分支,但我就喜欢CentOs ...

  8. Manual | BSD手册| Linux手册 | 数据库手册 | 编程开发手册 | WEB开发手册 | 软件应用手册 | 网络技术手册 | GNU手册

    豆豆手册 □ BSD手册 □ Linux手册 □ 数据库手册 □ 编程开发手册 □ WEB开发手册 □ 软件应用手册 □ 网络技术手册 □ GNU手册 在线手册 首 页 BSD手册   ·FreeBS ...

  9. ABP Zero 单部署，单数据库，多租户架构

    首先,我们应该定义多租户系统中的两个条目: 租主(Host):租主是单例的(只有一个租主).租主会对创建和管理租户负责.因此,一个“租主用户”比所有的租户等级更高,并独立于所有租户,同时还能控制他们. ...

  10. 微软.NET年芳15：我在Azure上搭建Photon服务器(C#.NET)

    网上火热的“微软.NET年芳15”文章,我也得写点什么嘛,毕竟我还是现任的微软MVP. 摘录网上的“.NET 15周年”信息如下: 微软的 .NET 框架本周迎来了 15 岁生日..NET 的第一个版 ...