今天开始学习网页风格和设计，就像python有Web框架一样，也有一些CSS框架。对于CSS框架，我们可以使用默认的样式，也可以在原基础上编辑修改。本教程使用的是materialize这个CSS框架[1]，首页界面如下：

点解GET STARTED，我们可以把它下载到本地使用，也可以直接复制相应的链接使用。

为了套用如下这个Cards界面，我们直接将代码复制到home.html：

修改后的home.html内容如下：

{% load static %}

<!-- Compiled and minified CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">

</head>

<body>

<div class="row">

    {% for t in tutorials %}

    <div class="col s12 m6">

      <div class="card blue-grey darken-1">

        <div class="card-content white-text">

          <span class="card-title">{{ t.tutorial_title}}</span>

            <p>{{ t.tutorial_published }}</p>

            <p>{{ t.tutorial_content|safe }}</p>

        </div>

      </div>

    </div>

    {% endfor %}

  </div>

<script src="{% static 'tinymce/js/prism.js' %}"></script>

</body>

启动服务器，刷新界面如下：

我们希望日期显示的字体小一点，可以通过如下方式修改：

<p style="font-size:70%">{{ t.tutorial_published }}</p>

我们希望鼠标落在相应card时，该Card有个浮起效果，可以在如下这行代码后添加hoverable：

<div class="card blue-grey darken-1 hoverable">

接下来，我们希望添加一个如下图所示的导航栏，问题在于我们不是只在首页显示导航栏，随着内容的增加，页面的增加，如果每次都把这段代码拷贝到相应的html页面，将会使得代码冗长且操作繁琐。为了解决这个问题，我们可以使用extends和includes。

首先，我们新建一个header.html文件，将导航栏的信息存储在里面：

<head>

{% load static %}

<!-- Compiled and minified CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">

</head>

<body>

    {% block content %}

    {% endblock %}

</body>

<script src="{% static 'tinymce/js/prism.js' %}"></script>

现在粘贴相应的导航栏代码到header.html，修改后内容如下：

<head>

{% load static %}

<!-- Compiled and minified CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">

</head>

<body>

  <nav>

    <div class="nav-wrapper">

      <a href="#" class="brand-logo">Logo</a>

      <ul id="nav-mobile" class="right hide-on-med-and-down">

        <li><a href="sass.html">Sass</a></li>

        <li><a href="badges.html">Components</a></li>

        <li><a href="collapsible.html">JavaScript</a></li>

      </ul>

    </div>

  </nav>

    {% block content %}

    {% endblock %}

</body>

<script src="{% static 'tinymce/js/prism.js' %}"></script>

此时home.html的内容如下

{% extends 'main/header.html' %}

{% block content %}

<div class="row">

    {% for t in tutorials %}

    <div class="col s12 m6">

      <div class="card blue-grey darken-1 hoverable">

        <div class="card-content white-text">

          <span class="card-title">{{ t.tutorial_title}}</span>

              <p style="font-size:70%">{{ t.tutorial_published }}</p>

            <p>{{ t.tutorial_content|safe }}</p>

        </div>

      </div>

    </div>

    {% endfor %}

  </div>

{% endblock %}

重新到浏览器刷新页面，可以看到导航栏出现了：

我们对导航栏上显示的字Sass, Components, JavaScript做出修改，得到如下界面：

如果我们想改变导航栏的颜色或者Card的颜色，该怎么做呢？可以参考链接[2]，我暂时先不对此做出修改，之后想修改时再来操作。

参考链接：

[1] https://materializecss.com/

[2] https://pythonprogramming.net/css-django-tutorial/

Anaconda+django写出第一个web app（五）的更多相关文章

  1. Anaconda+django写出第一个web app（一）

    在安装好Anaconda和django之后,我们就可以开始创建自己的第一个Web app,那么首先创建一个空文件夹,之后创建的文件都在这个文件夹内. 启动命令行进入此文件夹内,可以先通过如下命令查看一 ...

  2. Anaconda+django写出第一个web app（十一）

    今天我们来学习给页面添加一个Sidebar,根据Sidebar跳转到相应的tutorial. 打开views.py,编辑single_slug函数: def single_slug(request, ...

  3. Anaconda+django写出第一个web app（十）

    今天继续学习外键的使用. 当我们有了category.series和很多tutorials时,我们查看某个tutorial,可能需要这样的路径http://127.0.0.1:8000/categor ...

  4. Anaconda+django写出第一个web app（九）

    今天来学习外键的使用,用外键来连接数据库中的两个表. 当我们的tutorials非常多的时候,目前的显示方式就会使得页面非常凌乱.我们可以考虑把这些教程分为不同的系列,页面只显示标题以及概要等信息,进 ...

  5. Anaconda+django写出第一个web app（三）

    前面我们已经建立了模型Tutorial,也已经可以用Navicat Premium打开数据看查看数据,接下来我们通过建立admin账户来上传数据. 在命令行执行如下命令来创建用户: python ma ...

  6. Anaconda+django写出第一个web app（二）

    今天开始建立App中的第一个Model,命名为Tutorial. Model的定义在main文件夹下的models.py中通过类进行,我们希望Tutorial这个model包含三个属性:标题.内容和发 ...

  7. Anaconda+django写出第一个web app（七）

    今天来实现如何在页面弹出一些信息,比如注册成功后弹出注册成功的信息.这一点可以通过materialize里的Toasts来实现. django自带的messages可以告诉我们是否注册成功,以及注册失 ...

  8. Anaconda+django写出第一个web app（六）

    今天学习如何写一个注册用户的界面. 上一节的导航栏中我们修改了导航栏右侧的文字为register并将路径设置为/register,内容如下: <li><a href="/r ...

  9. Anaconda+django写出第一个web app（四）

    前面对Models有了一些了解,今天开始进一步了解Views,了解Views如何和Models交互以及了解模板(templates). 打开main文件夹下的views.py,重新编写homepage ...

  10. Anaconda+django写出第一个web app（八）

    今天来实现网站的登入和登出功能. 首先我们需要在urls.py中添加路径,注意此处的路径和在导航栏中设置的文字路径保持一致: from django.urls import path from . i ...

随机推荐

  1. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

  2. EasyUseCase 一款脑图转化 Excel 测试用例工具 (1.2 版本升级)

    EasyUseCase 本工具由本人自主开发.经过内部实践有效提升测试用例编写效率200% 覆盖率可度量.利用读取xmind软件图表转换符合国人基本需求的测试用例,让手动写Excel用例的日子过去,发 ...

  3. php手册 | python手册 | perl手册 | c#.net手册 | c++手册 | ruby手册 | jquery手册 | js手册 | prototype手册 | mysql手册 | smarty手册 | css手册 | html手册 | nginx手册 | apache手册 | shell手册 | svn手册

    收集各种实用类手册: http://shouce.jb51.net/shell/

  4. Ubuntu终端命令--查看端口占用及关闭

    1.查看已连接的服务端口 (ESTABLISHED)     netstat-a 2.查看所有的服务端口(LISTEN,ESTABLISHED)     netstat-ap 3.查看指定端口,可以结 ...

  5. Everyone is tester

    有一本书叫<人人都是产品经理>,作者在书中介绍了在做产品的过程中学到的思维方式和做事方式,受到行业大众的认可 作为一名测试老鸟,我想说,其实Everyone is tester     为 ...

  6. SSL身份认证原理 - 目标: 搞清楚数字证书和数字签名的关系

    1  概述 1.1  产生背景 基于万维网的电子商务和网上银行等新兴应用,极大地方便了人们的日常生活,受到人们的青睐.由于这些应用都需要在网络上进行在线交易,它们对网络通信的安全性提出了更高的要求.传 ...

  7. 分享关于js解析URL中的参数的方法

    function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  8. 【spring】- springmvc 工作原理

    原理 本质是将DispatcherServlet及关联的Spring上下文环境的初始化工作织入Servlet的生命周期内,将外部WEB请求转换为Spring Bean能处理的形式,然后将处理后的结果借 ...

  9. 九省LNOI2018退役记

    立个flag不会退役. Day 0: 水一发. 大连大学的键盘敲起来就跟敲纸似的. 膜拜要进队的gqh,yxd,sjq. (都进啦2333) (高斯消元,高原反应,分麾下治……) 给我这只弱鸡烧根香. ...

  10. 51nod 1589 移数博弈 | 基数排序(ノಠ益ಠ)ノ彡┻━┻

    51nod 1589 移数博弈 题面 给出一个序列a,长度 n <= 10^7, a[i] <= 10^7 求每个长度 >= 2 的区间的最大值*次大值 之和. 题解 主要思路是求每 ...