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

【图文】002号模板|第16讲|PbootCMS仿美食招商加盟响应式网站仿站教程|制作菜品展示列表页caipinlist.html(上)

微脉网络2020-01-03已有13人围观

简介网站的菜品展示列表页我们命名为caipinlist.html(好记),它是一个列表页list,对应的内容页是caipin.html,制作方法和关于我们页面guanyu.html基本相同,只不过调用的P···

网站的菜品展示列表页我们命名为caipinlist.html(好记),它是一个列表页list,对应的内容页是caipin.html,

制作方法和关于我们页面guanyu.html基本相同,只不过调用的PbootCMS的标签不一样而已,首先我们先看一下PbootCMS系统列表页可调用的标签有哪些:

{pboot:list num=10 order=date} 开始标签
    [list:n] 计数0开始
    [list:i] 计数1开始
    [list:id] 编号
    [list:scode] 分类编码
    [list:subscode] 副分类编码
    [list:sortname] 分类名称
    [list:subsortname] 副分类名称
    [list:sortlink] 分类链接
    [list:subsortlink] 副分类链接
    [list:title] 标题
    [list:titlecolor] 标题颜色
    [list:subtitle] 副标题
    [list:author] 作者
    [list:source] 来源
    [list:link] 链接
    [list:outlink] 外部链接
    [list:date] 发布日期
    [list:ico] 缩略图
    [list:pics] 多图
    [list:content] 内容
    [list:enclosure] 附件
    [list:keywords] 关键词
    [list:description] 描述
    [list:istop] 是否置顶
    [list:isrecommend] 是否推荐
    [list:isheadline] 是否头条
    [list:visits] 访问数量
    [list:likes] 点赞数量
    [list:oppose] 反对数量
    [list:likeslink] 点赞链接
    [list:opposelink] 反对链接
{/pboot:list} 结束标签

下面我们开始仿这个菜品列表页,如果和关于我们页面仿制过程相同的我们只做截图展示就不一一用文字介绍了。

01. 首先用Dreamweaver新建一个cai'pinlist.html文件和caipin.html文件保存到网站模板文件夹下面的WeiMaiDS_002目录下面

144.jpg

145.jpg

02. 在浏览器上打开我们仿的原网站,在菜品展示列表页右键查看源代码

146.jpg

03. 复制全部代码到Dreamweaver新建的caipinlist.html文件中

147.jpg

148.jpg

149.jpg

记得使用“命令”→“应用原格式”排列下代码后保存

150.jpg

151.jpg

04. 先复制关于我们页面guanyu.html的标题、关键词、描述的代码到我们这个caipinlist.html相应的位置

152.jpg

153.jpg

154.jpg

05. 然后看一下这个页面调用的CSS及JS文件是不是和我们已经本地话的文件一致,如果都是我们已经本地化的文件就直接修改目录就可以了

// 头部的文件
<link rel="stylesheet" href="/Theme/v014/static/css/reset.css" />
<link rel="stylesheet" href="/Theme/v014/static/css/swiper.min.css" />
<link rel="stylesheet" href="/Theme/v014/static/css/index.css" />
<link rel="stylesheet" href="/Theme/v014/static/css/product.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
// 尾部的文件
<script src="/Theme/v014/static/js/respons.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="/Theme/v014/static/js/product.js"></script>

修改为

// 头部的文件
<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" />
<script src="/js/jquery.js"></script>
// 尾部的文件
<script src="/js/respons.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script src="/js/product.js"></script>

155.jpg

156.jpg

06. 替换公共模板头部head.html 和尾部foot.html的代码

157.jpg

158.jpg

好了,现在基本上我们caipinlist.html的框架代码算是修改好了,我们下一讲说一下替换内部代码标签的教程

很赞哦! (6)



网站推荐 TOP 01

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

站点信息

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