采用bootstrap前端框架： Anchor - a free Bootstrap UI Kit综合使用bootstrap框架做一个Aotm Blog个人博客_基于bootstrap的博客-CSDN博客 做出模板base.html {% load static %} Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet /* 左右菜单内边距40 */ .element { padding: 40px; } {% block css %}{% endblock %}
关于博主
©2024 caicaizi 版权所有
{% block content %}{% endblock %} {% comment %}
{% endcomment %}
// 图标js <script src="{% static 'assets/js/vendor/iconfont.js' %}"> <!-- Animation --> <script src="{% static 'assets/js/vendor/aos.js' %}" type="text/javascript"> *[data-aos] { display: block !important; opacity: 1 !important; visibility: visible !important; } AOS.init({ duration: 700 }); AOS.init({ disable: function () { var maxWidth = 1200; return window.innerWidth < maxWidth; } }); $('.carousel').on('slide.bs.carousel', function (event) { var height = $(event.relatedTarget).height(); var $innerCarousel = $(event.target).find('.carousel-inner'); $innerCarousel.animate({ height: height }); }); $(function () { $('[data-toggle="popover"]').popover() }) $('.popover-dismiss').popover({ trigger: 'focus' }) $(function () { $('[data-toggle="tooltip"]').tooltip() }) 采取模板继承做出index.html {% extends 'base.html' %} {% load static %} {% block css %} /* 设置轮播图的宽度和高度（这里以固定值为例，你可以根据需要调整） */ .carousel { width: 900px; /* 或者使用百分比、vw等 */ height: 500px; /* 或者使用百分比、vh等，或者根据图片比例设置 */ margin: 0 auto; /* 居中显示 */ } /* 确保轮播图的内部容器和每个项目都继承相同的尺寸 */ .carousel-inner, .carousel-item { width: 100%; height: 100%; } /* 使图片适应容器，同时保持宽高比并裁剪以适应 */ .carousel-item img { width: 100%; height: 100%; object-fit: cover; /* 这将确保图片覆盖整个容器，同时保持其宽高比 */ } {% endblock %} {% block content %}
{% endblock %} 其中轮播图图片大小不一导致，引用的bootstrap的轮播边框大小变化，写了CSS样式代码，固定住了边框。
