一百二十五:CMS系统之首页轮播实现

把base模板分为左右两块版心

.main-container{  /*整体版心*/    width: 990px;    margin: 0 auto;    overflow: hidden;}.lg-container{  /*左侧版心*/    width: 730px;    float: left;}.sm-container{  /*右侧版心*/    width: 250px;    float: right;}

首页html

{% extends ‘front/front_base.html‘ %}{% from "common/_macros.html" import static %}

{% 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>            <li data-target="#carousel-example-generic" data-slide-to="3"></li>          </ol>          <!-- 轮播图 这里的图片是在百度复制的轮播图链接-->          <div class="carousel-inner" role="listbox">            <div class="item active">                <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575710416&di=36940a906b983ddd8e4f2a0da8b50fce&imgtype=jpg&er=1&src=http%3A%2F%2Fokgroup.cn%2Fuploads%2Fallimg%2F170930%2F01.jpg" alt="..."></a>            </div>            <div class="item">                <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575115698280&di=af703e3d0abd3a5eccdbb95ec995b4d7&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F07%2F29%2F69%2F5666757345e09.jpg" alt="..."></a>            </div>            <div class="item">                <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575115698279&di=cd29463aa691addbc2ed686da8ac54b0&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010d4f582ec1bca84a0d304f14e1b9.jpg" alt="..."></a>            </div>            <div class="item">                <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575115698279&di=7d1537fae158846971c7c61fc3ab4c50&imgtype=0&src=http%3A%2F%2Fphoto.16pic.com%2F00%2F53%2F35%2F16pic_5335369_b.jpg" alt="..."></a>            </div>          </div>          <!-- 左右切换的控制按钮 -->          <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 %}

轮播图控制

.index-banner{  /* 圆角,超出的隐藏 */    border-radius: 10px;    overflow: hidden;    height: 200px; /*轮播图盒子高度*/}.index-banner img{ /* 轮播图盒子下的图片高度 */    height: 200px;}

实现效果

原文地址:https://www.cnblogs.com/zhongyehai/p/11963386.html

时间: 2024-11-11 13:35:06

一百二十五:CMS系统之首页轮播实现的相关文章

一百二十七:CMS系统之添加轮播图前后台逻辑

后台逻辑 模型 from exts import dbfrom datetime import datetime class BannerModel(db.Model): __tablename__ = 'banner' id = db.Column(db.Integer, primary_key=True, autoincrement=True) name = db.Column(db.String(255), nullable=False, comment='banner名') image_

测开之路一百二十五:flask之urlencode参数传递和解析

当get请求传参时,用?分隔参数和域名,用&分隔参数,如果参数里面本身就有&符号就会识别不出来,还是会当成分隔符,所以这些数据在传输的时候,就需要转义,现在普遍是转成urlencode编码:%20%xx%23 在jinja2模板里面,可以使用 data|urlencode 发送urlencode编码,而python里面又有urllib.parse.unquote()可以解析urlencode编码 视图函数 html:访问"/"返回html,在html上面点击超链接时请求

一百三十一:CMS系统之轮播图上传图片功能

将七牛js放到common下 把获取uptoken的接口放到common视图中 把初始化七牛放到banners.js中 //初始化七牛$(function () { qiniujs.setUp({ 'domain': 'http://q1tp5a19s.bkt.clouddn.com/', 'browse_btn': 'upload-btn', //上传图片按钮的id 'uptoken_url': '/common/uptoken/', 'success': function (up, file

关于心理的二十五种倾向(查理&amp;#183;芒格)-2

5)避免不一致倾向避免不一致倾向实际上就是人天生就害怕改变.相同是由于人类大脑的生理机制决定的.由于这样的倾向能够带来节省运算空间和能量的优点.这样的抗改变模式的形成,可能的原因例如以下:A) 迅速作出决定对生存来说至关重要,而这样的抗改变模式有助于更快的作出决定;     这里有第四个倾向的因素,对于生存至关重要的反应(遇到生存威胁时),反应一定要快,必须形成固化的模式.这也是我们对于紧急事件的处理常常採用不断反复模拟训练的原因.B) 能够通过群体协作来获得生存优势,假设每一个人总是不停地改变

Java进阶(二十五)Java连接mysql数据库(底层实现)

Java进阶(二十五)Java连接mysql数据库(底层实现) 前言 很长时间没有系统的使用java做项目了.现在需要使用java完成一个实验,其中涉及到java连接数据库.让自己来写,记忆中已无从搜索.特将之前使用的方法做一简单的总结.也能够在底层理解一下连接数据库的具体步骤. 实现 首先需要导入相关的jar包,我使用的为:mysql-connector-java-5.1.7-bin.jar. 下面来看一下我所使用的数据库连接方法类: MysqlUtil.java package cn.edu

CCNA实验二十五 实战多种ACL访问控制 &nbsp;

CCNA实验二十五 实战多种ACL访问控制 环境:Windows XP .Pracket Tracert 5.3 . GNS3.0.7.2 目的:了解ACL作用并熟练在不同环境中配置ACL 说明: ACL是路由器和交换机接口的指令列表,用来控制端口进出的数据包并且可以保护网络,ACL适用于所有的被路由协议,如IP.IPX.AppleTalk等.ACL种类:标准ACL.扩展ACL.命名式ACL.基于时间ACL.自反ACL.动态ACL. 标准的ACL使用 1 ~ 99 以及1300~1999之间的数

第十五单元 &nbsp; 系统虚拟机管理

第十五单元 系统虚拟机管理 一 安装 #!/bin/bash:命令运行环境的指定 virt-install \:安装虚拟机 --name $1 \:虚拟机名称指定,$1表示脚本后的第一串字符 --ram 1000 \:内存 --file /var/lib/libvirt/images/$1.img \:硬盘文件 --file-size 8 \ :硬盘文件大小 --cdrom /var/ftp/pub/iso/rhel-server-7.1-x86_64-dvd.iso &  :安装源指定,&

攻城狮在路上(叁)Linux(二十五)--- linux内存交换空间(swap)的构建

swap的功能是应付物理内存不足的状况,用硬盘来暂时放置内存中的信息. 对于一般主机,物理内存都差不多够用,所以也就不会用到swap,但是对于服务器而言,当遇到大量网络请求时或许就会用到. 当swap被使用的时候,主机的硬盘灯就会闪烁不停. 本篇介绍两种方式:1.设置一个swap分区   2.创建一个虚拟内存的文件. 一.使用物理分区构建swap: 1.首先是分区: A.fdisk /dev/sda; <== 根据后续提示创建一个分区. B.修改分区的ID,因为fdisk默认将分区的ID作为文件

每日算法之二十五:Divide Two Integers

Divide two integers without using multiplication, division and mod operator. 不使用乘法.除法和求模运算求两个数相除. class Solution { public: long long internalDivide(unsigned long long dividend,unsigned long long divisor) { if(dividend<divisor) return 0; int result =