CSS + DIV: implements the style and layout of cool web pages, and div cool

CSS + DIV: implements the style and layout of cool web pages, and div cool

Although I have been familiar with HTML and CSS before, I have also worked on projects for a period of time and used CSS and DIV, but after all, I have not realized the effect that can be achieved after the two are integrated, far beyond my imagination.

In fact, many people who have written front-end pages know that DIV and CSS are actually very simple, but it is not easy to achieve the desired effect or the desired effect. There are a lot of tips here. If you are not familiar with and proficient, the page you make will not achieve the expected results, and sometimes it will be particularly ugly.

First, let's take a look at what DIV is?

DIV is one of the many tags in the Markup Language HTML, but it is the most frequently used tag in the document page layout. It can define partitions or sections in the document, or divide the document into independent and different parts. It can be used as a strict organization tool without any format associated with it. If you use id or class to mark <div>, the tag function becomes more effective.

<Div> is a block-level element. This means that its content automatically starts a new line. In fact, line feed is the unique format inherent in <div>. You can use the class or id of <div> to apply your custom style. Of course, you do not need to add a class or id for each <div>, although this also has some benefits. We can apply the class or id attribute to the same <div> element, but the more common case is to apply only one of them. The main difference between the two is that class is used for element groups (similar elements, or can be understood as a certain type of elements), and id is used to identify a unique element. For example, a <div> can use multiple class attribute styles, but only one id attribute style can be used.

Next, let's look at what CSS is like?

The above section introduces some CSS things. When we add styles to HTML page elements, we often use the tag selector, id selector, and class selector. These selectors have their own characteristics: if they are uniform styles, it is best to use the tag selector, which can unify all styles with the same tags on the page; the id selector provides more convenient personalized style definitions. As for the class selector, It is a variety of style definitions, because CSS allows the use of style definitions of multiple class selectors, of course, the class selector also has "inheritance" and can derive styles of different styles.

Some of the abstract may not be able to understand it. Let's look at several examples:

<Span style = "font-size: 18px;">/* tag selector */body {background-color: #2a3a00;/* dark green background */margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} img {margin: 0px; padding: 0px; border: none ;} /* id selector */# pic {position: absolute; top: 5%; left: 0%; width: 100%; background: url(middle_bg.jpg) repeat-x; /* repeat at the x direction */}/* class selector */. center {text-align: center} </span>

Where is the title comment about the cool-winded webpage? The following example shows the power of CSS + DIV:

Imitating Google logo

Let's take a look at the code.

<Span style = "font-size: 18px;"> 

Design of imitation website homepage

Let's take a look at the page code behind this. It's actually very simple, but the page looks nice.

<Span style = "font-size: 18px;"> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">