八、Django学习：使用css美化页面
<blockquote><p>按照一般的网站设计，导航栏、内容栏、尾注。本次对主页使用css进行美化。</p>
</blockquote>
<ul>
<li>增加路由<code>blog urls.py</code></li>
</ul>
<pre><code class="language-python">from django.url import path
from . import views
urlpatterns = [
path('', views.blog_list, name='blog_list'),
path('<int:blog_pk>', views.blog_detail, name='blog_detail'),
path('type/<int:blog_type_pk>', views.blogs_with_type, name='blogs_with_type')
]
</code></pre>
<ul>
<li>修改<code>base.html</code>文件</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div>
<a href='{% url "home" %}'>
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一个横线用于分割页面 #}
<hr>
{% block content %}{% endblock %}
</body>
</html>
</code></pre>
<ul>
<li>给首页创建一个处理方法，<code>mysite views.py</code>，先新建，再修改</li>
</ul>
<pre><code class="language-python">from django.shortcuts import render_to_response
def home(request):
context = {}
return render_to_response('home.html', context)
</code></pre>
<ul>
<li><code>templates</code>下新建一个<code>home.html</code>文件并修改</li>
</ul>
<pre><code class="language-html">{% extends 'base.html' %}
{% block title %}
我的网站|首页
{% endblock %}
{% block content %}
<h3>欢迎访问我的网站，随便看</h3>
{% endblock %}
</code></pre>
<ul>
<li>项目首页<code>mysite urls.py</code>总路由修改</li>
</ul>
<pre><code class="language-python">from django.contrib import admin
from django.urls import path,include
from .views import home
urlpatterns = [
path('', home, name='home'),
path('admin/', admin.site.urls),
path('blog/',include('blog.urls'))
]
</code></pre>
<p>刷新页面，如下图所示。</p>
<p><img src="https://img2018.cnblogs.com/blog/1399891/201908/1399891-20190822105956383-1623767685.png"></p>
<ul>
<li>修改<code>base.html</code>文件</li>
</ul>
<blockquote>
<p>可以使用<code>chrome</code>对<code>css</code>页面进行调试查看</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="nav">
<a class='logo' href='{% url "home" %}'>
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一个横线用于分割页面 #}
{% block content %}{% endblock %}
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.nav {
background: #eee;
border-bottom: 1px solid #ccc;
padding: 10px 5px;
}
div.nav a{
text-decoration: none;
color: #000;
padding: 5px 10px;
}
div.nav a.logo {
display: inline-block;
font-size: 130%;
}
</style>
</body>
</html>
</code></pre>
<ul>
<li>修改<code>home.html</code>文件</li>
</ul>
<pre><code class="language-html">{% extends 'base.html' %}
{% block title %}
我的网站|首页
{% endblock %}
{% block content %}
<h3 class="home-content">欢迎访问我的网站，随便看</h3>
<style type="text/css">
h3.home-content {
font-size: 222%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
{% endblock %}
</code></pre>
<p>刷新页面，显示如下：</p>
<p><img src="https://img2018.cnblogs.com/blog/1399891/201908/1399891-20190822110006624-1901552853.png"></p>
<ul>
<li>将<code>css</code>代码整合到<code>css</code>文件中</li>
</ul>
<blockquote>
<p>在根目录建立一个<code>static</code>文件夹用于存放<code>css</code>，<code>js</code>，图片等静态文件。</p>
</blockquote>
<ul>
<li>
<p>建立<code>static base.css</code>文件，并将<code>base.html</code>中的<code>css</code>代码剪切进去。</p>
</li>
<li>
<p>设置<code>settings.py</code>静态文件路径</p>
</li>
</ul>
<pre><code class="language-python">STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
</code></pre>
<ul>
<li>将<code>base.css</code>路径引用到<code>base.html</code>文件中</li>
</ul>
<pre><code class="language-html"><head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="/static/base.css">
</head>
</code></pre>
<p>刷新页面，得到同样的结果。</p>
<p>通过<code>Django</code>静态文件载入，实现同样的功能。</p>
<p>修改<code>base.html</code>文件：</p>
<pre><code class="language-html">{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
</head>
<body>
<div class="nav">
<a class='logo' href='{% url "home" %}'>
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一个横线用于分割页面 #}
{% block content %}{% endblock %}
</body>
</html>
</code></pre>
<p>刷新得到同样的结果。</p>
<p>为了让<code>home.html</code>同样能这样使用，需要在<code>base.html</code>增加一个块<code>block</code>用于引用<code>css</code>文件。</p>
<ul>
<li>修改<code>base.html</code>文件</li>
</ul>
<pre><code class="language-html">{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
{% block header_extends %}{% endblock %}
</head>
<body>
<div class="nav">
<a class='logo' href='{% url "home" %}'>
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一个横线用于分割页面 #}
{% block content %}{% endblock %}
</body>
</html>
</code></pre>
<ul>
<li>修改<code>home.html</code>文件(<code>css</code>代码已转移到<code>home.css</code>中)</li>
</ul>
<pre><code class="language-html">{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
我的网站|首页
{% endblock %}
{% block header_extends %}
<link rel="stylesheet" type="text/css" href="{% static 'home.css' %}">
{% endblock %}
{% block content %}
<h3 class="home-content">欢迎访问我的网站，随便看</h3>
{% endblock %}
</code></pre>
<p>刷新主页，可以得到一样的结果。</p><br><br>
来源：https://www.cnblogs.com/sjfeng1987/p/11393085.html
頁:
[1]