第一周综合练习 - 毛毛天空

请大家做出如下网页

【备注】左上框为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) 编辑收藏举报