In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.