HTML作业2

最新推荐文章于 2024-05-13 08:25:50 发布
最新推荐文章于 2024-05-13 08:25:50 发布
阅读量424 收藏 2
点赞数 5
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuperBigToilet/article/details/137042033
版权

作业1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            td {
                padding: 8px;
                text-align: left;
                background-color: gray;
            }
            th {
                background-color: whitesmoke;
            }
        }
    </style>
</head>
<body>
    <form action="#" method="get">
        <table>
            <tr>
                <th colspan="2">用户注册</th>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input name="like" type="checkbox" value="write">写作业
                    <input name="like" type="checkbox" value="music">音乐
                    <input name="like" type="checkbox" value="sport">体育
                </td>
            </tr>
            <tr>
                <td>省份</td>
                <td>
                    <select name="province">
                        <option value="yunnan" selected>云南</option>
                        <option value="shanxi">陕西</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td><textarea name="Intro" cols="23" rows="5"></textarea></td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit">
                    <input type="reset">
                </th>
            </tr>
        </table>
    </form>
</body>
</html>

结果：

作业2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            padding: 5px;
            text-align: left;
        }
        #free {
            text-align: right;
        }
        .text {
            font-size: 12px;
            color: #9b9b9b;
        }
        .text2 {
            height: 30px;
        }
        #log {
            font-size: 25px;
            color: #ffffff;
            background: #2a91db;
            text-align: center;
        }
        #title2 {
            font-size: 20px;
        }
        #input {
            width: 150px;
        }
    </style>
</head>
<body>
<form action="#" method="get">
    <table>
        <tr>
            <td rowspan="9"><img src="./img/截屏2024-03-25 13.10.32.png" alt="QQ" width="300"></td>
            <td width="200px" rowspan="9"></td>
            <td height="100px"></td>
            <td width="180px"></td>
        </tr>
        <tr>
            <td colspan="2" height="25px"><span id="title"><b>欢迎注册QQ</b></span></td>
        </tr>
        <tr>
            <td><span id="title2"><b>每一天，乐在沟通。</b></span></td>
            <td id="free"><a href="#">免费靓号</a></td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="username" placeholder="昵称" size="50px" class="text2"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="password" placeholder="密码" size="50px" class="text2"></td>
        </tr>
        <tr>
            <td>
                <select name="tele" id="input" class="text2">
                    <option value="+86" selected>+86</option>
                    <option value="+1">+1</option>
                </select>
            </td>
            <td>
                <input type="number" name="telephone" placeholder="手机号码" class="text2">
            </td>
        </tr>
        <tr>
            <td class="text" colspan="2">可通过手机号码找回密码</td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" name="check" value="check"><span class="text">我已阅读并同意相关服务条款和隐私政策</span></td>
        </tr>
    </table>
</form>
</body>
</html>

结果：

作业3:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登陆</title>
        <style>
            th,td {
                border: 0px solid black;
                padding: 10px;
                text-align: left;
            }
            .text {
                border: 0px solid black;
                padding: 8px;
                text-align: center;
            }
            #head1 {
                background-color: #79c9ff;
                width: 600px;
            }
            #head2 {
                background-color: #79c9ff;
                width: 350px;
            }
            .link {
                font-size: 15px;
                color: #efefef;
            }
            .link2 {
                font-size: 15px;
                color: #505050;
            }
            #title {
                font-size: 25px;
            }
            #title2 {
                font-size: 20px;
            }
            .input {
                height: 35px;
            }
            #submit {
                width: 375px;
            }
            .text-right {
                font-size: 15px;
            }
        </style>
    </head>
    <body>

<form method="get" action="#">
    <table>
        <tr>
            <td id="head1" height="50px"></td>
            <td id="head2" style="text-align: right">
                <a href="#" class="link">QQ登录 |</a>
                <a href="#" class="link">授权管理 |</a>
                <a href="#" class="link">申请接入</a>
            </td>
        </tr>
        <tr>
            <td class="text"><b><span id="title">账号密码登录</span></b></td>
            <td rowspan="7">
                <table>
                    <tr><td style="height: 20px"></td></tr>
                    <tr>
                        <span class="text-right"><td><a href="#"><hr>腾讯网</a>将获得以下权限：<hr></td></span>
                    </tr>
                    <tr>
                        <span class="text-right"><td><input type="checkbox" name="check" value="all" checked>全选<hr></td></span>
                    </tr>
                    <tr>
                        <span class="text-right"><td><input type="checkbox" name="check" value="all" checked disabled>获得您的昵称、头像、性别及会员信息</td></span>
                    </tr>
                    <tr><td style="height: 40px"></td></tr>
                    <tr>
                        <span class="text-right"><td>授权后表名你已同意<a href="#">QQ登录服务协议</a></td></span>
                    </tr>
                    <tr><td style="height: 70px"></td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="text"><span id="title2">推荐使用<a href="#">快速安全登录</a>,防止盗号</span></td>
        </tr>
        <tr>
            <td class="text"><input type="text" name="username" placeholder="支持QQ号/邮箱/手机号登录" size="50px" class="input"></td>
        </tr>
        <tr>
            <td class="text"><input type="text" name="password" placeholder="密码" size="50px" class="input"></td>
        </tr>
        <tr>
            <td class="text"><input type="image" src="./img/3.jpg" id="submit"></td>
        </tr>
        <tr>
            <td style="height: 30px"></td>
        </tr>
        <tr>
            <td style="text-align: right">
                <a href="#" class="link2">忘了密码? |</a>
                <a href="#" class="link2">注册新账号 |</a>
                <a href="#" class="link2">意见反馈</a>
            </td>
        </tr>
    </table>
    </form>
    </body>
    </html>

结果：

作业四：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪网</title>
    <style>
        #index {
            background-color: #d9d9d9;
        }
        th, td {
            padding: 8px;
            text-align: left; 
        }

        .list {
            padding: 8px; 
            text-align: right;
            width: 150px;
        }

        .input {
            padding: 8px;
            text-align: left;
            width: 300px;
        }


        body {
            background-color: #f8f8f8;
        }

        .star {
            color: #ff3232;
        }

        .comment {
            font-size: 12px;
            color: #43b7ff;
            text-decoration: none;
        }

        .comment2 {
            font-size: 15px;
            color: #1a8fd7;
            text-decoration: none;
        }

        .login {
            color: #43b7ff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<form action="#" method="get">
    <table>
        <tr>
            <td rowspan="2"><img src="./img/手机.png" width="50px"></td>
            <td class="list"><span class="star">*</span>手机号码：</td>
            <td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
            <td style="width: 150px" rowspan="9"></td>
            <td style="width: 300px"></td>
        </tr>
        <tr>
            <td></td>
            <td>使用微博账号直接<a href="#">登录</a></td>
            <td>已有账号，<a href="#" class="login">直接登录 >></a></td>
        </tr>
        <tr>
            <td rowspan="7"></td>
            <td class="list"><span class="star">*</span>设置密码：</td>
            <td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
            <td style="width: 300px" rowspan="7"></td>
        </tr>
        <tr>
            <td class="list"><span class="star">*</span>兴趣标签：</td>
            <td>
                <input type="checkbox" value="1" name="check">新闻
                <input type="checkbox" value="2" name="check">娱乐
                <input type="checkbox" value="3" name="check">文化
                <input type="checkbox" value="4" name="check">体育
                <input type="checkbox" value="5" name="check">IT&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                <input type="checkbox" value="6" name="check">财经
                <input type="checkbox" value="7" name="check">时尚
                <input type="checkbox" value="8" name="check">汽车
                <input type="checkbox" value="9" name="check">房产
                <input type="checkbox" value="0" name="check">生活
            </td>
        </tr>
        <tr>
            <td class="list"><span class="star">*</span>手机上发短信：</td>
            <td><button style="height: 35px">注册要使用手机发送短信</button></td>
        </tr>
        <tr>
            <td rowspan="4"></td>
            <td style="height: 40px"></td>
        </tr>
        <tr>
            <td><a href="#" class="comment">《新浪网络服务使用协议》</a></td>
        </tr>
        <tr>
            <td><a href="#" class="comment">《新浪个人信息保护政策》</a></td>
        </tr>
        <tr>
            <td style="height: 150px"></td>
        </tr>
    </table>
</form>
<hr/>
<div>
    <a href="#" class="comment2">新浪简介&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">About Sina</a>
    <a href="#" class="comment2">广告服务&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">联系我们&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">招聘信息&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">网站律师&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">SINA English&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">注册&amp;nbsp;&amp;nbsp;</a>
    <a href="#" class="comment2">产品答疑</a>
</div>
<div>
    <span style="color: #6c6c6c">客户服务电话 110-120-119 欢迎批评指正</span>
</div>
<div>
    <span style="color: #6c6c6c">新浪公司 <a href="#" class="comment2">版权所有</a></span>
</div>
</body>
</html>

结果：

SuperBigToilet
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML大作业源码
12-30
简单的HTMl大作业源代码，交个作业没什么问题，可供参考与学习
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 28万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
HTML初学者作业
weixin_53089473的博客
03-02 2232
HTML初学者第一课作业内容： 初学者理解浅薄，有错误在所难免，可以和楼主交流以助于及时改正 结合今天上课所讲内容，完成上传图片页面样式开发 要求如下: 1. 配色，背景图片根据自己喜好，上网查找素材。 header 和footer 地方，可以根据自己想法，设计美化一下 2. banner地方，可以点击跳转，点击后，新开网页跳转到百度吧 3. 表单项目，可以根据自己想法增加项目，元素需要增加2项以上check 4.作业成果物: 提交html资源的源码 遇到的困难： 1.表格table &lt.
一个简单的网页设计HTML5作业
好好读书
06-26 8万+
简单的html设计作业，初次学习，希望指正！
HTML网页设计制作大作业（div+css）
IT_A_bin的博客
11-25 10万+
话不多说，直接上效果图： 历史介绍 行政区划： 地理环境 著名景点： 美食小吃 工艺品 联系我们 部分项目结构 老师要求的十几个页面20几张图片以及一些跳转，使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂 部分代码 偷个懒，就用notepad打开。不用H-build打开了。哈哈哈 另外有同学要是需要源码的话可以联系我呀。 大家加油！奥利给！ ...............
html网页设计小作业(个人主页)
m0_53415522的博客
11-08 5万+
简易的个人网页小作业，只用了html+css 布局制作，没啥好说的，直接上图！！！
web前端html期末大作业实例 (1500套)
HTML网页设计
10-03 8万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
html作业 音乐排行榜
m0_56424512的博客
11-17 1669
html作业
HTML网页设计作业
apple_58104230的博客
06-01 5083
效果图：
纯HTML+CSS网页设计期末作业
爱德苏的博客
05-29 1万+
喜欢水课的大学生的HTML期末大作业！！！
Web网页设计作业html
周末简设
12-07 1万+
该模板为纯html5模板，样式简单，页面都是以DIV+CSS实现线性布局，运用html5技术，包括nav标签、header标签和footer标签等，支持PC端和手机端。
HTML静态网页作业
02-15
北邮信息网络应用基础HTML静态网页作业，下载后注意修改后使用（@-@）
HTML期末大作业
11-24
这是我自己做的HTML期末大作业，花了很多时间，稍加修改就可以作为自己的作业了，而且也可以作为学习参考
html期末大作业
12-18
html期末大作业,可以供选修了html网页的课的同学应付老师……
html作业文件lksjdlflajrfalwfiejliorae
03-29
html作业文件lksjdlflajrfalwfiejliorae
学习Java的日子 Day45 HTML常用的标签
weixin_69595694的博客
05-10 1091
dl - 定义列表dt - 列表头dd - 列表体。
使用JavaScript日历小部件和DHTMLX Gantt的应用场景（二）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
05-10 663
本文将为大家介绍DHTMLX Suite UI库中的JavaScript日历小部件和DHTMLX Gantt的实际应用场景，欢迎下载最新组件体验！
使用JavaScript将富文本HTML转换为纯文本
sg_knight的专栏
05-09 538
在Web开发中，我们经常需要处理HTML内容，但有时为了特定的目的，比如文本处理、搜索或显示在非HTML环境中，我们可能希望将富文本HTML转换为纯文本。这里，我们将探讨如何使用JavaScript来实现这一功能。
HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)
最新发布
weixin_42283461的博客
05-13 863
HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)
html作业源码分享
04-23
当然，我可以给你介绍一下HTML作业源码分享。HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。下面是一个简单的HTML作业源码示例： ```html <!DOCTYPE html> <html> 我的作业 欢迎来到我的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值