• 日期: 2025-10-05
  • 标签: 常规
<!DOCTYPE html>
<html>
<head>
	<title>手机网站模板 - 响应式设计，带导航条、幻灯片和图片列表</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			font-size: 14px;
			line-height: 1.5;
			color: #333;
		}
		/* 导航条样式 */
		nav {
			background-color: #333;
			color: #fff;
			text-align: center;
			padding: 10px 0;
		}
		nav a {
			color: #fff;
			text-decoration: none;
			padding: 10px;
		}
		nav a:hover {
			background-color: #fff;
			color: #333;
		}
		/* 幻灯片样式 */
		.slider {
			position: relative;
			height: 250px;
			overflow: hidden;
		}
		.slider img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}
		.slider img.active {
			opacity: 1;
		}
		.slider .controls {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
			width: 100%;
			text-align: center;
		}
		.slider .controls button {
			background-color: #333;
			color: #fff;
			border: none;
			padding: 10px;
			margin: 0 5px;
			cursor: pointer;
		}
		.slider .controls button:hover {
			background-color: #fff;
			color: #333;
		}
		/* 图片列表样式 */
		.image-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			margin: 20px 0;
		}
		.image-list li {
			background-color: #000;
			color: #fff;
			text-align: center;
			margin: 10px;
			padding: 10px;
			width: 200px;
			height: 200px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.image-list li img {
			max-width: 100%;
			max-height: 100%;
			margin-bottom: 10px;
		}
		/* 服务项目样式 */
		.services {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20px 0;
		}
		.services li {
			background-color: #333;
			color: #fff;
			text-align: center;
			margin: 10px;
			padding: 10px;
			width: 200px;
			height: 200px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.services li img {
			max-width: 100%;
			max-height: 100%;
			margin-bottom: 10px;
		}
		/* 新闻列表样式 */
		.news-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			margin: 20px 0;
		}
		.news-list li {
			background-color: #f5f5f5;
			color: #333;
			text-align: center;
			margin: 10px;
			padding: 10px;
			width: calc(100% / 3 - 20px);
			height: 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.news-list li h3 {
			margin: 0;
			font-size: 16px;
			font-weight: bold;
		}
		.news-list li p {
			margin: 0;
			font-size: 12px;
			color: #999;
		}
		/* 公司简介样式 */
		.company {
			margin: 20px 0;
			padding: 20px;
			background-color: #f5f5f5;
			color: #333;
			text-align: justify;
		}
		/* 管理团队样式 */
		.team {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20px 0;
		}
		.team li {
			background-color: #f5f5f5;
			color: #333;
			text-align: center;
			margin: 10px;
			padding: 10px;
			width: calc(100% / 3 - 20px);
			height: 200px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.team li img {
			max-width: 100%;
			max-height: 100%;
			margin-bottom: 10px;
		}
		/* 联系方式样式 */
		.contact {
			margin: 20px 0;
			padding: 20px;
			background-color: #f5f5f5;
			color: #333;
			text-align: center;
		}
	</style>
</head>
<body>
	<header>
		<nav>
			<a href="#">首页</a>
			<a href="#">关于我们</a>
			<a href="#">服务项目</a>
			<a href="#">新闻动态</a>
			<a href="#">联系我们</a>
		</nav>
		<div class="slider">
			<img src="https://picsum.photos/id/237/640/250" alt="Slide 1" class="active">
			<img src="https://picsum.photos/id/238/640/250" alt="Slide 2">
			<img src="https://picsum.photos/id/239/640/250" alt="Slide 3">
			<div class="controls">
				<button onclick="prevSlide()">&#10094;</button>
				<button onclick="nextSlide()">&#10095;</button>
			</div>
		</div>
	</header>
	<main>
		<ul class="image-list">
			<li>
				<a href="#"><img src="https://picsum.photos/id/240/200/200" alt="Image 1"></a>
				<a href="#"><h3>标题1</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/241/200/200" alt="Image 2"></a>
				<a href="#"><h3>标题2</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/242/200/200" alt="Image 3"></a>
				<a href="#"><h3>标题3</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/243/200/200" alt="Image 4"></a>
				<a href="#"><h3>标题4</h3></a>
			</li>
		</ul>
		<ul class="services">
			<li>
				<a href="#"><img src="https://picsum.photos/id/244/100/100" alt="Service 1"></a>
				<a href="#"><h3>服务项目1</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/245/100/100" alt="Service 2"></a>
				<a href="#"><h3>服务项目2</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/246/100/100" alt="Service 3"></a>
				<a href="#"><h3>服务项目3</h3></a>
			</li>
		</ul>
		<ul class="news-list">
			<li>
				<a href="#"><h3>新闻标题1</h3></a>
				<p>2021-01-01</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题2</h3></a>
				<p>2021-01-02</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题3</h3></a>
				<p>2021-01-03</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题4</h3></a>
				<p>2021-01-04</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题5</h3></a>
				<p>2021-01-05</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题6</h3></a>
				<p>2021-01-06</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题7</h3></a>
				<p>2021-01-07</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题8</h3></a>
				<p>2021-01-08</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题9</h3></a>
				<p>2021-01-09</p>
			</li>
			<li>
				<a href="#"><h3>新闻标题10</h3></a>
				<p>2021-01-10</p>
			</li>
		</ul>
		<div class="company">
			<h2>公司简介</h2>
			<p>这是一段公司简介的文字，可以用来介绍公司的背景、历史、业务等等。</p>
		</div>
		<ul class="team">
			<li>
				<a href="#"><img src="https://picsum.photos/id/247/100/100" alt="Team Member 1"></a>
				<a href="#"><h3>成员1</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/248/100/100" alt="Team Member 2"></a>
				<a href="#"><h3>成员2</h3></a>
			</li>
			<li>
				<a href="#"><img src="https://picsum.photos/id/249/100/100" alt="Team Member 3"></a>
				<a href="#"><h3>成员3</h3></a>
			</li>
		</ul>
		<div class="contact">
			<h2>联系方式</h2>
			<p>地址：XXX</p>
			<p>电话：XXX</p>
			<p>邮箱：XXX</p>
		</div>
	</main>
	<script>
		// 幻灯片切换
		var slideIndex = 1;
		showSlide(slideIndex);
		function prevSlide() {
			showSlide(slideIndex -= 1);
		}
		function nextSlide() {
			showSlide(slideIndex += 1);
		}
		function showSlide(n) {
			var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
			if (n > slides.length) {
				slideIndex = 1;
			}
			if (n < 1) {
				slideIndex = slides.length;
			}
			for (var i = 0; i < slides.length; i++) {
				slides[i].classList.remove("active");
			}
			slides[slideIndex-1].classList.add("active");
		}
		// 幻灯片自动播放
		var timer = setInterval(function() { nextSlide() }, 5000);
	</script>
</body>
</html>
手机网站模板 - 响应式设计，带导航条、幻灯片和图片列表

原文地址: https://www.cveoy.top/t/topic/mUVR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录