【Web前端】千年之恋注册页面——源代码展示
2024-06-17 14:04:49
目录
一、案例图
二、源代码
2.1 html部分
2.2 css部分
2.3 全部代码(直接运行)
三、效果呈现编辑
本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS)，这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，接下来我们来看看如何实现这个页面的效果吧。
这里是网页页面+图片素材，需要的自取噢：
链接：https://pan.baidu.com/s/1TXBQ8XchgpuMUn7GtXSznw?pwd=7777
提取码：7777
一、案例图
二、源代码
2.1 html部分
<body><div id="header"><img src="data:images/logo.jpg" /></div><div id="nav_bg"><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">会员</a></li><li><a href="#">活动</a></li><li><a href="#">直播</a></li><li><a href="#">视频</a></li><li><a href="#" class="bg">注册</a></li></ul></div><div id="banner"><img src="data:images/banner.jpg" /></div><div id="content"><h2 class="step">注册信息：</h2><form action="#" method="post" class="one"><h3>您的账号信息：</h3><table class="content"><tr><td class="left">注册方式：</td><td><label for="one"><input type="radio" name="sex"id="one" />E-mail注册</label> <label for="two"><input type="radio" name="sex" id="two" />手机号码注册</label></td></tr><tr><td class="left">注册邮箱：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">注册手机：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">登录密码：</td><td><input type="password" maxlength="8" class="right" /></td></tr><tr><td class="left">昵称：</td><td><input type="text" class="right" /></td></tr></table><h3>您的个人信息：</h3><table class="content"><tr><td class="left">性别：</td><td><label for="boy"><input type="radio" name="sex" id="boy" />男</label> <label for="girl"><input type="radio" name="sex" id="girl" />女</label></td></tr><tr><td class="left">学历：</td><td><select><option>-请选择-</option><option>中职/高中</option><option>专科/本科</option><option>硕士研究生</option><option>博士研究生</option></select></td></tr><tr><td class="left">所在城市：</td><td><select><option>-请选择-</option><option selected="selected">北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td class="left">兴趣爱好：</td><td><input type="checkbox" />足球 <input type="checkbox" />篮球 <input type="checkbox" />游泳 <input type="checkbox" />唱歌 <input type="checkbox" />跑步 <input type="checkbox" />瑜伽</td></tr><tr><td class="left">自我介绍：</td><td><textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea></td></tr><tr><td colspan="2"><input type="button" class="btn" /></td></tr></table></form></div><div id="footer"><p>Copyright 2006-2016 QIANNIANZHILIANcom, ALL rights reserved.<br />2001-2018,版权所有 千年之恋 85cp 备 13385453</p></div>
</body>2.2 css部分
<title>千年之恋</title><style type="text/css">* {margin: 0;/*外边距清零*/padding: 0;/*内边距清零*/list-style: none;/*清除列表样式*/outline: none;/*清除轮廓*/border: 0;/*边框设为0*/background: none;/*背景清除*/}body {font-family: "微软雅黑";/*字体样式*/font-size: 14px;/*字体大小*/}a:link,a:visited {text-decoration: none;/*下划线清除*/color: #fff;/*字体颜色*/font-size: 16px;/*字体大小*/}#header {width: 980px;/*宽度设置*/height: 70px;/*高度设置*/margin: 0 auto;/*页面居中显示*/padding-top: 20px;/* 上内边距设置*/}#nav_bg {width: 100%;/*宽度设置*/height: 48px;/*高度设置*/background: #fe668f;/*背景颜色*/}.nav {width: 980px;/*宽度设置*/margin: 0 auto;/*页面居中显示*/}.nav li {float: left;/*左浮动*/}a {display: inline-block;/*转换为行内块元素*/height: 48px;/*高度设置*/padding: 0 50px;/*左右内边距*/line-height: 48px;/*字体行高*/}.bg {background: #fe9ab5;/*背景颜色*/}#banner {width: 980px;/*宽度设置*/margin: 0 auto;/*页面居中显示*/}#content {width: 930px;/*宽度设置*/height: 934px;/*高度设置*/background: url(images/content_bg.jpg) no-repeat;/*背景图片*/margin: 0 auto;/*页面居中显示*/padding-left: 150px;/*左内边距*/}.step {width: 454px;/*宽度设置*/height: 80px;/*高度设置*/font-size: 20px;/*字体大小*/font-weight: 100;/*字体宽度设置*/color: #dd8787;background: url(images/step.jpg) center right no-repeat;/*背景图片*/line-height: 80px;/*字体行高*/}h3 {width: 444px;/*宽度设置*/height: 45px;/*高度设置*/font-size: 20px;/*字体大小*/font-weight: 100;/*字体宽度设置*/color: #dd8787;/*字体颜色*/line-height: 45px;/*行高设置*/border-bottom: 1px solid #dd8787;}td {height: 50px;/*高度设置*/color: #dd8787;/*字体颜色*/}.left {width: 120px;/*宽度设置*/text-align: right;/*字体右对齐*/}.right {width: 320px;/*宽度设置*/height: 28px;/*高度设置*/border: 1px solid #dd8787;/*边框设置*/}input {vertical-align: middle;}select {width: 171px;/*宽度设置*/border: 1px solid #dd8787;/*边框设置*/color: #aaa;/*字体颜色*/}textarea {width: 380px;/*宽度设置*/border: 1px solid #dd8787;/*边框设置*/resize: none;font: 12px;/*字体大小*/color: #aaa;/*字体颜色*/padding: 20px;/*设置内边距*/}.btn {width: 409px;/*宽度设置*/height: 76px;/*高度设置*/background: url(images/btn.jpg) right center no-repeat;/*背景图片*/}#footer {width: 100%;/*宽度设置*/height: 68px;/*高度设置*/line-height: 26px;/*字体行高*/background: #de668f;/*背景颜色*/color: #fff;/*字体颜色*/text-align: center;/*字体居中*/padding-top: 40px;/*设置上内边距*/}</style>2.3 全部代码(直接运行)
<!doctype html>
<html><head><meta charset="utf-8"><title>千年之恋</title><style type="text/css">* {margin: 0;/*外边距清零*/padding: 0;/*内边距清零*/list-style: none;/*清除列表样式*/outline: none;/*清除轮廓*/border: 0;/*边框设为0*/background: none;/*背景清除*/}body {font-family: "微软雅黑";/*字体样式*/font-size: 14px;/*字体大小*/}a:link,a:visited {text-decoration: none;/*下划线清除*/color: #fff;/*字体颜色*/font-size: 16px;/*字体大小*/}#header {width: 980px;/*宽度设置*/height: 70px;/*高度设置*/margin: 0 auto;/*页面居中显示*/padding-top: 20px;/* 上内边距设置*/}#nav_bg {width: 100%;/*宽度设置*/height: 48px;/*高度设置*/background: #fe668f;/*背景颜色*/}.nav {width: 980px;/*宽度设置*/margin: 0 auto;/*页面居中显示*/}.nav li {float: left;/*左浮动*/}a {display: inline-block;/*转换为行内块元素*/height: 48px;/*高度设置*/padding: 0 50px;/*左右内边距*/line-height: 48px;/*字体行高*/}.bg {background: #fe9ab5;/*背景颜色*/}#banner {width: 980px;/*宽度设置*/margin: 0 auto;/*页面居中显示*/}#content {width: 930px;/*宽度设置*/height: 934px;/*高度设置*/background: url(images/content_bg.jpg) no-repeat;/*背景图片*/margin: 0 auto;/*页面居中显示*/padding-left: 150px;/*左内边距*/}.step {width: 454px;/*宽度设置*/height: 80px;/*高度设置*/font-size: 20px;/*字体大小*/font-weight: 100;/*字体宽度设置*/color: #dd8787;background: url(images/step.jpg) center right no-repeat;/*背景图片*/line-height: 80px;/*字体行高*/}h3 {width: 444px;/*宽度设置*/height: 45px;/*高度设置*/font-size: 20px;/*字体大小*/font-weight: 100;/*字体宽度设置*/color: #dd8787;/*字体颜色*/line-height: 45px;/*行高设置*/border-bottom: 1px solid #dd8787;}td {height: 50px;/*高度设置*/color: #dd8787;/*字体颜色*/}.left {width: 120px;/*宽度设置*/text-align: right;/*字体右对齐*/}.right {width: 320px;/*宽度设置*/height: 28px;/*高度设置*/border: 1px solid #dd8787;/*边框设置*/}input {vertical-align: middle;}select {width: 171px;/*宽度设置*/border: 1px solid #dd8787;/*边框设置*/color: #aaa;/*字体颜色*/}textarea {width: 380px;/*宽度设置*/border: 1px solid #dd8787;/*边框设置*/resize: none;font: 12px;/*字体大小*/color: #aaa;/*字体颜色*/padding: 20px;/*设置内边距*/}.btn {width: 409px;/*宽度设置*/height: 76px;/*高度设置*/background: url(images/btn.jpg) right center no-repeat;/*背景图片*/}#footer {width: 100%;/*宽度设置*/height: 68px;/*高度设置*/line-height: 26px;/*字体行高*/background: #de668f;/*背景颜色*/color: #fff;/*字体颜色*/text-align: center;/*字体居中*/padding-top: 40px;/*设置上内边距*/}</style>
</head><body><div id="header"><img src="data:images/logo.jpg" /></div><div id="nav_bg"><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">会员</a></li><li><a href="#">活动</a></li><li><a href="#">直播</a></li><li><a href="#">视频</a></li><li><a href="#" class="bg">注册</a></li></ul></div><div id="banner"><img src="data:images/banner.jpg" /></div><div id="content"><h2 class="step">注册信息：</h2><form action="#" method="post" class="one"><h3>您的账号信息：</h3><table class="content"><tr><td class="left">注册方式：</td><td><label for="one"><input type="radio" name="sex"id="one" />E-mail注册</label> <label for="two"><input type="radio" name="sex" id="two" />手机号码注册</label></td></tr><tr><td class="left">注册邮箱：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">注册手机：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">登录密码：</td><td><input type="password" maxlength="8" class="right" /></td></tr><tr><td class="left">昵称：</td><td><input type="text" class="right" /></td></tr></table><h3>您的个人信息：</h3><table class="content"><tr><td class="left">性别：</td><td><label for="boy"><input type="radio" name="sex" id="boy" />男</label> <label for="girl"><input type="radio" name="sex" id="girl" />女</label></td></tr><tr><td class="left">学历：</td><td><select><option>-请选择-</option><option>中职/高中</option><option>专科/本科</option><option>硕士研究生</option><option>博士研究生</option></select></td></tr><tr><td class="left">所在城市：</td><td><select><option>-请选择-</option><option selected="selected">北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td class="left">兴趣爱好：</td><td><input type="checkbox" />足球 <input type="checkbox" />篮球 <input type="checkbox" />游泳 <input type="checkbox" />唱歌 <input type="checkbox" />跑步 <input type="checkbox" />瑜伽</td></tr><tr><td class="left">自我介绍：</td><td><textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea></td></tr><tr><td colspan="2"><input type="button" class="btn" /></td></tr></table></form></div><div id="footer"><p>Copyright 2006-2016 QIANNIANZHILIANcom, ALL rights reserved.<br />2001-2018,版权所有 千年之恋 85cp 备 13385453</p></div>
</body></html>还有【Web前端】儿童摄影网——网页制作代码、【Web前端】千年之恋注册页面——源代码展示，这两篇前端的练习文章，如果感兴趣可以去练习一下，不过这些都是学校布置的前端实验课作业，也均是我自己编写的代码，非常初学，现在看这些代码也感觉非常好笑，不过自己毕竟是主学后端，所以前端能做出来这些页面也挺高兴的了。
接下来就是效果展示了，如果能做到下面图片的效果即可，不必太追求完美。
三、效果呈现
本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS)，这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，接下来我们来看看如何实现这个页面的效果吧。
还有【Web前端】儿童摄影网——网页制作代码、【Web前端】千年之恋注册页面——源代码展示，这两篇前端的练习文章，如果感兴趣可以去练习一下，不过这些都是学校布置的前端实验课作业，也均是我自己编写的代码，非常初学，现在看这些代码也感觉非常好笑，不过自己毕竟是主学后端，所以前端能做出来这些页面也挺高兴的了。
【Web前端】千年之恋注册页面——源代码展示相关推荐
- html千年之恋的图片,HTML+CSS+JavaScript项目6 “千年之恋”注册页面制作_0525_连蕊.pptx...
项目6 "千年之恋"注册页面制作;;知识引入;1;1.表格的创建创建表格的具体语法格式如下: 对上述语法的具体解释如下: :用于定义一个表格.:用于定义表格中的一行,必须嵌套在标记 ...
- “千年之恋”注册页面制作
"千年之恋"注册页面制作 一.实验名称: 二.实验日期: 三.实验目的: 四.实验内容: 五.实验步骤: 六.实验结果: 七.源程序: 八.心得体会: 一.实验名称: " ...
- 视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- 前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
- 怎么把http图片改成背景图HTML,web前端：将图片设置成页面的背景-网页页面设置...
如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景! 将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找! 那么为什么今天小编要讲这个呢? 在做一个网页中,如果 ...
- Web前端笔记-解决NicSroll使用后页面跳动（每次刷新或进入跳动一下然后正常）问题
我的是这样的页面 头部和尾部不动,就中间动.但每次刷新时会先出现这个. 然后页面跳动下,就正常了,很奇怪的体验,对应的代码如下: <head>.........<script> ...
- WEB前端：(3)HTML5②超链接及页面内跳转
@html5图像及路径 <img src="images/fruit.jpg" alt="水果显示不出来时你就只好看我啦..." width=" ...
- web前端-综合应用案例-简历表页面的制作-educoder
第1关:简历表页面的结构设计 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- Web前端笔记-使用@media（媒体查询）展示及隐藏div
这里主要实现的目标是实现当分辨率低了就隐藏,达到某个分辨率后就显示. 如下: 正常情况: 当页面变小后: 关键代码如下: @media (max-height: 600px) {.fas{displa ...
最新文章
- java web基本流程
- linux 命令last -x,Linux常用命令last的使用方法详解
- 解决 Windows To Go U盘没有盘符的问题
- netstat 详解
- linux gradle解压后， 执行gradle error13: Permission denied
- ios react_查找内存泄漏React本机应用程序（iOS）
- es6 数组合并_那些会用到的 ES6 精粹（包邮送书）
- 在CDH sandbox中安装并测试livy
- 独家 | 腾讯无人车首次曝光，还把车子开上了四环
- 4077. k显性字符
- VS2013 C++工程调试加断点不能停
- 2021世界机器人大赛— 青少年机器人设计大赛
- flatpak安装的firefox视频播放卡顿的解决方案
- 微信公众号配置模板消息
- 故障恢复控制台应用指南
- SQL SERVER 插入时表名显示对象名无效 问题
- 电调板维修之更换atmega8a主控芯片
- Qt一条令人费解的错误
- 2022年四川省安管人员报名即将结束！C证报名11月9日截止！
- ZoKrates+Remix在线实现zkSNARK零知识证明