BBS论坛(十八)

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;
}

18.首页轮播图实现

转载于:https://www.cnblogs.com/edeny/p/10021057.html

18-----BBS论坛相关推荐

  1. java技术论坛的毕业设计_基于java的bbs论坛设计,软件毕业设计

    基于java的bbs论坛设计,软件毕业设计 XXX毕 业 设 计 任 务 书专业 软件技术 年级 xx 级 班级 二班姓名 xx 学号 20 xx0205xx3威 海 职 业 学 院 教 务 处 编 ...

  2. 分享java web 期末项目实验源码20套,BBS论坛,ERP管理系统,OA自动化等等

    分享java web 期末项目实验源码20套,BBS论坛,ERP管理系统,OA自动化等等 我自己也从里面学习到了很多东西! 1.BBS论坛系统(jsp+sql) 2.ERP管理系统(jsp+servl ...

  3. DXBBS V8.0 BBS论坛系统 简体中文正式版 [ 开发语言:ASP.NET 2.0 (C#) ]

    DXBBS V8.0 BBS论坛系统 简体中文正式版 [ 开发语言:ASP.NET 2.0 (C#) ] 程序版本:DXBBS V8.0 ACCESS/MSSQL版 开发语言:ASP.NET 2.0 ...

  4. 基于LAMP架构搭建BBS论坛或者博客

    搭建 一.项目简介 二.环境准备 1.需要准备的软件包 2.安装前环境准备 3.编译方式 (讲究顺序) 三.编译安装MySQL 四.编译安装Apache 1.安装依赖包apr 2.安装httpd软件 ...

  5. Python开发一个简单的BBS论坛

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

  6. 视频教程-python项目之BBS论坛开发-Python

    python项目之BBS论坛开发 TriAquae开源运维软件创始人,混迹IT运维领域多年,曾就职于松下.国政通.飞信.中金.NOKIA等公司,维护过少至几十台,多至数万台设备的IT系统,致力于提高企 ...

  7. android和web哪个职业发展更好一些 水木,毕业论文--BBS论坛(水木社区).doc

    毕业论文 题 目: BBS论坛(水木社区) 系 别: 计算机系 专 业: 计算机应用技术 学生姓名: 指导教师: 2013年 1 月 20 日 摘 要 进入二十一世纪,计算机技术迅速向着网络化.集成化 ...

  8. 项目实战:ASP.NET:C/S架构 大学BBS论坛项目(推荐★★★)

    项目实战:ASP.NET:C/S架构  大学BBS论坛项目(推荐★★★) 目录 项目实战:ASP.NET:C/S架构  大学BBS论坛项目(推荐★★★) 编辑环境: 项目: 项目简介: 其他: 1.项 ...

  9. 小确幸BBS论坛-6-优化不止步!

    话说: 各位读者朋友,中午好!春节越来越近,归家心切丫! 前面一系列博客详细介绍了过程,但是没有复盘,这结尾的2篇博客就完成这件事. 这篇博客目标:优化小确幸论坛. 小确幸BBS论坛-1-5实现了最核 ...

  10. LAMP 搭建BBS论坛实战

    LAMP 搭建BBS论坛实战 LAMP=Linux+Apache+Mysql+PHP 搭建环境:必须安装开发工具.开发库 一.LAMP所需要软件下载 Linux  http://www.centos. ...

最新文章

  1. os.makedirs和os.mkdir 生成文件夹
  2. 数据库设计:关于枚举类型的表结构设计法,个人拙见
  3. python unix时间戳格式化输出_python正常时间和unix时间戳相互转换的方法
  4. java复制图片实现方法
  5. java 套娃_【leetcode编程题目354】俄罗斯套娃
  6. 蓝桥杯 试题 入门训练 序列求和——6行代码AC
  7. mysql中ip用什么存,在MySQL中,价钱和IP用什么类型存储最好?
  8. 3(1)-字符缓冲流
  9. 【有内鬼,终止交易】风靡朋友圈的壁纸,实现代码竟如此简单 | 原力计划
  10. redhat6 本地 yum源配置方法
  11. 网页自动加拼音html,HTML5给汉字加拼音收起展开组件的实现代码
  12. 无法修改计算机时间权限,Win10无法修改时间怎么办?Win10修改系统时间没有权限的解决方法...
  13. android倒计时代码
  14. 绝对值abs为负数引发的神秘滑行
  15. 如何使用 Python 构建自己的 AI 个人助理
  16. 一些软件所有版本下载地址 (第一期)
  17. 2、Go自动化测试入门-testify
  18. 华为鸿蒙六月更新机型,华为鸿蒙OS带来好消息,这8款机型6月2日升级,有你的手机吗?...
  19. TOLT(you only look twice): Rapid multi-scale object detection in satellite imagery(中文翻译simrdwn)
  20. IDEA :Windows找不到文件“chrome”。请确定文件名是否正确,再试一次

热门文章

  1. MySQL数据库——视图
  2. Github的了解和使用
  3. java工程加包_向java工程添加jar包
  4. 手机日历上怎么记加班?日历便签可记录加班时间
  5. 不使用内置函数的情况下,如何使用Python实现求平均值、最大值和最小值?
  6. 谭浩强c语言不讲位运算呢,谭浩强c语言教程_第十二章-位运算谭浩强c语言教程_第十二章-位运算.doc...
  7. 一周以来的工作学习总结
  8. 百度推广计划改为计算机端,百度推广怎么样搭建一个优秀的推广计划
  9. Java基础匿名内部类
  10. java 日历备忘录_Java日历及备忘录