第三章 本章习题

1 采用表格布局完成“CASIO计算器”外观设计,其中表格的每一个单元格均需要设计带边框。

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>计算机</title>
        <style>
            strong{
                background-color: #ffffff;
            }
            .as{
                width: 150px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <table align="center"  width="500" border="3" cellpadding="5px" cellspacing="5px" bgcolor="#808080">
        <tr >
            <td width="50" valign="middle" align="left" class="as"><strong>CASIO.</strong></td>
        </tr>
        <tr  bgcolor="#ffffff">
            <td width="600" valign="middle" align="left"><br /><br /><br /></td>
        </tr>
        
        <table align="center" width="500" border="3" cellpadding="10px" cellspacing="24px" bgcolor="#808080">
            <tr bgcolor="#ffffff">
                <td width="50" align="center" border="1"bgcolor=>1</td>
                <td width="50" align="center" border="1">2</td>
                <td width="50" align="center" border="1">3</td>
                <td width="50" align="center" border="1">+</td>
            </tr>
            <tr bgcolor="#ffffff">
                <td width="50" align="center" border="1">4</td>
                <td width="50" align="center" border="1">5</td>
                <td width="50" align="center" border="1">6</td>
                <td width="50" align="center" border="1">-</td>
            </tr>
            <tr bgcolor="#ffffff">
                <td width="50" align="center" border="1">7</td>
                <td width="50" align="center" border="1">8</td>
                <td width="50" align="center" border="1">9</td>
                <td width="50" align="center" border="1">*</td>
            </tr>
            <tr bgcolor="#ffffff">
                <td width="50" align="center" border="1">0</td>
                <td width="50" align="center" border="1">=</td>
                <td width="50" align="center" border="1">CE</td>
                <td width="50" align="center" border="1">/</td>
            </tr>
        </table>
        </table>
    </body>
</html>

效果图;

2 编写程序“登录界面” 

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>登录页面</title>
        <style type="text/css">
            body{
                text-align: center;
            }
            fieldset {
                width: 400px;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend align="middle">登录页面</legend>
                <tr>
                    用户名:<input type="text" name="name" /><br />
                </tr>
                <tr>
                    密&nbsp; &nbsp;码:<input type="text" name="name" /><br>
                </tr>
                <tr>
                    类 &nbsp; &nbsp; 型:
                    <td><input type="radio" name="guangli" />管理员
                        <input type="radio" name="putong" />普通用户<br />
                        &nbsp; &nbsp;<input type="checkbox" name="n1">记住密码
                        <input type="checkbox" name="n2">自动登录<br />
                    </td>
                </tr>
                <tr> 
                    <input type="submit" name="button"  value="提交" />
                    <input type="reset" name="button2"  value="重置" />
                </tr>
            </fieldset>
        </form>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值