11 王龙 实验二

课 程 实 验 报 告 专 业 年 级 13级软件工程 课 程 名 称 网站设计与Web开发 指 导 教 师 付 华 学 生 姓 名 ____王 龙_________ 实 验 日 期 2015年11月6日 实 验 地 点 笃行楼A栋203 实 验 成 绩 教务处制 2015 年 10 月 日 实验项目 名称 CSS+DIV还原完整的页面 实验 目的及要求 1. 掌握完整制作一张网页的方法 2. 进一步熟悉网页布局的原理 3. 进一步熟悉基于div+css的布局方法 实验 内容 还原示范页面 实验步骤 步骤1 将（www.cosmofarmer.com）首页的部分还原。 实验源代码： 王龙11号 .head .head_main { background-image: url(Library/banner_flower.jpg); background-repeat: no-repeat; background-position: right; width: 760px; height: 100px; } .head { background-image: url(Library/banner_bg.jpg); height: 100px; width: 760px; } .main_right { font-size: 14px; clear: none; float: right; background-image: url(Library/announce_bg.jpg); background-repeat: repeat-x; width: 170px; padding: 0px; } .main_left { width: 583px; float: left; background-repeat: no-repeat; padding: 0px; margin: 0px; } .main_left .tomatoText { font-family: Tahoma, Geneva, sans-serif; font-size: 24px; margin-bottom: 0px; padding-top: 80px; background-image: url(Library/tomato.jpg); height: 135px; background-repeat: no-repeat; } .main_left .product #product_1 { border-top-width: 10px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FF9900; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; padding-bottom: 10px; } .product #product_1 .rightimg { top: 0px; float: right; border: 10px solid #FF9900; } .content { clear: both; margin: 0px; padding: 0px; } .main_left .product #product_2 { border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-top-style: solid; border-top-color: #6BB1B3; padding-bottom: 10px; } .main_left .product #product_3 { border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-top-style: solid; border-top-color: #FBEF99; } .product p { margin: 5px; } .product #product_2 .rightimg { float: right; border: 10px solid #6BB1B3; } .product #product_3 .rightimg { border: 10px solid #FBEF9D; float: right; } .content .main_right { float: left; } .STYLE8 { font-size: 18px; font-weight: bold; color: #083032; } .STYLE9 { font-family: “Courier New“, Courier, monospace; font-size: 14px; } .product .buttonText { background-color: #D6E9B1; background-image: url(Library/arrow.gif); font-size: 18px; background-repeat: no-repeat; background-position: right; width: 150px; } .main_left .product { padding: 0px; margin: 0px; float: right; clear: both; } .centent { width: 760px; padding: 0px; margin: 0px; } .main_right ul { text-decoration: none; padding: 0px; margin: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 10px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-color: #284D55; border-right-color: #698D7F; b