18.首页轮播图实现

(1)front/css/front_base.css

.main-container{
width: 990px;
margin: 0 auto;
overflow: hidden;
}
.lg-container{
width: 730px;
float:left;
}
.sm-container{
width: 250px;
float:right;
}

(2)front_base.html

<link rel="stylesheet" href="{{ url_for('static',filename='front/css/front_base.css') }}">

<div class="main-container">
{% block body %} {% endblock %}
</div>

(3)front_index.html

{% extends "front/front_base.html" %}

{% block title %}
仙剑论坛
{% endblock %} {% block head %}
<link rel="stylesheet" href="{{ static('front/css/front_index.css') }}">
{% endblock %} {% block body %}
<div class="lg-container">
<div id="carousel-example-generic" class="carousel slide index-banner" data-ride="carousel">
<!-- 指示器 -->
<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> <!-- 轮播图-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://static-image.xfz.cn/1512989310_955.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://static-image.xfz.cn/1528079965_535.jpeg" alt="...">
<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> <div class="sm-container"> </div> {% endblock %}

(4)front/css/front_index.css

.index-banner{
border-radius: 10px;
overflow: hidden;
height: 190px;
} .index-banner img{
height: 190px;
}

BBS论坛(十八)的更多相关文章

  1. BBS论坛(八)

    8.1.发送邮箱验证码功能 (1)cms/resetemail.html {% from 'common/_macros.html' import static %} {% block head %} ...

  2. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  3. python 学习笔记二十 django项目bbs论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  4. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  5. COS访谈第十八期:陈天奇

    COS访谈第十八期:陈天奇 [COS编辑部按] 受访者:陈天奇      采访者:何通   编辑:王小宁 简介:陈天奇,华盛顿大学计算机系博士生,研究方向为大规模机器学习.他曾获得KDD CUP 20 ...

  6. 开源BBS论坛软件推荐

    七款开源BBS论坛软件推荐(1) 本文介绍了七个开源的BBS论坛软件(在英文界一般叫做Forum).可能国内的朋友们比较熟悉Discuz!和PHPwind,但其实我们的选择还是很多的,而且下面介绍的这 ...

  7. Senparc.Weixin.MP SDK 微信公众平台开发教程(十八):Web代理功能

    在Senparc.Weixin.dll v4.5.7版本开始,我们提供了Web代理功能,以方便在受限制的局域网内的应用可以顺利调用接口. 有关的修改都在Senparc.Weixin/Utilities ...

  8. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  9. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  10. 最全的MySQL基础【燕十八传世】

    1.课前准备! 开启mysql服务:1).配置环境变量;2).net start mysql 将该sql文件导入到你的数据库中,以下所有操作都是基于该数据库表操作的!!! [此笔记是本人看着视频加上自 ...

随机推荐

  1. 编译phoneix源码,整合Hbase

    Hbase版本:1.2.0-cdh5.14.0 1):下载phoneix源码 链接:https://pan.baidu.com/s/1uryK_jLEekdXV04DRc3axg 密码:bkqg 2) ...

  2. Linux中伪分布的搭建

    一伪分布模式             特点:在单机上,模拟一个分布式的环境,具备Hadoop的所有功能                     HDFS:NameNode + DataNode + S ...

  3. vuex脑图

  4. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  5. fastdfsDemo

    package com.xpl.fastdfs; import org.csource.common.NameValuePair;import org.csource.fastdfs.*;import ...

  6. Vue+localstrong登录注册,并保持登录状态

    在router.js中添加meta区分 比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置为false { //登录 path: '/login', component ...

  7. 展开被 SpringBoot 玩的日子 《 四 》 Session 会话共享

    共享Session-spring-session-data-redis 分布式系统中,sessiong共享有很多的解决方案,其中托管到缓存中应该是最常用的方案之一. Spring Session官方说 ...

  8. CentOS7终端的分辨率和字体修改

    本文转贴自https://blog.csdn.net/u010566813/article/details/40502819 一.修改分辨率 修改/boot/grub2/grub.cfg 添加如上,具 ...

  9. lua_table 学习

    lua  table (表)   Table 的常用操作   local fruits = {“aaa”,”bbb”,”ccc”,”ddd”,”eee”,”fff”,”ggg”}   table.co ...

  10. Vue 入门. 如何在HTML代码里面快速使用Vue

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...