【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日
    浏览(77)
  • web前端——表单注册页面设计(注册信息)

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

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

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

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

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

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

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

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

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

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

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

    2024年01月25日
    浏览(51)
  • git源代码泄露

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

    2024年02月07日
    浏览(59)
  • linux 源代码编译

    有时候会在linux上下载源码包,然后进行编译成可执行的文件,这个过程需要经过configure、make、make install、make clean四个步骤 configure 为这个程序在当前的操作系统环境下选择合适的编译器和环境参数来编译该代码 make 对程序代码进行编译操作,会将源码编译成可执行的目标文

    2024年02月11日
    浏览(57)
  • bugku--源代码

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

    2024年02月04日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包