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. css 完美垂直居中解决方案兼容ie8以上等其他浏览器

    css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...

  2. jquery.eraser制作擦涂效果

    jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...

  3. javascript 字符串转化成函数执行

    javascript 字符串转化成函数执行<pre>function func_abc(){ alert('a');}var str = "func_abc";eval ...

  4. [quartusⅡ] 使用quartusⅡ的过程中，遇到过的一些“软件上的问题”

    1.USB blaster的驱动在设备管理器上点“更新驱动软件”,更新不了,说什么哈希值不在指定目录下,如下图, 解决方法是,https://blog.csdn.net/rdgfdd/article/ ...

  5. hdu 1754 I Hate It (线段树、单点更新)（PS：ios::sync_with_stdio(false)可以加快cin、cout的读取写出速度）

    I Hate ItTime Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. Ubuntu改坏sudoers后无法使用sudo的解决办法

    练习安装odoo的时候,创建了一个odoo用户,想把它赋予sudo权限,然而,编辑的时候不留意,改坏了,导致sudo无法使用,无法编辑sudoers文件修改回来. 总提示如下信息: >>& ...

  7. android 网络异步加载数据进度条

    ProgressDialog progressDialog = null; public static final int MESSAGETYPE = 0; private void execute( ...

  8. [Odoo12基础教程]之第一篇-创建Todo应用

    声明: 本教程基于 Ruter 老师的 [Odoo基础教程系列] ,Ruter老师教程的链接地址为:Odoo基础教程系列   . 至于为什么已经有了Ruter老师的教程,还要自己再搬移一份呢?是基于一 ...

  9. 图解 Spring：HTTP 请求的处理流程与机制【3】

    3. HTTP 请求在 Web 应用中的处理流程 在穿越了 Web 容器之后,HTTP 请求将被投送到 Web 应用,我们继续以 Tomcat 为例剖析后续流程.Web 容器与 Web 应用的衔接是通 ...

  10. Linux LVM 配置

    本文出自 “www.kisspuppet.com” 博客,请务必保留此出处http://dreamfire.blog.51cto.com/418026/1084729 许多Linux使用者安装操作系统 ...