1、使用Bootstrap（一个优秀的前端框架，是基于html,css基础上进行开发，快速，便捷，提供非常多的空间并且都是附带源码）实现静态博客页面

bootstrap中文官网：www.bootcss.com

①、页面布局设计（博客首页、文章详情页）

②、bootstrap中的栅格系统，把页面均分为十二等分

>>>>首页

代码实现如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Djanjo</title>
    #这些在中文官网--起步中可以招到，直接黏贴即可

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

      <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div class="container page-header">

    <h1>文章列表

    <small>by zhonghuihong </small></h1>

</div>

<div class="container page-body">

    <div class="col-md-9" role="main">

        <div class="body-main">

            <div>

                <h2>文章标题1</h2>

                <p>这是文章1的内容</p>

            </div>

            <div>

                <h2>文章标题2</h2>

                <p>这是文章2的内容</p>

            </div>

        </div>

    </div>

    <div class="col-md-3" role="complementary">

        <div>

            <h2>最新文章</h2>

            <h4><a href="#">最新文章1</a></h4>

            <h4><a href="#">最新文章2</a></h4>

            <h4><a href="#">最新文章3</a></h4>

            <h4><a href="#">最新文章4</a></h4>

            <h4><a href="#">最新文章5</a></h4>

            <h4><a href="#">最新文章6</a></h4>

            <h4><a href="#">最新文章7</a></h4>

        </div>

    </div>

</div>

</body>

</html>

>>>>文章详情页

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Djanjo</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

      <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div class="container page-header">

    <h1>文章标题

   </h1>

</div>

<div class="container page-body">

            <div>

                <p>这是文章1的内容</p>

            </div>

</div>

</body>

</html>

Django----初识视图与模板的更多相关文章

  1. 五、Django之视图和模板-Part 3

    一.概述 一个视图就是一个页面,通常提供特定的功能,使用特定的模版.列如:在一个博客应用中,你可能会看到下列视图: 博客主页:显示最新发布的一些内容 每篇博客的详细页面:博客的永久链接 基于年的博客页 ...

  2. Django之视图与模板以及在模板中使用bootstrap

    从url中也可以传递参数给后台进行处理.比如http://127.0.0.1:8001/add/?a=4&b=5. 这个链接传入a=4,b=5.后台将进行a+b的处理 新增处理函数 def a ...

  3. Part 3：视图和模板--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  4. Django 的路由层 视图层 模板层

    --------------------------------------------------------------通过苦难,走向欢乐.——贝多芬 Django-2的路由层(URLconf) ...

  5. Django学习---路由url,视图，模板，orm操作

    Django请求周期 url ->  路由系统  ->函数或者类 -> 返回字符串 或者 模板语言 Form表单提交: 点击提交 -> 进入url系统  ->  执行函数 ...

  6. 【python】-- Django路由系统（网址关系映射）、视图、模板

    Django路由系统(网址关系映射).视图.模板 一.路由系统(网址关系映射) 1.单一路由对应: 一个url对应一个视图函数(类) urls.py: url(r'^test', views.test ...

  7. 【7】Django网页视图模板处理

    天下难事必作於易.天下大事必作於细.是以圣人终不为大,故能成其大 --老子<道德经> 本节内容 HTML页面的渲染 使用页面模板 异常处理 超链接路径处理 路由命名空间 1. HTML页面 ...

  8. Django 基础篇(二)视图与模板

    视图 在django中,视图对WEB请求进行回应 视图接收reqeust对象作为第一个参数,包含了请求的信息 视图就是一个Python函数,被定义在views.py中 #coding:utf- fro ...

  9. Django整理(二) - 视图和模板的初步使用

    Django中的视图 · Django使用视图来编写web应用的业务逻辑 · Django的视图也就是一个函数,可称为视图函数 · 视图定义在应用的view.py文件中 · 视图需要绑定一个URL地址 ...

  10. Django视图与模板（6）

    前面记到数据库与模型(models)有联系,现在记录一下视图与模板,他们两个也有联系. 个人理解:视图就好像一个cpu,比较核心,就是用来处理问题的,又叫业务逻辑处理,他把处理完的结果插入到模板里面, ...

随机推荐

  1. 20175221 《Java程序设计》迭代和JDB（课下作业，选做）：

    20175221 <Java程序设计> 迭代和JDB(课下作业,选做): 任务详情 1 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功 ...

  2. 编写高质量的Python代码系列（六）之内置模块

    Python预装了许多写程序时会用到的重要模块.这些标准软件包与通常意义上的Python语言联系得非常精密,我们可以将其当成语言规范的一部分.本节将会讲解基本的内置模块. 第四十二条:用functoo ...

  3. [Android] Android Build 时报错： java.io.IOException: Could not parse XML from android/accounts/annotations.xml

    Android构建时报错: app:lintVitalRelease[Fatal Error] :3:214: 与元素类型 “item” 相关联的 “name” 属性值不能包含 ‘<’ 字符. ...

  4. 关于js dtGrid报错长度的问题

    错误js截图 Uncaught TypeError: Cannot read property 'length' of undefined 翻译:Uncaught TypeError:无法读取未定义的 ...

  5. SQLServer2012基于扩展事件的阻塞监控

    一.前言 SQL阻塞Block是事务联机系统OLTP的产物.由于锁导致的资源等待,事务执行时间过长,直接影响业务:了解阻塞,发现阻塞,已作为DBA日常维护的重中之重. 通过dmv可以发现当前正在阻塞的 ...

  6. vue-router.esm.js:1905 TypeError: Cannot convert undefined or null to object

    环境:vue+vuex+element 报错原因 ...mapState('isDialNumber') mapState如果传递一个参数,参数必须是数组 ...mapState(['isDialNu ...

  7. webstorm快速输入标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. （三）ORB特征匹配

    ORBSLAM2匹配方法流程 在基于特征点的视觉SLAM系统中,特征匹配是数据关联最重要的方法.特征匹配为后端优化提供初值信息,也为前端提供较好的里程计信息,可见,若特征匹配出现问题,则整个视觉SLA ...

  9. mitx一大堆统计学知识

    从几乎0一路讲到马克洛夫 mit的密度太高了 下次必须花3天时间准备

  10. nginx 配置proxy_pass URL末尾加与不加/(斜线)的区别

    nginx在配置proxy_pass的时候 URL结尾加斜线(/)与不加的区别和注意事项 假设访问路径的 /pss/bill.html 加/斜线的情况 location /pss/ { proxy_p ...