• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

[转]淘宝sdk——入门实战之footer.php制作

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文转自：http://www.cnblogs.com/huige728/archive/2012/06/13/2548089.html

这里讲的和header.php（1）中差不多，可以看看，好了，下面我说说怎么弄吧。

第一，我们要在后台新建模块（太简单了我就不说怎么建了，呵呵），这里我们就建一个footer的模块。

第二，在footer.php文件中载入我们的刚刚建好的模块

?
1
2
3
4
5
6
7
8
9
<div class="layout grid-m">
    <div class="foot_modules J_TRegion">
        <?php $foot_modules = array(
               array('id' => 'footer', domId => "footer_01"), // 950页面底部模块,这里也可以做个通栏效果，在上篇中讲了
             );
         echo include_modules('foot_modules', $foot_modules);//引号里是坑名，后面是变量名
        ?>
    </div>
</div>

 第三，写好模块的结构（这里结构比较简单，很清晰，我就直接嵌套php代码了，呵呵，偷懒下，这里是直接文本输出的，没有循环什么的东西，很简单）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>
    <div class="footer">
        <div class="footer01">
            <ul>
                <li class="ab">
                    <strong><a href="<? echo $_MODULE['link_1'];?>" target="_blank"><? echo $_MODULE['text_1'];?></a></strong>
                    <p><? echo $_MODULE['desc_1'];?></p>
                </li>
                <li class="ac">
                    <strong><a href="<? echo $_MODULE['link_2'];?>" target="_blank"><? echo $_MODULE['text_2'];?></a></strong>
                    <p><? echo $_MODULE['desc_2'];?></p>
                </li>
                <li class="ad">
                    <strong><a href="<? echo $_MODULE['link_3'];?>" target="_blank"><? echo $_MODULE['text_3'];?></a></strong>
                    <p><? echo $_MODULE['desc_3'];?></p>
                </li>
            </ul>
        </div>
    </div>
</div>

 第四，结构弄好了，我们就要去写下，我们要的功能了，打开module.xml文件。

<?xml version="1.0" encoding="GBK" standalone="yes"?>
<module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <id>footer</id>
    <name>脚部</name>
    <file>footer.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>页面底部模块，可自定义文字内容</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="链接1┏" formType="text" readonly="false" description="┓链接1" ptype="text" name="link_1">
            http://www.taobao.com
        </param>
        <param label="标题1┣" formType="text" readonly="false" description="┫标题1" ptype="text" name="text_1">
            温馨提示
        </param>
        <param label="描述1┗" formType="text" readonly="false" description="┛描述1" ptype="text" name="desc_1">
            购买后如发现质量问题，请及时反馈，不要直接差评，否则不予任何售后服务。
        </param>
        <param label="链接1┏" formType="text" readonly="false" description="┓链接1" ptype="text" name="link_2">
            http://www.taobao.com
        </param>
        <param label="标题1┣" formType="text" readonly="false" description="┫标题1" ptype="text" name="text_2">
            关于色差
        </param>
        <param label="描述1┗" formType="text" readonly="false" description="┛描述1" ptype="text" name="desc_2">
            所有宝贝均为实物拍摄，因显示器不用显示不同，对色彩要求高的情慎拍。
        </param>
        <param label="链接1┏" formType="text" readonly="false" description="┓链接1" ptype="text" name="link_3">
            http://www.taobao.com
        </param>
        <param label="标题1┣" formType="text" readonly="false" description="┫标题1" ptype="text" name="text_3">
            关于退换货
        </param>
        <param label="描述1┗" formType="text" readonly="false" description="┛描述1" ptype="text" name="desc_3">
            请您在收到商品后，咨询检查，确认没有问题后签收，如质量问题，本店承担运费调换。
        </param>
    </parameters>
</module>

弄好了后，我们当然也不能少了css这个样式啊，不然不漂亮。

/*脚部内容*/
.footer{width:950px;}
.footer01{width:928px;padding:10px;border:#e6e6e6 solid 1px;border-top:#ff8808 solid 4px;margin-top:10px;clear:both;text-align:left;}
.footer01 ul{height:70px;}
.footer01 ul li.ab{float:left;background:url(../images/footer/foot.gif) no-repeat left top;width:250px;height:60px;padding-left:58px;}
.footer01 ul li.ac{float:left;background:url(../images/footer/foot.gif) no-repeat left -90px;width:250px;height:60px;padding-left:58px;}
.footer01 ul li.ad{float:left;background:url(../images/footer/foot.gif) no-repeat left -180px;width:250px;height:60px;padding-left:58px;}

这样，我们就大功告成了，最后我们看看效果图吧

还不错吧，对了还要补上我们用的的素材图片

这里讲的和header.php（1）中差不多，可以看看，好了，下面我说说怎么弄吧。

第一，我们要在后台新建模块（太简单了我就不说怎么建了，呵呵），这里我们就建一个footer的模块。

第二，在footer.php文件中载入我们的刚刚建好的模块

?
1
2
3
4
5
6
7
8
9
<div class="layout grid-m">
    <div class="foot_modules J_TRegion">
        <?php $foot_modules = array(
               array('id' => 'footer', domId => "footer_01"), // 950页面底部模块,这里也可以做个通栏效果，在上篇中讲了
             );
         echo include_modules('foot_modules', $foot_modules);//引号里是坑名，后面是变量名
        ?>
    </div>
</div>

 第三，写好模块的结构（这里结构比较简单，很清晰，我就直接嵌套php代码了，呵呵，偷懒下，这里是直接文本输出的，没有循环什么的东西，很简单）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>
    <div class="footer">
        <div class="footer01">
            <ul>
                <li class="ab">
                    <strong><a href="<? echo $_MODULE['link_1'];?>" target="_blank"><? echo $_MODULE['text_1'];?></a></strong>
                    <p><? echo $_MODULE['desc_1'];?></p>
                </li>
                <li class="ac">
                    <strong><a href="<? echo $_MODULE['link_2'];?>" target="_blank"><? echo $_MODULE['text_2'];?></a></strong>
                    <p><? echo $_MODULE['desc_2'];?></p>
                </li>
                <li class="ad">
                    <strong><a href="<? echo $_MODULE['link_3'];?>" target="_blank"><? echo $_MODULE['text_3'];?></a></strong>
                    <p><? echo $_MODULE['desc_3'];?></p>
                </li>
            </ul>
        </div>
    </div>
</div>

 第四，结构弄好了，我们就要去写下，我们要的功能了，打开module.xml文件。

<?xml version="1.0" encoding="GBK" standalone="yes"?>
<module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <id>footer</id>
    <name>脚部</name>
    <file>footer.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>页面底部模块，可自定义文字内容</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="链接1┏" formType="text" readonly="false" description="┓链接1" ptype="text" name="link_1">
            http://www.taobao.com
        </param>
        <param label="标题1┣" formType="text" readonly="false" description="┫标题1" ptype="text" name="text_1">
            温馨提示
        </param>
        <param label="描述1┗" formType="text" readonly="false" description="┛描述1" ptype="text" name="desc_1">
            购买后如发现质量问题，请及时反馈，不要直接差评，否则不予任何售后服务。
        </param>
        <param label="链接1┏" formType="text" readonly="false" description="┓链接1" ptype="text" name="link_2">
            http://www.taobao.com
        </param>
        <param label="标题1┣" formType="text" readonly="false" description="┫标题1" ptype="text" name="text_2">
            关于色差
        </param>
        <param label="描述1┗" formType="text" readonly="false" description="┛描述1" ptype="text" name="desc_2">
            所有宝贝均为实物拍摄，因显示器不用显示不同，对色彩要求高的情慎拍。
        </param>
        <param label="链接1┏" formType="text" readonly="false" description="┓链接1" ptype="text" name="link_3">
            http://www.taobao.com
        </param>
        <param label="标题1┣" formType="text" readonly="false" description="┫标题1" ptype="text" name="text_3">
            关于退换货
        </param>
        <param label="描述1┗" formType="text" readonly="false" description="┛描述1" ptype="text" name="desc_3">
            请您在收到商品后，咨询检查，确认没有问题后签收，如质量问题，本店承担运费调换。
        </param>
    </parameters>
</module>

弄好了后，我们当然也不能少了css这个样式啊，不然不漂亮。

/*脚部内容*/
.footer{width:950px;}
.footer01{width:928px;padding:10px;border:#e6e6e6 solid 1px;border-top:#ff8808 solid 4px;margin-top:10px;clear:both;text-align:left;}
.footer01 ul{height:70px;}
.footer01 ul li.ab{float:left;background:url(../images/footer/foot.gif) no-repeat left top;width:250px;height:60px;padding-left:58px;}
.footer01 ul li.ac{float:left;background:url(../images/footer/foot.gif) no-repeat left -90px;width:250px;height:60px;padding-left:58px;}
.footer01 ul li.ad{float:left;background:url(../images/footer/foot.gif) no-repeat left -180px;width:250px;height:60px;padding-left:58px;}

这样，我们就大功告成了，最后我们看看效果图吧

还不错吧，对了还要补上我们用的的素材图片

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
mac下编译php的openssl发布时间：2022-07-10
下一篇：
php使用SImpleXMLElement把xml和数组互转发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap