请大家做出如下网页
【备注】左上框为No.1,右上为No.2,左下为No.3,右下为No.4
【要求】
1、除了No.1内的表格外,其他所有地方的框请用div+css来写,练习浮动float、margin、padding
2、No.1制作表格,用上背景色、边框色、文字色
3、No.2制作图片链接,并设置鼠标放上去变手指形状
4、No.3制作背景图片+文字,文字用上颜色、字体、字号,中间用span改变部分文字
5、No.4使用绝对定位和相对定位来放置图片位置
---------------------------------------------------------------------------------------------
请做完后再看答案,答案并非唯一!
【答案】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>第一周 小练习</title> <style type="text/css"> #main{ width:520px; height:400px; padding:20px; border:solid #990000 2px; background-color:#FFFAEC } #No1, #No2,#No4{ width:200px; height:150px; float:left; margin:15px; padding:10px; border:solid #999999 1px; background-color:#FFFFFF; } #No3{ width:200px; height:150px; float:left; margin:15px; padding:10px; clear:both; border:solid #999999 1px; background-color:#FFFFFF; background-image:url(http://www.qqtouxiangku.com/upimg/201103/2011030511222827090.jpg); background-repeat:no-repeat; } td, th{ width:60px; height:35px; text-align:center; line-height:35px; color:#FF0000; font-size:14px; } td{ color:#0000FF} .text1{ width:100px; margin-left:100px; margin-top:10px; color:#FF3300; font-family: "华文行楷"; font-size: 24px; font-weight: bold; } .text2{ width:180px; margin-left:10px; color:#FF3300; font-family: "华文行楷"; font-size: 18px; font-weight: bold; margin-top:90px; } #pic1{ position: relative; float:left; top: 20px; } #pic2{ position: relative; float:left;