Web page detail Design: The design method of price mark in webpage

Article Introduction: the details determine the success or failure-the price of the performance form.

Visiting the Pudong Apple Store two weeks ago, watching the MacBook Air tangle with a few months ' worth of money, the price was long:

Thanks to MH's professional sensitivity--whether you can transplant the print layout to the Web platform. We analyze the various price signs we see in our lives:

Compare the price identification in the Web application:

A common feature is that the price of the currency symbol is very small, or even visually can be ignored, and highlight the specific amount.

Looking at the performance of the currency symbol, take the renminbi as an example, the single modification of the font there is such a big difference:

¥ (Arial font) * Note: double line correct
¥ (Verdana font)
¥ (Courier new font)

Here need to emphasize again: the original form of RMB symbol is double line, many users are affected by Taobao, and repeatedly to the Ctrip, I sigh: XDJM, the single line is because the keyboard input method of the problem, caused a lot of people misunderstanding, In fact, it is the small Japanese currency symbol (The reason why I was a child of the education of Japan), the actual code needs to use ¥ Escape is correct, just like copyright ©, also need to use & copy; to escape. In addition Taobao symbol is merged in the background, Ctrip related to the international currency symbol more, in order to avoid loading the picture to the user to create a burden and choose to display directly, the business is different here do not do comparative analysis.

In contrast to the promotion of new representations within the Department, the code implementation is the simplest:

<span class= "Base_price" >
<dfn>& yen;</dfn>/* To prevent the code is resolved to the renminbi symbol source code added b tag, please ignore the * *
<strong>10640</strong>
</span>

Some students asked why not <sup>, because the old version of the code <dfn> involved major channels, the workload is huge, in addition <sup> need hack IE: *font-size:14px; It's not <dfn> convenient.

. base_price {color: #E56700;}
. base_price DFN {margin-right:2px; vertical-align:3px; font:normal 12px Arial,simsun;}
. base_price strong {font-size:16px;}

The results are compared as follows:

The current travel resort channel Large font price expression has been modified, air tickets and hotels are still in development ~ ~ ~