综合网页设计实例解析.ppt

《综合网页设计实例解析.ppt》由会员分享，可在线阅读，更多相关《综合网页设计实例解析.ppt（12页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、网页设计综合实例解析网页设计综合实例解析知识点知识点n页面的布局与规划页面的布局与规划 nHtml结构结构nCSS实现实现首页设计图首页设计图页面的布局与规划页面的布局与规划#container 最大的容器#head 顶部容器#nav 导航条#pagebody 中间的容器#footer 底部容器#mainbody 主体内容#sidebar 侧边栏页面的布局与规划页面的布局与规划 Html结构结构#head 结构对比结构对比 首页 Html CSS DW 综合案例#head height:140px;width:1130px;background-image:url(./images/head.

2、png);#nav margin-top:30px;height:55px;width:582px;float:right;#nav ul#nav a:link#pagebody 结构对比结构对比#pagebody padding:26px 131px 25px 84px；background-color:#EEE;#mainbody width:626px;height:482px;border:1px#CCC solid;background-color:#FFF;padding-top:5px;float:left;#sidebar width:256px;height:482px;ba

3、ckground:#FFF url(./images/block4.png)no-repeat；border:1px#CCC solid;float:right;#footer 结构对比结构对比 网站声明 联系我们 网站地图 友情链接 20082013 .all rights reserved#footer width:1130px;height:90px;text-align:center;line-height:45px;color:#FFF;background:url(./images/ti tle2.png)no-repeat;#mainbody 结构对比结构对比-上上 Html知识

4、知识 基本标签及属性基本标签及属性#up1 float:left;margin-left:22px;background:url(./images/block1.png)no-repeat;h1 margin:0;padding-left:36px;padding-top:10px;font-size:14px;#mainbody ul#mainbody 结构对比结构对比-下下 学生作品赏析学生作品赏析 作品名称：潮流网站作品名称：潮流网站 作者作者:刘状壮刘状壮#title1 width:626px;height:40px;background:url(./images/title1.png)no-repeat;border-bottom:1px#930 solid;line-height:40px;#title1 span padding-left:50px;color:#FFF;font-weight:bold;.down width:102px;float:left;margin:10px 27px;.down img border:1px#CCC solid;#sidebar 结构对比结构对比 学习笔记学习笔记 2011.6.27 课程已经结束课程已经结束 详细详细