《使用HTML5实现响应式布局》第十三章-综合项目：传奇互动游戏公司网站（三）学习资料.pptxVIP

第十三章游戏公司网站（三）

理论内容制作游戏大厅页面结构制作游戏大厅页面正文部分

1.制作游戏大厅页面结构游戏大厅页面的完成效果如图

背景和页头导航（1）在DreamweaverCC中新建HTML5文档，保存为game.html，然后编写游戏大厅页面背景和页头结构主体代码body divid=top/div divid=nav imgsrc=images/nav_01.png/ imgsrc=images/nav_02.png/ !--省略-- /div/body导航菜单

背景和页头导航（2）新建basic.css文件，编写游戏大厅页面的主体样式代码body{margin:0;padding:0px0px10px0px;font-size:12px;font-family:宋体;background:url(../images/bg.gif)no-repeatcenter40px;background-color:#8ee0fb;}#nav{width:930px;height:100px;margin:0auto;}背景图片

页头大图（3）在game.html中，添加页头大图区的结构主体代码divid=banner divid=heart/div divid=game_ph/div divid=cj/div divid=botton/div/div新手帮助按钮包含图片的div

页头大图（4）在basic.css文件中，添加CSS3主体代码#banner{ background:url(../images/banner.PNG)no-repeat;/*省略*/}#heart{position:absolute;/*省略*/}#botton{ background:url(../images/bottom_banner.png)no-repeat; /*省略*/}/*省略*/背景底图

页头大图运行效果设计视图蓝框为div

页脚编写页脚部分结构主体代码在basic.css文件中，添加页脚部分的样式代码：divid=foot p!--省略页脚文字部分--/p/div#foot{width:918px;/*省略*/}#footp{ padding-top:10px;}

2.制作游戏大厅页面正文部分正文部分的页面结构（1）打开game.html，在divid=banner和divid=foot中间区域编写正文部分结构代码divid=maindivid=main_body divid=inews/div divid=ph/div divclass=clear/div divid=goodgame/div/divdivid=sub_body/divdivclass=clear/div/div中间列右边列底部右边列

制作游戏大厅页面正文部分（2）新建layout.css文件并链接到game.html页面，在layout.css中添加正文部分CSS3主体代码#main{ width:918px; margin:0auto5pxauto;}#main_body{ float:right; /*省略*/}#inews{ float:left; /*省略*/}/*省略*/推荐游戏的背景图main是正文部分的最外层div

新闻列表（3）打开game.html，在divid=inews中，添加新闻列表的页面结构主体代码divid=inews divid=focusimg/div divid=news_list/div/div图片新闻列表

新闻列表（4）在layout.css文件中，添加新闻列表的CSS3主体代码#focusimg{width:431px;height:170px;margin-bottom:5px;}#news_list{width:431px;height:199px;}/*省略*/图片新闻列表

游戏排行（5）打开game.html，在divid=ph中，添加游戏排行的页面结构主体代码divid=ph divid=phlist/div divid=jzjh/div/div图片排行列表

游戏排行（6）在layout.css文件中，添加游戏排行的CSS3主体代码#phlist{width:264px;height:240px;margin-bottom:5px;background:url(../images/bg_ph.gif)no-repeat;}/*省略*/排行列表图片

推荐游戏（7）打开game.html，在divid=goodgame中，添加推荐游戏的