实验四实验内容 1. 还原示范页面实验目的 1. 进一步熟悉网页布局的原理 2. 进一步熟悉基于 div+css 的布局方法具体要求,将 cosmofarmer ( ) 首页还原。页面要求 1. 页面宽度 760 像素 2. 页面居左 3. 页面的左边距和上边距为 0 4. 两栏式布局 5. 左边栏的宽度 583 6. 右栏宽度 760-583=177 7. 顶部 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/" alt="" width="553" height="70" /> ?<ul> ?<li><a href="/features/">Features</a></li> ?<li><a href="/experts/">Experts</a></li> ?<li><a href="/quiz/">Quiz</a></li> ?<li><a href="/projects/">Projects</a></li> ?<li><a href="/horoscopes/">Horoscopes</a> </li> ?</ul> ?< div class="clear" > </div> ?</div><!-- end background --> ?</div><!-- end banner --> 实验报告提交要求,重要! 1. 提供的页面浏览效果截图 2. 提供所完成页面的 html 源代码,包括 css 代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/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/)
网页设计4实验报告 来自淘豆网m.daumloan.com转载请标明出处.
