Div CSS layout introductory tutorial one_html/css

1. 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. After conceiving, generally speaking, you need to use PhotoShop or FireWorks (hereinafter referred to as PS or FW) and other image processing software to simply draw the interface layout that needs to be made. The following is what I have conceived. interface layout diagram.

Concept map, HTML and CSS source files: click to download

Next, we need to plan the layout of the page based on the concept map, and analyze the picture carefully. It is not difficult to find that the picture is roughly It is divided into the following parts:
1. The top part, which also includes LOGO, MENU and a Banner picture;
2. The content part can be divided into sidebar and main content;
3 , bottom, including some copyright information.
With the above analysis, we can easily lay out the layout. Our design layer is as shown below:

Based on the above picture, I drew another actual page layout diagram to illustrate the embedding of the layers. Set the relationship, so 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*/
　　│　└#MainBody {}　/*Main content*/
　　└#Footer {}　/*Bottom of the page*/

At this point, the page layout and planning have been completed. The next thing we have to do is start writing HTML code and CSS .
　　

2. Write the overall layer structure and CSS

Next, we create a new folder on the desktop, named "DIV CSS Layout Exercise", and create two new folders under the folder For an empty Notepad document, enter the following content:

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > divcss
< link href = "css.css" rel ="stylesheet" type ="text/css" />

< body >

< ;/ html >

This is the basic structure of XHTML, name it index.htm, and name the other Notepad document css.css.
Next, we write the basic structure of DIV in the tag pair, the code is as follows:

< div id ="container" >
　　 < div id ="Sidebar" >
　　
　　 < div id < div !-- Bottom of the page-->
　

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 }

/* Bottom of page*/
#Footer { width : 800px ; margin : 0 auto ; height : 50px ; background : #00FFFF }

Save the above file and open it with a browser. At this time we can already see the basic structure. This is the frame of the page. Instructions on the above CSS (please refer to the CSS2.0 Chinese manual for details, which can be downloaded online):
1. Please develop good comment 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;
used here Abbreviation, the complete code should be: font-size:12px; font-family:Tahoma; the description font size is 12 pixels, the font is Tahoma format;
margin:0px;
also uses abbreviation, the complete code should be It is:
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 means that the top, right, bottom and left margins of the body part are 0 pixels. If you use auto, the margins will be automatically adjusted.
In addition, there are The following writing methods:
margin:0px auto;
indicates that the top and bottom margins are 0px, and the left and right margins are automatically adjusted;
The padding attribute we will use in the future has many similarities with margin, and their parameters They are the same, but they have different meanings. Margin is the outer distance, and padding is the inner 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 version 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/bottom/left/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 you save 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 instructions, 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.

3. One of the top of the page

On top we wrote some styles, those styles are written for preview structure, we clear all the styles in css.css , rewrite 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 used to control the style of hyperlinks in the page. I will not explain the details. 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 displayed in the center.
As we mentioned above, setting the left and right margins of the layer's margin attribute to auto can center the layer. Next, we started 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 image does not have too many colors, I saved this part in GIF format, selected the palette to Accurate, selected Alpha transparency, the color version to white (the color here should be the same as the background color), and exported it as a 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, it cannot be seen with the naked eye. Nothing much changes out of the picture, so this is 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 ="#" > Home page
　 < li class ="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" >

Why do you write it like this? Because using the list form for the menu can be done later Conveniently customize the menu style. And why should we add the following code?

< li class ="menuDiv" >

Inserting this piece of code is convenient for inserting between menu options Insert some separation styles, 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.

4. Page top creation part 2

Use the list creation menu
Before starting this section, please make sure you have written the DIV and CSS to index.htm and css.css files. In this section I will tell you how to use lists to create menus.

< div id ="menu" >
   < ul >
     < li >< a href ="#" > 首页
     < li class ="menuDiv" >
     < li >< a href ="#" > 博客
     < li class ="menuDiv" >
     < li >< a href ="#" > 设计
     < li class ="menuDiv" >
     < li >< a href ="#" > 相册
     < li class ="menuDiv" >
     < li >< a href ="#" > 论坛
     < li class ="menuDiv" >
     < li >< a href ="#" > 关于

以上是这部分的结构，有关于

、

这两个HTML元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。

如果id="divID"这个层中包括了一个，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。

另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

按照上面的介绍，我们先在css.css中写入以下代码：

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

解释一下：

#menu ul {list-style:none;margin:0px;}
list-style:none，这一句是取消列表前点，因为我们不需要这些点。
margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。

#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。

到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：

这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码margin:0 10px

#menu ul { list-style : none ; margin : 0px ; }
#menu ul li { float : left ; margin : 0 10px }

margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：
现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：

#menu { padding : 20px 20px 0 0 }
/* 利用padding:20px 20px 0 0来固定菜单位置 */
#menu ul { float : right ; list-style : none ; margin : 0px ; }
/* 添加了float:right使得菜单位于页面右侧 */
#menu ul li { float : left ; margin : 0 10px }

这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢？别忘了，我们早就已经留好了一个空的

，要想加入竖线就使用它了。按照上面说的方法，我们再添加以下代码：

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

保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容易理解的。
不过，菜单选项的文字却在顶部，我们再修改成以下代码：

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

关于display:block;line-height:28px大家可以去参阅一下手册，我就不多讲了。

效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码：

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

这个也不多说了，没什么好说的了，最后的效果如下：

这一节到这里就完毕了，顺便把素材提供给大家：

构思图、HTML和CSS源文件：点击下载

五、页面制作-用好border和clear

这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。

首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在中加入这么一段就可以了，你可以试试：

大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。

The above code can realize the banner in the design sketch. 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 ; /* Setting 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 downloading, 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.

< div id ="pagebody" >
< div id ="sidebar" >

< div id ="mainbody" >

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 ; /* Align text to the left*/
float : left ; /* Float to the left*/
clear : left ; /* Do not allow floating on the left*/
overflow : hidden ; /* Hide the part beyond the width*/
}
#mainbody {
width : 570px ;
text-align : left ;
float : right ; /* Float right*/
clear : right ; /* Floating is not allowed on the right side*/
overflow : hidden
}

In order to see the effect, it is recommended to use #sidebar and #mainbody Add the following code, you can delete this code after the preview is completed:

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

Save preview As a result, you can find that these two layers float perfectly, meeting 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 reasons. , these two layers will not be misaligned, so that the page we lay out 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 When faced with a difficult problem, you can try to use these attributes to solve the problem.
Source: http://www.blueidea.com/tech/site/2006/3574.asp