|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
在网页制造中，有很多的术语，比方：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结构实习”，在文件夹下新建两个空的记事本文档，输出以下内容：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无题目文档</title>
<linkhref="css.css"rel="stylesheet"type="text/css"/>
</head>
<body>
</body>
</html>
这是XHTML的基础布局，将其定名为index.htm，另外一个记事本文档则定名为css.css。
上面，我们在<body></body>标签对中写进DIV的基础布局，代码以下：
<divid="container"><!--页面层容器-->
<divid="Header"><!--页面头部-->
</div>
<divid="PageBody"><!--页面主体-->
<divid="Sidebar"><!--侧边栏-->
</div>
<divid="MainBody"><!--主体内容-->
</div>
</div>
<divid="Footer"><!--页面底部-->
</div>
</div>
为了使今后浏览代码更浅易，我们应当增加相干正文，接上去翻开css.css文件，写进CSS信息，代码以下：
/*基础信息*/
body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container{width:100%}
/*页面头部*/
#Header{width:800px;margin:0auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody{width:800px;margin:0auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer{width:800px;margin:0auto;height:50px;background:#00FFFF}
把以上文件保留，用扫瞄器翻开，这时候我们已能够看到基本布局了，这个就是页面的框架了。
关于以上CSS的申明（具体请参考CSS2.0中文手册，网上有下载）：
1、请养成优秀的正文习气，这长短常主要的；
2、body是一个HTML元素，页面中一切的内容都应当写在这标签对以内，我就未几说了；
3、解说一些经常使用的CSS代码的寄义：
font:12pxTahoma；
这里利用了缩写，完全的代码应当是：font-size:12px;font-family:Tahoma；申明字体为12像素巨细，字体为Tahoma格局；
margin:0px；
也利用了缩写，完全的应当是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px0px0px0px
按次是上/右/下/左，你也能够誊写为margin:0(缩写)；
以上款式申明body部分对上右下右边距为0像素，假如利用auto则是主动调剂边距，
别的另有以下几种写法：
margin:0pxauto；
申明高低边距为0px，摆布为主动调剂；
我们今后将利用到的padding属性和margin有很多类似的地方，他们的参数是一样的，
只不外各自暗示的寄义不不异，margin是内部间隔，而padding则是外部间隔。
text-align:center
笔墨对齐体例，能够设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景致为红色，这里色彩利用了缩写，完全的应当是background:#FFFFFF。
background能够用来给指定的层添补背景致、背景图片，今后我们将用到以下格局：
background:#cccurl(bg.gif)topleftno-repeat；
暗示：利用#CCC(灰度色)添补全部层，利用bg.gif做为背景图片，
topleft
暗示图片位于以后层的左上端，no-repeat暗示仅显现图片巨细而不添补满全部层。
top/right/left/bottom/center
用于定位背景图片，分离暗示上/右/下/左/中；还可使用
background:url(bg.gif)20px100px;
暗示X座标为20像素，Y座标为100像素的准确定位；
repeat/no-repeat/repeat-x/repeat-y
分离暗示添补满全部层/不添补/沿X轴添补/沿Y轴添补。
height/width/color
分离暗示高度(px)、宽度(px)、字体色彩(HTML色系表)。
4、怎样使页面居中？
人人将代码保留后能够看到，全部页面是居中显现的，那末事实是甚么缘故原由使得页面居中显现呢？
是由于我们在#container中利用了以上司性：
margin:0auto;
依照后面的申明，能够晓得，暗示高低边距为0，摆布为主动，因而该层就会主动居中了。
假如要让页面居左，则作废失落auto值就能够了，由于默许就是居左显现的。
经由过程margin:auto我们就能够容易地使层主动居中了。
5、这里我只先容这些经常使用的CSS属性了，其他的请参看CSS2.0中文手册。
[1][2][3]下一页
</P>
当我们写好了页面大抵的DIV布局后，我们就能够入手下手仔细地对每个部分举行制造了。
在上一章中我们写进了一些款式，那些款式是为了预览布局而写进的，我们把css.css中的款式全体扫除失落，从头写进以下款式代码：
/*基础信息*/
body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container{width:800px;margin:10pxauto}
款式申明：
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
这两项分离是把持页面中超链接的款式，详细我就不申明了，请人人参阅手册。
#container{width:800px;margin:10pxauto}
指定全部页面的显现地区。
width:800px指定宽度为800像素，这里依据实践所需设定。
margin:10pxauto，则是页面上、下边距为10个像素，而且居中显现。
上一章中我们讲过，对层的margin属性的摆布边距设置为auto可让层居中显现。
接上去，我们入手下手制造TOP部分，TOP部分包含了LOGO、菜单和Banner，起首我们要做的就是对计划好的图片举行切片，以下是在FW下完成的切片：
我将TOP部分切片为两部分，第一部分包含了LOGO和一条横线。因为LOGO图片并没有太多的色彩，这里我因而将这一部分保留为GIF格局，调色板选择为准确，选择Alpha通明度，色版为红色(此处色彩应与背景致不异)，导出为logo.gif，图象宽度为800px。
到这里，有的伴侣就说了，*为何要利用GIF格局？利用JPEG不是更好吗？
由于GIF格局的图片文件更小，如许能使页面载进的速率更快，固然利用此格局之前必需断定图片并没有利用太多的色彩，当我们利用了GIF格局时，从肉眼上其实不能看出图片有甚么太年夜的变更，因而这是可行的。
*接上去的Banner部分还能利用GIF格局吗？
谜底是不克不及，由于Banner部分是一个仔细的图片，假如利用GIF格局色彩会有太年夜的丧失，以是必需利用JPEG格局，将文件导出为banner.jpg。
*公道的切片长短常之主要的，由于切片的办法准确与反对定了CSS誊写的浅易水平和页面载进速率。
切好片后，我们还必要对TOP部分举行剖析并将DIV布局写进Header中代码以下：
<P>
- 首页
<LIclass=menuDiv>
- 博客
<LIclass=menuDiv>
- 计划
<LIclass=menuDiv>
- 相册
<LIclass=menuDiv>
- 论坛
<LIclass=menuDiv>
- 关于
<P>为何要这么写呢，由于对菜单利用列表情势，能够在今后便利对菜单定制款式。
而为何要增加以下代码呢？
<LIclass=menuDiv>
拔出这一段代码是能够便利地对菜单选项之间拔出一些分开款式，比方预览图中的竖线分开。
然后我们在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文件中。
这一节我将告知人人怎样用列表
来制造菜单。
<P>
- 首页
<LIclass=menuDiv>
- 博客
<LIclass=menuDiv>
- 计划
<LIclass=menuDiv>
- 相册
<LIclass=menuDiv>
- 论坛
<LIclass=menuDiv>
- 关于
以上是这部分的布局，有关于、>这两个HTML元素人人本人往参考相干的内容吧，它们最次要的感化就是在HTML中以列表的情势来显现一些信息。
另有一点必要人人必定要分分明的，当在HTML中界说为id="divID"时，在CSS对应的设置语法例是#divID{}，假如在HTML中界说为class="divID"时，则在CSS中对应的设置语法是.divID。
假如id="divID"这个层中包含了一个
这时候，列表内容是分列在一行，我们在#menuulli{}再到场代码margin:010px
#menuul{list-style:none;margin:0px;}
#menuulli{float:left;margin:010px}
margin:010px的感化就是让列表内容之间发生一个20像素的间隔(左：10px，右：10px)，预览的效果以下：
如今，雏形已出来了，我们再来流动菜单的地位，把代码改成以下：
#menu{padding:20px20px00}
/*使用padding:20px20px00来流动菜单元置*/
#menuul{float:right;list-style:none;margin:0px;}
/*增加了float:right使得菜单元于页面右边*/
#menuulli{float:left;margin:010px}
这时候，地位已断定了，但是构想图中，菜单选项之间另有一条竖线，怎样办呢？
别忘了，我们早就已留好了一个空的
<LIclass=menuDiv>，要想到场竖线就利用它了。
依照下面说的办法，我们再增加以下代码：
.menuDiv{width:1px;height:28px;background:#999}
保留预览一下，竖线是不是已出来了？关于这段代码就未几讲了，应当是很简单了解的。
不外，菜单选项的笔墨却在顶部，我们再修正成以下代码：
#menuulli{float:left;margin:010px;display:block;line-height:28px}
关于display:block;line-height:28px人人能够往参阅一动手册，我就未几讲了。
效果基础上已完成了，剩下的就是修正菜单的超链接款式，在css.css中增加以下代码：
#menuullia:link,#menuullia:visited{font-weight:bold;color:#666}
#menuullia:hover{}
这个也未几说了，没甚么好说的了，最初的效果以下：
这一节到这里就终了了，特地把素材供应给人人：
构想图：点击下载
HTML和CSS源文件：点击下载
上一页[1][2][3]下一页
这一节内里，次要就是想告知人人怎样利用好border和clear这两个属性。
<P>起首，假如你曾用过table制造网页，你就应当晓得，假如要在表格中绘制一条虚线该怎样做，那必要制造一个很小的图片来添补，实在我们另有更复杂的举措，只需在中到场这么一段就能够了，你能够尝尝：
人人能够再次参考手册，然后你就可以分明dashed、solid、dotted...等的感化，使用它们你能够制造出很多效果来，实线、虚线、双线、暗影线等等。
<P>
以上代码即可以完成计划草图中的banner，在css.css中到场以下款式：
#banner{
background:url(banner.jpg)030pxno-repeat;/*到场背景图片*/
width:730px;/*设定层的宽度*/
margin:auto;/*层居中*/
height:240px;/*设定高度*/
border-bottom:5pxsolid#EFEFEF;/*画一条浅灰色实线*/
clear:both/*扫除浮动*/
}
经由过程border很简单就绘制出一条实线了，而且削减了图片下载所占用的收集资本，使得页面载进速率变得更快。
另外一个要申明的就是clear:both，暗示扫除左、右一切的浮动，在接上去的结构中我们还会用这个属性：clear:left/right。在这里增加clear:both是因为之前的ul、li元素设置了浮动，假如不扫除则会影响banner层地位的设定。
以上是页面主体部分，我们在css.css中增加以下款式：
#pagebody{
width:730px;/*设定宽度*/
margin:8pxauto;/*居中*/
}
#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:1pxsolid#E00;
height:200px
保留预览效果，能够发明这两个层完善的浮动，在到达了我们结构的请求，而两个层的实践宽度应当160+2(border)+570+2=734px，已超越了父层的宽度，因为clear的缘故原由，这两个层才不会呈现错位的情形，如许可使我们结构的页面不会由于内容太长（比方图片）而招致错位。
而以后增加的overflow:hidden则能够使内容太长（比方图片）的部分主动被埋没。一般我们会看到一些网页在载进时，因为图片太年夜，招致结构被撑开，直到页面下载完成才恢复一般，经由过程增加overflow:hidden就能够办理这个成绩。
CSS中每个属性使用妥当，就能够办理很多成绩，也许它们与你在结构的页并没有太年夜的干系，可是你必需晓得这些属性的感化，在碰到困难的时分，能够实验利用这些属性往办理成绩。
上一页[1][2][3]
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:17:59
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜