metinfo自己做模板(自制相册模板)_MetInfo米拓教程-网站建设知识

Metinfo是一款非常优秀的CMS系统，可以满足各种网站的需求。而自己做模板则是Metinfo的一个重要特点，可以让网站更加独特。本文将介绍如何自制一个相册模板。

1. 安装Metinfo

首先需要在本地或者服务器上安装Metinfo。Metinfo官方提供了详细的安装教程，按照教程一步一步操作即可。安装完成后，登录后台。

2. 新建模板

在后台的“模板管理”中，点击“新建模板”，填写模板名称和模板目录，点击“提交”即可。然后在模板管理中找到新建的模板，点击“编辑”，进入模板编辑界面。

3. 编写HTML代码

在模板编辑界面中，可以看到左侧是文件目录，右侧是文件内容。我们需要编写HTML代码，可以使用Metinfo提供的标签，也可以使用HTML标签。这里我们以相册模板为例，编写一个简单的相册页面。

3.1 编写头部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册模板</title>
    <link rel="stylesheet" href="{$met_skin_url}css/style.css">
</head>
<body>

3.2 编写相册列表代码

<div class="album">
    <ul>
        <li><a href="#"><img src="{$met_skin_url}images/album1.jpg" alt=""></a></li>
        <li><a href="#"><img src="{$met_skin_url}images/album2.jpg" alt=""></a></li>
        <li><a href="#"><img src="{$met_skin_url}images/album3.jpg" alt=""></a></li>
        <li><a href="#"><img src="{$met_skin_url}images/album4.jpg" alt=""></a></li>
    </ul>
</div>

3.3 编写底部代码

</body>
</html>

4. 编写CSS样式

在模板目录下新建一个“css”文件夹，在其中新建一个“style.css”文件。编写CSS样式，美化相册页面。

.album {
    margin: 20px auto;
    width: 800px;
}
.album ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.album li {
    margin: 10px;
    width: 200px;
}
.album li img {
    width: 100%;
    height: auto;
}