HTML网页设计基础——用户注册界面

简介: HTML网页设计基础——用户注册界面

要求网页中显示如下信息:

首先对网页布局进行分析,包含两个部分,标题和表格部分:

定义表格---->将网页中的表单元素根据上图所示放入不同的行和列中。

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>注册页面综合案例</title>
</head>
<body >
  <h1>青春不常在,抓紧谈恋爱</h1>
<table width="500">
  <tr>
  <td>
    性别:
  </td>
  <td>
    <label for="男">
    <input type="radio" name="sex" id="男">男
    <label for="女">
    <input type="radio" name="sex" id="女">女
  </td>
  </tr>
  <tr>
  <td>
    生日:
  </td>
  <td>
  <select>
  <option selected="selected">
    --请选择年--
  </option>
  <option>
    1990
  </option>
  <option>
    1991
  </option>
  <option>
    1992
  </option>
  <option>
    1993
  </option>
  <option>
    1994
  </option>
  <option>
    1995
  </option>
  </select>
  <select>
  <option selected="selected">
    --请选择月--
  </option>
  <option>
    1月
  </option>
  <option>
    2月
  </option>
  <option>
    3月
  </option>
  <option>
    4月
  </option>
  </select>
  <select>
  <option selected="selected">
    --请选择日--
  </option>
  <option>
    1日
  </option>
  <option>
    2日
  </option>
  <option>
    3日
  </option>
  <option>
    4日
  </option>
  </select>
  </td>
  </tr>
  <tr>
  <td>
    所在地区:
  </td>
  <td>
    <input type="text" name="area" value="地区">
  </td>
  </tr>
  <tr>
    <td>
    婚姻状况:
    </td>
    <td>
    <input type="radio" name="s" checked="checked">未婚<input type="radio" name="s">已婚<input type="radio" name="s">离婚
  </td>
  </tr>
<tr>
  <td>
  学历:
  </td>
  <td>
    <input type="text" value="博士后">
  </td>
</tr>
<tr>
  <td>
    喜欢的类型:
  </td>
  <td>
    <input type="checkbox" name="S">妩媚的<input type="checkbox" name="S">可爱的<input type="checkbox" name="S">小鲜肉<input type="checkbox" name="S">都喜欢
  </td>
</tr>
<tr>
  <td>
  自我介绍:
  </td>
  <td>
  <textarea>
  介绍一下自己吧!
  </textarea>
  </td>
</tr>
<tr>
  <td>
  </td>
  <td>
  <input type="submit" name="submit" value="注册">
</td>
</tr>
<tr>
  <td>
  </td>
  <td>
<input type="checkbox" value="checked">我同意注册条款和加入会员标准
</td>
</tr>
<tr>
  <td>
  </td>
  <td>
<a href="http://xysf.cn">我是会员,立即登录</a>
</td>
</tr>
<tr>
  <td>
  </td>
  <td>
<h3>我承诺</h3>
<ul>
  <li>年满18周岁,单身</li>
  <li>抱着严肃的态度</li>
  <li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

注意:

该实例包含的行和单元格的个数比较多,在书写代码的时候注意不要漏写,可以使用空格隔开,以便于检查。

表格后几行的第一个单元格是没有内容的,虽然没有内容,但是还是需要定义空格单元格,这样才能保证和要求的表格一致。


相关文章
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
7月前
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式,包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式,并提供了相应的代码示例。
132 10
Twaver-HTML5基础学习(29)界面交互
|
8月前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
8月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
8月前
|
前端开发 JavaScript
仿写学校官网 HTML静态网页设计
这篇文章展示了如何设计一个仿学校官网的HTML静态网页,包括实现效果、所需知识点、项目结构和部分核心源码。
仿写学校官网 HTML静态网页设计
|
8月前
|
前端开发
HTML+CSS基础知识(4)简单的广告界面
这篇文章通过代码示例演示了如何使用CSS样式来美化网页布局,包括清除默认样式、设置页面字体、调整标题和内容的样式,以及为超链接添加悬停效果。
HTML+CSS基础知识(4)简单的广告界面
|
10月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
11月前
html编写注册页面
html编写注册页面
120 0
|
11月前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
121 5
|
11月前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
161 2