1. Self-recommendation page
Topic:
Write code to achieve the page effect shown in Figure 3-12. Design requirements: the thickness of the horizontal dividing line at the top of the page is 1px and the color is #000fff, and the thickness of the horizontal dividing line at the bottom of the page is 1px and the color is #00ffff.
Pay attention to the text structure on the picture: two dividing lines, the middle of the dividing line is the text, and the text content pays attention to the first line indentation and line break of the paragraph. These are the starting practices that need to be paid attention to when writing website code
:
Knowledge points:
1. If you want to create a new html document on your desktop, you can choose to create a new document and change the suffix of the document to html. When changing the suffix name, pay attention to whether your computer has set the hidden suffix option (you can view it in "File-View-Options-View"). If you set the hidden file suffix option, changing the file suffix will change Fail;
2. In Sublime Text software, use "!" + "Tab" keys to automatically generate HTML document structure;
3. <em> is italic setting, italic setting + centering setting, pay attention to the writing position, centering is set to follow the paragraph The settings are placed together;
4. In order to make the writing interface tidy when writing a paragraph, you can adjust the paragraph layout yourself, and it will not be affected when it is displayed on the website.
5. Pay attention to the usage and location of various marks.
Effect picture:
2. Application of title word mark and text mark
Topic:
Design the Web page according to the following requirements, as shown in Figure 3-13. The requirements are as follows:
(1) Set the title "Mathematics equation" for the title word No. 3, the style is defined by the style mark, and the format is font size 24px, color red, and text aligned in the center;
(2) A width of 80%, size of 2px, color It is a blue horizontal line;
(3) Equation 1: 2x 2 +3x=9;
(4) Equation 2: x 1 + x 2 =10;
style mark prompt: insert style mark in the head, defined as follows:
Note: Main
Practice of training style tags :
knowledge points:
pay attention to the usage of head style tags
Effect picture:
