20171101_ task 2:0 Basic HTML and CSS encoding

Open Task Two example diagram on a face, although read the book about CSS, but do not know what attributes or elements to design the page. Then, after absorbing the experience of the task, the HTML-encoded part of the example diagram is written first. Overall, most of the structure is consistent with the example, but there are a lot of problems with the form section.

First, the HTML encoding Part I put the table in front of the form, but the effect of the page display is actually the form before the table. Forms and tables belong to block-level elements, which may involve the arrangement of block-level elements that need to be addressed.

Secondly, I don't know how the gray word part should be added to the structure, and the password input box I set does not have a default password.

I have looked for two copies of the work submitted by others before, and summarized the following:

1, two parts of the code are added in the head section:

2, two parts of the code, one is to choose the Style section in HTML to add a CSS style, a copy of the HTML link outside the style sheet. I personally think the former effect is closer to the example, but this is certainly not the way to add CSS to the problem caused by different. In order to write this summary open double screen, unexpectedly found that the previous copy of the window size compatibility better, the latter part of the form has been completely deformed. This question is mentioned in "Mastering CSS," and if there is time, I will summarize how to make the Web page compatible with the window.

(1) Examples of using style elements

Some of the elements and attributes involved:

(2) Example of using an external style sheet

and (1) uses similar elements and class styles, but involves many elements in the CSS3, such as header, Nav, and so on.

3, the use of Div can enhance the structure of the code, but the abuse will make structures more decentralized.

4. The gray reminder Word section uses the SPAN element.

The example addresses mentioned in the article are:

Example of using the STYLE element: https://github.com/DogIdea/baiduife/blob/master/html1.html

Effects page: https://dogidea.github.io/baiduife/html1.html

Examples of adapting to external style sheets: https://github.com/feiflyW/baidu-ife/blob/master/xiaowei/TASK2/style.css

Effects page: http://htmlpreview.github.io/?https://github.com/feiflyW/baidu-ife/blob/master/xiaowei/TASK2/task2.html

Tomorrow try to write it again, garbled problem is not solved, today downloaded brackets, study how to use later to see if you can find out their coding problems.

20171101_ task 2:0 basic HTML and CSS encoding