您现在的位置是:网址首页 > PbootCMS学习 > 建站教程建站教程

【图文】002号模板|第21讲|PbootCMS仿美食招商加盟响应式网站教程|制作招商加盟页面zhaoshang.html

微脉网络2020-01-09已有55人围观

简介招商页面模板zhaoshang.html和guanyu.html代码是一样的,只不过比guanyu.html多了一个二级栏目的调用代码,其实guanyu.html也是有这个代码的位置的。下面我们先看一···

招商页面模板zhaoshang.html和guanyu.html代码是一样的,只不过比guanyu.html多了一个二级栏目的调用代码,其实guanyu.html也是有这个代码的位置的。下面我们先看一下guanyu.html的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>{pboot:pagetitle}</title>
<meta name="Keywords" content="{pboot:pagekeywords}" />
<meta name="Description" content="{pboot:pagedescription}" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/swiper.min.css" />
<link rel="stylesheet" href="/css/index.css" />
<link rel="stylesheet" href="/css/product.css" />
<!-- 监听屏幕宽度 给html赋值font-size -->
<script src="/js/respons.js"></script>
</head>
<body>
<div id="big-box">
  <div>
    {include file=head.html}
    <!-- singlePage content -->
    <div>
      <div>
        <div> <span>您的位置:</span> {pboot:position separator=>> indextext=首页}</span>
          <div>
            <ul class="menu-list clear">
            <!--这个地方是放二级栏目代码的位置-->
            </ul>
          </div>
        </div>
      </div>
      <div>
        <div>
          <h1>{content:title}</h1>
          <p>{content:subtitle}</p>
          <p>{content:content}</p>
        </div>
      </div>
    </div>
    <!-- singlePage content END-->
    {include file=foot.html}
  </div>
</div>
<script src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script src="/js/product.js"></script>
</body>
</html>

想要做招商页面zhaoshang.html的话我们只要在Dreamweaver中新建一个HTML文件,然后将guanyu.html的所有代码复制,粘贴后保存为zhaoshang.html就可以了

01. 新建一个html文件

202.jpg

02. 复制guanyu.html的所有代码

203.jpg

03. 在新建的html文件中粘贴我们复制的代码

204.jpg

04. 保存到我们的模板文件夹中,命名为zhaoshang.html

205.jpg

05. 复制原网站的招商页面的源码中的二级栏目的前台调用代码

206.jpg

207.jpg

208.jpg

209.jpg

06. 我们使用PbootCMS的二级栏目调用标签替换我们刚刚复制的代码

首先我们先看一下PbootCMS的二级调用标签

{pboot:nav parent={sort:tcode}}  开始标签
    [nav:link]  二级栏目链接
    [nav:name]  二级栏目名称
{/pboot:nav}  结束标签

套用到模板中的写法

210.jpg

07. 这里我们要注意一个地方,这里二级栏目选中后有一个代码高亮的效果,我们可以使用PbootCMS的代码高亮判断来选择是否当前栏目输出样式active

PbootCMS的代码高亮

{pboot:if('[nav:scode]'=='{sort:scode}')}当前栏目时显示的内容{/pboot:if}

当前栏目下我们class中显示active的话可以这样写

<li class="menu-item {pboot:if('[nav:scode]'=='{sort:scode}')}active{/pboot:if}">

完整的写法如下

211.jpg

08. 把多余的二级分类代码删除掉

212.jpg

这样,我们整个的招商页面zhaoshang.html就做完了,我们看一下完整的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>{pboot:pagetitle}</title>
<meta name="Keywords" content="{pboot:pagekeywords}" />
<meta name="Description" content="{pboot:pagedescription}" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/swiper.min.css" />
<link rel="stylesheet" href="/css/index.css" />
<link rel="stylesheet" href="/css/product.css" />
<!-- 监听屏幕宽度 给html赋值font-size -->
<script src="/js/respons.js"></script>
</head>
<body>
<div id="big-box">
  <div> {include file=head.html}
    <!-- singlePage content -->
    <div>
      <div>
        <div> <span>您的位置:</span> {pboot:position separator=>> indextext=首页}</span>
          <div>
            <ul class="menu-list clear">
              {pboot:nav parent={sort:tcode}}
              <li class="menu-item {pboot:if('[nav:scode]'=='{sort:scode}')}active{/pboot:if}"><a href="[nav:link]">[nav:name]</a></li>
              {/pboot:nav}
            </ul>
          </div>
        </div>
      </div>
      <div>
        <div>
          <h1>{content:title}</h1>
          <p>{content:subtitle}</p>
          <p>{content:content}</p>
        </div>
      </div>
    </div>
    <!-- singlePage content END-->
    {include file=foot.html} </div>
</div>
<script src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script src="/js/product.js"></script>
</body>
</html>

很赞哦! (50)



网站推荐 TOP 01

    【No:001】蓝色产品展示型网站模板带手机端模板

站点信息

  • 建站时间:2020年01月01日
  • 网站程序:PBOOTCMS
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们
  • 公众号