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/loanwolf/customers和 mystyle.css位于/home/jeremie/Projects/Test-Django/loanwolf/static/loanwolf/css .我如何修改 <link rel="stylesheet" type="text/css" href="mystyle.css"> 行以这种方式起作用？
最佳答案
{% load static %}
<!DOCTYPE html>
...
<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
以上所有内容均假定您已正确设置 STATIC settings .参见 here有关静态文件的更多信息。
关于html - .css 和 .html 不在同一目录中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43013564/