1. 设计

2. 结构

3. 实现

templates/common/layout.html:

<!DOCTYPE html>

<html lang="zh">

<head>

    {% load staticfiles %}

    <meta charset="UTF-8">

    <title>MyBlog</title>

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

</head>

<body>

    <header>

        <div class="logo">MyBlog</div>

        <div class="nav-link">

            <ul>

                <li><a href="#">博客园</a></li>

                <li><a href="{% url 'polls:index' %}">首页</a></li>

                <li><a href="/articles">文章</a></li>

            </ul>

        </div>

        <<div class="login"><a href="/user/login">登陆</a></div>

    </header>

    <div class="content">

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>

        {% block content %}{% endblock %}

    </div>

    <footer>&copy;2018 — TimLinux</footer>

    <script type="application/javascript" src="{% static 'js/common/layout.js' %}"></script>

    {% block script %}{% endblock %}

</body>

</html>

static/css/common/layout.css:

body {

    margin: 0 auto;

    background-color: #d6fff1;

}

header {

    background-color: #000;

    position: fixed;

    top:;

    left:;

    height: 3em;

    width: 100%;

}

header .logo {

    color: #FFF;

    font-size: 24px;

    padding: 8px 20px 0 40px;

    position: relative;

    float: left;

}

header .nav-link {

    color: #FFF;

    /*background-color: yellow;*/

    /*border: 1px solid red;*/

    position: relative;

    float: left;

}

header ul {

    margin:;

    padding:;

}

header li {

    position: relative;

    float: left;

    list-style: none;

    /*border: 1px solid red;*/

}

header li a {

    text-decoration: none;

    display: inline-block;

    font-size: 18px;

    padding: 12px 10px;

    width: 80px;

    text-align: center;

    color: #FFF;

}

header li a:hover {

    background-color: #4eff6e;

}

header .login {

    position: relative;

    float: right;

}

header .login a {

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    padding: 13px 10px;

    width: 40px;

    text-align: center;

    color: #FFF;

}

header .login a:hover {

    background-color: #4eff6e;

}

header .selected {

    background-color: #ffac47;

}

.content {

    margin: 50px 0 30px 0;

    /*border: 1px solid blue;*/

}

footer {

    position: fixed;

    bottom:;

    left:;

    background-color: cornsilk;

    width: 100%;

    text-align: center;

    height: 20px;

}

static/js/common/layout.js:

function addLoadEvent(func) {

    var old_onload = window.onload;

    if (typeof old_onload !== 'function') {

        window.onload = func;

    } else {

        window.onload = function () {

            old_onload();

            func();

        }

    }

}

function setSelectedNavLink() {

    var navLinks = document.querySelectorAll("a[href^='/']");

    var curPath = location.pathname;

    for (var i=0; i < navLinks.length; i++) {

        var curElement = navLinks[i];

        if (curElement.pathname === curPath) {

            curElement.parentNode.className.replace('selected', '');

            curElement.parentNode.className += ' selected';

        }

    }

}

addLoadEvent(setSelectedNavLink);

polls/templates/polls/index.html

{% extends "common/layout.html" %}

{% block content %}

    {{ name }}

{% endblock %}

myblog/settings.py追加的内容：

polls/views.py:

from django.template import loader

from django.http import HttpResponse

def index(request):

    t = loader.get_template("polls/index.html")

    c = {'name': 'TimLinux'}

    return HttpResponse(t.render(c, request))

4. 效果

[TimLinux] myblog 首页创建的更多相关文章

  1. [TimLinux] myblog 创建第一个app

    1. 项目结构 项目地址:https://github.com/timscm/myblog.git 2. 启动项目 通过pycharm启动项目,进入调试模式: "D:\Program Fil ...

  2. [TimLinux] myblog 数据表格显示

    1. 设计 2. 数据 创建数据库用户: CREATE USER IF NOT EXISTS 'user1'@'MyBlogPwd123'; GRANT ALL ON d1.* TO 'user1'@ ...

  3. [TimLinux] myblog 页面Axure设计

    1. 导航 2. 首页主体 3. 侧边栏 4. 页尾 5. 使用工具 Axure RP 8.0.0.3312 Pro版本.

  4. [saiku] 访问saiku首页的时候前后台处理流程

    这篇文章讲述:项目启动后,首次访问SAIKU的登录页,前后台分别做了什么处理 (1) 访问的到底是什么页面? 浏览器输入:localhost:8080 啪一回车 根据web访问的尿性,访问的是 ind ...

  5. 在 Windows Azure 网站上使用 Django、Python 和 MySQL：创建博客应用程序

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Sunitha Muthukrishna 撰写. 根据您编写的应用程序,Windows Azure 网站上的基本Python 堆 ...

  6. jenkins创建构建任务

    构建项目类型 点击 Jenkins 首页 “创建一个新任务” 的链接, 输入任务名称 Jenkins 提供了六种类型的任务. 构建一个自由风格的软件项目 这是Jenkins的主要功能.Jenkins ...

  7. 再次用CodeIgniter实现简易blog

    天变冷了,人也变得懒了不少,由于工作的需要,最近一直在学习CodeIgniter(CI)框架的使用,没有系统的从PHP基本语法学起,在网上靠百度谷歌,东拼西凑的实现了一些简单的功能.所以,老PHPer ...

  8. SSH实战 · 唯唯乐购项目（上）

    前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...

  9. OC中的多继承

    可以间接实现,方法有: 1.消息转发 2.协议 3.组合模式 4.代理 5.分类 直接上code,分别说明集中方法的实现 一.消息转发 消息转发可以参考我的另外一篇博客:http://www.cnbl ...

随机推荐

  1. 对学习Python自然语言处理的一点儿感悟

    研究生阶段,如果一开始找不到知识点,那就结合导师的研究课题以及这个课题设计到的知识领域,扎好基础知识能力.以我研究的自然语言处理领域为例,如果一开始不知道研究点,且又要安排学习计划,那么我会在选择: ...

  2. MySQL InnoDB MVCC

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  3. pat 1050 String Subtraction（20 分）

    1050 String Subtraction(20 分) Given two strings S​1​​ and S​2​​, S=S​1​​−S​2​​ is defined to be the ...

  4. 搭建Redis三主三从集群

    Redis三主三从集群规划 10.0.128.19   使用端口 7000  7001 10.0.128.22   使用端口 7002  7003 10.0.128.23   使用端口 7004  7 ...

  5. 三种方法教你HTML实现点击某一个元素之外触发事件

    HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...

  6. [FPGA]Verilog实现8位串并转换器HC595

    目录 想说的话... 正文 IC介绍_HC595 电路连接图 功能表 逻辑图 代码实现 代码已经更新,新的代码按照电路编写,忠实于原电路的逻辑,已注于文末(11/16) 修复并行输出数据出错的bug, ...

  7. 【集合系列】- 深入浅出的分析 Hashtable

    一.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.P ...

  8. 在Windows Server 2019通过Docker Compose部署Asp.Net Core

    一.安装Docker Enterprise 安装文档是: https://docs.docker.com/install/windows/docker-ee/ 安装完成后,如下图 二.首先,拉取一个W ...

  9. 2019-10-28：渗透测试学习,sqlmap的使用，笔记

    sqlmap工具的使用sql注入工具,明小子,啊D,萝卜头,穿山甲,sqlmap等开源自动化注入利用工具,支持的数据库有12种,在/plugins中可以看到支持的数据库种类,在所有注入利用工具中是最好 ...

  10. Spring与Shiro整合 登陆操作

    Spring与Shiro整合 登陆操作 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 编写登陆Controller方法  讲解: 首先,如果你登陆失败的时候,它会把你的异常信息丢到 ...