Front-end on the third bomb-official code

After a few months has not been updated, said to be a feer and the author of the book, really very difficult, not the literature cell, write more flowery rhetoric, every time write up like a note journal, but record their front-end road, not step by step come over.

Okay, nonsense, say, on an article on how to use the Markman PSD file labeling, Next, everything is ready, only to the size of the code slightly ~

, this is the last time the callout was completed, but my habit is that when I get the map completed, I will not start writing immediately, my habit is to think about the specific layout, and then see if there is anything particularly difficult to achieve in the place, is called AX.

For this, my thoughts are divided into two parts,

In the first part of the other implementations are relatively simple, the only difficulty is that or the icon, in fact, my way is to cut the entire or icon to include the background color, and then use the I tag and background to locate it in the middle of the bottom position, the code is as follows:

<section class= "Area-1" >
    <p class= "line-1" > Merchant Sweep Code </p>
    <div id= "QRCode" ></div>
    <p class= "Line-2" >1231232312313</p>
    <p class= "line-3" > scan QR code use (merchant operation only) </p>
    <i class= "icon" ></i>
</section>

Since it is a mobile Web page, so it is natural to use the H5 tag, the advantage is that the semantic more obvious, convenient search engine analysis and search.

(or the implementation of the icon is done before, now think of a lot of room for improvement, if the background color changed, or the icon is not to re-cut one, so that the workload will increase. In fact, the best solution now is to cut the or icon separately, and then use the external padding to open the distance from the white background. ）

Then there is the second part of the code:

<section class= "area-2" data-id= "" ><!--Coupon ID here--
    <div> Click the button </div>
    <a href= "javascript:;" > Use coupons </a>
</section>

When we get here, the whole page is actually finished, and of course there are some interfaces reserved for the backend, some data caches and so on (Data-id and so on), but just getting started, I actually can only write a simple Web page, for page rendering mechanism, text document flow, CSS precedence, JS writing and so are not very clear, these follow-up will be one by one written in my front road, after all, is not a technical paste, just a record post, record me from the front-end rookie step-by-step to today's level (now I also very food, just touch the threshold of the front, do not spray me).

Front-end on the third bomb-official code