<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">
<!--标题，里面填写的内容将在浏览器顶部小框中显示-->

        <title></title>

    </head>

    <body>
<!--将网页分成三个部分，头部-->

            <header>

        <h1><a href="#"><img src="../img/163logo.gif" alt="logo"/></a></h1>

        <p>

            <a href="#">免费邮</a>

            <a href="#"> 企业邮</a>

            <a href="#">VIP邮箱</a>

            <a href="#">帮助</a>

        </p>

    </header>
<!--中部-->

    <section>

        <div>

            <img src="../img/imap.jpg" alt=""/>

            <ul>

                <li>163/126/yeah三大免费邮箱均默认开放</li>

                <li>全面支持iPhone/iPad及Android等系统</li>

                <li>客户端、手机与网页，实现发送、阅读邮件</li>

            </ul>

            <a href="#"><img src="../img/loginIcon.gif">普通登录 </a>

        </div>

        <form action="#" method="get">

            <p>

                用户名：

                <input type="text" name="userName"/>

                @163.com

            </p>

            <p>

                密码：

                <input type="password" name="psw"/>

            </p>

            <p>

                版本：

                <select name=""version id="">

                    <option value="">默认</option>

                    <option value="2018">2018</option>

                    <option value="2017">2017</option>

                    <option value="2016">2016</option>

                    <option value="2015">2015</option>

                </select>

            </p>

            <p>

                <input type="checkbox" value="autoLogin"/>自动登录

                <input type="checkbox" value="ssl" checked/>SSL

            </p>

            <input type="submit" value="登录"/>

            <input type="submit" value="注册"/>

        </form>

    </section>
<!--尾部-->

    <footer>

        <img src="../img/netease_logo.gif" alt=""/>

        <a href="#">关于网易</a>

        <a href="#">免费邮 </a>

        <a href="#">官方博客</a>

        <a href="#">客户服务 </a>

        <a href="#">隐私政策</a>|

        <a href="#">网易公司版权所有  &copy; 2015-2018</a>

    </footer>

    </body>

</html>

上面是效果展示图，图片保存位置：右击当前web项目的img文件夹，打开文件所在目录（p）

将这四张图存入其中。<!--*******-->为注释 <ul></ul>为无序列表。

利用HTML制作一个简单的界面（工具HBuilder）的更多相关文章

  1. C#-用Winform制作一个简单的密码管理工具

    为什么要做? 首先是为了练习一下c#. 想必大家都有过记不起某个平台的账号密码的经历,那种感受着实令人抓狂.那这么多账号密码根本记不住!我之前用python写过一个超级简单(连账号信息都写在代码里那种 ...

  2. 用Qt写软件系列三：一个简单的系统工具（上）

    导言 继上篇<用Qt写软件系列二:QIECookieViewer>之后,有一段时间没有更新博客了.这次要写的是一个简单的系统工具,需求来自一个内部项目.功能其实很简单,就是查看当前当前系统 ...

  3. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  4. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

  5. 基于node实现一个简单的脚手架工具（node控制台交互项目）

    实现控制台输入输出 实现文件读写操作 全原生实现一个简单的脚手架工具 实现vue-cli2源码 一.实现控制台输入输出 关于控制台的输入输出依然是基于node进程管理对象process,在proces ...

  6. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

  7. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  8. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  9. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

随机推荐

  1. 基于spark邮件自动分类

    代码放在github上:click me 一.数据说明 数据集为英文语料集,一共包含20种类别的邮件,除了类别soc.religion.christian的邮件数为997以外每个类别的邮件数都是100 ...

  2. JavaScript HashTable

    function HashTable() { var loseHashCode = function(key) { var hash = 0; for (var i = 0; i < key.l ...

  3. log4j/slf4j

    log4j的使用 引入log4j.jar包 <dependency> <groupId>log4j</groupId> <artifactId>log4 ...

  4. luoguP1083 借教室(题解)(我用的线段树)

    luoguP1083 借教室 题目 #include<cstdio> #include<iostream> #include<cmath> #include< ...

  5. 修改默认runlevel

    CentOS直接修改文件  /etc/inittab 就好了 # Default runlevel. The runlevels used are: # - halt (Do NOT set init ...

  6. Pycharm 激活码2017最新

    BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  7. MySQL日志文件与分析

    1.查询日志.慢查询日志.二进制日志对比 查询日志 general_log 会记录用户的所有操作,其中包含增删查改等 可以指定输出为表 慢查询日志 slow_log 只要超过定义时间的所有操作语句都记 ...

  8. AI行业精选日报_人工智能（12·24）

    特斯拉完全自动驾驶进步:新系统能识别交通信号标志 12 月 24 日,有美国车友称,升级最新的特斯拉 2019.40.50 系统后已经可以识别红绿灯和停车标志(目前仅限搭载 HW3.0 硬件的车型), ...

  9. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  10. 模板方法模式TemplateMethod

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11407071.html 1. 定义定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子 ...