• 日期: 2024-08-14
  • 标签: 常规
<!DOCTYPE html>
<html>
<head>
	<title>手机网站模板 - 响应式设计，含导航、幻灯片、图片列表、服务项目、新闻列表、公司简介、管理团队和联系方式</title>
	<style>
		body{
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		header{
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		nav{
			background-color: #f5f5f5;
			padding: 10px;
		}
		nav ul{
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
		}
		nav ul li{
			margin: 0 10px;
		}
		nav ul li a{
			color: #333;
			text-decoration: none;
			padding: 5px 10px;
			border-radius: 5px;
		}
		nav ul li a:hover{
			background-color: #333;
			color: #fff;
		}
		.slider{
			width: 100%;
			height: 300px;
			position: relative;
			overflow: hidden;
		}
		.slider img{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}
		.slider img.active{
			opacity: 1;
		}
		.slider .prev, .slider .next{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 30px;
			color: #fff;
			background-color: rgba(0,0,0,0.5);
			padding: 10px;
			border-radius: 50%;
			cursor: pointer;
		}
		.slider .prev{
			left: 0;
		}
		.slider .next{
			right: 0;
		}
		.image-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 20px;
		}
		.image-list li{
			width: 200px;
			height: 150px;
			background-color: #333;
			margin: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.image-list li a{
			color: #fff;
			text-decoration: none;
			font-weight: bold;
		}
		.services{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20px;
		}
		.services li{
			width: 200px;
			height: 150px;
			background-color: #f5f5f5;
			margin: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 20px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			text-align: center;
		}
		.services li img{
			width: 50%;
			margin-bottom: 10px;
		}
		.news{
			display: flex;
			flex-wrap: wrap;
			margin: 20px;
		}
		.news li{
			width: 100%;
			background-color: #f5f5f5;
			margin: 10px 0;
			padding: 10px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}
		.news li h3{
			margin: 0;
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
		.news li p{
			margin: 5px 0;
			font-size: 14px;
			color: #666;
		}
		.company{
			display: flex;
			flex-wrap: wrap;
			margin: 20px;
			align-items: center;
		}
		.company img{
			width: 200px;
			height: 150px;
			object-fit: cover;
			margin: 10px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}
		.company h3{
			margin: 0;
			font-size: 24px;
			font-weight: bold;
			color: #333;
		}
		.team{
			display: flex;
			flex-wrap: wrap;
			margin: 20px;
			align-items: center;
		}
		.team img{
			width: 150px;
			height: 150px;
			object-fit: cover;
			margin: 10px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			border-radius: 50%;
		}
		.team h3{
			margin: 0;
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
		.contact{
			display: flex;
			flex-wrap: wrap;
			margin: 20px;
			align-items: center;
		}
		.contact li{
			width: 200px;
			height: 150px;
			background-color: #f5f5f5;
			margin: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 20px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			text-align: center;
		}
		.contact li a{
			color: #333;
			text-decoration: none;
			font-weight: bold;
			margin-top: 10px;
			display: block;
		}
	</style>
</head>
<body>
	<header>
		<h1>手机网站</h1>
	</header>
	<nav>
		<ul>
			<li><a href='#'>首页</a></li>
			<li><a href='#'>产品</a></li>
			<li><a href='#'>服务</a></li>
			<li><a href='#'>新闻</a></li>
			<li><a href='#'>关于我们</a></li>
			<li><a href='#'>联系我们</a></li>
		</ul>
	</nav>
	<div class='slider'>
		<img src='https://picsum.photos/id/1000/600/300' alt='' class='active'>
		<img src='https://picsum.photos/id/1001/600/300' alt=''>
		<img src='https://picsum.photos/id/1002/600/300' alt=''>
		<div class='prev'>&#8249;</div>
		<div class='next'>&#8250;</div>
	</div>
	<ul class='image-list'>
		<li><a href='#'><img src='https://picsum.photos/id/1003/200/150' alt=''><h3>图片1</h3></a></li>
		<li><a href='#'><img src='https://picsum.photos/id/1004/200/150' alt=''><h3>图片2</h3></a></li>
		<li><a href='#'><img src='https://picsum.photos/id/1005/200/150' alt=''><h3>图片3</h3></a></li>
		<li><a href='#'><img src='https://picsum.photos/id/1006/200/150' alt=''><h3>图片4</h3></a></li>
		<li><a href='#'><img src='https://picsum.photos/id/1007/200/150' alt=''><h3>图片5</h3></a></li>
		<li><a href='#'><img src='https://picsum.photos/id/1008/200/150' alt=''><h3>图片6</h3></a></li>
	</ul>
	<ul class='services'>
		<li>
			<img src='https://picsum.photos/id/1009/100/100' alt=''>
			<h3>服务项目1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</li>
		<li>
			<img src='https://picsum.photos/id/1010/100/100' alt=''>
			<h3>服务项目2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</li>
		<li>
			<img src='https://picsum.photos/id/1011/100/100' alt=''>
			<h3>服务项目3</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</li>
	</ul>
	<ul class='news'>
		<li>
			<h3>新闻1</h3>
			<p>2022年1月1日</p>
		</li>
		<li>
			<h3>新闻2</h3>
			<p>2022年1月2日</p>
		</li>
		<li>
			<h3>新闻3</h3>
			<p>2022年1月3日</p>
		</li>
		<li>
			<h3>新闻4</h3>
			<p>2022年1月4日</p>
		</li>
		<li>
			<h3>新闻5</h3>
			<p>2022年1月5日</p>
		</li>
		<li>
			<h3>新闻6</h3>
			<p>2022年1月6日</p>
		</li>
		<li>
			<h3>新闻7</h3>
			<p>2022年1月7日</p>
		</li>
		<li>
			<h3>新闻8</h3>
			<p>2022年1月8日</p>
		</li>
		<li>
			<h3>新闻9</h3>
			<p>2022年1月9日</p>
		</li>
		<li>
			<h3>新闻10</h3>
			<p>2022年1月10日</p>
		</li>
	</ul>
	<div class='company'>
		<img src='https://picsum.photos/id/1012/200/150' alt=''>
		<h3>公司简介</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel justo sit amet felis placerat auctor. Donec id ipsum id elit dictum semper.</p>
	</div>
	<div class='team'>
		<img src='https://picsum.photos/id/1013/150/150' alt=''>
		<img src='https://picsum.photos/id/1014/150/150' alt=''>
		<img src='https://picsum.photos/id/1015/150/150' alt=''>
		<h3>管理团队</h3>
	</div>
	<ul class='contact'>
		<li>
			<h3>联系方式1</h3>
			<p>地址：xxxxxxxxxx</p>
			<p>电话：xxxxxxxxxx</p>
			<p>邮箱：xxxxxxxxxx</p>
			<a href='#'>查看地图</a>
		</li>
		<li>
			<h3>联系方式2</h3>
			<p>地址：xxxxxxxxxx</p>
			<p>电话：xxxxxxxxxx</p>
			<p>邮箱：xxxxxxxxxx</p>
			<a href='#'>查看地图</a>
		</li>
		<li>
			<h3>联系方式3</h3>
			<p>地址：xxxxxxxxxx</p>
			<p>电话：xxxxxxxxxx</p>
			<p>邮箱：xxxxxxxxxx</p>
			<a href='#'>查看地图</a>
		</li>
	</ul>
	<script>
		let sliderImages = document.querySelectorAll('.slider img');
		let prevBtn = document.querySelector('.slider .prev');
		let nextBtn = document.querySelector('.slider .next');
		let currentIndex = 0;
		sliderImages[currentIndex].classList.add('active');
		prevBtn.addEventListener('click', function(){
			sliderImages[currentIndex].classList.remove('active');
			currentIndex--;
			if(currentIndex < 0){
				currentIndex = sliderImages.length - 1;
			}
			sliderImages[currentIndex].classList.add('active');
		});
		nextBtn.addEventListener('click', function(){
			sliderImages[currentIndex].classList.remove('active');
			currentIndex++;
			if(currentIndex >= sliderImages.length){
				currentIndex = 0;
			}
			sliderImages[currentIndex].classList.add('active');
		});
	</script>
</body>
</html>
手机网站模板 - 响应式设计，含导航、幻灯片、图片列表、服务项目、新闻列表、公司简介、管理团队和联系方式

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

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