八、Django学习：使用css美化页面

按照一般的网站设计，导航栏、内容栏、尾注。本次对主页使用css进行美化。

  • 增加路由blog urls.py
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')
]
  • 修改base.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>
  • 给首页创建一个处理方法，mysite views.py，先新建，再修改
from django.shortcuts import render_to_response


def home(request):
    context = {}
    return render_to_response('home.html', context)
  • templates下新建一个home.html文件并修改
{% extends 'base.html' %}

{% block title %}
	我的网站|首页
{% endblock %}

{% block content %}
	<h3>欢迎访问我的网站，随便看</h3>
{% endblock %}
  • 项目首页mysite urls.py总路由修改
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'))
]

刷新页面，如下图所示。

  • 修改base.html文件

可以使用chrome对css页面进行调试查看

<!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>
  • 修改home.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 %}

刷新页面，显示如下：

  • 将css代码整合到css文件中

在根目录建立一个static文件夹用于存放css，js，图片等静态文件。

  • 建立static base.css文件，并将base.html中的css代码剪切进去。

  • 设置settings.py静态文件路径

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
  • 将base.css路径引用到base.html文件中
<head>
	<meta charset="utf-8">
	<title>{% block title %}{% endblock %}</title>
	<link rel="stylesheet" type="text/css" href="/static/base.css">
</head>

刷新页面，得到同样的结果。

通过Django静态文件载入，实现同样的功能。

修改base.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>

刷新得到同样的结果。

为了让home.html同样能这样使用，需要在base.html增加一个块block用于引用css文件。

  • 修改base.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>
  • 修改home.html文件(css代码已转移到home.css中)
{% 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 %}

刷新主页，可以得到一样的结果。

posted on 2019-08-22 11:00  月见空青  阅读(2756)  评论(0)    收藏  举报

导航