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. 详细讲解 Redis 的两种安装部署方式

    Redis 是一款比较常用的 NoSQL 数据库,我们通常使用 Redis 来做缓存,这是一篇关于 Redis 安装的文章,所以不会涉及到 Redis 的高级特性和使用场景,Redis 能够兼容绝大部 ...

  2. 为什么Python类语法应该不同？

    做过python的人你会发现想要的东西跟它原有的是不同的.Python对我来说是真的是这样.如果可以的话,对于Python中很多的我想要改的东西,我有很多的想法.现在我向您讲述其中一个:类定义的语法. ...

  3. 前端与算法 leetcode 7. 整数反转

    目录 # 前端与算法 leetcode 7. 整数反转 题目描述 概要 提示 解析 解法 算法 传入测试用例的运行结果 执行结果 GitHub仓库 # 前端与算法 leetcode 7. 整数反转 题 ...

  4. 百度全景地图使用时提示flash版本过低 如何处理？

    从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions ,才能看到 “Add”按钮.解决方 ...

  5. 领扣（LeetCode）用队列实现栈 个人题解

    使用队列实现栈的下列操作: push(x) -- 元素 x 入栈 pop() -- 移除栈顶元素 top() -- 获取栈顶元素 empty() -- 返回栈是否为空 注意: 你只能使用队列的基本操作 ...

  6. github下载历史版本--xdd

    第一步 打开一个仓库,可以看到此时在主分支下,点击1位置查看历史版本 第二步 现在可以查看到所有的版本(提交)信息,单击2位置进入该版本 第三步 单击3位置浏览并打开该版本 第四步 进入该版本之后,可 ...

  7. Java8 Stream终端操作使用详解

    话不多说,自己挖的坑自己要填完,今天就给大家讲完Java8中Stream的终端操作使用详解.Stream流的终端操作主要有以下几种,我们来一一讲解. forEach() forEachOrdered( ...

  8. cas的客户端应用是负载均衡，单点退出怎么办？

    之前的项目一直是单节点,这次在生产系统中使用了负载均衡,一个应用部署了两个节点,负载均衡策略未知.这样在使用时发现了这么一个问题:在单点退出后,应用有时候可以退出,但有时还在登陆状态,这就很郁闷了. ...

  9. 深入浅出Spring（四）

    我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们来做一个Spring的实例. 为了更好的讲解Spring的相关内容,这次的博文会针对一个[添加用户]的实例,进行逐步的 ...

  10. 程序员的算法课（18）-常用的图算法：广度优先（BFS）

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...