js网页制作08-阿里云开发者社区

js网页制作08

2022-11-08 95

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： js网页制作08

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在线报名</title>
        <link rel="stylesheet" type="text/css" href="作业3.css"/>
    </head>
    <body>
        <div id="box">
            <h2 class="header">下面就开始报名吧<span>(以下信息是报名的重要依据，请认真填写)</span></h2>
            <form action="#" method="post">
                <table class="content">
                    <tr>
                       <td class="left">姓名<span class="red">*</span></td>
                       <td><input type="text" value="报名重要依据,请认真填写" class="txt01"/></td>
                       <tr/>
                    <tr>
                        <td class="left">手机<span class="red">*</span></td>
                        <td><input type="text" value="报名重要依据,请认真填写" class="txt02"/></td>
                    </tr>
                    <tr>
                        <td class="left">性别<span class="red">*</span></td>
                        <td>
                            <label for="boy"><input type="radio" name="sex" id="boy" />男</label>
                            <label for="girl"><input type="radio" name="sex" id="girl" />女</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">邮箱<span class="red">*</span></td>
                        <td><input type="text" class="txt03" /></td>
                    </tr>
                    <tr>
                        <td class="left">意向课程<span class="red">*</span></td>
                        <td>
                            <select class="course">
                                <optio>网页设计</optio>
                                <option selected="selected">平面设计</option>
                                <option>UI设计</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">了解传智渠道</td>
                        <td>
                            <label for="baidu"><input type="checkbox" id="baidu" />baidu</label>
                            <label for="it"><input type="checkbox" id="it" />论坛</label>
                            <label for="friend"><input type="checkbox" id="frined" />朋友推荐</label>
                            <label for="csdn"><input type="checkbox" id="csdn" />CSDN视频网站</label>
                            <label for="video"><input type="checkbox" id="video" />视频教程</label>
                            <label for="other"><input type="checkbox" id="other" />其他</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">留言</td>
                        <td><textarea rows="5" cols="50" class="message">请简述您有没有设计基础，以及为什么选择学习网页平面UI设计。                
                        </textarea></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input type="submit" value="提交" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>
css
body{font-size: 12px; font-family: "宋体"; color: #515151;}
body,h2,form,table{padding: 0; margin: 0;}
#box{
    width: 660px;
    height: 600px;
    border: 1px solid #CCC;
    padding: 20px;
    margin: 50px auto 0;
}
.header span{
    font-size: 22px;
    color: #0b0b0b;
    padding-bottom: 30px;
}
.header span{
    font-size: 12px;
    font-weight: normal;
}
td{padding-bottom: 26xp;}
td.left{
    width: 78px;
    text-align: right;
    padding-right: 8px;
}
.red{color: #F00;}
.txt01,.txt02{
    width: 264px;
    height: 12px;
    border: 1px solid #CCC;
    padding: 3px 3px 3px 26px;
    font-size: 12px;
    color: #949494;
}
.txt01{
    background: url(img/OIP-C.jpg) no-repeat 2px center;
}
.txt02{
    background: url(img/OIP-C.jpg) no-repeat 2px center;
}
.txt03{
    width: 122px;
    height: 12px;
    padding: 3px 3px 3px 26px;
    font-size: 12px;
    background: url(img/OIP-C.jpg) no-repeat 2px center;
}
.course{width: 184px;}
.message{
    width: 432px;
    height: 164px;
    font-size: 12px;
    color: #949494;
    padding: 3px;
}

js网页制作08

热门文章

最新文章

相关课程

相关电子书

相关实验场景