[Transfer] Div CSS layout introductory tutorial_html/css_WEB-ITnose

出处：蓝色理想    责任编辑：moby

 

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

 

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：

　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
　　2、内容部分又可分为侧边栏、主体内容；
　　3、底部，包括一些版权信息。
　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

　　DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。

 

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

 

 

无标题文档 title >

head >


body >
html >

 

 

这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

下面，我们在

标签对中写入DIV的基本结构，代码如下：

 

[color=#aaaaaa][/color]
　　

[color=#aaaaaa][/color]
　　

　　

[color=#aaaaaa][/color]
　　　　

[color=#aaaaaa][/color]
　　　　

　　　　

[color=#aaaaaa][/color]
　　　　

　　

　　

[color=#aaaaaa][/color]
　　

In order to make it easier to read the code in the future, we should add relevant comments, then open the css.css file, write CSS information, code 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 (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 complete 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 it as margin:0 (abbreviation);
The above style description body The top, right, bottom and left margins of some pairs are 0 pixels. If you use auto, the margins will be automatically adjusted.

There are also the following writing methods:
margin:0px auto;
indicates 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.
It’s just that 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/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 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 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 make each part in detail.

In the previous chapter, we wrote some styles. Those styles were written for the preview structure. We cleared all the styles in 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 {}

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 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 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 file in GIF format is smaller, it 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 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:

Why do we write it like this, because it is The menu uses the list

form, which can be easily customized in the future.

Why add the following code?

Insert this piece of code to 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 header of the page 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.

Use list

to create a 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 list

to create a menu.

Home< ;/ a > li >
li >
Blog< ;/ a > li >
li >
design< ;/ a > li >
li >
Album< ;/ a > li >
li >
Forum< ;/ a > li >
li >
About< ;/ a > li >
ul >
div >

The above is the structure of this part, about

and

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.

如果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这两个属性。

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

中加入这么一段就可以了，你可以试试：

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

    <div id="banner"></div>

 

 

 以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：

     #banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/}

  

 

通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。

    <div id="pagebody"><!--页面主体--> <div id="sidebar"><!--侧边栏--> </div> <div id="mainbody"><!--主体内容--> </div></div>

以上是页面主体部分，我们在css.css中添加以下样式：

     #pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/}#sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/}#mainbody { width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden}

为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：

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

保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。

 

而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。

CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。