【Web前端基础】实验9 表单页面设计

最新推荐文章于 2024-05-03 13:05:05 发布

Lailalalala

最新推荐文章于 2024-05-03 13:05:05 发布

阅读量8.9k

点赞数 14

分类专栏： Web前端基础文章标签：前端 html css

本文链接：https://blog.csdn.net/Lailalalala/article/details/126072787

版权

构建基础页面：参会注册表、设计建言页面、设计调查问卷

摘要由CSDN通过智能技术生成

项目1 参会注册表

页面效果图：

页面效果图

要求：

设计参会注册表页面。

HTML代码：

<!DOCTYPE html>
<html lang='en'>
    <head>
    <meta charset="UTF-8">
    <title>参会注册表</title>
    <style type="text/css">
    body{
     text-align: center;}
    h1{
     
        font-size: 25px;
        text-align: center;
    }
    .zhuce{
     
        font-size: 14px;
        text-align: center;
        width: 550px;
        margin: 0 auto;
        background: #f7f7f7;
    }
    .zhuce td{
     
        border: 1px solid #b4b4b4;
        padding:2px 3px;

    }
    .zhuce .ibg{
     
        text-align: left;
    }
    .zhuce .bbg{
     
        padding: 10px 0;
        font-size: 10px;
        }

    #bt{
     
        width: 40px;
        height: 28px;
       
    }
    </style>
</head>
<body>
    <h1>参会注册表</h1>
    <form>
        <table class="zhuce">
            <tr>
                <td colspan="4" class="ibg">姓名：
                    <input name="txtName" type="text" >
                </td>
                
                <td colspan="4" class="ibg">单位：
                    <input name="txtzhiwu" type="text" size="22">
                </td>
            </tr>
            <tr>
           
            <td colspan="4" class="ibg">性别：
                <input type="radio" name="sex" value="male"/>男
                <input type="radio" name="sex" value="female"/>女
            </td>
          
            <td colspan="4" class="ibg">手机：
                <input name="txtshouji" type="text" size="10">
            </td>
        </tr>
        <tr>
            <td colspan="4" class="ibg">酒店：
                <input type="radio" name="res" value="tianshan"/>天山大酒店
                <input type="radio" name="res" value="kunlun"/>昆仑饭店
            </td>
            <td  class="ibg">预定酒店数： 
                <input name="txtfangjianshu" type="text" size="1">套
            </td>
        </tr>
        <tr>
            <td colspan="9" class="ibg">
                房间类型：
                <input type="radio" name="leixing" value="danren"/>单人间（320元)
                <input type="radio" name="leixing" value="shuangren"/>标准双人间（380元）
                <input type="radio" name="leixing" value="jiating"/>家庭套间（450元）
            </td>
        </tr>
        <tr>
            <td colspan="9" class="bbg">
                <input id="bt" type="submit" name="btnOk" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="bt" type="reset" ><br><br>
            </td>
        </tr>
        </table>
    </form>
</body>
</html>

项目2 设计科技工作者建言页面

页面效果图：

页面效果图

要求：

采用DIV、表格混合布局设计“留言板”页面。
其它两行的内容如下所示：
注：如果您的留言不便公开，请选择"保密"选项，提交后可凭系统反馈给您的留言编号、查询密码和您的姓名查询回复。
请遵守国家有关法律、法规，尊重网上道德，承担一切因您的行为而直接或间接引起的法律责任。
本网站拥有管理笔名和留言的一切权利。

HTML代码：

<!DOCTYPE html>
<html lang='en'>
    <head>

最低0.47元/天解锁文章

Lailalalala

关注

14
点赞
踩
123

收藏

觉得还不错? 一键收藏
1
评论
【Web前端基础】实验9 表单页面设计

构建基础页面：参会注册表、设计建言页面、设计调查问卷
复制链接

扫一扫

专栏目录