网页设计第二章II.pptVIP

1  JSP 网 页 设 计 董祥和 第二章 网页布局基础 示例：navDemo1.html，navDemo1.css body,div{margin:0;padding:0} #nav { width:960px; height:35px; /*为了便于查看区域范围大小，加上背景色*/ background:#CCC; /*水平居中*/ margin:0 auto; /*距离顶部30px*/ margin-top:30px; } 为了页面在浏览器中的兼容性，在CSS文件顶部加入标签重置代码： 效果是一个灰色条，位于页面的正中间，并且所有浏览器效果一样。 body,div{padding:0; margin:0;} 【第二步】： 做好盒子，把导航条放到里面； 导航条的内容为首页、企业简介、企业文化、产品展示、客户留言、联系我们， 如果把这些内容(目前有6个)，看作酒杯，直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有； 平时我们会用一个隔板将每个酒杯隔开，这样就使酒杯很有序的放入盒子，并且牢稳而且防震，方便使用。 把这个隔板叫做无序列表，英文名为ul，里面的每个单元格记作li； 里面的这个ul和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳； 所以定义ul的时候大小一定要和外面的盒子一样大。 示例：navDemo2.html div id=nav ul li首页/li li企业简介/li li企业文化/li li产品展示/li li客户留言/li li联系我们/li /ul /div 示例：navDemo2.css body,div{margin:0;padding:0} #nav { width:960px; height:35px; background:#CCC; margin:0 auto; margin-top:30px; } #nav ul { width:960px; height:35px; } IE效果： FF效果： 效果不一样，在IE6中盒子被撑大，FF中却没有; 我们不希望酒杯纵向排列，而是横向排列。 问题： ul标签是块状元素，ul里面的li标签也是块状元素， 所以li也有块状元素的“霸道”，不允许其它元素和自己处于同一行， 总共六个li纵向排列， 如果想让它们横向排列，用浮动float就可以了，让li标签浮动。 示例：navDemo3.html，navDemo3.css #nav ul li{ float:left;} IE效果： FF效果： “酒杯”横向排列了，IE6和FF中的效果还是不一样： 1）盒子(#nav)高度不一样； 2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有。 到目前这步，用到了两个新的标签ul和li，标签ul和li有没有进行重置？ 只要在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中： body,div,ul,li{padding:0; margin:0;}; “酒杯”前面的大黑圆点，是FF给li标签定义的默认样式； 只需要将li的默认样式去掉就可以了，即在ul标签的CSS属性中加入“list-style:none;”。 示例：navDemo4.html，navDemo4.css body,div,ul,li{padding:0; margin:0;} #nav { ...... } #nav ul { width:960px; height:35px; list-style:none; /*清除列表前面的大黑圆点*/ } #nav ul li{ float:left;} 两种浏览器的显示效果一样： 【第三步】： 第二步的效果还不是想要的，所有的“酒杯”都没有保持“间距”，后面的文字全部贴着前面的文字。 设置li标签的宽度为100像素，将它们分开： CSS代码： #nav ul li { width:100px; float:left; } 为了便于观察暂且将li标签的背景设置成红色， CSS代码： #nav ul li { width:100px; float:left; background:#f00; } 设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围。 示例：navDemo5.html，navDemo