【小练习】请大家做出如下网页
【备注】左上框为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>
时间： 2024-10-10 21:29:59