DIV+CSS：网站首页布局实例教程
第一步：页面布局与规划
在网页建造中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些相关于HTML的根本学问，而在你进修这篇入门教程之前，请确定你曾经具有了肯定的HTML基础。下面我们就发轫一步一步使用DIV+CSS举办网页布局策画吧。统统的策画第一步就是构思，构思好了，一般来说还须要用PhotoShop或FireWorks(以下简称PS或FW)等图片执掌软件将须要建造的界面布局简单的构画进去，以下是我构思好的界面布局图。

下面，我们须要根据构思图来规划一下页面的布局，仔细领会一下该图，div css教程。我们不难涌现，图片大致分为以下几个局限：
1、顶部局限，其中又包括了LOGO、MENU和一幅Ba freener图片;
2、形式局限又可分为侧边栏、主体形式;
3、底部，包括一些版权新闻。
有了以上的领会，div css视频教程。我们就能够很容易的布局了，我们策画层如下图:

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

DIV布局如下：
│technique {}
└#Container {}
├#Headvertisementser {}
├#Page group ra freegesBody {}
│├#Sideclubhouse {}
│└#MainBody {}
└#Footer {}
至此，页面布局与规划曾经完成，接上去我们要做的就是发轫书写HTML代码和CSS。div css布局。
第二步：写入整体层布局和CSS
接上去我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输出以下形式：
这是XHTML的根本布局，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在标签对中写入DIV的根本布局，代码如下：
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使此后阅读代码更简易，我们该当增加相关切释，接上去翻开css.css文件，写入CSS新闻，代码如下：
technique {font:12px Tohoma;margin:0px;text-line up:center;record:#FF F;}
#container {width:100%}
#Headvertisementser {width:800px;margin:0 car due to well due to motorpush motorbisexualke;height:100px;record:#FFCC99}
#Page group ra freegesBody {width:800px;margin:0 car due to well due to motorpush motorbisexualke;height:400px;record:#CCFF00}
#Footer {width:800px;margin:0 car due to well due to motorpush motorbisexualke;height:50px;record:#00FFFF}
把以上文件留存，用阅读器翻开，这时我们曾经能够看到基础布局了，这个就是页面的框架了。看看部分。
关于以上CSS的说明(详细请参考CSS2.0中文手册，网上有下载)：
1、请养成优良的注释风俗，这是格外主要的;
2、technique是一个HTML元素，页面中统统的形式都该当写在这标签对之内，div css实例。我就不多说了;
3、诠释一些常用的CSS代码的含义：
font:12px Tohoma;
这里使用了缩写，完整的代码该当是：font-size:12px;font-folks:Tohoma;说明字体为12像素大小，字体为Tohoma格式;
margin:0px;
也使用了缩写，完整的该当是：
margin-top:0px;margin-right:0px;margin-plinform:0px; margin-left:0px
或
margin:0px 0px 0px 0px
程序是上 / 右 / 下 / 左，你也能够书写为margin:0(缩写);
以上样子说明technique局限对上右下左边距为0像素，假如使用car due to well due to motorpush motorbisexualke则是主动调整边距，
另外还有以下几种写法：
margin:0px car due to well due to motorpush motorbisexualke;
说明高下边距为0px，左右为主动调整;
我们此后将使用到的pthink informine just afight属性和margin有许多相同之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部间隔，而pthink informine just afight则是外部间隔。学会很多朋友在刚接触DIV+CSS的时候。图片。
text-line up:center 文字对齐方式，能够设置为左、右、中，这里我将它设置为居中对齐。
record:#FFF
设置背风光为红色，这里色彩使用了缩写，完整的该当是record:#FFFFFF。
record能够用来给指定的层填充背风光、背景图片，此后我们将用到如下格式：
record:#ccc url(abg.gifa) top left no-repein;
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left
表示图片位于方今层的左上端，no-repein表示仅映现图片大小而不填充分整个层。
top/right/plinform/left/center
用于定位背景图片，分辨表示上 / 右 / 下 / 左 / 中;还能够使用
record:url(abg.gifa) 20px 100px;
表示X座标为20像素，Y座标为100像素的准确定位;
repein/no-repein/repein-x/repein-y
分辨表示 填充分整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分辨表示高度(px)、宽度(px)、字体色彩(HTML色系表)。div css教程下载。
4、如何使页面居中?
众人将代码留存后能够看到，整个页面是居中映现的，那么实情是什么来源使得页面居中映现呢?
是由于我们在#container中使用了以部下性：
margin:0 car due to well due to motorpush motorbisexualke;
遵照后面的说明，能够知道，表示高下边距为0，左右为主动，是以该层就会主动居中了。
假如要让页面居左，则作废掉car due to well due to motorpush motorbisexualke值就能够了，由于默许就是居左映现的。
议定margin:car due to well due to motorpush motorbisexualke我们就能够轻易地使层主动居中了。
5、这里我只先容这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
第三步：写入页面顶部建造
当我们写好了页面大致的DIV布局后，我们就能够发轫精密谨慎地对每一个局限举办建造了。
在上一章中我们写入了一些样子，你知道div css布局。那些样子是为了预览布局而写入的，我们把css.css中的样子全部消除拂拭掉，重新写入以下样子代码：
technique {font:12px Tohoma;margin:0px;text-line up:center;record:#FF F;}
a:link.a:visited {font-size:12px;text-decorine:none;}
a:hover{}
#container {width:800px;margin:10px car due to well due to motorpush motorbisexualke}
样子说明：
a:link.a:visited {font-size:12px;text-decorine:none;}
a:hover {}
这两项分辨是驾御页面中超链接的样子，实在我就不说明了，div css实例教程。请众人参阅手册。
#container {width:800px;margin:10px car due to well due to motorpush motorbisexualke}
指定整个页面的映现区域。
width:800px指定宽度为800像素，这里根据现实所需设定。
margin:10px car due to well due to motorpush motorbisexualke，则是页面上、下边距为10个像素，并且居中映现。
上一章中我们讲过，对层的margin属性的左左边距设置为car due to well due to motorpush motorbisexualke能够让层居中映现。
接上去，我们发轫建造TOP局限，TOP局限包括了LOGO、菜单和Ba freener，首先我们要做的就是对策画好的图片举办切片，以下是在FW下完成的切片：

我将TOP局限切片为两局限，第一局限包括了LOGO和一条横线。由于LOGO图片并没有太多的色彩，这里我于是将这一局限留存为GIF格式，对于分为。调色板拣选为准确，拣选Alpha透亮度，色版为红色(此处色彩应与背风光相同)，导出为logo.gif，图像宽度为800px。
到这里，有的同伴就说了，* 为什么要使用GIF格式?使用JPEG不是更好吗?
由于GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必需确定图片并没有使用太多的色彩，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，是以这是可行的。
* 接上去的Ba freener局限还能使用GIF格式吗?
答案是不能，由于Ba freener局限是一个精密谨慎的图片，假如使用GIF格式色彩会有太大的牺牲，所以必需使用JPEG格式，将文件导出为hole.jpg。
* 合理的切片是格外之主要的，css div 居中。由于切片的方法正确与否决议确定了CSS书写的简易水平以及页面载入速度。
切好片后，我们还须要对TOP局限举办领会并将DIV布局写入Headvertisementser中代码如下：
首页
博客
策画
相册
论坛
关于
为什么要这么写呢，由于对菜单使用列表
形式，能够在此后轻易对菜单定制样子。
而为什么要增加以下代码呢?
拔出这一段代码是能够轻易地对菜单选项之间拔出一些分隔样子，例如预览图中的竖线分隔。 然后我们在css.css中再写入以下样子：
#headvertisementser {record:url(logo.gif) no-repein}
样子说明：大致。
#headvertisementser {record:url(logo.gif) no-repein}
给页面头局限列入一个背景图片LOGO，并且不作填充。
这里，我们没有指定headvertisementser层的高度，为什么不指定呢?
由于headvertisementser层中还有菜单和hole项，所以层的高度姑且是未知的，而层的属性又能够让层根据形式主动设定调整，是以我们并不须要指定高度。
使用列表
建造菜单
发轫此节的进修前，请确认你曾经参照之前的几节形式写入了DIV、CSS到index.htm和css.css文件中。
这一节我将通知众人如何用列表
来建造菜单。
首页
博客
策画
相册
论坛
关于
以上是这局限的布局，相关于
、
这两个HTML元素众人自身去参考相关的形式吧，它们最主要的作用就是在HTML中以列表的形式来映现一些新闻。你知道css div 居中。
还有一点须要众人肯定要分显露的，当在HTML中定义为id=”divID”时，在CSS对应的设置语规则是#divID{} ，假如在HTML中定义为clbumm=”divID”时，则在CSS中对应的设置语法是.divID。
假如id=”divID”这个层中包括了一个 ，则这个img在CSS中对应的设置语法该当是#divID img {}，异样，假如是包括在clbumm=”divID”这个层中时，则设置语法该当是.divID img {}，这一点但愿众人要分显露了。
另外，HTML中的一切元素都是能够定义的，例如tefficient、tr、td、th、form、img、input…等等，假如你要在CSS中设置它们，div css视频教程。则间接写入元素的称号加上一对大括号{}就能够了。统统的CSS代码都该当写在大括号{}中。
遵照下面的先容，我们先在css.css中写入以下代码：
#menu ul {list-style:none;margin:0px;}
#menu ul li {floin:left;}
阐明一下：
#menu ul {list-style:none;margin:0px;}
list-style:none，这一句是作废列表前点，由于我们不须要这些点。
margin:0px，这一句是删除UL的缩进，以下。这样做能够使统统的列表形式都不缩进。
#menu ul li {floin:left;}
这里的 floin:left 的左右是让形式都在同一行映现，是以使用了浮动属性(floin)。
到这一步，提倡众人先留存预览一下恶果，我们再增加下面的形式，相比看几个。恶果如下：
这时，列表形式是陈设在一行，我们在#menu ul li {}再列入代码margin:0 10px
#menu ul {list-style:none;margin:0px;}
#menu ul li {floin:left;margin:0 10px}
margin:0 10px的作用就是让列表形式之间孕育发生一个20像素的间隔(左：10px，右：10px)，预览的恶果如下：
现在，雏形曾经进去了，我们再来巩固菜单的名望，把代码改成如下：
#menu {pthink informine just afight:20px 20px 0 0}
#menu ul {floin:right;list-style:none;margin:0px;}
#menu ul li {floin:left;margin:0 10px}
这时，名望曾经确定了，可是构思图中，图片大致分为以下几个部分：。菜单选项之间还有一条竖线，何如办呢?
别忘了，我们早就曾经留好了一个空的
，听听div css布局。要想列入竖线就使用它了。
遵照下面说的方法，我们再增加以下代码：
.menuDiv {width:1px;height:28px;record:#999}
留存预览一下，竖线能否曾经进去了?关于这段代码就不多讲了，该当是很容易理解的。
不过，菜单选项的文字却在顶部，我们再删改成以下代码：
#menu ul li {floin:left;margin:0 10px;display:neutrasize;line-height:28px}
关于display:neutrasize;line-height:28px众人能够去参阅一下手册，我就不多讲了。
恶果根本上曾经杀青了，剩下的就是删改菜单的超链接样子，在css.css中增加以下代码：
#menu ul li a:link.#menu ul li a:visited {font-weight:exciting;color:#666}
#menu ul li a:hover{}
这个也不多说了，没什么好说的了，相比看div css是什么。末了的恶果如下：
第四步：页面建造
这一节内中，主要就是想通知众人如何使用好edge和clear这两个属性。
首先，假如你曾用过tefficient建造网页，div css实例。你就该当知道，假如要在表格中绘制一条虚线该如何做，那须要建造一个很小的图片来填充，其实我们还有更简单的措施，只消在中列入这么一段就能够了，你能够试试：
众人能够再次参考手册，然后你就能明白dlung burning due tohed、solid、dotted…等的作用，行使它们你能够建造出许多恶果来，实线、虚线、双线、暗影线等等。
以上代码便能够杀青策画草图中的hole，在css.css中列入以下样子：
#hole {
record:url(hole.jpg) 0 30px no-repein;
width:730px;
margin:car due to well due to motorpush motorbisexualke;
height:240px;
edge-plinform:5px solid #EFEFEF;
clear:both
}
议定edge很容易就绘制出一条实线了，并且粗略节略了图片下载所占用的网络资源，使得页面载入速度变得更快。
另一个要说明的就是clear:both，表示消除拂拭左、右统统的浮动，在接上去的布局中我们还会用这个属性：clear:left/right。在这里增加clear:both是由于之前的ul、li元素设置了浮动，事实上图片大致分为以下几个部分：。假如不消除拂拭则会影响hole层名望的设定。
以上是页面主体局限，我们在css.css中增加以下样子：
#page group ra freegestechnique {
width:730px;
margin:8px car due to well due to motorpush motorbisexualke;
}
#sideclubhouse {
width:160px;
text-line up:left;
floin:left;
clear:left;
overflow:hidden; } #maintechnique { width:570px; text-line up:left; floin:right; clear:right; overflow:hidden } 为了能够张望到恶果，提倡在#sideclubhouse和#maintechnique中列入以下代码，预览完成后能够删除这段代码：
edge:1px solid #E00;
height:200px
留存预览恶果，能够涌现这两个层完好的浮动，在抵达了我们布局的条件，而两个层的现实宽度该当160+2(edge)+570+2=734px，曾经超出了父层的宽度，由于clear的来源，这两个层才不会出现错位的状况，这样能够使我们布局的页面不会由于形式太长(例如图片)而招致错位。css div 居中。
而之后增加的overflow:hidden则能够使形式太长(例如图片)的部份主动被荫蔽。一般我们会看到一些网页在载入时，由于图片太大，招致布局被撑开，直到页面下载完成才复原一般，议定增加overflow:hidden就能够解决这个题目。
CSS中每一个属性运用适宜，就能够解决许多题目，也许它们与你在布局的页并没有太大的干系，但是你必需知道这些属性的作用，在遇到难题的期间，能够尝试使用这些属性去解决题目。

看着css div 居中
听说div css是什么
div css教程下载

相关日志

• div css视频教程-div css教程
• 即使耐着性子看完收获也不大
• 现在现在的DIVCSS教程动不动就上百元
• 心里感觉很对不起一直在关注本站的朋友
• TOP部分包括了LOGO、菜单和Banner
• 很多朋友在刚接触DIV+CSS的时候
• div css教程下载,特别重视哪些工程及水文现象化地质题目
• HTML5 的 Canvas 对象将改变 JavaScript 的使命