网页设计第二章III.ppt

1  JSP 网 页 设 计 董祥和 第二章 网页布局基础 示例：layoutDemo15.css、layoutDemo15.html FF下页面黑色的header显示出来了， 既然高度自适应了，黑色的背景也就没用了，去掉它， 再在HTML结构代码内恢复导航代码，完成页面header部分的样式。 示例：layoutDemo16.css、layoutDemo16.html 【第九步】： banner版块结构和logo版块一样，对结构进行优化， 将最外层的div去掉，然后将里面的a定义为banner， 所以banner版块的结构如下： a id=banner href=# img src=images/banner.jpg / /a CSS代码： #banner { display:block; width:1000px; height:292px; margin:10px auto; } #banner img{display:block;} 如果图片的大小不是1000px×292px怎么办？ 图片大了，就会溢出，图片小了不美观。 【第六步】： 为了页面能够具有更好的浏览器兼容性， 在设计表现的时候，首先要对标签重置， 用到哪些标签就重置哪些标签， 用到body,div,p,ul,li,dl,dt,dd,h1,a标签， 所以重置代码为： body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;} 效果图主背景是一个从上至下由蓝色渐变为白色，且带有云彩的背景。 针对背景的渐变，将渐变背景切割为一个宽度为10px的小图，起名为bg，然后水平方向平铺(repeat-x)。 而对于云彩这种无规律的背景，直接切割出来作为背景，起名为clouds，如下图： 如果不做任何处理直接将页面内的背景整个切割下来， 当用户打开页面，会看到背景一片空白，然后瞬间显示背景，给用户的感觉很突兀。 为了提升网页的用户体验，先加载10px宽度的小图片，这样背景加载速度快， 用户打开网页的时候，先把这种背景图加载上，不至于展现在浏览者前面的是一片空白， 然后等云彩背景下载完毕后，再加载在页面内。 实现背景的显示顺序，为不同的盒子的设置背景， bg.gif当做html盒子的背景，而clouds.gif当做body盒子的背景， 因为网页会先加载html盒子，然后再加载body盒子，那么CSS代码如下： html{background:url(images/bg.gif) repeat-x;} body{background:url(images/clouds.gif) repeat-x;} 示例：layoutDemo7.css、layoutDemo7.html body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;} html{background:url(images/bg.gif) repeat-x;} body{background:url(images/clouds.gif) repeat-x;} 【第七步】： 页面的宽度为1000px，所以四大板块header、banner、content、footer的宽度也为1000px，且水平居中于浏览器， 所以用CSS集体声明的方法，对四大板块的共同样式进行定义： #header,#banner,#content,#footer { width:1000px; margin:0 auto; } 其中margin:0 auto;的作用就是将页面元素水平居中。 采用设置body上内边距的办法，将padding-top加到body的样式内： 头部与上边沿有45px的距离，为实现这个效果， body { background:url(images/clouds.gif) repeat-x; padding-top:45px; } 示例：layoutDemo8.css、layoutDemo8.html 【第八步】： 网页里所有能够点击的链接图片，全部都有一个宽度为2px的紫色边框， 将边框去掉，CSS代码：img{border:none;} 上面这段代码是对img标签边框的重置，所以把它和之前标签内外边距重置的代码放一块，如下： body,div,p,ul,li,dl,dt,dd,h1,a,img{margin:0; padding:0;} img{border:none;} 如果后面有对其它标签的重置，就添加到第二条的后面。 示例：layoutDemo9.css、layoutDemo9.html 头部h