实战HTML+CSS布局（实例⼊门篇）
学习这篇⼊门教程我们假定你已经具有了⼀定的HTML基础。下⾯我们就开始⼀步⼀步使⽤DIV+CSS进⾏⽹页布局设计。
所有的设计第⼀步就是构思，构思好了，⼀般来说还需要⽤PhotoShop或FireWorks(以下简称PS或FW)等图⽚处理软件将需要制作的界⾯布局简单的构画出来，以下是我构思好的界⾯布局图。
下⾯，我们需要根据构思图来规划⼀下页⾯的布局，仔细分析⼀下该图，我们不难发现，图⽚⼤致分为以下⼏个部分：
1、顶部部分，其中⼜包括了LOGO、MENU和⼀幅Banner图⽚；
2、内容部分⼜可分为侧边栏、主体内容；
3、底部，包括⼀些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了⼀个实际的页⾯布局图，说明⼀下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
乔任梁遗体图片吓人倒吊 │body {}
└#Container {}
├#Header {}
├#PageBody {}
│ ├#Sidebar {}
│ └#MainBody {}
└#Footer {}
⾄此，页⾯布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌⾯新建⼀个⽂件夹，命名为DIV+CSS布局练习，在⽂件夹下新建两个空的记事本⽂档，输⼊以下内容： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Trans
接下来我们在桌⾯新建⼀个⽂件夹，命名为“DIV+CSS布局练习”，在⽂件夹下新建两个空的记事本⽂档，输⼊以下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
android进阶之光第二版pdf<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>⽆标题⽂档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head><body>
</body>
</html>
这是XHTML的基本结构，将其命名为index.htm，另⼀个记事本⽂档则命名为css.css。
下⾯，我们在<body></body>标签对中写⼊DIV的基本结构，代码如下：
<div id="container">[color=#aaaaaa]<!--页⾯层容器-->[/color]
<div id="Header">[color=#aaaaaa]<!--页⾯头部-->[/color]
</div>
<div id="PageBody">[color=#aaaaaa]<!--页⾯主体-->[/color]
<div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
</div>
<div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]
</div>
</div>
<div id="Footer">[color=#aaaaaa]<!--页⾯底部-->[/color]
</div>
</div>
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css⽂件，写⼊CSS信息，代码如下：
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
把以上⽂件保存，⽤浏览器打开，这时我们已经可以看到基础结构了，这个就是页⾯的框架了。
关于以上CSS的说明（详细请参考CSS2.0中⽂⼿册，⽹上有下载）：
1、请养成良好的注释习惯，这是⾮常重要的；
2、body是⼀个HTML元素，页⾯中所有的内容都应该写在这标签对之内，我就不多说了；
3、讲解⼀些常⽤的CSS代码的含义：
font:12px Tahoma；linux下怎么删除整个文件夹
这⾥使⽤了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素⼤⼩，字体为Tahoma格式；margin:0px；
也使⽤了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使⽤auto则是⾃动调整边距，
另外还有以下⼏种写法：
美国施压德国margin:0px auto；
说明上下边距为0px，左右为⾃动调整；
我们以后将使⽤到的padding属性和margin有许多相似之处，他们的参数是⼀样的，
只不过各⾃表⽰的含义不相同，margin是外部距离，⽽padding则是内部距离。
text-align:center
⽂字对齐⽅式，可以设置为左、右、中，这⾥我将它设置为居中对齐。
background:#FFF
设置背景⾊为⽩⾊，这⾥颜⾊使⽤了缩写，完整的应该是background:#FFFFFF。
background可以⽤来给指定的层填充背景⾊、背景图⽚，以后我们将⽤到如下格式：
background:#ccc url('bg.gif') top left no-repeat；
表⽰：使⽤#CCC(灰度⾊)填充整个层，使⽤bg.gif做为背景图⽚，
top left
表⽰图⽚位于当前层的左上端，no-repeat表⽰仅显⽰图⽚⼤⼩⽽不填充满整个层。
top/right/left/bottom/center
⽤于定位背景图⽚，分别表⽰上 / 右 / 下 / 左 / 中；还可以使⽤
background:url('bg.gif') 20px 100px;
表⽰X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表⽰填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表⽰⾼度(px)、宽度(px)、字体颜⾊(HTML⾊系表)。
4、如何使页⾯居中？
⼤家将代码保存后可以看到，整个页⾯是居中显⽰的，那么究竟是什么原因使得页⾯居中显⽰呢？
是因为我们在#container中使⽤了以下属性：
margin:0 auto;
按照前⾯的说明，可以知道，表⽰上下边距为0，左右为⾃动，因此该层就会⾃动居中了。
如果要让页⾯居左，则取消掉auto值就可以了，因为默认就是居左显⽰的。
通过margin:auto我们就可以轻易地使层⾃动居中了。
5、这⾥我只介绍这些常⽤的CSS属性了，其他的请参看CSS2.0中⽂⼿册。
当我们写好了页⾯⼤致的DIV结构后，我们就可以开始细致地对每⼀个部分进⾏制作了。
在上⼀章中我们写⼊了⼀些样式，那些样式是为了预览结构⽽写⼊的，我们把css.css中的样式全部清除掉，重新写⼊以下样式代码：body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
#container {width:800px;margin:10px auto}
样式说明：
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}
这两项分别是控制页⾯中超链接的样式，具体我就不说明了，请⼤家参阅⼿册。
#container {width:800px;margin:10px auto}
指定整个页⾯的显⽰区域。
width:800px指定宽度为800像素，这⾥根据实际所需设定。
margin:10px auto，则是页⾯上、下边距为10个像素，并且居中显⽰。
上⼀章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显⽰。
接下来，我们开始制作TOP部分，TOP部分包括了 LOGO、菜单和Banner ，⾸先我们要做的就是对设计好的图⽚进⾏切⽚，以下是在FW下完成的切⽚：我将TOP部分切
接下来，我们开始制作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中代码如下：
<div id="menu">
<ul>
<li><a href="#">⾸页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="banner">
</div>
为什么要这么写呢，因为对菜单使⽤列表<li>形式，可以在以后⽅便对菜单定制样式。
⽽为什么要添加以下代码呢？
<li class="menuDiv"></li>
插⼊这⼀段代码是可以⽅便地对菜单选项之间插⼊⼀些分隔样式，例如预览图中的竖线分隔。
然后我们在css.css中再写⼊以下样式：
#header {background:url(logo.gif) no-repeat}
样式说明：
#header {background:url(logo.gif) no-repeat}
给页⾯头部分加⼊⼀个背景图⽚LOGO，并且不作填充。
这⾥，我们没有指定header层的⾼度，为什么不指定呢？
html个人网页完整代码div+css因为header层中还有菜单和banner项，所以层的⾼度暂时是未知的，⽽层的属性⼜可以让层根据内容⾃动设定调整，因此我们并不需要指定⾼度。
使⽤列表li制作菜单开始此节的学习前，请确认你已经参照之前的⼏节内容写⼊了DIV、CSS到index.htm和css.css⽂件中。这⼀节我将告诉⼤家如何⽤列表li来制
使⽤列表<li>制作菜单
开始此节的学习前，请确认你已经参照之前的⼏节内容写⼊了DIV、CSS到index.htm和css.css⽂件中。
这⼀节我将告诉⼤家如何⽤列表<li>来制作菜单。
<div id="menu">
<ul>
<li><a href="#">⾸页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>tcpip协议目前使用的版本
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
以上是这部分的结构，有关于<ul></ul>、<li></li>这两个HTML元素⼤家⾃⼰去参考相关的内容吧，它们最主要的作⽤就是在HTML中以列表的形式来显⽰⼀些信息。
还有⼀点需要⼤家⼀定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为
class="divID"时，则在CSS中对应的设置语法是.divID。
如果id="divID"这个层中包括了⼀个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在
class="divID"这个层中时，则设置语法应该是.divID img {}，这⼀点希望⼤家要分清楚了。
另外，HTML中的⼀切元素都是可以定义的，例如table、tr、td、th、form、img、等等，如果你要在CSS中设置它们，则直接写⼊元素的名称加上⼀对⼤括号{}就可以了。所有的CSS代码都应该写在⼤括号{}中。
按照上⾯的介绍，我们先在css.css中写⼊以下代码：
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}
解释⼀下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论