- HTML5+CSS3+JavaScript 从入门到项目实践(超值版)
- 聚慕课教育研发中心
- 246字
- 2025-02-18 09:35:11
3.6 实践案例——设计登录和注册界面

在平时浏览网页时,经常会遇到让我们输入信息的界面,登录后才能查看一些信息,如果没有在该网站注册过,还需要先注册信息。本案例也来实现一个简单的登录注册界面。
设计HTML结构,代码如下:

可以发现,我们设置了一个标题、两个文本框和两个按钮,在IE浏览器中运行的结果如图3-14所示。

图3-14 没设置CSS的页面效果
然后给每个元素添加CSS样式,全部代码如【例3-10】所示。
【例3-10】(实例文件:ch03\Chap3.10.html)登录注册界面设计。

相关的代码实例请参考Chap3.10.html文件,在IE浏览器中运行的结果如图3-15所示。

图3-15 登录和注册完成界面