1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
    <!--标题，里面填写的内容将在浏览器顶部小框中显示-->
  5.         <title></title>
  6.     </head>
  7.     <body>
    <!--将网页分成三个部分，头部-->
  8.             <header>
  9.         <h1><a href="#"><img src="../img/163logo.gif" alt="logo"/></a></h1>
  10.         <p>
  11.             <a href="#">免费邮</a>
  12.             <a href="#"> 企业邮</a>
  13.             <a href="#">VIP邮箱</a>
  14.             <a href="#">帮助</a>
  15.         </p>
  16.     </header>
    <!--中部-->
  17.     <section>
  18.         <div>
  19.             <img src="../img/imap.jpg" alt=""/>
  20.             <ul>
  21.                 <li>163/126/yeah三大免费邮箱均默认开放</li>
  22.                 <li>全面支持iPhone/iPad及Android等系统</li>
  23.                 <li>客户端、手机与网页，实现发送、阅读邮件</li>
  24.             </ul>
  25.             <a href="#"><img src="../img/loginIcon.gif">普通登录 </a>
  26.         </div>
  27.         <form action="#" method="get">
  28.             <p>
  29.                 用户名：
  30.                 <input type="text" name="userName"/>
  31.                 @163.com
  32.             </p>
  33.             <p>
  34.                 密码：
  35.                 <input type="password" name="psw"/>
  36.             </p>
  37.             <p>
  38.                 版本：
  39.                 <select name=""version id="">
  40.                     <option value="">默认</option>
  41.                     <option value="2018">2018</option>
  42.                     <option value="2017">2017</option>
  43.                     <option value="2016">2016</option>
  44.                     <option value="2015">2015</option>
  45.                 </select>
  46.             </p>
  47.             <p>
  48.                 <input type="checkbox" value="autoLogin"/>自动登录
  49.                 <input type="checkbox" value="ssl" checked/>SSL
  50.             </p>
  51.             <input type="submit" value="登录"/>
  52.             <input type="submit" value="注册"/>
  53.         </form>
  54.     </section>
    <!--尾部-->
  55.     <footer>
  56.         <img src="../img/netease_logo.gif" alt=""/>
  57.         <a href="#">关于网易</a>
  58.         <a href="#">免费邮 </a>
  59.         <a href="#">官方博客</a>
  60.         <a href="#">客户服务 </a>
  61.         <a href="#">隐私政策</a>|
  62.         <a href="#">网易公司版权所有  &copy; 2015-2018</a>
  63.     </footer>
  64.     </body>
  65. </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. 如何制作一个可以用Bochs调试的最新内核系统盘

    参考:http://blog.chinaunix.net/uid-26207112-id-3332621.html 1. 正确地创建一个包含启动分区的磁盘映像 1.1 创建磁盘映像文件 首先需要对磁盘 ...

  2. USACO 6.3 章节 你对搜索和剪枝一无所知QAQ

    emmm........很久很久以前 把6.2过了 所以emmmmmm 直接跳过 ,从6.1到6.3吧 Fence Rails 题目大意 N<=50个数A1,A2... 1023个数,每个数数值 ...

  3. js中的经典案例--简易万年历

    js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. 中介者模式(Mediator Pattern）

    用于减少多个对象或类之间的通信复杂性. 此模式提供了一个中介类,它通常处理不同类之间的所有通信,并支持通过松散耦合来维护代码.中介者模式属于行为模式类别. 实现实例 在这里通过一个聊天室的示例来演示中 ...

  5. 洛谷 P1119 灾后重建——dijstra

    先上一波题目 https://www.luogu.org/problem/P1119 这道题我们可以将询问按时间排序 然后随着询问将相应已经重建成功的点进行操作 每次更新一个点就以他为起点跑一遍dij ...

  6. Action.c(28): Error -27796: Failed to connect to server "xxxx": [10060] Connection timed out

    Error -27796: Failed to connect to server "125.93.51.230:8080": [10061] Connection refused ...

  7. Java接口自动化测试实战笔记

    综述 代码管理工具Git 测试框架 TestNG 测试报告 Mock 接口框架 HTTP 协议接口 测试框架 HttpClient SprintBoot 自动化测试开发 数据持久层框架 MyBatis ...

  8. SpringBoot-SpringCloud-版本对应关系

    刚开始研究SpringCloud和SpringBoot的时候,困惑点比较多,SpringBoot是从1.X.X到目前的2.X.X版本,但是SpringCloud基于SpringBoot,版本之间肯定是 ...

  9. 2019牛客暑期多校训练营（第三场）I Median

    题意:给出n-2的中位数序列b,b[i]代表原序列中(a[i],a[i+1],a[i+2])的中位数,求a. 解法:比赛的时候没做出来,赛后看题解的.解法跟网上各位大佬一样:首先要证明其实原序列a中的 ...

  10. sql 摘抄

    练习题和参考解 (1)查询“001”课程比“002”课程成绩低的所有学生的学号.001学科成绩.002学科成绩                 1 SELECT 2 s1.StudentNo, 3 s ...