<!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. shell 删除隐藏文件.svn

    参考:https://blog.csdn.net/zhangxinrun/article/details/6409125 echo "recursively removing .svn fo ...

  2. 用webdriver模仿浏览器 爬取豆瓣python书单

    用webdriver模仿浏览器 爬取豆瓣python书单 其中运用到os 模块 作用是生成文件夹 存储爬取的信息 etree 用于xpath解析内容 详细代码如下 可用我的上一篇博客存取到excel当 ...

  3. HTML块,含样式的标签

    HTML块,含样式的标签 html块 div标签 块元素,表示一块内容,没有具体的语义. span标签 行内元素,表示一行中的一小段内容,没有具体的语义. 含样式和语义的标签 em标签 行内元素,表示 ...

  4. v8引擎的优化

    1.编译优化 V8采用JIT即使编译技术. 例如JAVA是先编译成字节码,再由JVM编译成机器码,V8则没有中间的字节码,直接由源码生成语法树,然后编译成机器码. 2.隐藏类 当定义一个构造函数,使用 ...

  5. 简述ArcGIS的空间连接（Spatial Join）与字段映射（Field Map）操作

    插个广告,制作ArcGIS的Tool工具学习下面的教程就对了:零基础学习Python制作ArcGIS自定义工具 牢骚一下 在使用ArcMap进行空间连接操作的时候,往往会有两种特殊需求,其一是连接重叠 ...

  6. Java调用DB的存储过程

    2015/12/7 使用数据库存储过程的java代码:   try {            con = (Connection) DBProxy.getConnection(null);       ...

  7. ES6新增语法和内置对象（let,const, Array/String/Set 扩展方法(解构赋值，箭头函数，剩余参数)）

    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...

  8. Video Mode Timings

    A monitor draws an image on the screen by using an electron beam (3 electron beams for color models, ...

  9. mysql limit 数据重复及遗漏

    某天写了一段CRUD,提测给QA,后来想起来忘记按规则排序了,然后修改了代码提交,这个时候QA扔给我一条狗,不,是一个BUG. 内心一片忧伤,CRUD也有BUG啊,怎么办怎么办,赶紧看看去. BUG描 ...

  10. css3--css3模块

    CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 1.选择器(.基本选择器,层次选择器,伪类选择器,伪元素,属性选择器,通配符) 2.盒模 ...