An example of the change in dedecms template layout

Reprint please indicate is quoted in http://blog.csdn.net/chenyujing5678

Welcome to the Brick!

An example of the change in dedecms template layout

the layout of the template of effect change:

Changed layout:

ii. Methods of modification 1, view the original code

In Index.htm, we open with Utraledit to see that the whole lord and one table,table are divided into two parts:

<TD id= "ILeft" >, <td id= "IRight" >

The corresponding effect is as follows:

Let's analyze the contents of the <TD id= "ILeft" > block, which contains four parts:

2. Find out why

To achieve our results, we must change the code in the table. Our goal is to put the first element of <TD id= "IRight" on the top of the table.

3. Start

The target Code

<div style= "Background:url ({dede:global.cfg_cmspath/}/templets/baobei/images/channel/bgimg0100.jpg) no-repeat 17PX 9px; Text-align:left; " ></ Div>

Move to table below:

Third, summary 1, the use of the table

From this example we see the code in the layout in the table, which adjusts the width dynamically with the size of the <tb> at the beginning of the grid, and this call is primarily. css files to control.

Eg: The class field shown in the following figure

2, learn the div in the use of style= "background:url to define this div background method, and then in the foreground with SRC to join the picture."

<div style= "Background:url ({dede:global.cfg_cmspath/}/templets/baobei/images/channel/bgimg0100.jpg) no-repeat 17PX 9px; Text-align:left; " ></ Div>

3, Dedecms code to achieve the following effects:

As shown in the code in the following figure:

3, 1 class= "Ipro_title1" used to display the title "Product Center"

Its key content is the class= "ipro_title1" field, which reads as follows:

Haha, define Css:.ipro_title1. Left

At the time of use is

3, 2 <div class= "Ipro_detail" to display the details of each product

As shown in the figure above, it is also a table

It seems that the template to write the content of the dead, in the actual requirements of our flexible additions to the content can be displayed, it seems to be changed here.