页面制作教程.docVIP

页面制作教程 概述 XHTML 三大特点是： 结构：一般通过div标签对页面进行结构的布局，是XHTML的主要作用。 呈现：该特点在XHTML中已经淡化，主要通过CSS来表现。 交互：该特点在XHTML中已经淡化，主要通过JS来表现。 CSS CSS样式主要起到呈现的作用。我们一般通过div+css的方式来制作页面，主要是为了达到将结构与样式分离的目的。 案例 布局 样例1：页面居中、顶头 一般先给body，form标签设置内、外边距和边框为0，目的是取消标签默认的属性值不同。 一般通过给整个页面套一个div用来整体定位，使用margin:0 auto实现顶头和左右居中的效果。 样例2：两列布局 图例： zoom:1的作用是在IE浏览器下，让有这个属性的div能够占据一行，要想在Firefox下也达到同样的效果，就得用.laytou:after属性。.laytou:after{content:.;visibility:hidden;display:block;height:0;clear:both; }。 通过float:left和float:right方法实现向左、向右浮动。 样例3：三列布局 三列布局其实是两列布局的一种嵌套,如果想让下面的3个div紧挨在一起可以使用float:left样例1：简易导航 图列： .nav a这是标签的一种用法，增加了限定条件，本例中表示在.nav a中定义的样式只对nav标签里的a标签有效，而在nav标签外的均无效。 a标签的display属性默认是inline。inline模式下显示为内联元素，元素前后没有换行符。样例2：简易导航2 图列： 和样例1相比，这个导航窗口a标签之间多了一个分隔符。 样例3：整切背景的导航 图列： 本例中是整切的图片作为导航按钮的背景。那么需要根据图片的大小设置a标签的宽和高，因此padding属性就不能用了（因为在xhtml中标签的实际宽度是内容宽度+内边距+边框+外边距，而我们平时使用的width属性只是设置内容宽度）如果这里使用padding属性的话，计算宽度是非常麻烦的。所以这里通过把line-height属性值设置成和height属性值一样来实现字体的上下居中，通过text-align:center来实现字体的左右居中。 另外需要注意的是，整切图片的方法一般用在每个按钮宽度固定的情况下，避免切很多的图片。 样例4：两侧圆弧背景的导航 图列： 上面的代码只是部分代码。实现的主要思路是将图片两侧边缘切成2张图分别作为两个div的背景来显示，然后通过与nav层的相对定位使lt层和rt层分别位于nav层的左右两侧。 上面的代码只是部分代码。实现的主要思路是将图片两侧边缘切成2张图分别作为两个div的背景来显示，然后通过与nav层的相对定位使lt层和rt层分别位于nav层的左右两侧。这样做的好处：一是即使边框两侧是不规则的图形也可以处理；二是导航菜单的宽度可以自由缩放。 窗体 样例1：窗体常规结构（标题+内容） 图列： 我们通常用一个win层去包含hd和bd层这种方式来表现一个窗体的结构。 在制作一个页面时，有时候会出现两个或多个相同结构不同样式的窗体。这时我们通常用class方式来定义这些窗体共性的内容。 这里需要大家养成统一的编程风格，windows缩写成win；header缩写成hd；body缩写成bd。 样例2：窗体常规结构（标题+内容+更多） 图列： 本例主要说明一般窗体的“更多”按钮的编写方法，使得“更多”按钮无论在窗体大小、位置怎么变换时，“更多”按钮任然位于窗体的右上角。 .more{position:absolute;right:.5em;top:.5em}使的more离浏览器右边和上边各5em。再通过代码.hd{ position:relative; }使得“更多”按钮绝对定位的边框变成了hd层的边框。而默认的这个边框其实是浏览器的。 样例3：窗体常规结构（标题+内容+更多+底部） 图列： 样例4：综合示例 图列： 由于代码太长，这里只贴出html标签的内容，详细内容可以通过上面的链接查看。 切换窗 样例1：切换窗的基本结构 图列1： 图列2： 本列中只是阐述关于需要通过JS来实现的切换窗在结构上应该如何定义。 一般来说，我们用tabs层去放切换窗的各个标题，而对应每个标题的内容层（overlay层）我们把它放在overlays层中。 通常来说，我们习惯于用名为active的样式来定义被激活的内容，用名为hidden的样式来定义没有被激活的内容层；而对于内容层它们共同的样式我们用overlay来定义。 在本例中如果将body中的代码换成如下代码，即类似手动进行JS操作则会出现图例2中的效果。 样例2：模仿的切换窗实例 图