千年之恋网页

最新推荐文章于 2024-04-29 09:17:59 发布
最新推荐文章于 2024-04-29 09:17:59 发布
阅读量1.8w 收藏 107
点赞数 23
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45394874/article/details/109119460
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>	
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset = utf-8"/>
		<title>千年之恋</title>	
		<link rel="stylesheet" href="css/style06.css" type="text/css"/>
	</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>
	

*{margin:0;padding:0;list-style:none;outline:none;border: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;}
a:hover{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:#fe668f;color:#fff;text-align:center;padding-top:40px;}
彤滴
关注
  • 23
    点赞
  • 踩
  • 107
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
千年之恋网页图片素材
12-20
千年之恋网页图片素材
千年之恋作业.zip
05-11
网页设计作业，运用了css表单，css样式，制作“banner”及其模块，在编辑过程中要注意主体结构，完成一部分之后要一步步检测，防止错误
千年之恋_html千年之恋_HTML5_CSS3源码_千年_千年之恋_千年之恋代码_
10-04
利用HTML语言和CSS编写程序，实现一个简单的相亲网站
千年之恋HTML+CSS
m0_74632977的博客
12-15 3724
千年之恋HTML+css代码分享
“千年之恋”注册页面制作
满天星的博客
02-09 2326
“千年之恋”注册页面制作
【Web前端】千年之恋注册页面——源代码展示
热门推荐
Brant_zero的博客
06-25 1万+
本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS)，这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，接下来我们来看看如何实现这个页面的效果吧。(需要源码和素材的直接私聊我) ​​​​​​...
千年之恋网页设计
J_FOVik_L的博客
12-28 358
下面链接可以看到完整效果图。css内的详细代码如下。
「Web前端」“千年之恋”-重构美化版
Daboia的博客
10-31 557
Hello，各位程序🐒，我是海南的一名在校的计科大学生。本篇文章我们来制作“千年之恋”的注册页面。在我们学习 web 前端开发的过程中一定会遇到表单，而这个例子是网上流传已久的题目，但大多数都是用表格实现，我们这次用其他方式，一样能达到效果，顺便带点美化！这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，也是我的在校作业之一，接下来来看看我是如何实现这个页面的效果吧。
HTML5“千年之恋”
2302_80146850的博客
12-29 490
HTML代码CSS代码展示图。
千年之恋源代码
2301_80106709的博客
12-16 211
<input type="radio" name="sex" id="boy" />男</label><label for="girl"><input type="radio" name="sex" id="girl" />女<a href="#" class="bg">注册</a >
专题页面设计
09-08
专题页面的设计，融入了html5，css3
网页制作千年之恋.rar
08-14
一个HTML+CSS开发的注册页面，适合前端初学者
千年源代码
06-11
千年源代码千年源代码千年源代码千年源代码千年源代码千年源代码千年源代码千年源代码
573688256369316千年之恋.zip
05-31
573688256369316千年之恋.zip
这是一个简单的照明材料网站，后续还会更新
最新发布
m0_64180190的博客
04-29 2321
产品中心|联系方式|新闻动态网页首页|产品中心|联系方式|新闻动态
用html画一个四叶草
liulang68的博客
04-20 2146
以上是部分代码，需要请看主页加联系方式。
HTML 学习笔记
m0_62870588的博客
04-28 1032
html超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 1.HTML文档的后缀名 (1) .html (2) .htm 这里更推荐使用 ".html "，命名应该遵从含义清晰、简洁、一致性原则。".htm"写法是来源于老的8.3文件格式，DOS操作系统只支持后缀名的长度为三位，现在的版本则没有对命名长度的限制，因此建议选择无限制命名长度的方式" html"。 2.HTML网页结构 下面是一个HTML的叶面结构
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1653
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
使用html画一个键盘
liulang68的博客
04-22 3701
【代码】使用html画一个键盘。
千年之恋网页制作代码
10-28
根据提供的引用内容，千年之恋网页制作代码是一个使用HTML和CSS实现的登录注册页面。这个案例充分使用到了表单标签，对于刚学习表单标签的朋友练习难度刚刚好。如果你对前端开发感兴趣，可以去练习一下这个页面的制作。同时，这篇文章的作者也提到了自己是主学后端，所以这个页面的代码可能比较初学，但是对于初学者来说，这是一个不错的练习机会。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值