请大家做出如下网页

 

【备注】左上框为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>
posted on 2015-08-02 10:31  毛毛天空  阅读(188)  评论(0编辑  收藏  举报