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

This article introduces you how to learn the concept and usage of DIV tags in depth. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Do you know the concept and use of DIV tags? DIV tags are called partition tags, and everything between the start and end tags of DIV is used to form this block.

Introduction to DIV tags

DIV elements are elements that provide structure and background for block-level content in an HTML document. Everything between the start and end tags of the DIV is used to form this block, and the properties of the elements contained in it are controlled by the attributes of the DIV tag, or by formatting the block using a style sheet.

The DIV tag is called a partition tag. Function: set the position of words, paintings, tables, etc. When you put text, image, or something else in DIV, it can be called "DIVblock", or "DIVelement" or "CSS-layer", or simply "layer". In Chinese, we call it "hierarchy". So when you see these nouns later, you will know that they refer to a HTML in DIV.

DIV tag applied to StyleSheet (style sheet) will be more powerful, its ultimate goal is to give the designer another organizational ability, with Class;Style;title;ID and other attributes, will be detailed in the [StyleSheet] section, where only one property setting is introduced.

Example

Take the following as an example:

Align= "center"

Optional value: center;left;right. The function of determining the center, left or right of words, pictures, forms, etc., is the same as the center mark, the former is the standard starting from HTML3.0, and the latter is the universal marking method for a long time.

Location and hierarchy of ◆ CSS units-div tag

As we all know, using HTML to locate text and images on a web page is a "heartbreaking" thing. We must use table tags and implicit GIF images, even if this does not guarantee accurate positioning, because different browsers and operating platforms will change the results of the display.

And CSS can give you a glimmer of hope. With the CSS attributes we will learn today, you can precisely set the location of the elements, stack the located elements on top of each other, and. And. Take your time and see for yourself!

CascadingStyleSheets (CSS) is the foundation of DHTML. CSS is used to set how the elements on your web page are displayed. CascadingStyleSheetsPositioning (CSS-P) is an extension of CSS that can be used to control the position of anything on a web page or in a window. Please remember these two nouns: CSS and CSS-P. The following four English websites provide detailed documents and explanations on CSS and CSS-P.

Use DIV tags (div)

When we use CSS-P, we mainly use it on DIV (division) tag. When you put text, image, or something else in DIV, it can be called "DIVblock", or "DIVelement" or "CSS-layer", or simply "layer". In Chinese, we call it "hierarchy". So when you see these nouns later, you will know that they refer to a HTML in DIV.

You use DIV in the same way as other tag:

◆ ThisisaDIVtag.

If you use DIV alone without any CSS-P, it will have the same effect on a web page as it does in a web page.

But when we use CSS-P in the DIV tag, we can strictly set its position. First we need to give the DIV that can be controlled by CSS-P an ID or its name. For example, we give the following DIV the name truck. The purpose of giving a name is that we can use JavaScript to control it later, such as moving it or changing some of its properties, and so on.

◆ Thisisatruck

The name for the hierarchy is arbitrary. The name can be any English letter or number, but * must be a letter. There are two ways to apply CSS-P to DIV.

InlineCSS:Inline is the most commonly used method.

Thisisatruck.

ExternalSTYLEtag: the result of using the External method is the same. We will explain this method in more detail in a later course. Now let's focus on the Inline method. Notice the relationship between ID and DIV in the External method, in the STYLE.

Thisisatruck.

◆ Cross-BrowserCSS nature:

The main purpose of our course is to make the web pages you write work on both NS4 and IE4, so we focus on properties that are common to both. The following properties conform to the standards given by the W3C.

Position determines how the DIVtag is placed. "relative" means that the position of the DIV is relative to other tag, while "absolute" means that the position of the DIVtag is relative to the window in which it is located.

The position of left relative to the left side of the window

The position of top relative to the top of the window

Width of the width DIVtag. All the words or html in DIV are in it.

Height of the height DIVtag. This property is rarely used unless you want to Clip the hierarchy.

◆ clip gives the clipping (visible) portion of layer. Clip makes the DIV appear as an accurate square that can be defined. You can use the following four values to give the location and size of the square in DIV.

Clip:rect (top,right,bottom,left)

Visibility conceals or shows DIV according to its values "visible", "hidden", "inherit".

The stereoscopic position of the z-index DIVtag. The higher the value, the higher the position of DIV.

The color of the background-color DIV background.

The DIV background color of the layer-background-color Netscape.

Background image of background-image DIV.

The background image of layer-background-image Netscape's DIV.

On how to in-depth study of the concept of DIV tags and its usage is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can 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.