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. Tomcat+nginx+Keepalived部署实现集群

    Tomcat+nginx+Keepalived部署实现集群 环境说明: 系统:Centos-7 主机:Centos-7 x3 IP地址: 服务器1(192.168.10.102/24) 服务器2(19 ...

  2. element 动态合并表格

    前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...

  3. [LC]35题 Search Insert Position （搜索插入位置）

    ①英文题目 Given a sorted array and a target value, return the index if the target is found. If not, retu ...

  4. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  5. python高阶函数的使用

    目录 python高阶函数的使用 1.map 2.reduce 3.filter 4.sorted 5.小结 python高阶函数的使用 1.map Python内建了map()函数,map()函数接 ...

  6. Mysql 添加字段 修改字段 删除字段

    1.添加字段(alter.add) mysql> alter table users add name varchar(30) not null after id; 2.修改字段(alter.m ...

  7. AntDeploy一键发布netcore3.0Windows服务到远程服务器

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  8. html——标签基础

    img标签:使用  src="xxx" 来链接图片 当图片显示不出来的时候  显示alt 中定义的内容 当图片显示了出来  鼠标移动到图片上的时候 显示的是  title 中定义的 ...

  9. Java基础面试题及答案（五）

    Java Web 64. jsp 和 servlet 有什么区别? jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器 ...

  10. 搭建nextcloud私有云存储网盘

    简介: 搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是“下一代”存储. 真正试用过后就由衷地赞同这个Nextclou ...