HTML练习-校园官网首页面
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校园官网</title>
<style>
/* 初始化样式 */
body, h1, h2, h3, p, ul, li, a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Arial, sans-serif;
}
/* 头部导航栏 */
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav ul {
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav a {
color: #fff;
font-size: 16px;
}
/* 轮播图区域 */
#slider {
position: relative;
overflow: hidden;
max-width: 1200px;
margin: 20px auto;
}
#slider img {
width: 100%;
height: auto;
display: none;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slider img.active {
display: block;
opacity: 1;
}
/* 轮播图指示器 */
#slider-indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
#slider-indicators span {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 5px;
cursor: pointer;
}
#slider-indicators span.active {
background-color: #fff;
}
/* 主要内容区域 */
main {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 新闻动态 */
#news {
margin-bottom: 30px;
}
#news h2 {
font-size: 24px;
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-bottom: 20px;
}
#news ul li {
display: flex;
align-items: center;
margin-bottom: 15px;
}
#news ul li img {
width: 100px;
height: 80px;
margin-right: 15px;
}
#news ul li div {
flex: 1;
}
#news ul li h3 {
font-size: 18px;
margin-bottom: 5px;
}
#news ul li p {
color: #666;
font-size: 14px;
}
/* 校园风采 */
#campus {
margin-bottom: 30px;
}
#campus h2 {
font-size: 24px;
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-bottom: 20px;
}
#campus-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
#campus-gallery img {
width: 100%;
height: auto;
border-radius: 5px;
}
/* 通知公告 */
#notice {
margin-bottom: 30px;
}
#notice h2 {
font-size: 24px;
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-bottom: 20px;
}
#notice ul li {
position: relative;
padding-left: 15px;
margin-bottom: 10px;
}
#notice ul li:before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
background-color: #333;
border-radius: 50%;
}
/* 快速链接 */
#quick-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#quick-links a {
display: block;
width: calc(20% - 10px);
background-color: #f0f0f0;
border-radius: 5px;
text-align: center;
padding: 20px 0;
margin-bottom: 20px;
color: #333;
font-size: 16px;
transition: background-color 0.3s ease-in-out;
}
#quick-links a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<!-- 头部导航栏 -->
<header>
<nav>
<div>
<a href="#">首页</a>
<a href="#">学校概况</a>
<a href="#">教学科研</a>
<a href="#">学生天地</a>
<a href="#">招生就业</a>
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</nav>
</header>
<!-- 轮播图 -->
<div id="slider">
<img src="https://example.com/slider1.jpg" alt="轮播图1" class="active">
<img src="https://example.com/slider2.jpg" alt="轮播图2">
<img src="https://example.com/slider3.jpg" alt="轮播图3">
<div id="slider-indicators">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<!-- 主要内容区域 -->
<main>
<!-- 新闻动态 -->
<section id="news">
<h2>新闻动态</h2>
<ul>
<li>
<img src="https://example.com/news1.jpg" alt="新闻图片1">
<div>
<h3>学校举办大型学术研讨会</h3>
<p>近日，学校成功举办了一场大型学术研讨会，吸引了众多专家学者参与。</p>
</div>
</li>
<li>
<img src="https://example.com/news2.jpg" alt="新闻图片2">
<div>
<h3>学生荣获全国竞赛一等奖</h3>
<p>我校学生在全国竞赛中表现出色，荣获一等奖，为学校争光。</p>
</div>
</li>
<li>
<img src="https://example.com/news3.jpg" alt="新闻图片3">
<div>
<h3>校园文化节盛大开幕</h3>
<p>一年一度的校园文化节正式拉开帷幕，丰富多彩的活动等待师生参与。</p>
</div>
</li>
</ul>
</section>
<!-- 校园风采 -->
<section id="campus">
<h2>校园风采</h2>
<div id="campus-gallery">
<img src="https://example.com/campus1.jpg" alt="校园风景1">
<img src="https://example.com/campus2.jpg" alt="校园风景2">
<img src="https://example.com/campus3.jpg" alt="校园风景3">
<img src="https://example.com/campus4.jpg" alt="校园风景4">
<img src="https://example.com/campus5.jpg" alt="校园风景5">
<img src="https://example.com/campus6.jpg" alt="校园风景6">
</div>
</section>
<!-- 通知公告 -->
<section id="notice">
<h2>通知公告</h2>
<ul>
<li>关于期末考试安排的通知</li>
<li>校园网络维护公告</li>
<li>图书馆开放时间调整通知</li>
</ul>
</section>
<!-- 快速链接 -->
<section id="quick-links">
<a href="#">教务系统</a>
<a href="#">图书馆资源</a>
<a href="#">校园地图</a>
<a href="#">校历查询</a>
<a href="#">在线课程</a>
</section>
</main>
<script>
// 轮播图自动切换脚本
const sliderImages = document.querySelectorAll('#slider img');
const sliderIndicators = document.querySelectorAll('#slider-indicators span');
let currentIndex = 0;
setInterval(() => {
sliderImages.classList.remove('active');
sliderIndicators.classList.remove('active');
currentIndex = (currentIndex + 1) % sliderImages.length;
sliderImages.classList.add('active');
sliderIndicators.classList.add('active');
}, 3000);
// 轮播图指示器点击事件
sliderIndicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
sliderImages.classList.remove('active');
sliderIndicators.classList.remove('active');
currentIndex = index;
sliderImages.classList.add('active');
sliderIndicators.classList.add('active');
});
});
</script>
</body>
</html> 效果图
https://i-blog.csdnimg.cn/direct/066d6d5050f4474b9ec0f56dca2da11b.png
可以将图片自己更改！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]