《使用HTML5实现响应式布局》第十三章-综合项目：传奇互动游戏公司网站（三）学习资料_第1页
《使用HTML5实现响应式布局》第十三章-综合项目：传奇互动游戏公司网站（三）学习资料_第2页
《使用HTML5实现响应式布局》第十三章-综合项目：传奇互动游戏公司网站（三）学习资料_第3页
《使用HTML5实现响应式布局》第十三章-综合项目：传奇互动游戏公司网站（三）学习资料_第4页
《使用HTML5实现响应式布局》第十三章-综合项目：传奇互动游戏公司网站（三）学习资料_第5页
已阅读5页，还剩15页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第十三章游戏公司网站（三）理论内容制作游戏大厅页面结构制作游戏大厅页面正文部分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="main"><divid="main_body"> <divid="inews"></div> <divid="ph"></div> <divclass="clear"></div> <divid="goodgame"></div></div><divid="sub_body"></div><divclass="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">中，添加推荐游戏的页面结构主体代码<divid="goodgame"><h1>推荐游戏</h1><ul><li><imgsrc="images/goodgame.gif"/></li><!--省略类似部分--></ul></div>推荐游戏列表推荐游戏（8）在layout.css文件中，添加推荐游戏的CSS3主体代码#goodgameul{ width:630px; margin:20pxauto0auto;}#goodgameulli{ width:209px; float:left; text-align:center;}推荐游戏列表游戏客服和道具礼品（9）打开game.html，在<divid="sub_body">中，添加游戏客服和道具礼品的页面结构主体代码<divid="sub_body"><divid="kefu"></div><divid="djlp"></div></div>游戏客服道具礼品游戏客服和道具礼品（10）在layout.css文件中，添加游戏客服和道具礼品的CSS3主体代码#kefu{width:213px;height:240px;margin-bo

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论