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

This article mainly introduces how to check what CSS style DIV is set, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

First, directly observe what style the div tag is set-TOP

For a relatively simple layout, we can analyze what style the place is set by observing the effect directly from the browser.

Simple and intuitive Analysis of what style Diagram is used in DIV CSS layout

Such as the image above, you can roughly analyze the corresponding styles, such as using background pictures, setting width, setting CSS height, font size, text to the left, distance to the left.

The above analysis is only an intuitive view of what CSS style can be used for analysis, but if you want to accurately analyze what the corresponding layout CSS style is set, you must look at the corresponding CSS code.

Really analysis can not be observed, then you need to look at the DIV corresponding to CLASS or ID corresponding to the style of the CSS selector.

Find the corresponding style of class or id in div-TOP

To analyze screenshots of corresponding DIV CSS cases

1. Tools: DIVCSS5 uses Google browser (Google Chrome) for analysis

2. Find and analyze the process of what CSS style is used in a certain DIV layout.

2-1: open the web page first

Open the www..com screenshot

2-2: view the source code

Right mouse button in the margin of the web page-"View the source code of the web page"

View the source code

The corresponding HTML source code will be automatically created and opened in the Google browser tab.

Screenshot of the HTML source code of the corresponding web page

2-3: find the corresponding place to find DIV

You can use the shortcut key "ctrl+F" to find where you want to find the DIV layout.

Find the corresponding content and obtain the corresponding DIV layout structure information by comparing the original web page content.

Find skills, use the browser's own search tool, and then compare the DIV content you are looking for with the original content of normal access, and find the definite DIV layout structure.

Find the corresponding content DIV layout content code here:

DIVCSS5

As you can see from the above code, you need to analyze which layout is laid out using the H2 tag, while using the class= "home".

Remember to name ID and CLASS, which is named "home" with class, and you can imagine that CSS must use the selector of ".home {.}".

2-3: open the CSS code

If CSS introduces an external CSS file using HTML, you need to open the external CSS file corresponding to this page in order to find the corresponding Id or Class name in the CSS code and get what CSS style is used in the corresponding DIV layout.

Find the link import external CSS file code

Open the CSS file: directly click the CSS file URL corresponding to link in Google browser, and open the CSS file in Google browser.

Open the corresponding CSS file and view the corresponding CSS code

2-4: use the lookup tool to find the corresponding CSS selector

Use the Google browser search tool, the shortcut key "Ctrl+F" to open the search tool, and copy the id or class name of HTML analysis into the search input box to find it. Here is to use "class=" home ". We know that class corresponds to CSS in lowercase half-corner English." Search for ".home" named at the beginning of the symbol

Find two corresponding CSS styles

The CSS code for the corresponding DIV CSS layout is as follows:

H3.home {height:24px;line-height:20px;font-size:14px;color:#000;text-indent:25px

Background:url (- left-li.gif) no-repeat 0 0}

H3.home a {color:#000;text-decoration:none}

According to the analysis, the corresponding CSS style is set as follows:

2-4-1: the height of H2 tag is set to 24px, the line height of Chinese characters above and below css is 24px, the font size is 14px, the font color is black "# 000", the indentation 25px of CSS is set, and the background is not repeated and tiled (you can see the corresponding icon from the practical effect of the web page)

2-4-2: set the font color of the hyperlink text in the corresponding h3 tag to black "# 000", and CSS remove the underline of the hyperlink font.

Thank you for reading this article carefully. I hope the article "how to check what CSS style DIV is set" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

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.