Web design experience sharing; Animations of Web page without CSS

Article Introduction: Web design experience sharing; No CSS when the page is animations.

First on the example, the Home hotel module's effect chart is as follows:

The code structure is as follows:

<dl>
< dt> hotels </dt>
< dd> Beijing </dd>
< dd> Shanghai </dd>
</dl>
< ul>
< li> Beijing hotels list </li>
< li> Beijing hotels list </li>
< li> Shanghai Hotels list </li>
< li> Shanghai Hotels list </li>
</ul>

This structure has no problem with the display, and the following list changes when you switch cities. But when the CSS can not load the display effect on the comparison of the Cup, screenshot as follows:

The next is a list of other cities, too long and the pictures are not truncated. What we need at least is that the city is shown together with its own list, visually belonging to the same module, meaning that it is reproduced in the code structure according to the business logic:

<dl>
< dt> Beijing </dt>
< dd>
< ul>
< li> Beijing hotels list </li>
< li> Beijing hotels list </li>
</ul>
</dd>
</dl>
< dl>
< dt> Shanghai </dt>
< dd>
< ul>
< li> Shanghai Hotels list </li>
< li> Shanghai Hotels list </li>
</ul>
</dd>
</dl>

So when the page appears no CSS when the display effect is more close to the real demand:

Here is not far from success, the next question is how to use the current DL, DT, DD to achieve the desired visual effects.

1. first give all DL of the outer div plus style: position:relative, and then set the DD Position:absolute, so that the list can be separated from the DL text stream, switch lists to ensure that they appear in the same location;
2. City Horizontal display, at this time set DL for floating float:left, and then the refresh really cross the past. But now the smile is too early, do not forget the evils of the IE6 to be compatible: to the DT set floating and change the elements, otherwise there will be excess space float:left; Display:inline; And then the refresh is OK;
3. Add a point why to add UL in DD, this depends on the structure of the page, each in addition to the title and price, there is a need to convert the RMB symbol ¥, if the direct use of a link to a large volume of the line of the block elements, the performance of the comparison. Initially you want to use more than one DD, but because the list of reasons for absolute positioning overlaps, the replacement scheme is replaced.

The idea is that when I first came into the company, I heard from Brother Johnny, that what the three-layer separation of dongdong, the morning to complete a change about the home page just see this module can be optimized, refactoring this thing cost too much, I decided to see a change, and then secretly passed up, ha ha, evil laughter ~ ~ ~ Words Visual editing window is broken , by imagination Typesetting is really hard ah, this time will not add color to the text.