• 日期: 2026-11-10
  • 标签: 常规
<!DOCTYPE html>
<html>
<head>
	<title>手机端网站模板</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		/*导航条样式*/
		.navbar {
			background-color: #333;
			overflow: hidden;
		}
<pre><code>	.navbar a {
		float: left;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px;
	}

	.navbar a:hover {
		background-color: #ddd;
		color: black;
	}

	/*幻灯片样式*/
	.slideshow-container {
		max-width: 100%;
		position: relative;
		margin: auto;
	}

	.slideshow-container img {
		width: 100%;
		height: auto;
	}

	.prev, .next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #f2f2f2;
		font-size: 18px;
		font-weight: bold;
		padding: 12px 16px;
		border-radius: 0 3px 3px 0;
		cursor: pointer;
	}

	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}

	.prev:hover, .next:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.text {
		color: #f2f2f2;
		font-size: 15px;
		padding: 8px 12px;
		position: absolute;
		bottom: 8px;
		width: 100%;
		text-align: center;
	}

	/*图片列表样式*/
	.img-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}

	.img-list a {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
		text-align: center;
		text-decoration: none;
		color: #000;
	}

	.img-list img {
		width: 100%;
		height: auto;
		margin-bottom: 5px;
	}

	.img-list h3 {
		background-color: #000;
		color: #fff;
		padding: 5px;
		font-size: 14px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	/*服务项目样式*/
	.services {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}

	.services a {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
		text-align: center;
		text-decoration: none;
		color: #000;
		width: 33.33%;
	}

	.services img {
		width: 50px;
		height: 50px;
		margin-bottom: 5px;
	}

	.services h3 {
		font-size: 14px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	/*新闻列表样式*/
	.news {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}

	.news a {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
		text-align: center;
		text-decoration: none;
		color: #000;
		width: 100%;
	}

	.news h3 {
		font-size: 14px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	.news p {
		font-size: 12px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	/*公司简介样式*/
	.about {
		margin: 20px 0;
	}

	.about p {
		font-size: 14px;
		line-height: 1.5;
		margin: 0;
		text-align: justify;
		text-justify: inter-word;
	}

	/*管理团队样式*/
	.team {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}

	.team a {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
		text-align: center;
		text-decoration: none;
		color: #000;
		width: 33.33%;
	}

	.team img {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-bottom: 5px;
	}

	.team h3 {
		font-size: 14px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	.team p {
		font-size: 12px;
		margin: 0;
		width: 100%;
		text-align: center;
	}

	/*联系方式样式*/
	.contact {
		margin: 20px 0;
	}

	.contact p {
		font-size: 14px;
		line-height: 1.5;
		margin: 0;
		text-align: justify;
		text-justify: inter-word;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<!--导航条-->
	<div class="navbar">
		<a href="#home">首页</a>
		<a href="#services">服务项目</a>
		<a href="#news">新闻动态</a>
		<a href="#about">公司简介</a>
		<a href="#team">管理团队</a>
		<a href="#contact">联系我们</a>
	</div>
<pre><code>&lt;!--幻灯片--&gt;
&lt;div class=&quot;slideshow-container&quot;&gt;
	&lt;div class=&quot;mySlides fade&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/237/800/400&quot;&gt;
		&lt;div class=&quot;text&quot;&gt;图片标题1&lt;/div&gt;
	&lt;/div&gt;

	&lt;div class=&quot;mySlides fade&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/238/800/400&quot;&gt;
		&lt;div class=&quot;text&quot;&gt;图片标题2&lt;/div&gt;
	&lt;/div&gt;

	&lt;div class=&quot;mySlides fade&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/239/800/400&quot;&gt;
		&lt;div class=&quot;text&quot;&gt;图片标题3&lt;/div&gt;
	&lt;/div&gt;

	&lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1)&quot;&gt;&amp;#10094;&lt;/a&gt;
	&lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1)&quot;&gt;&amp;#10095;&lt;/a&gt;
&lt;/div&gt;

&lt;br&gt;

&lt;!--图片列表--&gt;
&lt;div class=&quot;img-list&quot;&gt;
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/240/200/150&quot;&gt;
		&lt;h3&gt;图片标题1&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/241/200/150&quot;&gt;
		&lt;h3&gt;图片标题2&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/242/200/150&quot;&gt;
		&lt;h3&gt;图片标题3&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/243/200/150&quot;&gt;
		&lt;h3&gt;图片标题4&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/244/200/150&quot;&gt;
		&lt;h3&gt;图片标题5&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/245/200/150&quot;&gt;
		&lt;h3&gt;图片标题6&lt;/h3&gt;
	&lt;/a&gt;
&lt;/div&gt;

&lt;!--服务项目--&gt;
&lt;div id=&quot;services&quot; class=&quot;services&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/246/50/50&quot;&gt;
		&lt;h3&gt;服务项目1&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/247/50/50&quot;&gt;
		&lt;h3&gt;服务项目2&lt;/h3&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/248/50/50&quot;&gt;
		&lt;h3&gt;服务项目3&lt;/h3&gt;
	&lt;/a&gt;
&lt;/div&gt;

&lt;!--新闻列表--&gt;
&lt;div id=&quot;news&quot; class=&quot;news&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题1&lt;/h3&gt;
		&lt;p&gt;2022-01-01&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题2&lt;/h3&gt;
		&lt;p&gt;2022-01-02&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题3&lt;/h3&gt;
		&lt;p&gt;2022-01-03&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题4&lt;/h3&gt;
		&lt;p&gt;2022-01-04&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题5&lt;/h3&gt;
		&lt;p&gt;2022-01-05&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题6&lt;/h3&gt;
		&lt;p&gt;2022-01-06&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题7&lt;/h3&gt;
		&lt;p&gt;2022-01-07&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题8&lt;/h3&gt;
		&lt;p&gt;2022-01-08&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题9&lt;/h3&gt;
		&lt;p&gt;2022-01-09&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;h3&gt;新闻标题10&lt;/h3&gt;
		&lt;p&gt;2022-01-10&lt;/p&gt;
	&lt;/a&gt;
&lt;/div&gt;

&lt;!--公司简介--&gt;
&lt;div id=&quot;about&quot; class=&quot;about&quot;&gt;
	&lt;p&gt;公司简介内容。&lt;/p&gt;
&lt;/div&gt;

&lt;!--管理团队--&gt;
&lt;div id=&quot;team&quot; class=&quot;team&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/249/80/80&quot;&gt;
		&lt;h3&gt;团队成员1&lt;/h3&gt;
		&lt;p&gt;职位&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/250/80/80&quot;&gt;
		&lt;h3&gt;团队成员2&lt;/h3&gt;
		&lt;p&gt;职位&lt;/p&gt;
	&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;
		&lt;img src=&quot;https://picsum.photos/id/251/80/80&quot;&gt;
		&lt;h3&gt;团队成员3&lt;/h3&gt;
		&lt;p&gt;职位&lt;/p&gt;
	&lt;/a&gt;
&lt;/div&gt;

&lt;!--联系方式--&gt;
&lt;div id=&quot;contact&quot; class=&quot;contact&quot;&gt;
	&lt;p&gt;联系方式内容。&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
	//幻灯片自动播放
	var slideIndex = 0;
	showSlides();

	function showSlides() {
		var i;
		var slides = document.getElementsByClassName('mySlides');
		for (i = 0; i &lt; slides.length; i++) {
			slides[i].style.display = 'none';
		}
		slideIndex++;
		if (slideIndex &gt; slides.length) {slideIndex = 1}
		slides[slideIndex-1].style.display = 'block';
		setTimeout(showSlides, 2000); // 每隔2秒切换一张图片
	}

	//幻灯片手动切换
	function plusSlides(n) {
		showSlidesManual(slideIndex += n);
	}

	function showSlidesManual(n) {
		var i;
		var slides = document.getElementsByClassName('mySlides');
		if (n &gt; slides.length) {slideIndex = 1}
		if (n &lt; 1) {slideIndex = slides.length}
		for (i = 0; i &lt; slides.length; i++) {
			slides[i].style.display = 'none';
		}
		slides[slideIndex-1].style.display = 'block';
	}
&lt;/script&gt;
</code></pre>
</body>
</html>
手机端网站模板 - 响应式设计，包含导航、幻灯片、图片列表、服务项目、新闻等

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

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