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

How to analyze CSS positioning and DIV layout with examples, I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Whether you are familiar with the use of CSS positioning, whether you can control the position of each module in the page is very critical, the editor will make a detailed introduction to CSS positioning, and introduce important div tags, explain the use of CSS+div to locate page elements, and analyze two-dimensional and three-dimensional positioning.

Understand CSS positioning and div layout

In web page design, it is very important to control the position of each module in the page. In the previous course, you already have some understanding of the basic use of CSS. On this basis, this lesson makes a detailed introduction to CSS positioning, introduces important div tags, explains the method of using CSS+div to locate page elements, and analyzes two-dimensional and three-dimensional positioning.

1.div tag and span tag

Div and span are two common tags in pages that use CSS typesetting. Using these two tags, coupled with the control of its style by CSS, you can easily achieve a variety of effects. Here, starting from the basic concepts of the two, we introduce the usage and difference of the two markers. I hope you can master the following aspects:

The concept of div and span

The difference between div and span

2. CSS positioning of elements

The various elements in the web page must have their own reasonable position, so as to build the structure of the whole page. Here we focus on several principles and methods of CSS positioning, including position, float, z-index and so on. It is important to note that the positioning here is not typesetting with table, but the positioning of block elements in the page by CSS. I hope you can master the following aspects:

Float positioning

Position positioning

Z-index spatial location

3. Location example 1: sign the picture easily

There are beautiful pictures in hand need to be put on the page, and hope to add personal information to the picture, if you are not very familiar with various image processing software, using CSS positioning can completely achieve the effect of signing the picture.

First of all, find the picture you want to put on the Internet, then put it into a div block, and use the box model to frame the picture (padding, border). Then put the text that needs to be signed into another div block, move it to the picture with position positioning, and then set the corresponding font and color.

4. Positioning example 2: text shadow effect

The method of using CSS filter to achieve text shadow effect is introduced earlier, but the CSS filter is only suitable for IE browsers. If you want to have text shadow effect under Firefox, this method is powerless. Using the positioning method introduced in this lesson, you can easily achieve the effect of text shadow, and suitable for all browsers, the effect of this example is shown in the figure.

After reading the above, have you mastered how to parse CSS positioning and DIV layout with examples? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.