There are many terms for creating web pages, such as CSS, HTML, DHTML, and XHTML. In the followingArticleWe will use some basic knowledge about html. Before you start this tutorial, make sure that you have a certain HTML base. Next we will start to use Div + CSS for webpage layout design step by step.
The first step of all designs is to design and design a good idea. In general, image processing software such as PhotoShop or fireworks (PS or fw) needs to be used to make a simple layout of the interface, the following figure shows the interface layout I have designed.
Next, we need to plan the page layout based on the Concept diagram. After carefully analyzing the figure, we can easily find that the picture is roughly divided into the following parts:
1. The top part includes the logo, menu, and a banner image;
2. The content can be divided into the sidebar and subject content;
3. the bottom part includes some copyright information.
With the above analysis, we can easily layout it. Our design layer is as follows:
According to this, I drew another actual page layout diagram to illustrate the nested relationship at the lower layer, which makes it easier to understand.
The DIV structure is as follows:
│ Body {}/* This is an HTML element, which I will not describe */
Container # container {}/* Page-layer container */
Response # header {}/* page header */
Response # pagebody {}/* Page subject */
│ Navigation # sidebar {}/* sidebar */
│ Entity # mainbody {}/* subject content */
Footer # footer {}/* at the bottom of the page */
Now, the page layout and planning have been completed. What we need to do next is to start writing htmlCodeAnd CSS.
Next, create a folder on the desktop named "Div + CSS layout exercise", create two empty notepad documents under the folder, and enter the following content:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Link href = "css.css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body>
</Body>
</Html>
This is the basic structure of XHTML, named as index.htm. another document is named as css.css.
The following code writes the basic structure of the div to the <body> </body> label pair:
<Div id = "Container"> [color = # aaaaaa] <! -- Page layer container --> [/color]
<Div id = "Header"> [color = # aaaaaa] <! -- Page header --> [/color]
</Div>
<Div id = "pagebody"> [color = # aaaaaa] <! -- Page subject --> [/color]
<Div id = "sidebar"> [color = # aaaaaa] <! -- Sidebar --> [/color]
</Div>
<Div id = "mainbody"> [color = # aaaaaa] <! -- Subject content --> [/color]
</Div>
</Div>
<Div id = "footer"> [color = # aaaaaa] <! -- At the bottom of the page --> [/color]
</Div>
</Div>
To make it easier to read the code later, we should write the 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 subject */
# Pagebody {width: 800px; margin: 0 auto; Height: 400px; Background: # ccff00}
/* Bottom of the page */
# Footer {width: 800px; margin: 0 auto; Height: 50px; Background: #00 FFFF}
Save the above file and open it in a browser. Now we can see the basic structure. This is the page framework.
For more information about CSS, see the Chinese css2.0 manual and download it online ):
1. Make good comments. This is very important;
2. The body is an HTML element, and all the content on the page should be written in this tag pair. I will not say much about it;
3. Explain the meanings of some common CSS codes:
Font: 12px tahoma;
The abbreviation is used here. The complete code should be: font-size: 12px; font-family: tahoma; indicating that the font is 12 pixels in size and the font is in tahoma format;
Margin: 0px;
The abbreviation is also used, which should be:
Margin-top: 0px; margin-Right: 0px; margin-bottom: 0px; margin-left: 0px
Or
Margin: 0px 0px 0px 0px
The order is Upper/right/lower/left. You can also write it as margin: 0 (abbreviation );
The above style indicates that the margin between the upper right and lower right sides of the body is 0 pixels. If auto is used, the margin is automatically adjusted,
There are also the following statements:
Margin: 0px auto;
It indicates that the top and bottom margins are 0 PX and the left and right sides are automatically adjusted;
The padding attribute we will use later has many similarities with margin, and their parameters are the same,
However, their meanings are different. margin is an external distance while padding is an internal distance.
Text-align: Center
Text alignment, which can be set to left, right, and center. Here I set it to center alignment.
Background: # fff
Set the background color to white. Here, the color is abbreviated. The complete color should be background: # ffffff.
Background can be used to fill the background color and background image of a specified layer. The following format will be used in the future:
Background: # CCC url('bg.gif ') top left no-Repeat;
Fill the entire layer with #ccc(grayscale) and use bg.gif as the background image,
Top left
Indicates that the image is located at the top left of the current layer, and no-repeat indicates that only the image size is displayed without filling the entire layer.
Top/right/left/bottom/center
It is used to locate the background image, indicating the upper/right/lower/left/middle. You can also use
Background: url('bg.gif ') 20px 100px;
The X coordinate is 20 pixels, And the Y coordinate is 100 pixels;
Repeat/no-repeat/repeat-x/repeat-y
Fill the entire layer/not fill/fill along the X axis/fill along the Y axis respectively.
Height/width/color
Height (PX), width (PX), and font color (HTML color table ).
4. How to center a page?
After saving the code, you can see that the entire page is displayed in the center. Why is the page displayed in the center?
This is because the following attributes are used in # container:
Margin: 0 auto;
According to the preceding instructions, we can know that the top and bottom margins are 0 and the left and right are automatic. Therefore, the layer is automatically centered.
If you want to set the page to the left, you can cancel the auto value, because it is displayed on the left by default.
With margin: auto, we can easily center layers automatically.
5. Here I will only introduce these common CSS attributes. For more information, see the css2.0 Chinese manual.
After we have written the DIV structure of the page, we can start to carefully create each part.
In the article, we wrote some examples for the preview structure. We cleared all the styles in css.css and re-written the following style code:
/* Basic information */
Body {Font: 12px 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 the Super Link style on the control page, which is not described here. Please refer to the manual.
# Container {width: 800px; margin: 10px auto}
Specify the display area of the entire page.
Width: 800pxSpecify the width to 800 pixels, Which is set as needed.
Margin: 10px autoThe top and bottom margins of the page are 10 pixels and displayed in the center.
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 create the top part, which includesLogo, menu, and BannerFirst, we need to slice the designed image. The following is the slice completed under Fw:
I slice the top part into two parts. The first part includes the logo and a horizontal line. The image width is PX.
Here, some friends will talk about it., * Why is the GIF format used? Isn't it better to use JPEG?
Because the image files in GIF format are smaller, the page loading speed is faster. before using this format, you must make sure that the image does not use too many colors. When we use the GIF format, it is feasible to see that the image changes too much from the naked eye.
* Can the next banner still use the GIF format?
.
* Reasonable slicing is very important because the correct slicing method determines the simplicity of CSS writing and the page loading speed.
After splitting, we also need to analyze the top part and write the DIV structure into the header with the following code:
<Div id = "menu">
<Ul>
<Li> <a href = "#"> homepage </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> blog </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> Design </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> album </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> Forum </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> about </a> </LI>
</Ul>
</Div>
<Div id = "banner">
</Div>
Why do you want to write this? Because the menu is in the <li> form, you can customize the menu style later.
Why add the following code?
<Li class = "menudiv"> </LI>
Insert this code to easily insert some separation styles between menu options, such as vertical bars in the preview image.
Then we write the following style 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.
Here, we have not specified the height of the header layer. Why not?
Because there are menus and Banner items in the header layer, the height of the layer is unknown for the time being, and the attribute of the layer allows the layer to automatically set and adjust according to the content. Therefore, we do not need to specify the height.
Use List <li> to create a menu
Before learning this section, make sure that you have written div1_css to the index.htmand css.css files.
In this section, I will show you how to use the list <li> to create menus.
<Div id = "menu">
<Ul>
<Li> <a href = "#"> homepage </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> blog </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> Design </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> album </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> Forum </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> about </a> </LI>
</Ul>
</Div>
The above is the structure of this part.<Ul> </ul> and <li> </Li> You can refer to these two HTML elements by yourself. Their main function is to display some information in HTML in the form of a list.
Another point that needs to be clearly stated is that when HTML is definedId = "divid", The setting syntax for CSS is# Divid {}If it is definedClass = "divid"In CSS, the corresponding setting syntax is. divid.
IfId = "divid"This layer includes a </img>, the corresponding setting Syntax of this IMG in CSS should be# Divid IMG {}, Similarly, if it is included inClass = "divid"In this layer, the set syntax should be.Divid IMG {}, I hope you will be clear about this.
In addition, all elements in HTML can be defined, such as table, TR, TD, Th, form, IMG, input... if you want to set them in CSS, you can simply add a pair of braces {} to the element name. All CSS code should be written in braces{}.
According to the introduction, we first write the following code in css.css:
# Menu ul {list-style: none; margin: 0px ;}
# Menu ul Li {float: Left ;}
Explanations:
# Menu ul {list-style: none; margin: 0px ;}
List-style: None. This sentence cancels the vertices before the list, because we do not need these vertices.
Margin: 0px. This statement deletes ul indent, so that all list content is not indented.
# Menu ul Li {float: Left ;}
Here, float: Left and Right are displayed in the same row, so the floating attribute (float) is used ).
In this step, we recommend that you first save the preview effect, and then add the following content. The effect is as follows:
In this case, the list content is arranged in one row, and we add code in # menu ul Li {}.Margin: 0 10px
# Menu ul {list-style: none; margin: 0px ;}
# Menu ul Li {float: Left; margin: 0 10px}
The function of margin: 0 10px is to make the list content a 20-pixel distance (left: 10px, right: 10px). The preview effect is as follows:
Now that the prototype has come out, let's fix the menu position 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 so that the menu is on the right side of the page */
# Menu ul Li {float: Left; margin: 0 10px}
At this time, the position has been determined, but there is a vertical line between the menu options in the conception diagram. What should I do?
Don't forget, we have already reserved an empty <li class = "menudiv"> </LI>. You can use it if you want to add a vertical line.
Follow the method described above to add the following code:
. Menudiv {width: 1px; Height: 28px; Background: #999}
Save the preview and check whether the vertical bars have come out? I will not talk about this code much, so it should be easy to understand.
However, the text of the menu option is on the top, and we need to modify it to the following code:
# Menu ul Li {float: Left; margin: 0 10px; display: block; line-Height: 28px}
AboutDisplay: block; line-Height: 28pxYou can refer to the Manual and I will not talk about it more.
Basically, the effect has been proven. Add the following code in css.css to the chain style of the remaining modified menu:
# Menu ul Li A: Link, # menu ul Li A: visited {font-weight: bold; color: #666}
# Menu ul Li A: hover {}
There is nothing to say about it. The final effect is as follows:
This section is now complete. By the way, we will provide the materials to you:
Concept diagram:Click to download
HTML and CSS source files:Click to download
In this section, I want to tell you how to use it well.BorderAndClearThese two attributes.
First, if you have used a table to create a web page, you should know how to create a dotted line in the table, you need to make a small image to fill it, in fact, we still have a simpler method, as long as you add such a paragraph in <TD> </TD>, you can try:
<Div style = "border-bottom: 1px dashed # CCC"> </div>
You can refer to the manual again to understand dashed, solid, dotted... you can use them to produce many effects, such as solid lines, dotted lines, dual lines, and shadow lines.
<Div id = "banner"> </div>
In the code above, you can see the bannerin the design sketch, and add the following style to css.css:
# Banner {
Background: url(banner.jpg) 0 30px no-Repeat;/* Add a background image */
Width: 730px;/* set the Layer Width */
Margin: auto;/* center layer */
Height: 240px;/* set the height */
Border-bottom: 5px solid # efefef;/* draw a light gray solid line */
Clear: Both/* clear floating */
}
By using border, you can easily draw a solid line and reduce the network resources occupied by image downloads, making page loading faster.
Another note is clear: both, which indicates clearing all the float on the left and right. We will also use this attribute in the following layout: clear: left/right. Here, clear: Both is added because the previous UL and Li elements are set to float. If they are not cleared, the setting of the banner layer is affected.
<Div id = "pagebody"> <! -- Page subject -->
<Div id = "sidebar"> <! -- Sidebar -->
</Div>
<Div id = "mainbody"> <! -- Subject content -->
</Div>
</Div>
We add the following style to css.css:
# Pagebody {
Width: 730px;/* set the width */
Margin: 8px auto;/* center */
}
# Sidebar {
Width: 160px;/* set the width */
Text-align: Left;/* Left-aligned text */
Float: Left;/* floating left */
Clear: Left;/* float on the left is not allowed */
Overflow: hidden;/* Hide out of width */
}
# Mainbody {
Width: 570px;
Text-align: left;
Float: Right;/* float to the right */
Clear: Right;/* float on the right side is not allowed */
Overflow: hidden
}
To view the effect, we recommend that you add the following code to # sidebar and # mainbody. After previewing, you can delete this Code:
Border: 1px solid # e00;
Height: 200px
Save the preview effect and you can find that the two layers are perfectly floating, which meets 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 the clear, the two layers will not be misplaced, in this way, the layout of the page will not be misplaced because the content is too long (for example, slice.
The overflow: hidden added later can be used.Automatically hide the part of the content that is too long (sample). Usually we can see that when loading some webpages, the layout is opened because the images are too large, and the page is restored until the download is complete. This problem can be solved by adding overflow: hidden.
Every attribute in CSS can be used properly to solve many problems. Maybe they have little to do with your layout pages, but you must know the role of these attributes, when you encounter a problem, you can use these attributes to solve the problem.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
