According to the front-end learning path recommended by Wang Xiaohei on Zhihu, AFTER learning HTML and CSS by myself, I began to try to make small static page projects in practice.
Happy cake home page
First of all, I downloaded thousands of feng education on the Internet to provide happiness cake official website static page teaching video and picture materials, source code, etc.. I watch a video, and then I close the video and I type the code myself. And then compare with the source code to see where their code writing and source code is different, whether there can be improvements. When it comes to the back, in fact, it is not very dependent on video teaching, and you can probably know how to do it when you see the style.
Step 1: Change the common.css from the tutorial to a standard format, and look up any tags you don’t understand or remember.
Html: DL, DD, dt: Definition List, defines the items in the list, explains the items
CSS: padding, margin: inside margin of the box model. (Very important) Display: The display property specifies the type of box the element should generate. A block means that the element is displayed as a block-level element, preceded by a newline character. Clear: Which side does not allow floating elements. Height: The height of the element. Visibility: Whether the element is visible. Overflow: What happens when content overflows the element box. Zoom: zoom factor. 1 or 100% means no scaling. Outline: Vertical-align: indicates the way an image aligns with text. Input: xx (-input) -placeholder: xx browser placeholder. A: I don’t know what to do. B: I don’t know what to do. It is best to cooperate with top, left, etc.
CSS selector: :after: Inserts content after the content of each X element. (Used with: content: inserted content)
Step 2: Follow the tutorial to start the home page. After listening to each tutorial, type again according to your own understanding. Finally, the specific value according to the value of the tutorial. 1. Add margin-top to the child element and overflow: hidden to the parent element. Otherwise, when you zoom in and out of the page, you might have several lines of content crammed together (as with the header in the parent test) or some of the content swallowed (as with the image below in the parent test). 2. Nth-child (n) : Selects the number of children of its parent element. 3. Nth-of-child (n) : Selects the number of child elements of this type that are the parent element. (And on a difference lies in whether points type! 4. After setting a to display:block, its parent element, if text-align, will be centered within the width of the block. So the width can’t be messed up. 5. If you need a single space between consecutive elements (such as a span), use carriage return. 6. To style small pieces of content (such as borders), make them a small block, block or inline-block.
Lesson learned: Break up your page into boxes, each part of which is a box. Box within box. Then add content inside each box to make styling easier. Sometimes lines get out of order, and it’s better to consolidate them into one span.
Step 3: Follow the tutorial to start the list page. The same first listen again with their own understanding of the code, and finally to modify.
1. Set box-sizing:border-box to the border size of the div box. Otherwise (content-box), the size of the div box is the size of the inner element, with no margins or borders. 2. Confusing: IMG is an inline replacement element, a type of inline element. Margin :0 auto; text-align:center But it is also a special inline element, so it has attributes like height, width, padding, and margin. 3. Pseudo-elements :before and :after: Apply these styles before (or after) the element. This can be used to add after to the parent element to clear the float.
Attached is the source code and picture material of the happy cake case completed by myself: The happy cake actual combat case (uploaded on CSDN forum)
Baidu home page production
Baidu’s home page production is no reference to what teaching and material, according to the ideas learned before, their understanding of the web page is divided into multiple blocks (DIV), and then write div structure and annotations, and then fill in THE HTML content, and finally to each part of the CSS style. Because their own things are relatively miscellaneous efficiency is not very high, plus often in some details of the place too tangled, intermittent about a day. According to the online recommendation to buy the fish book “CSS authority guide”, has not arrived, I hope to compare the official authority of this textbook can solve the problem that I often in some style of details. (I hope the cases inside can be rich enough to solve my doubts) do some really do not know how to achieve the place (such as the air quality situation in the upper right corner of the small text), I will go to Baidu S home page source, and try to figure out.
In the process of making baidu home page:
New problems and new knowledge discovered: 1. In cases where both parent and child classes have class selectors, the same attribute seems to take precedence over the attribute value in the parent element’s class selector. But when both the grandparent and the parent have class selectors, it seems to be in order. Hopefully the definitive GUIDE to CSS will help me out.
2. Text background color can also be used to adjust the shape of the border-radius. Use the padding to adjust the inner margin, just like in the image. (I can figure out the picture, but not the text, Puzzle)
3. Inline -block elements can be used to adjust the width, height, etc.
4. You can set the min-width of the header to minimize the size of the page, and then use the left and right scroll bars instead of indent the blocks on either side of the header. (It’s also not easy for words to pile up and cause typography problems.)
5. You can use outline to handle ugly borders when selecting input.
6. The difference between fixed and absolute: Fixed blocks are fixed relative to the window.
Attached is the source code and picture material of Baidu home page completed by myself: Baidu Home page combat case (uploaded on CSDN forum)