dedeCMS模板布局的改变的一个例子

 

 转载请标明是引用于 http://blog.csdn.net/chenyujing5678 

欢迎拍砖!

 

dedeCMS模板布局的改变的一个例子

 

一、效果变化模板的布局：

更改后的布局：

 

二、修改方法

1、查看原有的代码

在index.htm中，我们用utralEdit打开看到，整个主而一个table，table下分两部分：

<td id="ileft">、<td id="iright">

对应的左右效果如下：

我们来分析一下<td id="ileft">块的内容,含有四部分：

 

2、找出原因

要达到我们的效果，肯定得改变table里的代码。我们的目标是把<td id="iright">下的第一个元素放到table的最上面

 

3、开始动手

把目标代码

<div style="background:url({dede:global.cfg_cmspath/}/templets/baobei/images/channel/bgimg0100.jpg) no-repeat 17px 9px; text-align:left;"><img src="{dede:global.cfg_cmspath/}/templets/baobei/images/topimg.gif" width="930" height="258" /></div>

搬到table下：

 

三、总结

1、table的使用

从这个例子中我们看到table中在布局中的代码，以<tb>开头定单元格大小时，是以里面大小来动态调节宽度的，而这种调用主要是.css文件来控制。

Eg:如下图所示的class字段

 

2、学习了div中使用style=”background:url来定义此div背景的方法，然后在前景中用src加入图片.

<div style="background:url({dede:global.cfg_cmspath/}/templets/baobei/images/channel/bgimg0100.jpg) no-repeat 17px 9px; text-align:left;"><img src="{dede:global.cfg_cmspath/}/templets/baobei/images/topimg.gif" width="930" height="258" /></div>

 

3、dedeCMS代码实现以下效果：

 

如下图中的代码所示：

 

3、1   class=”ipro_title1”用来显示标题”产品中心”

它的关键内容是class=”ipro_title1”字段,它的内容如下：

哈哈，定义CSS：.ipro_title1 .left

在用的时候是

3、2   <div class="ipro_detail"用来显示每个产品细节

如上图所示，它里面又是一个表格

看来做模板的人把内容给写死了，在实际当中要求我们灵活添加的内容能显示出来，看来这里得改一下。