web前端开发技术储久良第三版第11章练习与实验答案

web前端开发技术储久良第三版答案整理(10-17章)

练习11
1.选择题
(1)B (2)D (3)D (4)B (5)D (6)B
2.填空题
(1)<table></table><tr></tr><th></th>
(2) rowspan 、3、 Colspan 、 5
(3) frame、rules
(4) cellspacing、cellpadding
3.简答题
答案略,见教材。
实验11
1、源代码: exp_11_1演示
------------------- exp_11_1.html -----------------

<!-- exp_11_1.html -->
<html>
    <head>
        <title> 表格实验 </title>
        <style type="text/css">
            table{border:10px  groove #ff0000;}
            td{border:1px solid black ;text-align:center;}
        </style>
    </head>
    <body>
        <table width=300 border="1" align=center >
        <tr>
            <td rowspan="2" ><b>A</b></td>
            <td colspan="2" height="100" ><b>B</b></td>
        <tr align="center">
            <td height="100"><b>E</b></td>
            <td rowspan="2"><b>C</b></td>
        <tr align=center>
            <td colspan="2" height="100"><b>D</b></td>
        </tr>
        </table>
    </body>
</html>

2、源代码: exp_11_2演示

<!-- exp_11_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>div与表格应用实例——计算器布局</title>
        <style type="text/css">
            #wrap{
                width:410px;
                height:450px;
                background-color:rgb(230,230,130);
                z-index:0;
            }
            
            #result{            
                height:60px;
                width:390px;
                border:solid 1px;    
                z-index:1;
                position:absolute;
                top:50px;
                left:20px;
                background-color:white;
            }
            
            #op{            
                height:310px;
                width:390px;                
                z-index:1;
                position:absolute;
                top:115px;
                left:20px;
            }
            
            td{
                border:solid 1px black;
                width:58px;
                height:40px;
                margin:10px;  /*margin表示边距*/
                cursor:pointer;  /*设置鼠标指针变成手的形状*/
            }
        </style>
    </head>
    <body>
        <div id="wrap">
        <img src="casio.bmp"></img>
            <div id="result"></div>
            <div id="op">
                <table cellspacing="30" border="1">
                    <tr align="center">
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>+</td>
                    </tr>    
                    <tr align="center">
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>-</td>
                    </tr>    
                    <tr align="center">
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>*</td>
                    </tr>    
                    <tr align="center">
                        <td>0</td>
                        <td>=</td>
                        <td>CE</td>
                        <td>/</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>
版权声明

弈心博客


首发 弈心博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读