Python Web开发：制作门户网站页脚部分

页脚内容

页脚主要包括站点地图和版权两部分。

• 站点地图可以用来通知搜索引擎页面的网址和页面的重要性，帮助站点得到比较好的收录。

• 版权部分主要用来注明制作的站点的备案信息

实训步骤

页脚总体设计

html文件：

    <!-- 页脚 -->
    <div class="container web-footer">
        <!-- 站点地图 -->
        <div class="row" id="map-footer">
              站点地图
        </div>
        <!-- 版权 -->
        <div class="row" id="patent-footer">
            <p> © 2019 Python Web企业门户网站开发示例 版权所有 | 苏ICP备19006378号 </p>
        </div>
    </div>

编辑style.css文件：

/*-------------页脚------------*/
.web-footer{
	width:100%;        /* 占满整个浏览器宽度 */
	margin-top:30px;   /* 设置与上边缘距离 */
}

制作站点地图

整体采用Bootsrap栅格2-2-2-2-4布局，共分为5列

html代码：

        <!-- 站点地图 -->
        <div class="row" id="map-footer">
            <div class="col-md-2">
                <dl>
                    <dt>公司简介</dt>
                    <dd><a href="{% url 'aboutApp:survey' %}">企业概况</a></dd>
                    <dd><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>产品中心</dt>
                    <dd><a href="{% url 'productsApp:robot' %}">家用机器人</a></dd>
                    <dd><a href="{% url 'productsApp:monitoring' %}">智能监控</a></dd>
                    <dd><a href="{% url 'productsApp:face' %}">人脸识别解决方案</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="{% url 'serviceApp:download' %}">资料下载</a></dd>
                    <dd><a href="{% url 'serviceApp:platform' %}">人脸识别开放平台</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>人才招聘</dt>
                    <dd><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></dd>
                    <dd><a href="{% url 'contactApp:recruit' %}">加入恒达</a></dd>
                </dl>
            </div>
            <div class="col-md-4" id="wx">
                <p>扫描二维码，关注我们</p>
                <img class="qrimg" src="{% static 'img/qr.png' %}" alt="wx">
                <p>客服热线：<b style="font-size:20px">400 111 2222</b></p>
            </div>
        </div>

style.css:

#map-footer{
	background-color:#3A3A3A;        /* 对整个站点地图设置背景色灰色 */
}
#map-footer dl{
	text-align:center;               /* 站点链接文字对齐 */
	margin-top:40px;                 /* 设置表格与上边缘边距 */
}
#map-footer dt{
	padding:3px;                     /* 表格标题内边距为3像素 */
	color:#fff;                      /* 表格标题颜色为白色 */
}
#map-footer dd{
	padding:3px;                     /* 表格内容内边距为3像素 */	
}

/* 二维码广告段落 */
#map-footer p{
	margin-top:20px;
	margin-bottom:10px;
	color:#fff;
	font-size:16px;
}
#map-footer a{
	color:#A6A6A6;                   /* 站点链接文字颜色设置 */
	font-size:13px;                  /* 站点链接文字大小 设置 */
}
#map-footer a:hover{
	color:#fff;
	text-decoration:none;             /* 去除站点链接鼠标移过时出现的下划线 */
}
#wx{
	text-align:center;                /* 二维码居中对齐 */
}
.qrimg{
	max-width: 170px;                 /* 二维码最大宽度为170像素 */
}

为版权部分设置CSS样式

style.css:

/*-------------尾部版权------------*/
#patent-footer{
	text-align:center;
	background-color:#3A3A3A;
}
#patent-footer p{
	margin-top:10px;
	padding-right:80px;
	color:#8d8d8d;
	font-size:11px;
}

效果图