Div CSS layout introductory tutorial_html/css_WEB-ITnose-HTML Tutorial-php.cn

Page layout and planning
In web page production, there are many terms, such as: CSS, HTML, DHTML, XHTML, etc. In the following article we will use some basic knowledge about HTML. Before you study this introductory tutorial, please make sure that you already have a certain basic knowledge of HTML. Let’s start using DIV CSS step by step to design web page layout.

The first step in all designs is to conceive. Once the concept is complete, generally speaking, you need to use photo processing software such as PhotoShop or FireWorks (hereinafter referred to as PS or FW) to simply draw the interface layout to be produced. , the following is the interface layout diagram I conceived.

Next, we need to plan the layout of the page based on the conceptual diagram. After carefully analyzing the diagram, we can easily find that the picture is roughly divided into the following parts:

1. The top part, which includes LOGO, MENU and a Banner picture;
2. The content part can be divided into sidebar and main content;
3. The bottom part, including some copyright information.
With the above analysis, we can easily lay out our design layer as shown below:

Based on the above picture, I drew an actual page layout diagram , explain the nesting relationship of the layers, so that it will be easier to understand.

The DIV structure is as follows:
│body {}/*This is an HTML element, I won’t explain the details*/
└#Container {}/*Page Layer container*/
　　├#Header {}　/*Page header*/
　　├#PageBody {}　/*Page body*/
　　│　├#Sidebar {}　/*Sidebar*/

Write the overall layer structure and CSS

Next, we create a new folder on the desktop, named "DIV CSS layout exercise", and create two empty notepad documents under the folder , enter the following:

< html xmlns ="http://www.w3.org/1999/xhtml " >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > Untitled Document
< link href ="css.css" rel ="stylesheet" type ="text/css" />

< body >

This is the basic structure of XHTML, name it index .htm, and the other Notepad document is named css.css.

Below, we write the basic structure of the DIV in the tag pair. The code is as follows:

< div id =" container" > [color=#aaaaaa] [/color]

　 < div id ="Header" > [color=#aaaaaa] [/color]

　 < div id ="PageBody" > [color=#aaaaaa] [/color]

　　 < div id ="Sidebar" > [color=#aaaaaa] [/color]
　　
　　 < div id ="MainBody" > [color=#aaaaaa] [/color]
　　
　　
　 < div id ="Footer" > [color=#aaaaaa] [/color]
　

In order to make it easier to read the code in the future, we should add relevant comments. Next, open the css.css file and write the CSS information. The code is as follows:

/*Basic information*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*Page layer container* /
#container {width:100%}

/*Page header*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*Page body*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*Page bottom*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

Save the above file and open it with a browser. At this time we have You can see the basic structure, which is the frame of the page.

Instructions on the above CSS (for details, please refer to the CSS2.0 Chinese manual, available for download online):

1. Please develop good commenting habits, this is very important;

2. Body is an HTML element. All content on the page should be written within this tag pair, so I won’t say more;

3. Explain the meaning of some commonly used CSS codes. :

font:12px Tahoma;
Abbreviations are used here, the complete code should be: font-size:12px; font-family:Tahoma; indicating that the font size is 12 pixels and the font is in Tahoma format;

margin:0px;
also uses abbreviations, the full version should be:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left :0px
or
margin:0px 0px 0px 0px

The order is top/right/bottom/left, you can also write margin:0 (abbreviation);
The above style description body The top, right, bottom and left margins of the partial pairs are 0 pixels. If you use auto, the margins will be automatically adjusted.

There are also the following writing methods:
margin:0px auto;
Explain the top and bottom margins is 0px, and the left and right are automatically adjusted;
The padding attribute we will use in the future has many similarities with margin. Their parameters are the same,
but they have different meanings. Margin is the external distance , and padding is the internal distance.

text-align:center
Text alignment can be set to left, right, or center. Here I set it to center alignment.

background:#FFF
Set the background color to white. The abbreviation is used for the color here. The complete color should be background:#FFFFFF.
background can be used to fill the specified layer with background color and background image. We will use the following format in the future:
background:#ccc url('bg.gif') top left no-repeat;
Representation: Use #CCC (grayscale color) to fill the entire layer, use bg.gif as the background image,
top left
indicates that the image is located at the upper left end of the current layer, no-repeat indicates that only the image size is displayed without Fill the entire layer.
top/right/left/bottom/center
is used to position the background image, indicating top/right/bottom/left/center respectively; you can also use
background:url('bg.gif') 20px 100px;
means that the X coordinate is 20 pixels and the Y coordinate is 100 pixels.
repeat/no-repeat/repeat-x/repeat-y
respectively means filling the entire layer/no Fill / Fill along the X axis / Fill along the Y axis.

height / width / color
represents height (px), width (px), and font color (HTML color system table) respectively.

4. How to center the page?

After saving the code, you can see that the entire page is displayed in the center. So what is the reason why the page is displayed in the center?
is because we used the following attributes in #container:
margin:0 auto;
According to the previous explanation, you can know that the top and bottom margins are 0, and the left and right margins are automatic, so this layer will Automatically centered.
If you want the page to be on the left, just cancel the auto value, because it is displayed on the left by default.
With margin:auto we can easily center the layer automatically.

5. Here I only introduce these commonly used CSS properties. For others, please refer to the CSS2.0 Chinese manual.

After we have written the rough DIV structure of the page, we can start to create each part in detail.

One of the top creations of the page
In the previous chapter, we wrote some styles. Those styles were written for the preview structure. We cleared all the styles in css.css Drop it and rewrite it Tahoma;margin:0px;text-align:center;background:#FFF;}

a:link,a:visited {font-size:12px;text-decoration:none;}

a:hover{}

/*Page layer container*/

#container {width:800px;margin:10px auto}

Style description:

a:link, a:visited {font-size:12px;text-decoration:none;}
a:hover {}

These two items are to control the style of hyperlinks in the page, specifically I won't explain it, please refer to the manual.

#container {width:800px;margin:10px auto}

Specify the display area of the entire page.
width:800px specifies the width to be 800 pixels, set here according to actual needs.
margin:10px auto, the top and bottom margins of the page are 10 pixels, and the page is centered.
As we mentioned in the previous chapter, setting the left and right margins of the layer's margin attribute to auto can center the layer.

Next, we start to make the TOP part. The TOP part includes the LOGO, menu and Banner. The first thing we have to do is to slice the designed pictures. The following is the slicing completed under FW:

I sliced the TOP part into two parts. The first part includes the LOGO and a horizontal line. Since the LOGO picture does not have too many colors, I saved this part in GIF format. The palette selection was precise, Alpha transparency was selected, the color version was white (the color here should be the same as the background color), and exported as logo .gif, image width is 800px.

At this point, some friends have said, * Why use GIF format? Wouldn't it be better to use JPEG?
Because the image files in the GIF format are smaller, this can make the page load faster. Of course, before using this format, you must make sure that the image does not use too many colors. When we use the GIF format, from the naked eye You can't tell much of a change in the picture, so it's doable.

* Can the next Banner part still use GIF format?
The answer is no, because the Banner part is a detailed picture. If you use GIF format, the color will be too much lost, so you must use JPEG format and export the file as banner.jpg.

* Reasonable slicing is very important, because the correct slicing method determines the ease of writing CSS and the page loading speed.

After cutting the slices, we also need to analyze the TOP part and write the DIV structure into the Header. The code is as follows:

　　 < div id ="menu" >
　　 < ul >
　　 < li >< a href ="#" >Homepage menuDiv" >
　　 < li >< a href ="#" > Blog
　　 < li class =" menuDiv" >
　　 < li >< a href ="#" > design
　　 < li class =" menuDiv" >
　　 < li >< a href ="#" > Album
　　 < li class =" menuDiv" >
　　 < li >< a href ="#" > Forum
　　 < li class =" menuDiv" >
　　 < li >< a href ="#" > About
　　
　
　　 div id ="banner" >
　　 Using the list

format for the menu can make it easier to customize the style of the menu later.

Why add the following code?

Inserting this piece of code can easily insert some separation styles between menu options, such as vertical lines in the preview.

Then we write the following styles in css.css:

/*Page header*/
#header {background:url(logo.gif) no-repeat}

Style description:

#header {background:url(logo.gif) no-repeat}

Add a background image LOGO to the page header without filling it.

Here, we did not specify the height of the header layer, why not specify it?

Because there are menu and banner items in the header layer, the height of the layer is temporarily unknown, and the properties of the layer allow the layer to automatically adjust based on the content, so we do not need to specify the height.

Making the top of the page 2

Using list

to create a menu

Before starting this section, please make sure you have written with reference to the previous sections Add DIV and CSS to index.htm and css.css files.

In this section I will tell you how to use list

to create a menu.

< div id ="menu" >
< ul >
>
< li class ="menuDiv" >
< li >< a href ="#" > Blog
< li class ="menuDiv" >
< li >< a href ="#" > Design
>
< li class ="menuDiv" >
< li >< a href ="#" > Forum
< li class ="menuDiv" >
< li >< a href ="#" > About
li>

Please refer to the relevant content for these two HTML elements. Their main function is to display some information in the form of a list in HTML.

There is another point that everyone must be aware of. When it is defined as id="divID" in HTML, the corresponding setting syntax in CSS is #divID{}. If it is defined as class in HTML ="divID", the corresponding setting syntax in CSS is .divID.

If the layer with id="divID" includes an , the corresponding setting syntax of this img in CSS should be #divID img {}, similarly, if When included in the class="divID" layer, the setting syntax should be .divID img {}. I hope everyone will understand this clearly.

In addition, all elements in HTML can be defined, such as table, tr, td, th, form, img, input... etc. If you want to set them in CSS, just directly Just write the name of the element plus a pair of braces {}. All CSS code should be written within curly brackets {}.

According to the above introduction, we first write the following code in css.css:

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;}

Explain:

#menu ul {list-style:none;margin:0px;}
list-style:none, this sentence is cancel points before the list because we don't need these points.

margin:0px, this sentence is to delete the indentation of UL. This can make all list contents unindented.

#menu ul li {float:left;}

The left and right of float:left here allow the content to be displayed on the same line, so the float attribute (float) is used.

At this point, it is recommended that you save the preview effect first, and then add the following content. The effect is as follows:

At this time, the list content is arranged in one line. We add the code margin:0 10px

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;margin: 0 10px}

margin:0 The function of 10px is to create a 20-pixel distance between the list contents (left: 10px, right: 10px). The preview effect is as follows:

Now that the prototype has come out, let’s fix the position of the menu and change the code to the following:

#menu {padding:20px 20px 0 0}

/*Use padding:20px 20px 0 0 to fix the menu position*/

#menu ul {float:right;list-style:none;margin:0px;}

/*Added float:right to make the menu located on the right side of the page*/

#menu ul li {float:left;margin:0 10px}

At this time, the position has been determined, but in the concept map, there is a vertical line between the menu options. What should I do?
Don’t forget, we have already left an empty

, just use it if you want to add a vertical line.
According to the method mentioned above, we add the following code:

.menuDiv {width:1px;height:28px;background:#999}

Save and preview, whether the vertical line is Already out? I won’t say much about this code, it should be easy to understand.

However, the text of the menu options is at the top, so we modify it to the following code:

#menu ul li {float:left;margin:0 10px;display :block;line-height:28px}

You can refer to the manual about display:block;line-height:28px, I won’t go into details.

The effect has basically been achieved. All that remains is to modify the hyperlink style of the menu and add the following code to css.css:

#menu ul li a:link,#menu ul li a: visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

I won’t say much more about this, there is nothing more to say, the final effect is as follows:

This section ends here. By the way, I will provide you with the materials:
Concept map: Click to download
HTML and CSS source files: Click to download

Page production-use border and clear well

In this section, I mainly want to tell you how to use the border and clear attributes well.

First of all, if you have ever used table to create a web page, you should know how to draw a dotted line in a table? Just add this paragraph to 涫 drip Yi Qiang 褂lax?軻サMO旆ǎ? Gray??lt;td> You can try:

You can refer to the manual again, and then you can understand the functions of dashed, solid, dotted... etc., and you can use them to create many effects Come on, solid lines, dashed lines, double lines, hatched lines, etc.

The above code can realize the banner in the design sketch, and add the following style to css.css:

#banner {
background:url(banner.jpg) 0 30px no-repeat; /*Add background image*/
width:730px; /*Set the width of the layer*/
margin :auto; /*Center the layer*/
height:240px; /*Set height*/
border-bottom:5px solid #EFEFEF; /*Draw a light gray solid line*/
clear: both /*Clear floats*/
}

It is easy to draw a solid line through the border, and it reduces the network resources occupied by image downloads, making the page loading speed faster.

Another thing to note is clear:both, which means clearing all floats on the left and right. We will also use this attribute in the next layout: clear:left/right. Clear:both is added here because the previous ul and li elements were set to float. If they are not cleared, it will affect the setting of the banner layer position.

The above is the main part of the page. We add the following styles in css.css:

#pagebody {
width:730px; /*Set width* /
margin:8px auto; /*center*/
}
#sidebar {
width:160px; /*set width*/
text-align:left; /*text Left aligned*/
float:left; /*Float to the left*/
clear:left; /*No floats allowed on the left*/
overflow:hidden; /*The part beyond the width is hidden*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*Float right*/
clear:right; /*Not allowed There is floating on the right side*/
overflow:hidden
}

In order to see the effect, it is recommended to add the following code to #sidebar and #mainbody. After the preview is completed, Delete this code:

border:1px solid #E00;
height:200px

Save the preview effect and you can see that these two layers float perfectly, achieving our layout requirements, and the actual width of the two layers should be 160 2 (border) 570 2 = 734px, which has exceeded the width of the parent layer. Due to clear, the two layers will not be misaligned, which allows us to layout The page will not be misaligned due to too long content (such as pictures).

The overflow:hidden added later can automatically hide parts of the content that are too long (such as pictures). Usually we will see that when some web pages are loaded, the layout is stretched because the images are too large, and the layout does not return to normal until the page is downloaded. This problem can be solved by adding overflow:hidden.

If used properly, every attribute in CSS can solve many problems. Maybe they have nothing to do with the page you are laying out, but you must know the role of these attributes. When you encounter problems , you can try to use these attributes to solve the problem