Today, I saw a classic tutorial on Div + CSS layout. I always prefer Div + CSS,
However, due to the high attention to Seo and website operations, the technology of using Div + CSS as webpage templates is unfamiliar.
To cultivate your talents, you have to digest them carefully. It is actually very simple. This Div + CSS layout
The tutorial is good.
The tutorial is divided into five sections, in fact, a little bit of content, but through learning, you will be able to understand the DIV + CSS
Not to mention the essence of the Web page. You can finish learning it in an hour.
Basic friends.
There are many terms in web page creation, such as CSS, HTML, DHTML, and XHTML. Next
.ArticleWe will use some basic knowledge about html.
Before, make sure that you have a certain HTML Foundation. Next we will start using
Use Div + CSS to design the webpage layout.
The first step of all the designs is to design and design them. Generally, you still need to use Photoshop or
Fireworks (hereinafter referred to as PS or fw) and other image processing software will need to make the interface layout simple structure
The following figure shows the layout of the interface.
Next, we need to plan the page layout based on the Concept diagram, and analyze it carefully.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
It is not difficult to find that the image 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 in the lower layer.
The solution is simpler.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
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 htmlCode And
CSS.
Next, create a folder on the desktop, name it "Div + CSS layout exercise", and click
Create two empty notepad documents 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>
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
This is the basic structure of XHTML, named index.htm, and named another notepad document
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>
In order to make the post-reading code easier, we should write down the QR code and open css.css.
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.
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;
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
2. The body is an HTML element. All the content on the page should be written in this tag pair.
Not much;
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;
The font size is 12 pixels, 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 distance between the upper right and lower right sides of the body is 0 pixels. If auto is used, auto is automatically called.
Padding,
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. Their parameters are
Like,
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. We will use the following
Format:
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, but not filled.
Layers.
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;
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
Repeat/no-repeat/repeat-x/repeat-y
Fill the entire layer/not fill/fill along X axis/fill along 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.
Is the page displayed in the center?
This is because the following attributes are used in # container:
Margin: 0 auto;
As described above, we can know that the top and bottom margins are 0, and the left and right sides are automatic, so this layer will
Auto center.
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
The row is created.
In the previous chapter, we wrote some styles that are written to preview the structure.
Clear all styles in css.css and write the following style code again:
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: 800 PX specifies the width of pixels, Which is set as needed.
Margin: 10px Auto, the 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.
Display.
Next, we start to create the top part, which includes the logo, menu, and Banner. First
What we need to do is to slice the designed image. The following is the slice completed under Fw:
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
I slice the top part into two parts. The first part includes the logo and a horizontal line. Because of the logo image
The part does not have much color. Here I save this part as the GIF format, and select the color palette
Accurate. Select Alpha transparency. The color is white (the color should be the same as the background color ).
Logo.gif. The image width is 800px.
Here, some friends will say, * why should we use the GIF format? Isn't it better to use JPEG?
Because the image files in GIF format are smaller, the page loading speed is faster.
Before using the GIF format, make sure that the image does not use too many colors.
It is feasible to see that the image changes too much.
* Can the next banner still use the GIF format?
The answer is no, because the banner part is a detailed image.
Therefore, the file must be exported to banner.jpg in JPEG format.
* Reasonable slicing is very important because the correct slicing method determines the simplicity of CSS writing.
Ease of access and page loading speed.
After splitting, we also need to analyze the top part and write the DIV structure into the header code, as shown in figure
Below:
<Div id = "menu">
<Ul>
<Li> <a href = "#"> homepage </a> </LI>
<Li class = "menudiv"> </LI>
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
<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 easily set the menu
Style.
Why add the following code?
<Li class = "menudiv"> </LI>
Insert this code to easily insert some separated styles between menu options, such as Preview
Vertical lines in.
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, while that of the layer
The attribute allows the layer to automatically set and adjust Based on the content, so 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 Div and CSS
Index.htm and css.css files.
In this section, I will show you how to use the list <li> to create menus.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
<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. For the two HTML elements <ul> </ul> and <li> </LI>
Refer to relevant content. Their main function is to display a list in HTML.
Some information.
Another point that needs to be clearly stated is that when id = "divid" is defined in HTML
The corresponding setting syntax is # divid {}. If it is defined as class = "divid" in HTML
The corresponding setting syntax in CSS is. divid.
If the layer id = "divid" contains an </img>, the IMG corresponds
The setting Syntax of is # divid IMG {}. Similarly, if it is included in the class = "divid" layer
The setting syntax should be. divid IMG {}. I hope you can clearly understand this.
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, write the element name directly
A pair of braces {} is enough. 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.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
# Menu ul Li {float: Left ;}
Here, float: Left and Right are displayed in the same row, so the floating attribute is used.
(Float ).
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. we add the code margin: 0 10px to # menu ul Li {}.
# Menu ul {list-style: none; margin: 0px ;}
# Menu ul Li {float: Left; margin: 0 10px}
Margin: 0 10px is used to generate a 20-pixel distance between the list content (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?
What about it?
Don't forget, we have already reserved an empty <li class = "menudiv"> </LI>.
Use the 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, but it should be quite compatible.
Easy to understand.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
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}
For more information about display: block; line-Height: 28px, see the manual.
.
Basically, the effect has been proven, and the chain style of the remaining modified menu is added in css.css.
Run the following code:
# 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:
In this section, I want to tell you how to use the border and clear attributes.
First, if you have used a table to create a webpage, you should know that if you want to draw
How can we do this with dotted lines? We need to make a very small image for filling. In fact, we still have a simpler
You just need to add such a segment in <TD> </TD>. You can try:
<Div style = "border-bottom: 1px dashed # CCC"> </div>
You can refer to the manual again to understand the functions of dashed, solid, dotted... and so on,
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 */
}
Border can easily draw a solid line and reduce the network resources occupied by image downloads.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
To make the page Load faster.
Another note is clear: both, which indicates clearing all float on the left and right.
We will also use this property: clear: left/right. Add clear: both here because
Previously, the 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
}
We recommend that you add the following code to # sidebar and # mainbody to view the effect.
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.
The actual width of the two layers should be 160 + 2 (Border) + 570 + 2 = 734px, which has exceeded the width of the parent layer,
Because of the clear, the two layers will not be misplaced, so that we can Layout
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
The page will not be misplaced because the content is too long (sample.
The overflow: hidden that is added later can make the part of the content that is too long (sample) Automatically
Hide. We usually see that some webpages are stretched out due to the large image size during loading,
This problem is solved by adding overflow: hidden.
Question.
Every attribute in CSS can be used properly to solve many problems.
There is not much relationship, but you must know the role of these attributes.
To try to use these attributes to solve the problem.
Source of the article (Internet): Blue ideal. Thanks to the author for his selfless dedication.
There is less and less purification on the Internet.
Generated by Foxit PDF Creator Foxit Software
A http://www.foxitsoftware.com for evaluation only.
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
