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 首页创建的更多相关文章

[TimLinux] myblog 创建第一个app
1. 项目结构项目地址:https://github.com/timscm/myblog.git 2. 启动项目通过pycharm启动项目,进入调试模式: "D:\Program Fil ...
[TimLinux] myblog 数据表格显示
1. 设计 2. 数据创建数据库用户: CREATE USER IF NOT EXISTS 'user1'@'MyBlogPwd123'; GRANT ALL ON d1.* TO 'user1'@ ...
[TimLinux] myblog 页面Axure设计
1. 导航 2. 首页主体 3. 侧边栏 4. 页尾 5. 使用工具 Axure RP 8.0.0.3312 Pro版本.
[saiku] 访问saiku首页的时候前后台处理流程
这篇文章讲述:项目启动后,首次访问SAIKU的登录页,前后台分别做了什么处理 (1) 访问的到底是什么页面? 浏览器输入:localhost:8080 啪一回车根据web访问的尿性,访问的是 ind ...
在 Windows Azure 网站上使用 Django、Python 和 MySQL：创建博客应用程序
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Sunitha Muthukrishna 撰写. 根据您编写的应用程序,Windows Azure 网站上的基本Python 堆 ...
jenkins创建构建任务
构建项目类型点击 Jenkins 首页 “创建一个新任务” 的链接, 输入任务名称 Jenkins 提供了六种类型的任务. 构建一个自由风格的软件项目这是Jenkins的主要功能.Jenkins ...
再次用CodeIgniter实现简易blog
天变冷了,人也变得懒了不少,由于工作的需要,最近一直在学习CodeIgniter(CI)框架的使用,没有系统的从PHP基本语法学起,在网上靠百度谷歌,东拼西凑的实现了一些简单的功能.所以,老PHPer ...
SSH实战 · 唯唯乐购项目（上）
前台需求分析一:用户模块注册前台JS校验使用AJAX完成对用户名(邮箱)的异步校验后台Struts2校验验证码发送激活邮件将用户信息存入到数据库激活点击激活邮件中的链接完成激活根 ...
OC中的多继承
可以间接实现,方法有: 1.消息转发 2.协议 3.组合模式 4.代理 5.分类直接上code,分别说明集中方法的实现一.消息转发消息转发可以参考我的另外一篇博客:http://www.cnbl ...

随机推荐

php imagick 文字居中的方法
php imagick 文字居中的方法<pre> public function getwenzinfo($nickName) { $nickNamelen = mb_strlen($ni ...
微信小程序引入全局或公共样式
在开发的过程中,总会遇到很多可复用性的样式,为了代码更加的简洁和减少微不住道的文件体积,我抽取了一部分的公共样式,并全局引入,不知是否妥当,如有更好的想法,欢迎一起探讨在app.wxss中引入然后 ...
矢量图形(Vector Picture, SVG, PDF)转TiKZ代码
在使用LaTeX的过程中,我们需要往往需要使用一些图片,譬如,在样式文件中,但是如果在样式文件中使用外部的图片,总感觉不是那么地舒服「请原谅强迫症」.因此,想办法将图形内嵌入LaTeX文件. 首先,我 ...
B2B电商正在向一个新的方向转变
在互联网+.中国制造2025等国家战略规划的不断催发下,淡出舆论风口多时的B2B电商,开始重新回归公众视野,B2B行业也就此得到一剂强心剂.不过值得关注的是,B2B平台商业模式已经开始发生变革. 互联 ...
java编程思想第四版第六章总结
1. 代码重构为什么f要代码重构第一次代码不一定是完美的, 总会发现更优雅的写法. 代码重构需要考虑的问题类库的修改不会破坏客户端程序员的代码. 源程序方便扩展和优化 2. 包创建一个独一无二 ...
hdu 2516 取石子游戏 (Fibonacci博弈)
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
selenium滑块验证
使用selenium模拟登录解决滑块验证问题本次主要是使用selenium模拟登录网页端的TX新闻,本来最开始是模拟请求的,但是某一天突然发现,部分账号需要经过滑块验证才能正常登录,如果还是模拟 ...
Video的自我学习
直播原理视频协议 HLS协议 [主要是直播方面(好用,但延时)] HTTP Live Streaming(缩写是HLS)是一个由苹果公司提出的基于HTTP的流媒体网络传输协议. 是苹果公司Quic ...
python_08
一.作业 ''' 主页: 图标地址.下载次数.大小.详情页地址详情页: 游戏名.好评率.评论数.小编点评.下载地址.简介.网友评论.1-5张截图链接地址. https://www.wandoujia ...
JSON——IT技术人员都必须要了解的一种数据交换格式
JSON作为目前Web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式.尤其是在Ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选! 今天大家就和猪哥一起 ...

[TimLinux] myblog 首页创建

1. 设计

2. 结构

3. 实现

4. 效果

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

随机推荐

热门专题