divcss布局及应用入门教程(编辑修改稿)

divcss布局及应用入门教程(编辑修改稿)内容摘要：

并不需要指定高度。 页面顶部制作 (2)使用列表 li制作菜单 开始此节的学习前，请确认你已经参照之前的几节内容写入了 DIV、 CSS到 和 文件中。 这一节我将告诉大家如何用列表 li来制作菜单。 程序代码 div id=menu ul lia href=首页 /a/li li class=menuDiv/li lia href=博客 /a/li li class=menuDiv/li lia href=设计 /a/li li class=menuDiv/li lia href=相册 /a/li li class=menuDiv/li lia href=论坛 /a/li li class=menuDiv/li lia 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、 input...等等，如果你要在 CSS 中设置它们，则直接写入元素的名称加上一对大括号 {}就可以了。 所有的 CSS 代码都应该写在大括号 {}中。 按照上面的介绍，我们先在 中写入以下代码： 程序代码 menu ul {liststyle:none。 margin:0px。 } menu ul li {float:left。 } 解释一下： menu ul {liststyle:none。 margin:0px。 } liststyle:none，这一句是取消列表前点，因为我们不需要这 些点。 margin:0px，这一句是删除 UL 的缩进，这样做可以使所有的列表内容都不缩进。 menu ul li {float:left。 } 这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。 到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下： 这时，列表内容是排列在一行，我们在 menu ul li {}再加入代码 margin:0 10px： 程序代码 menu ul {liststyle: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。 liststyle:none。 margin:0px。 } /*添加了 float:right 使得菜单位于页面右侧 */ menu ul li {float:left。 margin:0 10px} 这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢。 别 忘了，我们早就已经留好了一个空的 li class=menuDiv/li，要想加入竖线就使用它了。 按照上面说的方法，我们再添加以下代码： 程序代码 .menuDiv {width:1px。 height:28px。 background:999} ，保存预览一下，竖线是否已经出来了。 关于这段代码就不多讲了，应该是很容易理解的。 不过，菜单选项的文字却在顶部，我们再修改成以下代码： 程序代码 menu ul li {float:left。 margin:0 10px。 display:block。 lineheight:28px} 关于 display:block。 lineheight:28px 大家可以去参阅一下手册，我就不多讲了。 效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在 中添加以下代码： 程序代码 menu ul li a:link,menu ul li a:visited {fontweight:bold。 color:666} menu ul li a:hover{} 这个也不多说了，没什么好说的了，最后的效果如下： 页面制作 (1)用好 border 和 clear 这一节里面，主要就是想告诉大家如何 使用好 border 和 clear 这两个属性。 首先，如果你曾用过 table 制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在 td/td中加入这么一段就可以了，你可以试试： div style=borderbottom:1px dashed ccc/div 大家可以再次参考手册，然后你就能明白 dashed、 solid、 dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影 线等等。 程序代码 div id=banner/div 以上代码便可以实现设计草图中的 banner，在 中加入以下样式： 程序 代码 banner { ba。