• 日期: 2027-11-01
  • 标签: 常规
<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>手机端网站模板 - 导航、幻灯片、图片列表、服务项目、新闻、公司简介、管理团队、联系方式</title>
	<style>
		/* 导航条样式 */
		nav {
			background-color: #333;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		}
<pre><code>	nav a {
		color: #fff;
		text-decoration: none;
		margin: 0 10px;
	}

	/* 幻灯片样式 */
	.slider {
		position: relative;
		height: 300px;
	}

	.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;
	}

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

	.image-list li {
		list-style: none;
		width: 30%;
		margin-bottom: 20px;
		background-color: #000;
		color: #fff;
		padding: 10px;
		text-align: center;
	}

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

	.services li {
		list-style: none;
		width: 30%;
		background-color: #333;
		color: #fff;
		padding: 10px;
		text-align: center;
	}

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

	.news-list li {
		list-style: none;
		width: 100%;
		background-color: #fff;
		color: #333;
		padding: 10px;
		text-align: center;
		border-bottom: 1px solid #ccc;
	}

	/* 公司简介样式 */
	.company-intro {
		margin-top: 20px;
		background-color: #ccc;
		color: #333;
		padding: 10px;
	}

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

	.management-team li {
		list-style: none;
		width: 30%;
		background-color: #333;
		color: #fff;
		padding: 10px;
		text-align: center;
	}

	/* 联系方式样式 */
	.contact-info {
		margin-top: 20px;
		background-color: #333;
		color: #fff;
		padding: 10px;
		text-align: center;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<!-- 导航条 -->
	<nav>
		<a href='#'>首页</a>
		<a href='#'>服务</a>
		<a href='#'>新闻</a>
		<a href='#'>关于我们</a>
		<a href='#'>联系我们</a>
	</nav>
<pre><code>&lt;!-- 幻灯片 --&gt;
&lt;div class='slider'&gt;
	&lt;img src='https://via.placeholder.com/300.png/09f/fff' alt='Slide 1' class='active'&gt;
	&lt;img src='https://via.placeholder.com/300.png/0f9/fff' alt='Slide 2'&gt;
	&lt;img src='https://via.placeholder.com/300.png/f90/fff' alt='Slide 3'&gt;
&lt;/div&gt;

&lt;!-- 图片列表 --&gt;
&lt;ul class='image-list'&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;img src='https://via.placeholder.com/200.png/09f/fff' alt='Image 1'&gt;
			&lt;h3&gt;图片标题1&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;img src='https://via.placeholder.com/200.png/0f9/fff' alt='Image 2'&gt;
			&lt;h3&gt;图片标题2&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;img src='https://via.placeholder.com/200.png/f90/fff' alt='Image 3'&gt;
			&lt;h3&gt;图片标题3&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;img src='https://via.placeholder.com/200.png/09f/fff' alt='Image 4'&gt;
			&lt;h3&gt;图片标题4&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;img src='https://via.placeholder.com/200.png/0f9/fff' alt='Image 5'&gt;
			&lt;h3&gt;图片标题5&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;img src='https://via.placeholder.com/200.png/f90/fff' alt='Image 6'&gt;
			&lt;h3&gt;图片标题6&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 服务项目 --&gt;
&lt;ul class='services'&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;h3&gt;服务项目1&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;h3&gt;服务项目2&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;h3&gt;服务项目3&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

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

&lt;!-- 公司简介 --&gt;
&lt;div class='company-intro'&gt;
	&lt;p&gt;公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介&lt;/p&gt;
&lt;/div&gt;

&lt;!-- 管理团队 --&gt;
&lt;ul class='management-team'&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;h3&gt;管理团队成员1&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;h3&gt;管理团队成员2&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href='#'&gt;
			&lt;h3&gt;管理团队成员3&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 联系方式 --&gt;
&lt;div class='contact-info'&gt;
	&lt;p&gt;联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式&lt;/p&gt;
&lt;/div&gt;

&lt;!-- 帝国cms标签 --&gt;
{dede:global name='cfg_templets_skin' /}
</code></pre>
</body>
</html>
手机端网站模板 - 导航、幻灯片、图片列表、服务项目、新闻、公司简介、管理团队、联系方式

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

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