odoo introducing custom css styles

First renderings:

 

Defined Form page

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <record id="myquality_iqcbasesetup_form" model="ir.ui.view">
            <field name="name">myquality.iqcbasesetup.form</field>
            <field name="model">myquality.iqcbasesetup</field>
            <field name="type">form</field>
            <field name="arch" type="xml">
                <form string="IQC基本参数维护">
                        <div class="iqcmain">
                            <div class='iqcheader'>
                                <span class="iqcspanleft">CR</span>
                                <span class="iqcspanmid">MA</span>
                                <span class="iqcspanright">MI</span>
                            </div>
                            <div class='iqcfenzi'>
                                <span class="iqcfenziline">分子</span>
                                <field name="cr_numerator" class="iqcfenziline" nolabel="1"/>
                                <field name="ma_numerator" class="iqcfenziline" nolabel="1"/>
                                <field name="mi_numerator" class="iqcfenziline" nolabel="1"/>
                            </div>
                            <div class='iqcfenmu'>
                                <span class="iqcfenmuline">分母</span>
                                <field name="cr_denominator" class="iqcfenmuline" nolabel="1"/>
                                <field name="ma_denominator" class="iqcfenmuline" nolabel="1"/>
                                <field name="mi_denominator" class="iqcfenmuline" nolabel="1"/>
                            </div>
                            <br/>
                            <div class="iqczh">
                                <field name="module_myquality_is_iqctrans"/>
                                <label for="is_iqctrans" string="是否进行IQC检验规则转换"/>
                                <br/>
                                <br/>
                                <span class="iqczhspan">连续</span>
                                <field name="nortoinc_1" class=" Iqczhval " NOLABEL = " . 1 " /> 
                                <span> have </ span> 
                                <Field name = " nortoinc_2 "  class = " iqczhval_01 " NOLABEL = " . 1 " /> 
                                <span> Batch return, is converted to normal inspection by incremental test </ span> 
                                a 
                                <span class = " iqczhspan " > continuously </ span> 
                                <field name="inctonor" class = " iqczhval " NOLABEL = " . 1 " /> 
                                <span> Batch qualified inspection incremental rotation by normal inspection </ span> 
                                a 
                                <span class = " iqczhspan " > continuously </ span> 
                                <Field name = " nortoredu "  class = " iqczhval " nolabel = " 1 " /> 
                                <span> grant qualified by normal inspection turn reduced inspection </ span>
                                <br/>
                                <spanclass= " Iqczhspan " > continuously </ span> 
                                <Field name = " redutonor "  class = " iqczhval " NOLABEL = " . 1 " /> 
                                <span> Batch return, reduced inspection by normal inspection transfected </ span> 
                                <br / > 
                                <span class = " iqczhspan " > continuously </ span> 
                                <Field name = " redutonochk "  class = "iqczhval" nolabel= " . 1 " /> 
                                <span> Batch qualified, reduced inspection by the rotation-free </ span> 
                                a 
                                <span class = " iqczhspan " > continuously </ span> 
                                <Field name = " inctoun "  class = " iqczhval " NOLABEL = " . 1 " /> 
                                <span> batch increment by increment test revolutions removed </ span> 
                                a
                            </div>
                        </div>
                </form>
            </field>
        </record>
    </data>
</odoo>

The introduction of css file: Create a static / css folder and then the module catalog, and write css

.iqcmain{
    width: 600px;
    margin: auto;
}

.iqcspanleft{
    margin-left: 70px;
}

.iqcspanmid{
    margin-left: 120px;
}

.iqcspanright{
    margin-left: 120px;
}



.iqcfenziline{
    /*display: inline;*/
    width: 120px;
    margin-left: 5px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}

.iqcfenmuline{
    /*display: inline;*/
    width: 120px;
    margin-left: 5px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}


.iqczhspan{
    display: inline;
    width: 20px;
}

.iqczhval{
    /*display: inline;*/
    width: 50px;
    margin-left: 40px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}

.iqczhval_01{
    /*display: inline;*/
    width: 50px;
    margin-left: 10px;
    text-align: center;
    border: 2px black solid;
    background-color: darkgrey;
}

Then create the following view vlews iqcbasecss.xml, to introduce static files written in css

<!--加载css与js资源 -->
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend" name="myiqcbase_view_assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" type="text/css" href="/myquality/static/css/iqcbase.css"/>
            </xpath>
        </template>
    </data>
</odoo >

Then __manifest __. Xml file created in one step the introduction of the iqcbasecss.xml

 

Complete file directory structure is as follows: