網页设计4实验报告.docVIP

实验四 实验内容 还原示范页面 实验目的 进一步熟悉网页布局的原理 进一步熟悉基于div+css的布局方法 具体要求，将cosmofarmer（）首页还原。 页面要求 页面宽度760像素 页面居左 页面的左边距和上边距为0 两栏式布局 左边栏的宽度583 右栏宽度760-583=177 顶部logo导航栏高度126像素 步骤1 划分逻辑区域 div id=wrapper div id=banner/div div id=main/div div id=announce/div div id=copyright/div /div 步骤二 完成页面基本设置 body { font-family: Century Gothic, Gill Sans, Arial, sans-serif; margin: 0; } #wrapper { width: 759px; border-right-width: 1px; border-right-style: solid; border-right-color: #999999; } 步骤三 细化各个区域，以banner为例，html代码示例如下 div id=banner div id=background img src=images/logo.gif alt=CosmoFarmer2.0 width=553 height=70 / ul lia href=/features/index.htmlFeatures/a/li lia href=/experts/index.htmlExperts/a/li lia href=/quiz/index.htmlQuiz/a/li lia href=/projects/index.htmlProjects/a/li lia href=/horoscopes/index.htmlHoroscopes/a /li /ul div class=clear /div /div!-- end background -- /div!-- end banner -- 实验报告提交要求，重要！ 提供的页面浏览效果截图 提供所完成页面的html源代码，包括css代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css !-- body { font-family: Century Gothic, Gill Sans, Arial, sans-serif; margin: 0; } # Contain { width: 759px; border-right-width: 1px; border-right-style: solid; border-right-color: #999999; } #folwer { background-image: url(file:///D|/%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/index/shuiguo/banner_flower.jpg); background-repeat: no-repeat; background-position: right top; } p,h1,h2,h3,h4,h5,h5,ol,ul { margin: 0px; padding: 0px; } #nav li { display: inline; list-style-type: none; padding: 0px; margin: 0; } #top{ background-image: url(file:///D|/%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/index/shuiguo/banner_bg.jpg); background-repeat: repeat-x; background-position: left top; width: 759px; border-bottom: 1px solid #999999; } #nav a { display: block; float: left; font-size: