Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use HTML+CSS to make happiness cake home page and Baidu home page", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use HTML+CSS to make happiness cake home page and Baidu home page"!

First of all, I downloaded the teaching video and picture material, source code and so on of the static page of Qianfeng Education. I watch an episode of the video first, then turn off the video and type the code myself. Then compare it with the source code to see where the code is written differently from the source code and whether there is room for improvement. When I get closer to the back, I don't really rely on video teaching anymore. If I see the style, I'll probably know how to do it.

Step 1: change the common.css given in the tutorial to a standard format, check the tags you don't understand or remember clearly, and sort them out.

Html:

Dl,dd,dt: define the list (definition list), define the items in the list, explain the project

CSS:

Padding,margin: the inner and outer margins of the box model. (very important)

The display:display attribute specifies the type of box that the element should generate.

Block means that the element will be displayed as a block-level element with a newline character before and after it. (it seems to be quite common, used to separate some elements up and down)

Clear: which side does not allow floating elements.

Height: the height of the element.

Visibility: whether the element is visible.

Overflow: what happens when the content overflows the element box.

Zoom: scaling factor. 1 or 100% means no scaling.

Outline: contours.

Vertical-align: the way pictures align text. (align above or below a line)

Input:xx (- input)-placeholder for the placeholder:xx browser. (this seems to be a little complicated. I suggest a specific analysis of the specific problem.)

Position: fixed, absolute, etc. It is best to use it with top, left, etc.

CSS selector:

: after: insert 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 it again according to your own understanding. Finally, the specific value is changed according to the value in the tutorial.

New knowledge points:

1. Add margin-top to the child element and overflow: hidden to the parent element (this is really important! Otherwise, when you zoom the page, the peer's content may be squeezed into several lines (the problem with the header) or swallowed (the problem with the image below).)

2. NTH-child (n): select the child element of its parent element. (regardless of category)

3.nth-of-child (n): select the number of child elements of this type of its parent element. (the difference from the previous one is whether it is classified into types or not! If you misunderstood it before, remember it well)

4. After setting a to display:block, its parent element, if it has text-align, will be centered within the width of the block. So the width can't be adjusted randomly.

5. If a single space is needed between successive elements of the same line (such as a connected span), enter is fine.

6. To style a small piece of content (such as a border or something), first make it into a small piece, block or inline-block.

Deeply learned idea: to split the page into many boxes, each part is a box. A box, a box.

Then add content inside each box, so that the style is more convenient.

Sometimes a line of content appears out of order, so it's better to integrate them into a span.

Step 3: start the list page according to the tutorial. Also listen to it again and then type the code with your own understanding, and then modify it at last.

New knowledge points:

1. Set box-sizing:border-box to make the border size of the div box fixed.

Otherwise (it should be content-box), the size of the div box is the size of the internal element, without the inner and outer margins and borders.

two。 Fascinated: img is an inline replacement element, a kind of inline element. So you can't use margin:0 auto in the middle, you can use text-align:center instead.

But it is also a special inline element, so it has attributes such as height, width, padding, margin, and so on.

3. Pseudo elements: before and: after: apply these styles before (after or) the element. (it can be used to remove floats by adding pseudo elements of after to the parent element) (or it should be no problem to add clear to footer as mentioned above in W3school)

Attach the source code and picture material of my own happiness cake case:

Practical case of Happy Western Cake (uploaded on CSDN Forum)

Baidu homepage production

Baidu's home page production does not refer to any teaching and materials, according to the ideas learned before, their own understanding of the web page is divided into multiple blocks (div), and then first write div structure and comments, and then fill in the html content, and finally add CSS style to each part. Because their own things are relatively miscellaneous and not very efficient, coupled with often excessive entanglement in some minor details, I have been doing it off and on for about a day. According to the online recommendation to buy a fish book "CSS authoritative Guide", not yet, I hope that the more official authority of this textbook can solve the problem that I often struggle in some style details. (I hope the cases in it are rich enough to solve my doubts)

Do some really do not know how to achieve the place (such as the upper right corner of the air quality of the small text), I will look up Baidu s home page source code, and try to figure it out.

In the production process of Baidu home page:

New problems and knowledge discovered:

1. When both the parent and subclasses have a class selector, the same attribute seems to take precedence according to the property value in the parent element's class selector.

But when both the grandfather element and the parent element have class selectors, they seem to come in order.

I hope the authoritative guide to CSS can help me answer my questions.

I checked the source code of Baidu to know:

two。 The text background color can also be adjusted with border-radius. Adjust the inner margin with padding, the train of thought is the same as that of the picture. (how did I come up with the picture, but not the text? confused)

3. You can use inline-block inline block elements to adjust the width and height of rows, and so on.

4. You can set the min-width of header to minimize the size of the page, after which you need the left and right scroll bars instead of the blocks on both sides of the header. (it is not easy to squeeze words into a lump and cause typesetting problems.)

5. You can use outline to handle the ugly borders when input is selected.

The difference between 6.fixed and absolute: the blocks of fixed are pinned relative to the window.

Thank you for your reading, the above is the content of "how to use HTML+CSS to make happiness cake home page and Baidu home page". After the study of this article, I believe you have a deeper understanding of how to use HTML+CSS to make happiness cake home page and Baidu home page. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.