.css和.html不在同一目录中

时间:2017-03-25 07:04:48

标签: html css django

mystyle.css档案:

table {
    border-collapse: collapse;
}
tr, th, td {
    border: solid 1px #fff
}
td {
    width: 50px;
    padding: 15px
}
th {
    background: #006599;
    color: #fff
}
table.inner tr:nth-child(even) {
    background: #c7d4e5
}
table.inner tr:nth-child(odd) {
    background: #E5E5E5
}
h1 {
    margin-bottom: 0;
    padding: 0.3em 0;
    border-bottom: 1px solid #777;
}
h2 {
    color: #999;
    font-size: 1.2em;
    padding-top: 0.4em;
}
address {
    padding: 0.8em;
    font-size: 0.9em;
}
page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
}
page[size="A4"] {
    width: 21cm;
    height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    height: 21cm;
}
page[size="A3"] {
    width: 29.7cm;
    height: 42cm;
}
page[size="A3"][layout="portrait"] {
    width: 42cm;
    height: 29.7cm;
}
page[size="A5"] {
    width: 14.8cm;
    height: 21cm;
}
page[size="A5"][layout="portrait"] {
    width: 21cm;
    height: 14.8cm;
}
.header, .content {
    padding-right: 30%;
}
.center {
    text-align: center;
}
.border {
    border: 1px solid #777;
}
.border td, .border th {
    border: 1px solid #777;
}
table {
    border-collapse: collapse;
}
table td, table th {
    border-collapse: collapse;
    padding: 4px 8px;
}
@media print {
    body, page {
        margin: 0;
    }
    .djDebug {
        display: none;
    }
}
@media screen {
    html {
        background: #999;
    }
    body {
        margin: 20px 30%;
        padding-top: 3em;
        padding-left: 3em;
    }
}

我的.html文件

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <!--put all your javascript library or style here-->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="mystyle.css">

    <script>
    window.print()
    </script>

</head>
<body>
    {% load i18n %}
    <table>
        <tr>
            <th>
                <center>
                    <h1>Test - {% trans "Customer profile" %}</h1>
                    <center></center>
                </center>
            </th>
        </tr>
        <tr>
            <td>{% trans "Date" %}</td>
            <td>{% now "jS F Y" %}</td>
        </tr>
        <tr>
            <td>{% trans "Customer id" %}</td>
            <td>{{ customerprofile.amortizing_table_context.customer_code}}</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <table class='inner'>
                    <tr>
                        <th colspan="2">
                            <h2>{% trans "General informations" %}</h2>
                        </th>
                    </tr>
                    <tr>
                        <td>{% trans "First name" %}</td>
                        <td class="col-md-9">{{ customerprofile.amortizing_table_context.first_name}}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Last name" %}</td>
                        <td>{{ customerprofile.amortizing_table_context.last_name}}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Email" %}</td>
                        <td>{{ customerprofile.email}}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Language" %}</td>
                        <td>{{ customerprofile.language }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Primary phone" %}</td>
                        <td>{{ customerprofile.phone_1 }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Secondary phone" %}</td>
                        <td>{{ customerprofile.phone_2 }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Fax" %}</td>
                        <td>{{ customerprofile.fax }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Social Security number (SSN)" %}</td>
                        <td>{{ customerprofile.ssn }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Birth date" %}</td>
                        <td>{{ customerprofile.birth_date }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Principal address" %}</td>
                        <td>{{ customerprofile.address }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Secondary address" %}</td>
                        <td>{{ customerprofile.address_line2}}</td>
                    </tr>
                    <tr>
                        <td>{% trans "City" %}</td>
                        <td>{{ customerprofile.city }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "State" %}</td>
                        <td>{{ customerprofile.state }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Zip code" %}</td>
                        <td>{{ customerprofile.zip_code }}</td>
                    </tr>
                </table>
            </td>
            <td>
                <table class='inner'>
                    <tr>
                        <th colspan="2">
                            <h2>{% trans "Financial" %}</h2>
                        </th>
                    </tr>
                    <tr>
                        <td>{% trans "Income source" %}</td>
                        <td>{{ customerprofile.financialprofile.income_source }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Bank" %}</td>
                        <td>{{ customerprofile.financialprofile.bank }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Bank transit" %}</td>
                        <td>{{ customerprofile.financialprofile.bank_transit }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Bank account" %}</td>
                        <td>{{ customerprofile.financialprofile.bank_account }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Monthly pay amount" %}</td>
                        <td>{{ customerprofile.financialprofile.pay_amount }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Pay frequency" %}</td>
                        <td>{{ customerprofile.financialprofile.pay_frequency }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "First pay date" %}</td>
                        <td>{{ customerprofile.financialprofile.first_pay_date }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Second pay date" %}</td>
                        <td>{{ customerprofile.financialprofile.second_pay_date }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Monthly micro loan amount" %}</td>
                        <td>{{ customerprofile.financialprofile.micro_loan_monthly_amount }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Account balance on pay day" %}</td>
                        <td>{{ customerprofile.financialprofile.bank_account_balance_on_pay_day }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Bankruptcy" %}</td>
                        <td>{% if customerprofile.financialprofile.had_bankruptcy %} {{ "Yes" }}{% else %}{{ "No" }} {% endif %}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Consumer proposal" %}</td>
                        <td>{% if customerprofile.financialprofile.had_consumer_proposal %} {{ "Yes" }}{% else %}{{ "No" }} {% endif %}</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class='inner'>
                    <tr>
                        <th colspan="2">
                            <h2>{% trans "Employer" %}</h2>
                        </th>
                    </tr>
                    <tr>
                        <td>{% trans "Company name" %}</td>
                        <td>{{ customerprofile.employerprofile.company_name }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Job title" %}</td>
                        <td>{{ customerprofile.employerprofile.job_title }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Date hired" %}</td>
                        <td>{{ customerprofile.employerprofile.date_hired }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Supervisor name" %}</td>
                        <td>{{ customerprofile.employerprofile.supervisor_name }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Phone" %}</td>
                        <td>{{ customerprofile.employerprofile.phone }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Phone extension" %}</td>
                        <td>{{ customerprofile.employerprofile.phone_extension }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Address" %}</td>
                        <td>{{ customerprofile.employerprofile.address }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Secondary address" %}</td>
                        <td>{{ customerprofile.employerprofile.address_line2 }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "City" %}</td>
                        <td>{{ customerprofile.employerprofile.city }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "State" %}</td>
                        <td>{{ customerprofile.employerprofile.state }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Zip code" %}</td>
                        <td>{{ customerprofile.employerprofile.zip_code }}</td>
                    </tr>
                </table>
            </td>
            <td>
                <table class='inner'>
                    <tr>
                        <th colspan="2">
                            <h2>{% trans "References" %}</h2>
                        </th>
                    </tr>
                    <tr>
                        <td>{% trans "Reference 1 - Fullname" %}</td>
                        <td>{{ customerprofile.referencesprofile.ref1_fullname }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Reference 1 - Phone" %}</td>
                        <td>{{ customerprofile.referencesprofile.ref1_phone }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Reference 1 - Link" %}</td>
                        <td>{{ customerprofile.referencesprofile.ref1_link }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Reference 2 - Fullname" %}</td>
                        <td>{{ customerprofile.referencesprofile.ref2_fullname }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Reference 2 - Phone" %}</td>
                        <td>{{ customerprofile.referencesprofile.ref2_phone }}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Reference 2 - Link" %}</td>
                        <td>{{ customerprofile.referencesprofile.ref2_link }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>

.html文件和.css文件不在同一目录中。第一个位于/home/jeremie/Projects/Test-Django/loanwolf/templates/loanwol‌​f/customersmystyle.css位于/home/jeremie/Projects/Test-Django/loanwolf/static/loanwolf/‌​css。如何以这样的方式修改行<link rel="stylesheet" type="text/css" href="mystyle.css">

3 个答案:

答案 0 :(得分:1)

{% load static %}    

<!DOCTYPE html>

...

<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">

以上所有假设您已正确设置STATIC settings。有关静态文件的更多信息,请参阅here

答案 1 :(得分:0)

您可以将href修改为:href =“../ css / mystyle.css”

答案 2 :(得分:-1)

如果它不在同一文件夹中,则必须指定文件的路径。有绝对路径(就像你的问题的评论中的路径),并且有相对路径。绝对路径表示您指定从根开始的完整路径。它的相对路径......嗯......相对于你的html文件的路径。

使用<link rel="stylesheet" type="text/css" href="../../../static/loanwolf/css/mystyle.css">按相对路径获取它。 ..表示父文件夹。