Home > Developer > Web Develop
In web authoring, there are many terms, such as: CSS, HTML, DHTML, XHTML, and so on. In the following article we will use some basic knowledge of HTML, and before you learn this introductory tutorial, make sure you have a certain HTML base. Let's start by using DIV+CSS to design your Web page layout in one step.
All the design of the first step is the idea, well conceived, generally also 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 is my idea of the interface layout.
Below, we need to plan the layout of the page according to the idea map, carefully analyze the diagram, we can not find that the picture is broadly divided into the following parts:
1, the top part, which also includes a logo, menu and a picture of banner;
2, the content part can be divided into the side bar, the main content;
3, the bottom, including some copyright information.
With the above analysis, we can easily layout, we design layers such as:
On the basis of this, I draw an actual page layout diagram to illustrate the nesting relationships of layers, which makes it easier to understand them.
The div structure is as follows:
│body {}/* This is an HTML element, specifically I do not explain */
└ #Container {}/* page layer Container */
├ #Header {}/* Page header */
├ #PageBody {}/* page body */
│ ├ #Sidebar {}/* Sidebar sidebar */
│└ #MainBody {}/* Main content */
└ #Footer {}/* page bottom */
Now that the page layout and planning have been completed, the next thing we need to do is start writing HTML code and CSS.
Next we create a new folder on the desktop, named "Div+css layout Exercise", create a new two empty Notepad document under the folder, enter the following:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<link href= "Css.css" rel= "stylesheet" type= "Text/css"/>
<body>
</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 <body></body> tag pair, with the following code:
<div id= "Container" >[color= #aaaaaa]<!--page layer container-->[/color]
<div id= "header" >[color= #aaaaaa]<!--page Header-->[/color]
</div>
<div id= "Pagebody" >[color= #aaaaaa]<!--page body-->[/color]
<div id= "Sidebar" >[color= #aaaaaa]<!--side sidebar-->[/color]
</div>
<div id= "mainbody" >[color= #aaaaaa]<!--main content-->[/color]
</div>
</div>
<div id= "Footer" >[color= #aaaaaa]<!--The bottom of the page-->[/color]
</div>
</div>
In order to make it easier to read the code later, we should add the relevant comments, then open the Css.css file, 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}
/* Bottom of page */
#Footer {width:800px;margin:0 auto;height:50px;background: #00FFFF}
Save the above file, open with a browser, we can already see the infrastructure, this is the frame of the page.
For more information on the above CSS (please refer to CSS2.0 Chinese manual, download online):
1, please develop a good habit of commenting, this is very important;
2, body is an HTML element, all the contents of the page should be written in this tag pair, I will not say more;
3, explain the meaning of some commonly used CSS code:
font:12px Tahoma;
The abbreviation is used here, the complete code should be: Font-size:12px;font-family:tahoma; the font is 12 pixels in size and the font is Tahoma format;
margin:0px;
The abbreviation is also used, and the complete should be:
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
Or
margin:0px 0px 0px 0px
The order is up/right/down/left, you can also write as margin:0 (abbreviation);
The above style shows that the body part of the upper right and bottom left margin is 0 pixels, if auto is used to automatically adjust the margin,
There are several other ways to do this:
margin:0px Auto;
The upper and lower margin is 0px, the left and right is adjusted automatically;
There are many similarities between the Padding property and the margin that we will use later, their parameters are the same,
But the meaning of each expression is not the same, margin is the outer distance, while the padding is the internal distance.
Text-align:center
Text alignment can be set to left, right, middle, here I set it to center alignment.
Background: #FFF
Set the background color to white, here the color uses the abbreviation, the complete should be background: #FFFFFF.
Background can be used to fill the specified layer with the background color, background image, we will use the following format:
Background: #ccc url (' bg.gif ') top left no-repeat;
means: Fill the entire layer with #ccc (grayscale color), use bg.gif as the background picture,
Top left
Indicates that the picture is at the top left of the current layer, and no-repeat indicates that only the picture size is displayed instead of filling the entire layer.
Top/right/left/bottom/center
Used to position the background image, respectively, up/right/bottom/left/middle, or you can use
Background:url (' bg.gif ') 20px 100px;
Indicates an x-coordinate is 20 pixels, and the y-coordinate is a 100-pixel precise positioning;
Repeat/no-repeat/repeat-x/repeat-y
Fill up the entire layer/not fill/fill along the X-axis/fill along the y-axis, respectively.
Height/width/color
Represents height (px), Width (px), font color (HTML color table), respectively.
4, how to make the page center?
After you save the code, you can see that the entire page is centered, so what is the reason for the page to be centered?
is because we used the following properties in #container:
margin:0 Auto;
As you can see from the previous instructions, it means that the top and bottom margin is 0 and the left and right is automatic, so the layer is automatically centered.
If you want the page to be left, you can cancel the auto value, because the default is the left display.
With the Margin:auto we can easily center the layer automatically.
5, here I only introduce these commonly used CSS properties, others please see the CSS2.0 Chinese manual.
[1] [2] [3] Next
Once we have written the approximate div structure, we can begin to make a detailed production of each part.
In the previous chapter we wrote some styles that were written for the purpose of previewing the structure, and we erased all the styles in the CSS.CSS and re-wrote 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 {}
The two items are the style of control hyperlinks in the page, I do not specify, please refer to the manual.
#container {width:800px;margin:10px Auto}
Specifies the display area for the entire page.
The width:800px specifies a width of 800 pixels, based on the actual desired setting.
margin:10px Auto, the top and bottom margin of the page is 10 pixels and is centered.
As we said in the previous chapter, the left and right margins of the margin property of the layer are set to auto to let the layer be centered.
Next, we start making the top section, the top part includes logos, menus, and Banner, and the first thing we need to do is slice the designed picture, and here is the slice done under FW:
I slice the top part into two parts, the first part includes the logo and a horizontal line. Because the logo picture does not have too many colors, here I save this part as GIF format, the palette is selected to be accurate, choose alpha transparency, the color version is white (here the color should be the same as the background color), export to Logo.gif, the image width is 800px.
Here, some friends say , * Why use GIF format? Isn't it better to use JPEG?
Because the GIF format of the picture file is smaller, this can make the page load faster, of course, before using this format must be determined that the picture does not use too many colors, when we use the GIF format, from the naked eye can not see the picture has much change, so this is possible.
* Can I use GIF format for the next banner section?
The answer is no, because the banner part is a detailed picture, if the use of GIF format color will be too much loss, so you must use the JPEG format, the file is exported to banner.jpg.
* Reasonable slicing is very important, because the correct method of slicing determines the simplicity of CSS writing and page loading speed.
After slicing the slices, we also need to parse the top section and write the div structure to the header code as follows:
Why do you write this, because the menu uses a list
And why would you add the following code?
We then 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 head section of the page and do not fill it.
Here, we do not specify the height of the header layer, why not specify it?
Because the header layer also has menus and banner items, the height of the layer is temporarily unknown, and the layer's properties allow the layer to be adjusted automatically based on the content, so we don't need to specify a height.
Working with lists
Before you begin this section, make sure that you have written to the Div, CSS, and index.htm and Css.css files in the previous sections.
In this section I will show you how to use the list
The above is the structure of this part, there is about
、There is a point to be clear, when defined in HTML as id= "divID", the CSS corresponding to the setting syntax is #divID {} , if defined in HTML as class= "divID" , the corresponding setting syntax in CSS is. divID.
If id= "divID" is included in this layer, then this IMG should have the corresponding setting syntax in the CSS to be #divID img {}, as well, if it is included in the class= "divID" layer, Then the setting syntax should be. divid img {}, which I hope you will be clear.
In addition, all elements of HTML can be defined, such as table, TR, TD, Th, Form, img, input ... Wait, if you want to set them in CSS, write the name of the element directly plus a pair of curly braces {}. All CSS code should be written in curly braces {} .
As described above, we will 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 is the point of canceling the list, because we don't need these points.
margin:0px, this sentence is to remove the indentation of UL, so that you can make all the list content is not indented.
#menu ul li {float:left;}
The float:left around here is to let the content be displayed on the same line, so the float property (float) is used.
To this step, we recommend that you save the preview of the effect, we add the following content, the effect is as follows:
At this point, the list content is arranged in one line, we #menu ul li {} and then add the code margin:0 10px
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
margin:0 The effect of 10px is to make a 20-pixel distance between the list contents (left: 10px, right: 10px), the effect of the preview is as follows:
Now that the prototype has come out, let's fix the location of the menu and change the code to the following:
#menu {padding:20px 20px 0 0}
/* Use padding:20px 20px 0 to fix menu position */
#menu ul {float:right;list-style:none;margin:0px;}
/* Added float:right so the menu is on the right side of the page * *
#menu ul li {float:left;margin:0 10px}
At this point, the position has been determined, but the idea map, menu options There is a vertical line, how to do?
Don't forget, we've already left an empty one.
. menudiv {width:1px;height:28px;background: #999}
Save the preview, is the vertical bar already out? This code is not much to say, it should be very easy to understand.
However, the text of the menu option is at the top, and we'll change it to the following code:
#menu ul li {float:left;margin:0 10PX;DISPLAY:BLOCK;LINE-HEIGHT:28PX}
About display:block;line-height:28px You can refer to the manual, I will not speak more.
The effect is basically implemented, and the rest is to modify the menu's hyperlink style and add the following code to the CSS.CSS:
#menu ul Li A:link, #menu ul li a:visited {font-weight:bold;color: #666}
#menu ul Li a:hover{}
This is not much to say, there is nothing to talk about, the final effect is as follows:
This is the end of this section, and by the way, the material is provided to you:
Idea Map: Click to download
HTML and CSS source files: Click to download
prev [1] [2] [3] Next
In this section, the main thing is to tell you how to use the border and clear these two properties.
First of all, if you have ever used table to make a Web page, you should know that if you want to draw a dashed line in the table how to do, it needs to make a small picture to fill, in fact, we have a more simple way, as long as the inclusion of such a paragraph can be, you can try:
You can refer to the manual again, then you can understand dashed, solid, dotted ... And so on, using them you can make a lot of effects, solid lines, dashed lines, double lines, shaded lines, and so on.
The above code can implement the banner in the design sketch and add the following styles to the CSS.CSS:
#banner {
Background:url (banner.jpg) 0 30px no-repeat; /* Add background image */
width:730px; /* Set the width of the layer */
Margin:auto; /* Layer Center */
height:240px; /* Set Height */
border-bottom:5px solid #EFEFEF; /* Draw a light gray solid line */
Clear:both/* Clear float */
}
It is easy to draw a solid line through border, and reduces the network resources used to download the image, making the page load faster.
Another thing to illustrate is clear:both, which means clear left and right floats, and we'll use this property in the next layout: Clear:left/right. Add Clear:both here is because the previous UL, Li Element set the float, if not clear will affect the banner layer position settings.
The above is the body part of the page, we add the following style to Css.css:
#pagebody {
width:730px; /* Set Width */
MARGIN:8PX Auto; /* Center */
}
#sidebar {
width:160px; /* Set Width */
Text-align:left; /* Text left aligned */
Float:left; /* Floating Left */
Clear:left; /* Do not allow floating on the left */
Overflow:hidden; /* out of width partially hidden */
}
#mainbody {
width:570px;
Text-align:left;
Float:right; /* Floating Right */
Clear:right; /* Do not allow floating on the right side */
Overflow:hidden
}
In order to see the effect, we recommend adding the following code to #sidebar and #mainbody, which you can delete after the preview is complete:
border:1px solid #E00;
height:200px
Save the preview effect, you can find that the two layers of the perfect float, in order to achieve the requirements of our layout, while the actual width of two layers should be 160+2 (border) +570+2=734px, has exceeded the width of the parent layer, because of the clear reason, these two layers will not appear dislocation of the situation, This allows us to lay out pages that are not misplaced because the content is too long (for example).
The added Overflow:hidden can then automatically hide portions of the content that are too long (for example slices) . Usually we will see some of the pages in the loading, because the picture is too large, resulting in the layout is open, until the page download is complete before returning to normal, by adding overflow:hidden can solve the problem.
Every property in CSS can be used properly to solve a lot of problems, perhaps they are not very much related to the layout of your page, but you must know the role of these properties, in the face of difficulties, you can try to use these properties to solve the problem.
prev [1] [2] [3]
Go Getting Started with div+css layouts
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
