《页面制作教程.doc》由会员分享，可在线阅读，更多相关《页面制作教程.doc（15页珍藏版）》请在金锄头文库上搜索。
1、页面制作教程一、 概述XHTML三大特点是：l 结构：一般通过div标签对页面进行结构的布局，是XHTML的主要作用。l 呈现：该特点在XHTML中已经淡化，主要通过CSS来表现。l 交互：该特点在XHTML中已经淡化，主要通过JS来表现。CSS CSS样式主要起到呈现的作用。我们一般通过div+css的方式来制作页面，主要是为了达到将结构与样式分离的目的。二、 案例布局样例1：页面居中、顶头body,formpadding:0;margin:0;border:0;.docmargin:0 auto;width:770px;height:500px;background:red;l 一般先给b
2、ody，form标签设置内、外边距和边框为0，目的是取消标签默认的属性值不同。l 一般通过给整个页面套一个div用来整体定位，使用margin:0 auto实现顶头和左右居中的效果。样例2：两列布局图例：.layoutzoom:1;clear:both;.laytout:aftercontent:.;visibility:hidden;display:block;height:0;clear:both; .layout-lfloat:left;background:red;.layout-rfloat:right;background:yellow;左侧右侧l zoom:1的作用是在IE浏览器
3、下，让有这个属性的div能够占据一行，要想在Firefox下也达到同样的效果，就得用.laytou:after属性。.laytou:aftercontent:.;visibility:hidden;display:block;height:0;clear:both; 。l 通过float:left和float:right方法实现向左、向右浮动。样例3：三列布局.layoutzoom:1;clear:both;.laytou:aftercontent:.;visibility:hidden;display:block;height:0;clear:both; .layout-lfloat:lef
4、t;.layout-rfloat:right;#leftbackground:red;#centerbackground:yellow;#rightbackground:blue;左中右l 三列布局其实是两列布局的一种嵌套,俗称叠代法，如果想让下面的3个div紧挨在一起可以使用float:left。l 这个例子用到了id和class两种方式定义样式。class定义的样式可以重复调用，id定义的是样式是唯一的。导航栏样例1：简易导航图列：.navzoom:1;clear:both;.nav:aftercontent:.;visibility:hidden;display:block;height
5、:0;clear:both;.nav adisplay:block;float:left;padding:.5em 1em;background:#9f9f9f;text-decoration:none;.nav a:hoverbackground:red;text-decoration:underline首页主营业务新闻资讯关于我们l .nav a这是标签的一种用法，增加了限定条件，本例中表示在.nav a中定义的样式只对nav标签里的a标签有效，而在nav标签外的均无效。l a标签的display属性默认是inline。inline模式下显示为内联元素，元素前后没有换行符。为了让a标签可以
6、有各方位的边距，需要将display的值改为block这样padding设置的边距才有效l a:hover表示当鼠标位置a标签上时，显示的样式样例2：简易导航2图列：.navzoom:1;clear:both;.nav:aftercontent:.;visibility:hidden;display:block;height:0;clear:both;.nav adisplay:block;float:left;padding:.5em 1em;background:#9f9f9f;text-decoration:none;.nav a:hoverbackground:red;text-dec
7、oration:underline.nav a.sepbackground:url(27.gif) no-repeat;padding:0;width:2px;首页主营业务新闻资讯关于我们l 和样例1相比，这个导航窗口a标签之间多了一个分隔符。样例3：整切背景的导航图列：.navzoom:1;clear:both;.nav:aftercontent:.;visibility:hidden;display:block;height:0;clear:both;.nav adisplay:block;float:left;font-size:12px;background:url(1.gif) no
8、-repeat;width:70px;height:22px;line-height:22px;text-align:center;text-decoration:none;.nav a:hoverbackground:url(2.gif) no-repeat;text-decoration:underline.nav a.sepbackground:url(27.gif) repeat-y;padding:0;width:2px;首页主营业务新闻资讯关于我们l 本例中是整切的图片作为导航按钮的背景。那么需要根据图片的大小设置a标签的宽和高，因此padding属性就不能用了（因为在xhtml中
9、标签的实际宽度是内容宽度+内边距+边框+外边距，而我们平时使用的width属性只是设置内容宽度）如果这里使用padding属性的话，计算宽度是非常麻烦的。所以这里通过把line-height属性值设置成和height属性值一样来实现字体的上下居中，通过text-align:center来实现字体的左右居中。l 另外需要注意的是，整切图片的方法一般用在每个按钮宽度固定的情况下，避免切很多的图片。样例4：两侧圆弧背景的导航图列：.navzoom:1;clear:both;width:300px;background:url(2.gif) repeat-x;position:relative;.na
10、v .ltbackground:url(1.gif) no-repeat;width:4px;height:28px;position:absolute;top:0;left:0;.nav .rtbackground:url(3.gif) no-repeat;width:4px;height:28px;position:absolute;top:0;right:0;首页主营业务新闻资讯关于我们l 上面的代码只是部分代码。实现的主要思路是将图片两侧边缘切成2张图分别作为两个div的背景来显示，然后通过与nav层的相对定位使lt层和rt层分别位于nav层的左右两侧。l 上面的代码只是部分代码。实现的主要思路是将图片两侧边缘切成2张图分别作为两个div的背景来显示，然后通过与nav层的相对定位使lt层和rt层分别位于nav层的左右两侧。这样做的好处：一是即使边框两侧是不规则的图形也可以处理；二是导航菜单的宽度可以自由缩放。窗体样例1：窗体常规结构（标题+内容）图列：.winborder:1px black solid;width:300px;.hdbackground:#9f9f9f;padding:.5em;.bdheight:80px;padding:.5em;文章的标题 文章的内容/di
