网页设计24-综合布局

1、授课人：何蕴婷EMAIL：CSS+DIVCSS+DIV布局综合应用布局综合应用内部培训资料,不作任何宣传用途1、通过实训项目熟练掌握用css对页面布局。内部培训资料,不作任何宣传用途在网页中用CSS+DIV对页面布局内部培训资料,不作任何宣传用途 会变换版面的博客网页实例实例1：v蓝色经典版面v交河故城版面v清明上河图版面内部培训资料,不作任何宣传用途课堂实践课堂实践1 1、 蓝色经典版面的设计（1）搭建页面框架搭建页面框架#globallink菜单导航#mainsupport主体内容#parameter统计数据#footeru将页面整体的用标记块内部培训资料,不作任何宣传用途课堂实践课堂实践

2、（1）搭建页面框架搭建页面框架内部培训资料,不作任何宣传用途课堂实践课堂实践 #parameter的子块#parameter#lstatistics样式统计#Irecent最近更新#lhotblog热门博客#lapply最新申请内部培训资料,不作任何宣传用途课堂实践课堂实践 #parameter的子块框架 内部培训资料,不作任何宣传用途课堂实践课堂实践 #mainsupport的子块mainsupport#recommendblog博客推荐#blogsearch博客搜索#currenttime时间日期#newnode最新日志#login登录#recommendart文章推荐内部培训资料,不作任

3、何宣传用途课堂实践课堂实践 #parameter的子块框架 内部培训资料,不作任何宣传用途课堂实践课堂实践（2）在块中添加相应的内容首页论坛推荐最新日志最新评论尚未登录内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在parameter块中添加相应的内容样式统计用户: 893 人日志: 4397 个评论: 4596 篇热门博客艾萨克 <isaac>詹尼花儿 <jennifer>流 觞 <shenhuanyan>CYBERSPACE <cyber&g

4、t;小舔一下 <LifeSucks>楚岑洗心 <popla>小孩儿 <bazhuazhua>未名空间 <sheva>Dark City <freax>E心E意&36 <moonbow>更多OPML内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在parameter块中添加相应的内容最近更新托波索的小屋 <quixote>小孩儿 <bazhuazhua>詹尼花儿 <jennifer>E心

5、E意&36 <moonbow>Beyond Paradise <sherrielin>加州旅馆 <zhanxiongfei>星天的博客 <starsky>个人文集 <sherry>更多OPML最新申请星天的博客 <starsky>蓝空霞彩 <wcylester>随 缘 <matata>大山的孩子 <tuonene>伊的四季 <Ifishamm>SONG, origina

6、l <song>买买提温和的树 <mimiti>更多OPML内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在parameter块中添加相应的内容最近更新托波索的小屋 <quixote>小孩儿 <bazhuazhua>詹尼花儿 <jennifer>E心E意&36 <moonbow>Beyond Paradise <sherrielin>加州旅馆 <zhanxiongfei>星天的博客 <st

7、arsky>个人文集 <sherry>更多OPML最新申请星天的博客 <starsky>蓝空霞彩 <wcylester>随 缘 <matata>大山的孩子 <tuonene>伊的四季 <Ifishamm>SONG, original <song>买买提温和的树 <mimiti>更多OPML内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在mainsupport块中添加相应的内容博客推荐詹尼花儿jennifer

8、禅又地震了老李说地铁发飙记“王”者归来内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在mainsupport块中添加相应的内容*ABCDEFGHIJKLMNOPQRSTUVWXYZ内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在mainsupport块中添加相应的内容博客搜索:ID名称描述用户名:密  码:内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在mainsupport块中添加相应的内容文章推荐突厥系列之一_突厥,突厥人 vivids姐姐说 坚强的就是快乐的. cyber在linux下使用NOR flash存. a

9、lvin景致南浔 amandavelaWindows快捷键大全 inming地铁发飙记 jennifer2006发生的事 xfavorx姐姐说 坚强的就是快乐的. cyber突厥系列之一_突厥,突厥人 vivids在linux下使用NOR flash存. alvin姐姐说 坚强的就是快乐的. cyber内部培训资料,不作任何宣传用途课堂实践课堂实践 （2）在mainsupport块中添加相应的内容最新日志托波索的小屋 等我考完试了长不大的小孩儿 上完了最后一节严宣申老师.詹尼花儿 一句

10、话长不大的小孩儿 看了一个比较崇拜的ss师兄.长不大的小孩儿 突然想起了鲁迅的一句话E心E意W36 呵呵，做版主被弹劾了Beyond Paradise 偶尔也要更新一下詹尼花儿 痛苦啊加州旅馆 寻找局部最优星天的博客 冒着大风出去自习星天的博客 卷首语个人文集 发篇文章真难E心E意W36 假期将至！长不大的小孩儿 今天蓝色天际/blueheaven 没课了长不大的小孩儿 才看到有意思的东西长不大的小孩儿 又要放假了蓝空霞彩 读书人的出世与入世1倏

11、忽一年，花开两边 期末临近倏忽一年，花开两边 小小学术之winpcap(自力更.内部培训资料,不作任何宣传用途课堂实践课堂实践 对各个块进行CSS定位#globallink菜单导航#mainsupport主体内容#parameter统计数据#footer#recommendblog博客推荐#blogsearch博客搜索#currenttime时间日期#newnode最新日志#login登录#recommendart文章推荐#lstatistics样式统计#Irecent最近更新#lhotblog热门博客#lapply最新申请内部培训资料,不作任何宣传用途课堂实践课堂实践 对

12、各个大块进行CSS定位#containerposition:relative;margin:1px auto 0px auto;width:880px;text-align:left;#globallinkwidth:880px; height:210px;margin:0px;background-image:url(banner.jpg);/* 添加banner图片 */background-repeat:no-repeat;background-color:#ebf7ff;font-size:12px;#parameterposition:relative;float:right;/*

13、右浮动 */font-size:12px;width:176px;padding-right:0px;margin:0px;color:#FEFEFE;background-color:#0084a9;#mainsupportfloat:left;/* 左浮动 */position:relative;font-size:12px;margin-top:0px;margin-bottom:60px;margin-right:0px;#footerclear:both;/* 不受浮动影响 */font-size:12px;text-align:center;color:#226c81;paddin

14、g-bottom:20px;margin:0px;padding-top:20px;background-color:#ebf7ff;内部培训资料,不作任何宣传用途课堂实践课堂实践 对各个子块进行CSS定位（mainsupport）#logoinclear:both;position:absolute;left:0px;top:190px;margin:0px;height:30px;width:690px;background-color:#d1ebff;#recommendartposition:relative;top:230px;margin:0px;width:690px;paddi

15、ng-top:35px;background:url(recommendart.jpg) no-repeat;background-color:#def1ff;#newnodeposition:relative;margin-top:10px;width:690px;top:230px;clear:both;background:url(newnode.jpg) no-repeat;background-color:#def1ff;#currenttimeposition:absolute;left:0px;top:0px;width:290px;height:140px;margin-bot

16、tom:10px;background-color:#a3d7ff;background-image:url(time.jpg);background-repeat:no-repeat;#blogsearchclear:both;position:absolute;left:0px;top:149px;float:left;margin:0px;background-color:#d1ebff;background-image:url(blogsearch.jpg);background-repeat: no-repeat;width:690px;height:32px;内部培训资料,不作任何

17、宣传用途课堂实践课堂实践（4）设置各个块的样式#globallink ul list-style-type:none;position:absolute;display:inline;width:417px;left:468px; top:180px;/* 调整菜单文字的位置 */padding:0px; margin:0px;#globallink lifloat:left; text-align:center;#globallink ul li#one, #globallink ul li#two, #globallink ul li#three width:57px;#globallin

18、k ul li#four, #globallink ul li#five, #globallink ul li#six width:78px;#globallink a:link, #globallink a:visitedcolor:#FFFFFF;text-decoration:underline;#globallink a:hovercolor:#004c84;text-decoration:none;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#parameter divmargin-bottom:15px;#parameter brclear:both;dis

19、play:none;#parameter h3 span /* 标题的文字不显示 */display:none;#parameter h3height:30px; width:176px;padding:0px; margin:0px;#parameter a:linkcolor:#FFFFFF;text-decoration:none;#parameter a:visitedcolor:#EEEEEE;text-decoration:none;#parameter a:hovercolor:#000000;text-decoration:none;#parameter a.author1:l

20、inkcolor:#39d3ff;font-size:12px;text-decoration:none;#parameter a.author1:visitedcolor:#37d2fc;font-size:12px;text-decoration:none;#parameter a.author1:hovercolor:#14889D;font-size:12px;text-decoration:none;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#lhotblog span a, #lrecent span a, #lapply span afloat:righ

21、t;text-align:right;padding-top:8px;padding-right:5px;margin-bottom:5px;#lstatistics h3/* 用背景图片代替标题 */background:url(lstatistics.jpg) no-repeat;#lhotblog h3background:url(lhotblog.jpg) no-repeat;#lrecent h3background:url(lrecent.jpg) no-repeat;#lapply h3background:url(lapply.jpg) no-repeat;#lstatisti

22、cs, #lhotblog, #lrecent, #lapplyposition:relative;clear:both;#lstatistics ul, #lhotblog ul, #lrecent ul, #lapply ullist-style-type:none; /* 统一不显示项目符号 */padding:10px 0px 0px 0px;margin:0px;#lstatistics litext-align:left;padding-left:16px;line-height:17px;background:url(arrow1.gif) no-repeat 7px 4px;#

23、lhotblog litext-align:left;padding-left:14px;line-height:17px;background:url(arrow2.gif) no-repeat 7px 4px;/* 背景小图片作为项目符号 */#lrecent li, #lapply litext-align:left;padding-left:14px;line-height:17px;background:url(arrow3.gif) no-repeat 7px 6px;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#mainsupport divborder:

24、1px solid #226c81;#mainsupport h3 span,#mainsupport h3display:none;#mainsupport li a:linkcolor:#2a788e;font-size:12px;text-decoration:none;#mainsupport li a:visitedcolor:#227086;font-size:12px;text-decoration:none;#mainsupport li a:hovercolor:#FFFFFF;font-size:12px;text-decoration:none;#mainsupport

25、li a.author2:linkcolor:#050505;font-size:12px;text-decoration:none;#mainsupport li a.author2:visitedcolor:#0a0a0a;font-size:12px;text-decoration:none;#mainsupport li a.author2:hovercolor:#4fd8ff;font-size:12px;text-decoration:underline;#recommendblog br, #currenttime br, #blogsearch br,#logoin br.br

26、2display:none;clear:both;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#currenttime p.p1color:#915500;margin:0px;text-align:left;padding-left:60px;padding-top:20px;#currenttime p.p2color:#7d0f00;margin:0px;padding-top:8px;padding-left:60px;padding-bottom:12px;text-align:left;#currenttime p a.astro:linkcolor:#E3

27、AA3D;font-size:12px;text-decoration:none;#currenttime p a.astro:visitedcolor:#E3AA3D;font-size:12px;text-decoration:none;#currenttime p a.astro:hovercolor:#CCCC66;font-size:12px;text-decoration:underline;#currenttime ulpadding-left:55px;padding-right:0px;text-align:center;margin-top:5px;margin-left:

28、0px;margin-right:0px;list-style-type:none;#currenttime lifloat:left;width:23px;line-height:20px;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#recommendblog ulpadding-top:8px;padding-left:48px;/* 调整ul的位置，适应竖的背景标题 */margin:0px;list-style-type:none;#recommendblog lipadding-left:12px;line-height:18px;background:ur

29、l(arrow4.gif) no-repeat 2px 6px;#recommendblog span a:linkcolor:#00536b;text-decoration:none;padding-left:45px;font-weight:bold;#recommendblog span a:visitedcolor:#00536b;text-decoration:none;padding-left:45px;font-weight:bold;#recommendblog span a:hovercolor:#FFFFFF;text-decoration:underline;paddin

30、g-left:45px;font-weight:bold;#recommendblog span a.author2position:absolute;left:230px;font-weight:lighter;#recommendblog span a.author2:linkcolor:#020202;text-decoration:none;#recommendblog span a.author2:visitedcolor:#020202;text-decoration:none;font-weight:lighter;#recommendblog span a.author2:ho

31、vercolor:#00536b;text-decoration:underline;font-weight:lighter;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#blogsearch ulmargin:0px;padding-left:160px;padding-top:4px;list-style-type:none;text-align:left;#blogsearch li#sear1color:#d1ebff;#blogsearch lifloat:left;line-height:22px;#blogsearch li#sear1 inputleft

32、:160px;position:absolute;background-color:#FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:15px;padding:0px;#blogsearch #sear3 input,#blogsearch #sear4 input,#blogsearch #sear5 inputmargin-left:5px;#blogsearch #sear3 inputmargin-left:40px;#blogsearch #sear6 inputbackground-color:

33、#FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:17px;padding:0px;margin-left:5px;margin-top:2px;margin-bottom:0px;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#logoin ul#permargin:0px;padding-left:0px;padding-top:3px;list-style-type:none;text-align:left;#logoin ul#per lifloat:left;line-hei

34、ght:23px;padding-left:15px;padding-top:3px;margin:0px;background:url(arrow5.gif) no-repeat 8px 10px;#logoin #per inputbackground-color:#FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:15px;padding:0px;#logoin #per1 input.textinput1,#logoin #per2 input.textinput2background-color:#

35、FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:14px;padding:0px;width:110px;FONT-FAMILY: Tahoma,SimSun,Arial, Helvetica, sans-serif;内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置各个块的样式#recommendart br, #newnode brclear:both;#recommendart ulpadding-left:15px;padding-right:5px;padding-bottom:10px;text-alig