10 使用CSS美化页面

技术交流QQ群:1027579432，欢迎你的加入！

本教程来源于B站杨仕航Django2.0开发视频教程，如需转载，必须注明来源！

1.页面设计

页面设计.png

2.导航栏设计

导航栏设计.png

• 打开blog文件夹的urls.py文件，在文件中添加博客列表blog_list页面的路由，如下所示：

  from django.urls import path
  from . import views
  
  
  urlpatterns = [
      # http:localhost:8000/blog/1
      path('', views.blog_list, name="blog_list"),
      path('', views.blog_detail, name="blog_detail"),
      path('type/', views.blogs_with_type, name="blogs_with_type"),
  ]
  

• 打开mysite文件夹目录下的templates文件夹下的base.html文件，在首页中增加首页和博客两个显示的标题，如下所示：

  
  
  
      
      
  
  
      
  
          
              
  个人博客网站
          
          首页
          博客
      
      
  
      {% block content %} {% endblock %}
  
  
  

• 接着在mysite文件目录下，创建首页的请求处理的方法views.py文件，文件的内容如下:

  from django.shortcuts import render_to_response
  
  
  def home(request):
      context = {}
      return render_to_response("home.html", context)
  

• 然后，打开mysite文件目录下的templates文件夹，然后创建网站首页的模板页面home.html，内容如下所示：

  {% extends 'base.html' %}
  
  {% block title %}
      我的网站|首页
  {% endblock %}
  
  {% block content %}
      
  欢迎访问我的网站，随便看
  {% endblock %}
  

• 最后，需要对博客首页的路由进行修改，打开mysite文件目录下的urls.py文件，修改原始文件中打开首页的路由：

  from django.contrib import admin
  from django.urls import include, path
  from . import views
  
  urlpatterns = [
      # 博客首页
      path('', views.home, name="home"),   # 博客首页的路由已经修改！
      path('admin/', admin.site.urls),
      path('blog/', include('blog.urls')),
  
  ]
  

3.使用CSS

• 使用CSS对HTML进行修饰，CSS即层叠样式表。对首页的前端页面进行CSS美化，打开base.html文件，添加如下内容：

  
  
  
      
      
  
  
      
  
          
              
  个人博客网站
          
          首页
          博客
      
      {% block content %} {% endblock %}
  
      
  
  
  

• 同时，对网站首页的前端页面home.html进行CSS美化，添加如下内容：

  {% extends 'base.html' %}
  
  {% block title %}
      我的网站|首页
  {% endblock %}
  
  {% block content %}
      
  欢迎访问我的网站，随便看
  
      
  {% endblock %}
  

4.使用静态文件

静态文件.png

• 在项目根目录下创建静态文件夹static，如下图所示。在static文件夹下创建base.css文件，内容如下所示。这样就可以解决上一小节中在HTML中嵌入CSS代码的混乱感。

  
  
  static文件夹.png

  * {
      margin: 0;
      padding: 0;
  }
  
  div.nav {
      background-color: #eee;
      border-bottom: 1px solid #ccc;
  }
  
  div.nav a {
      text-decoration: none;
      color: #000;
      padding: 10px 5px;
  }
  
  div.nav a.logo {
      display: inline-block;
      font-size: 120%;
  }
  

• 打开mysite文件夹下的全局设置文件settings.py，在该文件的最后添加静态文件夹static所存放的位置，添加如下内容所示：

  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static'),
  ]
  

• 在base.html文件中引入static文件夹下的base.css文件，有两种方法：下面采用方法1。此时，base.html文件如下所示：

  
  {% load staticfiles %}
  
  
  
      
      
      
      
      
      
  
  
      
  
          
              
  个人博客网站
          
          首页
          博客
      
      {% block content %} {% endblock %}
  
  
  

• 同理，在static文件夹下创建home.css，然后将home.html中的CSS代码剪切至home.css中。如下所示：

  h3.home-content {
      font-size: 222%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

• 由于home.html文件是对base.html文件的拓展，于是，对base.html文件进行修改增加模板标签{% block header_extends %}{% endblock %}，修改后的文件内容如下所示：

  
  
  
      
      
      
      {% block header_extends %}{% endblock %}
  
  
      
  
          
              
  个人博客网站
          
          首页
          博客
      
      {% block content %} {% endblock %}
  
  
  

• 最后，在home.html中对模板标签{% block header_extends %}{% endblock %}进行详细说明。因此需要在home.html中引入home.css才能对博客首页的前端页面进行CSS美化，此处使用方法2进行引入CSS文件。home.html文件中的内容如下：

  {% extends 'base.html' %}
  
  {% load staticfiles %}
  
  {% block title %}
      我的网站|首页
  {% endblock %}
  
  {% block header_extends %}
      
  {% endblock %}
  
  
  {% block content %}
      
  欢迎访问我的网站，随便看
  {% endblock %}