【Web前端】千年之恋注册页面——源代码展示

这篇具有很好参考价值的文章主要介绍了【Web前端】千年之恋注册页面——源代码展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、案例图

二、源代码

2.1 html部分

2.2 css部分

2.3 全部代码(直接运行)

三、效果呈现​编辑


本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS),这个案例充分使用到了表单标签,这对于刚学习表单标签的朋友练习难度刚刚好,接下来我们来看看如何实现这个页面的效果吧。

这里是网页页面+图片素材,需要的自取噢:

链接:https://pan.baidu.com/s/1TXBQ8XchgpuMUn7GtXSznw?pwd=7777 
提取码:7777

一、案例图

【Web前端】千年之恋注册页面——源代码展示

二、源代码

2.1 html部分

<body>
	<div id="header">
		<img src="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="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>&nbsp;&nbsp;&nbsp;&nbsp;
						<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>&nbsp;&nbsp;&nbsp;&nbsp;
						<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" />足球&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;
						<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 20
			06-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="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="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>&nbsp;&nbsp;&nbsp;&nbsp;
						<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>&nbsp;&nbsp;&nbsp;&nbsp;
						<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" />足球&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;
						<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 20
			06-2016 QIANNIANZHILIANcom, ALL rights reserved.<br />2001-2018,版权所有 千年之恋 85cp 备 13385453</p>
	</div>
</body>

</html>

还有【Web前端】儿童摄影网——网页制作代码、【Web前端】千年之恋注册页面——源代码展示,这两篇前端的练习文章,如果感兴趣可以去练习一下,不过这些都是学校布置的前端实验课作业,也均是我自己编写的代码,非常初学,现在看这些代码也感觉非常好笑,不过自己毕竟是主学后端,所以前端能做出来这些页面也挺高兴的了。文章来源地址https://www.toymoban.com/news/detail-505044.html

接下来就是效果展示了,如果能做到下面图片的效果即可,不必太追求完美。

三、效果呈现

 ​​​​​​本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS),这个案例充分使用到了表单标签,这对于刚学习表单标签的朋友练习难度刚刚好,接下来我们来看看如何实现这个页面的效果吧。

还有【Web前端】儿童摄影网——网页制作代码、【Web前端】千年之恋注册页面——源代码展示,这两篇前端的练习文章,如果感兴趣可以去练习一下,不过这些都是学校布置的前端实验课作业,也均是我自己编写的代码,非常初学,现在看这些代码也感觉非常好笑,不过自己毕竟是主学后端,所以前端能做出来这些页面也挺高兴的了。

到了这里,关于【Web前端】千年之恋注册页面——源代码展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java毕业设计-基于springboot web的智慧养老平台-毕业论文+答辩PPT(附源代码+演示视频)

    Java毕业设计-基于springboot web的智慧养老平台-毕业论文+答辩PPT(附源代码+演示视频) 如需其他项目或毕设源码,可进主页看下往期的毕设资源分享哦,希望对您有帮助! 逃逸的卡路里 – 随着信息技术的飞速发展,Java语言作为一种成熟、稳定且功能强大的编程语言,已经广

    2024年04月08日
    浏览(78)
  • web前端——表单注册页面设计(注册信息)

    任务要求如下: 设计学生信息注册网页,主要要求如下:  设置页面标题为“新生报到”; 使用表格布局,令页面内容居中显示; 使用h 3 标签居中显示“注册信息”,并 设置一个页面顶部锚点; 在注册信息填写区域前后设置水平分隔线; 显式地声明表单使用get方式提交,

    2024年02月07日
    浏览(44)
  • 万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

            以下给出来四个常见的小程序个人主页,分别是商城系统个人主页,外卖系统个人主页,挂号系统个人主页,电影购票系统个人主页。包括完整的页面布局代码,完整的样式代码。使用的时候,只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可

    2024年02月11日
    浏览(67)
  • 网站转换APP源代码 WebAPP源代码 网站生成APP源代码 Flutter项目 带控制端

    源码介绍 一款网站转换成APP的源代码,开发语言使用Flutter,开发工具使用的是AndroidStudio,你只需要在APP源代码里面填写你的域名,即可生成即可生成APP,包括安卓或者苹果,与此同时我们提供了APP的控制端.你可以通过控制端设置APP的颜色、添加APP的图标、添加APP的菜单栏目。 添加

    2024年02月04日
    浏览(60)
  • GDB 源代码查看、管理、搜索、设置源代码目录,调试发行版,观察点

    C_FLAGS中加入-g选项后,生成的可执行文件中会保存调试信息。 1、 set listsize 10:设置list查看的代码行数        list -: 向前查看代码        list 函数名: 产看函数代码 2、search        forward-search :跟 search功能一样       reverse-search:反向搜索 3、directories 路径:添加源代码路

    2024年02月09日
    浏览(72)
  • Python背单词记单词小程序源代码,背单词记单词小游戏源代码

    背单词小游戏,要有多界面交互,界面整洁、美观,可调节游戏等级难度,可配置游戏信息。 有游戏分数,游戏时间,动画特效,背景音乐,不同游戏等级的历史最高分记录。 拼写成功的英文单词显示中文意思。支持长按回删键[backspace],快速删除单词字母。 多种游戏困难

    2024年02月15日
    浏览(65)
  • git源代码泄露

    需要的工具:kali,githack(win版没下载成功) 安装方法: kali命令行中输入:git clone https://github.com/lijiejie/GitHack 下载成功如下: ​ 输入GitHack,然后输入python GitHack.py +所要下载的网页链接+/.git/ GIT文件基本介绍:         Git 是目前最流行的版本控制系统。版本控制系统在一

    2024年02月07日
    浏览(65)
  • bugku--源代码

    查看源代码 发显URL编码 解码 在拼接这一串 拿着去提交就行啦

    2024年02月04日
    浏览(57)
  • 跑酷游戏源代码

    import pygame, sys import random class Person():  # 人物     def __init__(self, surf=None, y=None):         self.surface = surf         self.y = y  # y坐标         self.w = (surf.get_width()) / 12  # 宽度         self.h = surf.get_height() / 2  # 高度         self.cur_frame = -1  # 当前的运动状态帧         self.

    2024年02月07日
    浏览(65)
  • matlab查看源代码

    matlab函数源代码-查看 Ctrl+D 最简单方便的一种方法,鼠标划中函数名,按CTRL+D即可打开函数的m文件

    2024年01月25日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包