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. Extjs grid 组件

    表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 tex ...

  2. 阿里巴巴Java开发手册评述

    2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...

  3. 如何利用docker快速构建MySQL主从复制环境

    在学习MySQL的过程中,常常会测试各种参数的作用.这时候,就需要快速构建出MySQL实例,甚至主从. 考虑如下场景: 譬如我想测试mysqldump在指定--single-transaction参数 ...

  4. p1221网络布线（最小生成树 Prim（普里母）算法） p1222 Watering Hole

    描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助.约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路 ...

  5. 一个想法照进现实-《IT连》创业项目：万事开头难

    前言: 之前是一个想法,现在已经进入创业阶段,所以这个系列的标题,改了. 众筹的事在今天也停止了. 7-9号会在深圳龙岗布吉参加一个风投对接的活动,今晚(6号)会出发. 因为:在深圳会呆几天,而且这个 ...

  6. appium desktop 版本发布

    Appium Desktop is an open source app for Mac, Windows, and Linux which gives you the power of the Ap ...

  7. 关于JavaScript简单描述

    1.什么是JavaScript? JavaScript 是一种专门用于与网页交互而设计的脚本语言,它有三部分组成,那是哪三部分呢?分别是ECMAScript(提供核心语言功能),DOM(提供访问和操作 ...

  8. SQLServer提取日期中的年月日及其他格式

    提取年:datepart(yy,getdate())提取月:datepart(mm,getdate())提取日:datepart(dd,getdate())提取日期格式:Select CONVERT( ...

  9. Struts2学习笔记⑥

    在微信读书上在看一本李刚写的Struts 2.X权威指南 (好像叫这个)的书,可以看得出来作者的开发经验还是很充足的,但是觉得他的尺度和顺序没有把握好,他自己说拦截器是数据校验.国际化的基础-完了还把 ...

  10. Spring IOC容器中Bean的生命周期

    1.IOC容器中Bean的生命周期 构造器函数 设置属性 初始化函数(在Bean配置中 init-method) 使用Bean 结束时关闭容器(在Bean中配置destroy-method) 2.Be ...