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

This article will explain in detail how to find BUG in HTML+CSS. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Many partners who have just entered the front-end industry are prone to errors when writing pages. At this time, many partners will check line by line where there is something wrong with their code, or carefully compare the online code, so it is a waste of time to check the errors. And trapped in their own thinking can not see where the error is.

Next, I will teach you how to quickly find errors and solve problems. In fact, our browser has a console and some aids to help us find errors. Here I use the console of Chrome (Google browser) to find errors. There are two ways to open the console. One is to right-click in the browser and select check, as shown below.

On the other hand, call up the console directly through the shortcut key F12 (if F12 doesn't work, you can try Fn+F12).

All right, with all this in mind, let's take a look at what the errors are and how to view them on the console to make changes.

First write a relatively simple effect, write a div tag, write a wide 200px to the div, high 100px, the background color is pink

HTML structure

CSS style

Div {width: 200px; height: 100px; background-color: pink;}

It's what it looks like. It's perfect. But the effect of the implementation may be as follows:

When there is a problem, do not panic. Check through the console to see if the css style has been introduced successfully. As mentioned above, there is a html tag on the left side of the console and a css attribute on the right. Let's first select div to see if there is a css attribute written on the right.

1. When you see the css on the right, there is no wide and high background color that we wrote. One possibility is that our css has not been introduced successfully. If you are using an external style sheet, you can check whether the path you wrote is correct. If the path is wrong, a red X will be displayed on the console, as shown below:

2. Another possibility is that the css modification of this tag is preceded by punctuation. As shown below:

3. If we use class selector, id selector or other selectors here, we should pay attention to the use of selectors and the setting of names. Otherwise, it will also appear that can not show our css modification.

4. Well, looking down, if the css still doesn't come out, check to see if the word is spelled correctly and whether the attribute and attribute value match. If the word is wrong, or the attribute and attribute value do not match, then a yellow exclamation mark will appear in front of the css attribute of the console, and the wrong attribute will be crossed out, as shown in the following figure. At this time, you need to check the words and attributes.

5. When we navigate the web, we will border the navigation items. The code is as follows:

HTML structure:

Home page

Home page

Home page

Home page

Home page

CSS style:

* {margin: 0; padding: 0;}

Ul,li {list-style: none;}

. Nav {width: 505px; margin: 50px auto;}

. Nav li {

Float: left

Text-align: center

Line-height: 30px

Width: 100px

Height: 30px

Background-color: # ccc

Border-left: solid 1px # 333

}

. Noborder {border-left: 0;}

We want to cancel the frame of the first or last one, we add the class name to the first or last li and cancel the frame, and we find that it cannot be canceled, and it is right to check the attribute and attribute value once, and it is also shown in the console, but it is only crossed out (note that it is only crossed out, but there is no yellow exclamation mark). At this time, it may be that the weight of the selector is not enough.

So we can increase the weight by including multiple-choice questions, find the class name of the parent element, and add it to the front.

Css code modification

. Nav .noborder {border-left:0}

That's the solution.

Finally, let's sum up:

There is no corresponding CSS attribute. Check the introduction path or see whether there is more punctuation before the selector.

The console has an exclamation point and is crossed out, misspelled words or mismatched attribute values

The control console appears that the attribute is crossed out but there is no exclamation point, and the weight is not enough.

If the front-end partner encounters the above mistakes, you can try to solve them in the above way. These problems are generally common, and you can avoid them after several times of solution.

This is the end of the article on "how to find BUG in HTML+CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.