Some problems that are easily overlooked in website construction

I have long wanted to write this article, but it is just because I am too lazy to continue. I mainly want to talk about several problems that are easy to ignore in the production of web pages. I don't have any advanced tutorials, But I have accumulated problems in my daily work and study, one is to remind beginners, and the other is to help them make a transcript. After all, when you are older, your memory is poor...

1. Let you take it for granted and give you some color to see

This problem is ignored by many people, from personal websites to portals. If the Background of your website is white, do you still remember to write the Background-color: # ffffff code in CSS? I bet most people won't! This is not because everyone is lazy, but because it is completely neglected. Why? In most cases, the default background color of various software running on Windows OS is white, which includes the IE browser, therefore, when the background color of a website is white, many web page makers ignore the background color settings. If they do not set the background color, they cannot see it. But do not forget that Windows supports system theme replacement from XP. Many third-party theme changes the default settings of the system, including the background color settings, if the background color of the page is not set forcibly, the page will display the content based on the background color of the current browser. The result is that the website's aesthetics is greatly reduced. Here is an example of Netease, which everyone is familiar, the following is what we looked like when browsing on our machine. Because we recently changed a set of Vista theme styles, the background color of the browser became light gray.

Take a closer look at Netease's Logo. Can you see it? Yes, the background of the Logo is white, but the background color next to it is gray. In other words, the background of Netease's entire page is originally white, this is not visible on the premise that the browser background is white, but as it is now, it is "missed. Not only Netease, but many portal sites are like this. I will not give an example to illustrate the importance of Background-color settings. Therefore, whatever the background color of your website, please remember to set it, even if it is white!

2. Stand upright! Left ~~~ Qi

We all know that the default horizontal align of a Table is left-aligned. Setting align = "left" is the same as setting it to no effect, so many people do not set this attribute, I used to do the same. However, in some special cases, IE considers the default left alignment as center alignment, leading to page layout problems, although I cannot even clarify the specific circumstances, this situation absolutely exists. Therefore, you must habitually set the align attribute of the table during page creation, do not skip this step. This is definitely beneficial to the performance of the page.

3. cell width-invisible killer

I wonder if you have ever met this situation. If you set the Left align for a cell, you find that the text in the cell does not apply this attribute, instead, the text is displayed in the center. No spam code is found at both ends of the text, but the text position cannot be changed in any case. Depressed? At that time, I was very depressed. Later, I found that the Width attribute of the cell was at a strange time. After I deleted it or reset it, the problem was solved, when you encounter the same problem, check the Width settings of the problematic cell. I believe you will find a solution.

4. Do not disappear when the scroll bar is killed.

Sometimes for some personalized needs, some people like to hide the browser's scroll bar, this effect is easy to do, but sometimes you will find that the code is not a problem at all, in addition, the browser used for viewing is not non-IE kernel type, but the hateful scroll bar will not disappear! In addition, many of these problems occur on Web pages produced by visual editing software such as DW. What is the reason? In fact, the reason is that you can view the source code of the page in the header code of the page. You will find two similar codes at the top:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

These two statements are called the DOCTYPE declaration, which is short for Document Type to describe the version of XHTML or HTML you are using. To put it simply, these two sentences of code are an essential part of creating a standardized page. The browser interprets and presents the logo of your page based on the document type you have defined. In other words, if you define an incorrect DOCTYPE, your logo and CSS will not take effect. The overflow, overflow-x, and overflow-y attributes that define whether a scroll bar is displayed are not accepted by the webpage standards. Therefore, if DOCTYPE is defined at the top of your page, the three attributes are invalid code. The solution is to delete the DOCTYPE declaration in the header. Although the standard is increasingly popular today, this is not recommended.

5. Comments

Writing comments for code is a good habit, but sometimes some problems occur, such as writing Chinese comments for CSS.
If you write Chinese comments for your own CSS, some codes may become invalid without reason in some special circumstances (such as server-side support and the program type used by the page, I have met this problem several times, so before the problem is solved technically, do not write comments for CSS, developing good naming habits is enough for others to understand the meaning of their code. Even if you must write it, please write it in English... what? Pinyin !!! Please try it in pinyin to make sure you don't even understand what it is written in a week.

6. God, please shine ~~~

This problem is suspected of being full of resources, but many people have asked about it, so it will also be released. It is about the Glow Filters of CSS. The effect of this filter is to make the luminous effect on the edge of the content of the surrounding object. It is also called the stroke effect, which is mostly used in the performance of text, however, many people did not find the desired effect after applying the filter, most of the reason is that the filter is directly applied to text, you need to know that the filter has no effect on the text. Why can you still make luminous text? That's because it must be applied to containers where text is stored, such as tables. Therefore, if there is no effect, check whether the error is correct.

Another problem with the filter is that, although the luminous effect is there, it seems that the circle halo on the text is cut, and it is missing. This is because the height of the container for the text to be placed is lower than the luminous range of the filter, there are three solutions:

1. Reduce Font-Size
2. Increase the Height value and Height.
3. Reduce the Strength value

7. Thinking...

In fact, these problems are not a great big problem, but the smaller the problem, the easier it is to be ignored. I hope these lessons will help you, even if one of them has benefited me a long time.