【小练习】第一周综合练习
【小练习】请大家做出如下网页
【备注】左上框为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; top:10px; left:50px; } #pic3{ position:absolute; left:380px; top:350px;} </style> </head> <body> <div id="main"> <div id="No1"> <table border="1" bgcolor="#F7F7F7" bordercolor="#999999" cellpadding="0" cellspacing="0" align="center"> <tr><th>姓名</th><th>学号</th><th>性别</th></tr> <tr><td>木雨</td><td>59</td><td>女</td></tr> <tr><td>木雨</td><td>59</td><td>女</td></tr> <tr><td>木雨</td><td>59</td><td>女</td></tr> </table> </div> <div id="No2" style="text-align:center; line-height:150px; height:150px;"> <a style=" cursor: pointer;" href="http://www.baidu.com/" target="_blank"> <img src="http://www.logoing.net/wp-content/uploads/2012/08/baidulogo1.jpg" width="170" height="120" style="margin:10px; border:solid 1px #CCCCCC" /> </a> </div> <div id="No3"> <div class="text1">可爱吗？</div> <div class="text2">我是只<span style="font-size:16px; font-family:'宋体'; color:#FF00FF;">粉红色的</span>兔子</div> </div> <div id="No4"> <div id="pic1"><img src="http://www.qqtouxiangku.com/upimg/201103/2011030511222827090.jpg" width="50" height="50" /></div> <div id="pic2"><img src="http://www.qqtouxiangku.com/upimg/201103/2011030511222827090.jpg" width="50" height="50" /></div> <div id="pic3"><img src="http://www.qqtouxiangku.com/upimg/201103/2011030511222827090.jpg" width="50" height="50" /></div> </div> </div> </body> </html>
