Div CSS basic demo_html/css_WEB-ITnose

     今天看到一个Div+CSS 布局的经典教程，奉献给大家，本人一向偏好DIV+CSS，
但由于关注seo 和网站运营较多，造成了DIV+CSS 做网页模板的技术生疏，为
了培养自己成全才，不得不好好消化一翻，其实很简单滴。这个DIV+CSS 布局
教程很不错。
教程共分5 节，其实就一点点内容，不过通过学习，一定能让你领会到DIV+CSS
的精髓，不要嫌文字多，一个小时一定能让你学完，当然是针对熟悉网页制作
基础的朋友。
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML 等等。在下
面的文章中我们将会用到一些有关于HTML 的基本知识，而在你学习这篇入门教
程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用
DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop 或
FireWorks(以下简称PS 或FW)等图片处理软件将需要制作的界面布局简单的构
画出来，以下是我构思好的界面布局图。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU 和一幅Banner 图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

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

Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
DIV 结构如下：
│body {} /*这是一个HTML 元素，具体我就不说明了*/
    └#Container {} /*页面层容器*/
          ├#Header {} /*页面头部*/
          ├#PageBody {} /*页面主体*/
          │    ├#Sidebar {} /*侧边栏*/
          │    └#MainBody {} /*主体内容*/
          └#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML 代码和
CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS 布局练习”，在文件夹下新
建两个空的记事本文档，输入以下内容：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
这是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. 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}
Put the above files Save 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;
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
2. Body is an HTML element. All content on the page should be written within this tag pair. I will
Not much to say;
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;
indicates 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 ; 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 are the same
,
It’s just that 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;
means: fill the entire layer with #CCC (grayscale color), use bg.gif as the background image,
top left
means that the image is located at the upper left end of the current layer, no-repeat means that only the image is displayed Size without filling the entire
layer.
top/right/left/bottom/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 the precise positioning where the X coordinate is 20 pixels and the Y coordinate is 100 pixels;
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
repeat/no-repeat/repeat-x/repeat-y
means filling the entire layer/not filling/filling along the X axis/filling along the Y axis respectively.
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 description, 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.
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:
Style description:
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}
These two items are to control the style of hyperlinks in the page. , I won’t 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 make the layer appear centered
.
Next, we start to make the TOP part. The TOP part includes the LOGO, menu and Banner. First of all
我们要做的就是对设计好的图片进行切片，以下是在FW 下完成的切片：

Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
我将TOP 部分切片为两部分，第一部分包括了LOGO 和一条横线。由于LOGO 图
片并没有太多的颜色，这里我于是将这一部分保存为GIF 格式，调色板选择为
精确，选择Alpha 透明度，色版为白色(此处颜色应与背景色相同)，导出为
logo.gif，图像宽度为800px。
到这里，有的朋友就说了，* 为什么要使用GIF 格式？使用JPEG 不是更好吗？
因为GIF 格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格
式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF 格式时，从肉
眼上并不能看出图片有什么太大的变化，因此这是可行的。
* 接下来的Banner 部分还能使用GIF 格式吗？
答案是不能，因为Banner 部分是一个细致的图片，如果使用GIF 格式颜色会有
太大的损失，所以必须使用JPEG 格式，将文件导出为banner.jpg。
* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS 书写的简
易程度以及页面载入速度。
切好片后，我们还需要对TOP 部分进行分析并将DIV 结构写入Header 中代码如
下：

• 首页



Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.

• 博客




• 设计




• 相册




• 论坛




• 关于

为什么要这么写呢，因为对菜单使用列表

形式，可以在以后方便对菜单定
制样式。
而为什么要添加以下代码呢？

插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图
中的竖线分隔。
然后我们在css.css 中再写入以下样式：
/*页面头部*/
#header {background:url(logo.gif) no-repeat}
样式说明：
#header {background:url(logo.gif) no-repeat}
给页面头部分加入一个背景图片LOGO，并且不作填充。
这里，我们没有指定header 层的高度，为什么不指定呢？
因为header 层中还有菜单和banner 项，所以层的高度暂时是未知的，而层的
属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。
使用列表

制作菜单
开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS 到
index.htm 和css.css 文件中。
这一节我将告诉大家如何用列表

来制作菜单。
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.

• 首页




• 博客




• 设计




• 相册




• 论坛




• 关于

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

、

这两个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 的缩进，这样做可以使所有的列表内容都不缩进。
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
#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}
保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容
易理解的。

Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
不过，菜单选项的文字却在顶部，我们再修改成以下代码：
#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{}
这个也不多说了，没什么好说的了，最后的效果如下：

这一节里面，主要就是想告诉大家如何使用好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; /*Set the 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 border. And it reduces the network resources occupied by image downloads
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
source, making the page loading speed faster quick.
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 ul and li elements before
are set to float. If they are not cleared, it will affect the setting of the banner layer position.

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; /*Centered*/
}
#sidebar {
width:160px; /*Set width*/
text-align:left; /*Text-aligned left*/
float:left; /*Float left */
clear:left; /*Floating on the left is not allowed*/
overflow:hidden; /*The part beyond the width is hidden*/
}
#mainbody {
width:570px ;
text-align:left;
float:right; /*Float right*/
clear:right; /*Floats are not allowed on the right side*/
overflow:hidden
}
In order to see the effect, it is recommended to add the following code to #sidebar and #mainbody. You can delete this code after the preview is
complete:
border:1px solid #E00;
height: 200px
Save the preview effect. You can find that these two layers are floating perfectly and meet our layout requirements. However, the actual width of the two layers of
should be 160 2 (border) 570 2=734px, which is already exceeded. The width of the parent layer,
Due to clear, the two layers will not be misaligned, so that our layout can be
Generated by Foxit PDF Creator © Foxit Software
http://www .foxitsoftware.com For evaluation only.
The page will not be misaligned due to too long content (such as pictures).

The overflow:hidden added later can make the part of the content (such as pictures) that is too long automatically
hidden. Usually we will see that when some web pages are loaded, the layout is stretched due to the large size of the image.
It does not return to normal until the page download is completed. This problem can be solved
by adding overflow:hidden.
Proper use of 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 problems , you can
try to use these properties to solve the problem.

Article source (Internet): Blue Ideal, thanks to the author for his selfless dedication,
there is less and less purification on the Internet today.
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.