使用Django构建个人网站（六）——博客前端构造页面

每次写前端也免得时候，我都不知道怎么去写我的构造过程。

因为这里面的知识——太复杂太乱，我觉得甚至HTML根本就不能称之为“编程语言”，但没办法，自己的网站，没有美工，想让网站酷炫而又好看，我只能自己写。

可是真的不知道怎么去讲述出来。

效果图如下：

整体思路就是利用bootstrap框架，把网页8、4开，然后合理分布，

./templates/blog.html代码如下：

{% extends "base_cn.html" %}
{% block title %}
我的博客
{% endblock %}
{% block content %}

<!-- 沿用轮播图和个人介绍 -->
<div>
    <div class="container" style="cursor:default;">
        <div class="row">
            <!-- 左侧栏 -->
            <div class="col-md-8">
                <!-- 轮播图 -->
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="/static/images/AI.jpg" width="100%;">
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">
                            <img src="/static/images/hacker.jpg" width="100%;">
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">
                            <img src="/static/images/spider.jpg" width="100%;">
                            <div class="carousel-caption">
                            </div>
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <!-- 博客显示 -->
                <div style="margin-top: 15px;">
                    <div style="background: #F5F5F5;padding-left: 5px;">
                        <h1><a href=""><img
                                    src="https://gw.alipayobjects.com/zos/rmsportal/tJPyCvjhWOixZmGqXHSS.png">&nbsp;技术天地</a>
                            <a href="#"><small>第一篇博客</small></a>
                        </h1>
                        <div class="row">
                            <div class="col-md-3">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/tJPyCvjhWOixZmGqXHSS.png"
                                    width="100%">
                            </div>
                            <div class="col-md-9">
                                <p>这是博客的正文内容，展示他的正文。这是博客的正文内容，展示他的正文。这是博客的正文内容，展示他的正文。这是博客的正文内容，展示他的正文。</p>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-2 col-md-offset-2"><span class="glyphicon glyphicon-user"></span>

                                </div>
                                <div class="col-md-2"><span class="glyphicon glyphicon-eye-open"></span>
                                    阅读
                                </div>
                                <div class="col-md-2"><span class="glyphicon glyphicon-heart-empty"></span>
                                    点赞</div>
                                <div class="col-md-2"><span class="glyphicon glyphicon-pencil"></span>
                                    评论</div>
                                <div class="col-md-2"><span class="glyphicon glyphicon-time"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧栏 -->
            <div class="col-md-4">
                <!-- 个人简介 -->
                <div class="row">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">个人简介</h1>
                    <div class="col-md-4"">
                    <img class=" img-thumbnail" src="/static/images/myself.jpg" width="100%;">
                    </div>
                    <div class="col-md-8">
                        <p><strong>姓名:</strong>王雄</p>
                        <p><strong>性别:</strong>男</p>
                        <p><strong>我的技能:</strong>Python、HTML、css、JavaScript、Django、Flask、MySQL、MongoDB、spider、数据科学分析
                        </p>
                        <p><strong>Email:</strong>Email:276721023@qq.com</p>
                    </div>
                </div>
                <!-- 这些是要设置成下拉菜单的，四个联系方式 -->
                <div class="row" style="margin-top: 15px;">
                    <div class="col-md-3 text-center dropup pull-left">
                        <button class="btn btn-default" data-toggle="dropdown"
                            style="margin: 0;padding:0;border: none;">
                            <img src="/static/images/qq.svg">
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <img src="/static/images/qqcode.png">
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3 text-center dropup pull-left">
                        <button class="btn btn-default" data-toggle="dropdown"
                            style="margin: 0;padding:0;border: none;">
                            <img src="/static/images/wechat.svg">
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <img src="/static/images/wechatcode.png">
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3 text-center dropup pull-left">
                        <button class="btn btn-default" data-toggle="dropdown"
                            style="margin: 0;padding:0;border: none;">
                            <img src="/static/images/know.svg">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <img src="/static/images/knowcode.png">
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3 text-center dropup pull-left">
                        <button class="btn btn-default" data-toggle="dropdown"
                            style="margin: 0;padding:0;border: none;">
                            <img src="/static/images/steam.svg">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <img src="/static/images/qq.png">
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 从这往下每一个row都是侧边栏 -->
                <div class=" row" style="background: white;">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">文章分类</h1>
                    <dl class="dl-horizontal">
                        <dt>技术空间</dt>
                        <dd>分享、研究有关IT技术的一切</dd>
                        <dt>生活琐事</dt>
                        <dd></dd>
                        <dt>游戏频道</dt>
                        <dd></dd>
                        <dt>情感生活</dt>
                        <dd></dd>
                    </dl>
                </div>
                <div class=" row" style="background: white;">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">最受欢迎</h1>
                </div>
                <div class=" row" style="background: white;">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">文章归档</h1>
                </div>
                <div class=" row" style="background: white;">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">热门文章</h1>
                </div>
                <div class=" row" style="background: white;">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">最近评论</h1>
                </div>
                <div class=" row" style="background: white;">
                    <h1 class="text-center" style="background: #F5F5F5;padding: 5px 0;">标签云</h1>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 分为两部分，左边8md，右边4md -->
</div>
{% endblock %}

后面的博客，将在这个静态页面的基础上，慢慢实现功能，让它丰满起来！