综合案例—儿童用品网上商店.ppt

（6）视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。 （7）交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。 作业： 用div+css布局与格式化下图网页 6.4 页脚部分 为页脚增加一个div： div id=footer p class=p1a href=#网站首页/a | a href=#产品介绍/a | a href=#信息/a | a href=#“畅销榜/a/p p class=p2版权属于前沿科技 artech.cn/p /div 设置CSS： #footer{ clear:both; height:53px; margin:0; background:transparent url(images/footer-background.png) repeat-x; text-indent:0px; text-align:center; } 清除浮动问题 另一种解决方法（较常用，经典）： 当一div盒子里有浮动盒子div时，在该div盒子里最后添加一空div盒子，将该空div盒子的样式只设置一条代码：clear:both; Html: div class=“cleardiv”/div CSS: .cleardiv{ clear:both;} 7 细 节 设 计 7.1 页头部分 1.网页标题 在PS中切出标题图像，如图，用其替换h1标题。 为h1标题设置CSS： #header h1{ background:transparent url(images/title.png) no-repeat bottom left; height:63px; margin:0; margin-left:40px; } 实例home-03 隐藏原来的标题。 在h1文字两边套上标记span: h1spanBaby Housing/span/h1 设置CSS样式： #header h1 span{ display:none; } 2.登录账号 在PS中切出“登录账号”和“购物车”图像，如图： 对相应的HTML作一些修改： ul id=accountBox li a href=“#” class=“login”span登录帐号 /span/a/li li a href=# class=cartspan购物车/span/a/li /ul 为a设置类别的目的是为了分别设置样式，加span的目的是为了隐藏文字。 #header #accountBox span{ display:none; } #header #accountBox a{ display:block; height:110px; width:93px; } #header #accountBox .login{ background:transparent url(images/account-left.jpg) no-repeat; } #header #accountBox .cart{ background:transparent url(images/account-right.jpg) no-repeat; } 3.顶部导航栏 为了实现适应不同宽度的圆角效果，可以使用滑动门技术。为文字增加span标记，以便使用a和span分别设置左右两侧的背景图像。 对相应的HTML作修改： ul id=topNavigation lia href=#span关于我们/span/a/li lia href=#span联系方式/span/a/li lia href=#span意见建议/span/a/li /ul 准备好背景图，设置CSS样式： #header #topNavigation a{ display:block; line-height:25px; padding:0 0 0 14px; background:transparent url(images/top-navi-white.gif) no-repeat; } #header #topNavigation a span{ display:block; padding:0 14px 0 0; background:transparent url(images/top-navi-white.gif) no-repeat right; } 4.主导航栏 对相应的HTML作修改： ul id=mainNavigation li cla