手机端网站 - 首页 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>手机端网站</title>
	<style>
		/* 导航条样式 */
		nav {
			background-color: {dede:global name='cfg_df_stylecolor'/};
			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: {dede:global name='cfg_df_stylecolor'/};
		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: {dede:global name='cfg_df_stylecolor'/};
		color: #fff;
		padding: 10px;
		text-align: center;
	}

	/* 联系方式样式 */
	.contact-info {
		margin-top: 20px;
		background-color: {dede:global name='cfg_df_stylecolor'/};
		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=&quot;slider&quot;&gt;
	{dede:loop adv order='sortrank' row='3'}
	&lt;img src=&quot;{dede:field name='imgurl'/}&quot; alt=&quot;{dede:field name='title'/}&quot; class=&quot;{dede:php}$i==1 ? 'active' : ''{/dede:php}&quot;&gt;
	{/dede:loop}
&lt;/div&gt;

&lt;!-- 图片列表 --&gt;
&lt;ul class=&quot;image-list&quot;&gt;
	{dede:loop listtypeid='1' row='6'}
	&lt;li&gt;
		&lt;a href=&quot;{dede:field name='arcurl'/}&quot;&gt;
			&lt;img src=&quot;{dede:field name='litpic'/}&quot; alt=&quot;{dede:field name='title'/}&quot;&gt;
			&lt;h3&gt;{dede:field name='title'/}&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	{/dede:loop}
&lt;/ul&gt;

&lt;!-- 服务项目 --&gt;
&lt;ul class=&quot;services&quot;&gt;
	{dede:loop type='fl' typeid='0' row='3' showmenu='-1'}
	&lt;li&gt;
		&lt;a href=&quot;{dede:field name='typelink'/}&quot;&gt;
			&lt;h3&gt;{dede:field name='typename'/}&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	{/dede:loop}
&lt;/ul&gt;

&lt;!-- 新闻列表 --&gt;
&lt;ul class=&quot;news-list&quot;&gt;
	{dede:loop type='article' typeid='0' row='10'}
	&lt;li&gt;
		&lt;a href=&quot;{dede:field name='arcurl'/}&quot;&gt;
			&lt;h3&gt;{dede:field name='title'/}&lt;/h3&gt;
			&lt;p&gt;{dede:date m='-' d='-'}&lt;/p&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	{/dede:loop}
&lt;/ul&gt;

&lt;!-- 公司简介 --&gt;
&lt;div class=&quot;company-intro&quot;&gt;
	&lt;p&gt;{dede:field name='body'/}&lt;/p&gt;
&lt;/div&gt;

&lt;!-- 管理团队 --&gt;
&lt;ul class=&quot;management-team&quot;&gt;
	{dede:loop type='fl' typeid='0' row='3' showmenu='-1'}
	&lt;li&gt;
		&lt;a href=&quot;{dede:field name='typelink'/}&quot;&gt;
			&lt;h3&gt;{dede:field name='typename'/}&lt;/h3&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	{/dede:loop}
&lt;/ul&gt;

&lt;!-- 联系方式 --&gt;
&lt;div class=&quot;contact-info&quot;&gt;
	&lt;p&gt;{dede:field name='company'/} {dede:field name='address'/} {dede:field name='tel'/}&lt;/p&gt;
&lt;/div&gt;

&lt;!-- 帝国cms标签 --&gt;
{dede:global name=&quot;cfg_templets_skin&quot; /}
</code></pre>
</body>
</html>