做了一个前端的页面 轮播图 和 布局 可参考
说实话做得真的是很难看，但是买家居然很乐意结账，于是分享一下叭，哈哈哈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
/* 导航栏样式 */
.navbar {
overflow: hidden;
width: 80%;
height: 150px;
background-image: url(./img/logoback.png);
margin-left: 10%;
margin-right: 10%;
}
/* 轮播容器样式 */
.slideshow-container {
width: 80%;
height: 400px;
margin-left: 10%;
margin-right: 10%;
position: relative;
overflow: scroll;
}
/* 轮播图片样式 */
.slide {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%;
height: 100%;
object-fit: cover;
}
/* 控制箭头样式 */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: auto;
padding: 16px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-weight: bold;
font-size: 18px;
z-index: 1;
}
/* 下一张箭头的位置 */
.next {
right: 0;
}
.navbar2 {
width: 80%;
margin-left: 10%;
margin-right: 10%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #55aaff; /* 导航栏背景色 */
color: #fff; /* 导航栏字体颜色 */
height: 50px; /* 导航栏高度 */
padding: 0 10px; /* 导航栏左右内边距 */
}
.nav-item {
flex: 1;
text-align: center;
cursor: pointer; /* 鼠标样式 */
}
.nav-item:hover {
background-color: #aa0000; /* 鼠标悬停时的背景色 */
}
.citation {
margin-bottom: 10px;
}
.citation p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class="navbar">
<h2 style="color: #55aaff;margin-left: 20px;margin-top: 30px;">重庆市大学生集体主义教育</h1>
</div>
<!-- 轮播容器 -->
<div class="slideshow-container">
<!-- 轮播图片 -->
<div class="slide fade">
<img src="./img/001.jpg" alt="Slide 1">
</div>
<div class="slide fade">
<img src="./img/002.jpg" alt="Slide 2">
</div>
<div class="slide fade">
<img src="./img/003.jpg" alt="Slide 3">
</div>
<div class="slide fade">
<img src="./img/004.jpg" alt="Slide 4">
</div>
<!-- 控制箭头 -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
// JavaScript 代码用于轮播图片
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // 切换时间间隔为 2 秒
}
// function plusSlides(n) {
// showSlides(slideIndex += n);
// }
// function currentSlide(n) {
// showSlides(slideIndex = n);
// }
</script>
<div class="navbar2">
<div class="nav-item" onclick="navigate(0)">道德原则</div>
<div class="nav-item" onclick="navigate(1)">集体主义精神</div>
<div class="nav-item" onclick="navigate(2)">教育内容参考</div>
<div class="nav-item" onclick="navigate(3)">极端个人主义案例</div>
<div class="nav-item" onclick="navigate(4)">重庆市高校教育案例</div>
<div class="nav-item" onclick="navigate(5)">教育实践活动基地</div>
</div>
<script>
// JavaScript代码
function navigate(index) {
// 根据索引执行相应的导航操作
console.log("导航到标题" + (index + 1));
}
</script>
<div class="detail" style="display: flex;flex-direction: row;width: 80%;margin-left: 10%;margin-right: 10%;display: flex;flex-direction: row;margin-top: 30px;">
<!-- 左边 -->
<div class="left" style="display: flex;flex-direction: column;width: 33%;">
<div class="xueshukanban" >
<div style="width: 100px;background-color:#55aaff;height: 30px;text-align: center;line-height: 30px;color: white;font-size: 13px;">
<p>团队前言</p>
</div>
<div style="width: 100%;background-color:#55aaff;height: 1px;"></div>
</div>
<div id="citation-list" style="margin-top:20px;color: #3a3a3a80;">
<div class="citation">
<p>为进一步研究集体主义教育现状及方法优化，集体主义：是社会主义道德的重要原则。要求个人利益与集体利益冲突时，坚持集体利益优先，集体利益保护个人正当利益。是处理国家利益、社会集体利益和个人利益的方法论。恳请访问本网站同学及老师进行集体主义调查问卷填写。相关资料：https://www.wjx.cn/vm/YDfVBKO.aspx</p>
</div>
<div class="citation">
<p>集体主义教育内容建议收集</p>
</div>
<div class="citation">
<p>集体主义教育氛围建议收集</p>
</div>
<div class="citation">
<p>集体主义教育方法建议收集</p>
</div>
<div class="citation">
<p>集体主义教育途径建议收集</p>
</div>
<div class="citation">
<p>集体主义教育现存问题收集</p>
</div>
<!-- 在此添加其他文献引用 -->
</div>
</div>
<!-- 中间 -->
<div class="center" style="display: flex;flex-direction: column;width: 33%;margin-left: 5px;">
<div class="xueshukanban" >
<div style="width: 100px;background-color:#55aaff;height: 30px;text-align: center;line-height: 30px;color: white;font-size: 13px;">
<p>学术看板</p>
</div>
<div style="width: 100%;background-color:#55aaff;height: 1px;"></div>
</div>
<div id="citation-list" style="margin-top:20px;color: #3a3a3a80;">
<div class="citation">
<p>陆云,曲蓉.人类命运共同体的集体主义价值基础[J].牡丹江大学学报,2023,32(03):9-16.DOI:10.15907/j.cnki.23-1450.2023.03.010.</p>
</div>
<div class="citation">
<p>綦玥,任建国.大学生集体主义精神培育的价值意蕴、现实挑战与实践进路[J].高校学生工作研究,2023,(01):39-46.</p>
</div>
<div class="citation">
<p>杨晶.大学生集体主义教育研究[J].法制与社会,2013,(07):224-225.DOI:10.19387/j.cnki.1009-0592.2013.07.112</p>
</div>
<div class="citation">
<p>张自军.对新时期大学生集体主义精神培育的思考[J].黑龙江教育(理论与实践),2016,(10):33-34</p>
</div>
<!-- 在此添加其他文献引用 -->
</div>
</div>
<!-- 右边 -->
<div class="right" style="width: 33%;display: flex;flex-direction: column;margin-left: 5px;">
<div class="xueshukanban" >
<div style="width: 100px;background-color:#55aaff;height: 30px;text-align: center;line-height: 30px;color: white;font-size: 13px;">
<p>目前已有实践</p>
</div>
<div style="width: 100%;background-color:#55aaff;height: 1px;"></div>
</div>
<div id="kind-list" style="margin-top:20px;color: #3a3a3a80;">
<div class="citation">
<p>西南大学集体主义教学案例</p>
</div>
<div class="citation">
<p>重庆大学集体主义教学案例</p>
</div>
<div class="citation">
<p>西南政法大学集体主义教学案例</p>
</div>
<div class="citation">
<p>重庆医科大学集体主义教学案例</p>
</div>
<div class="citation">
<p>四川外国语大学集体主义教学案例</p>
</div>
</div>
</div>
</div>
</body>
</html>版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论