一百二十五:CMS系统之首页轮播实现
2024-09-05 09:43:50
把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;
}
实现效果
最新文章
- centos 查看脚本
- ELK 集中日志分析 windows部署实战
- ArcGIS10.2 应用服务器搭建
- POJ1061 青蛙的约会
- 【代码】verilog之:按键消抖
- C#实战Microsoft Messaging Queue(MSMQ)消息队列(干货)
- js注入,黑客之路必备!
- 深入剖析 Spring 框架的 BeanFactory
- 【OpenStack】OpenStack系列5之Cinder详解
- 转载C#中堆(heap)和栈(stack)的区别
- iOS快速集成检查更新
- Android自定义“图片+文字”控件四种实现方法之 二--------个人最推荐的一种
- 软件版本中的Alpha,Beta,RC,Trial是什么意思?
- bzoj3275
- Linux下Fork与Exec使用
- pyhton10min系列之程序员的浪漫-足迹生成器,有视频教程
- NFS工作原理
- 月薪25K的90后程序员,他们都经历了什么?
- docker 安装 nginx
- .net core Area独立成单独的dll文件
热门文章
- win10家庭版设置移动热点出现“我们无法设置移动热点”
- MySQL No Install zip安装方法
- BZOJ4886 [Lydsy1705月赛]叠塔游戏[基环树]
- So easy RHCE
- e.target.value和this的区别
- Peter Shirley Ray Tracing in One Weekend(下篇)
- 4、docker镜像:花卷结构、commit镜像
- 上下文管理器和else块
- gzip/bzip/xz/tar
- [Luogu] 旅行