html制作简易云吸猫网页

最新推荐文章于 2022-08-08 13:38:28 发布

熬夜耗子在线敲代码

最新推荐文章于 2022-08-08 13:38:28 发布

阅读量780

点赞数

分类专栏：前端开发文章标签： html

本文链接：https://blog.csdn.net/weixin_46020788/article/details/104276857

版权

前端开发专栏收录该内容

4 篇文章 1 订阅

订阅专栏

我做的是云吸猫网页，主要分为登录界面的实现，注册界面，个人信息页面和主界面。
下面是使用表单制作的登录界面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
</head>
<body>
<form>
	<p>
	用户名
	<input type="text">
	</p>
	<p>
	密码&nbsp;&nbsp;&nbsp;
	<input type="password"><a href="http://www.taobao.com" target="_blank">忘记密码</a>
	</p>
	<p>
	性别&nbsp;&nbsp;&nbsp;
	<input name="性别" type="radio" >男
	<input name="性别" type="radio" >女
	</p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="登录" ><input type="reset" value="重置" >&nbsp;&nbsp;<a href="http://www.taobao.com" target="_blank">注册</a>
	</p>
</form>	
</body>
</html>

效果图如下图：
在这里插入图片描述
然后下面是注册界面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>

<body>
<form>
	<p>
	用户名
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text">
	</p>
	<p>
	输入密码&nbsp;&nbsp;&nbsp;
	<input type="password">
	</p>
	<p>
	确认密码&nbsp;&nbsp;&nbsp;
	<input type="password">
	</p>
	<p>
出生日期：
	<input type="text">年
	<select value="bmon">
	<option value="">选择月份</option>
	<option value="1">1月</option>
	<option value="2">2月</option>
	<option value="3">3月</option>
	<option value="4">4月</option>
	<option value="5">5月</option>
	<option value="6">6月</option>
	<option value="7">7月</option>
	<option value="8">8月</option>
	<option value="9">9月</option>
	<option value="10">10月</option>
	<option value="11">11月</option>
	<option value="12">12月</option>
	</select>
	</p>
	<p>
填写邮箱：<input type="email">
	</p>

	<p>
幸运点数：
	<input type="number" value="1" max="15" min="10" step="1">
	</p>
		<p>
	性别&nbsp;&nbsp;&nbsp;
	<input name="性别" type="radio" >男
	<input name="性别" type="radio" >女
	</p>
	<p>
	爱好&nbsp;&nbsp;&nbsp;
	<input type="checkbox" name="爱好" >篮球
	<input type="checkbox" name="爱好" >代码
	<input type="checkbox" name="爱好" >吸猫
	<input type="checkbox" name="爱好" >女人
	</p>
</form>	
</body>
</html>

效果如下图：
在这里插入图片描述
下面是主界面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>云吸猫</title>
</head>
<body>
	<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;云吸猫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</h2>
<hr/>
	<p>
搜索
	<input type="search">
	<input type="button" value="提交" ><input type="reset" value="重置" >
	</p>
<ul>
	<li>
	<img src="C:\004.jpg" alt="英短猫" title="喜欢我就带走我喽">
	<p>推荐活动，原创音乐T榜</p>
	</li>
	<li>
	<img src="C:\005.jpg" alt="英短猫" title="喜欢我就带走我喽">
	<p>推荐节目：《TATmusic》爆笑来袭</p>
	</li>	
	<li>
	<img src="C:\003.jpg" alt="英短猫" title="喜欢我就带走我喽">
	<p>推荐歌单：继续爱张国荣</p>
	</li>
</ul>
</body>
</html>
	<p>
上传文件：
	<input type="file">
	</p>
实时热点
<ul>
	<li><a href="http://www.taobao.com" target="_blank">1美国男篮奥运名单	553万</a></li>
	<li><a href="http://www.taobao.com" target="_blank">2快递公司全面复工	384万</a></li>
	<li><a href="http://www.taobao.com" target="_blank">3小妇人撤档新	380万</a></li>
	<li><a href="http://www.taobao.com" target="_blank">4森林狼26记三分	370万</a></li>
<li><a href="http://www.taobao.com" target="_blank">5大唐女法医定档	249万</a></li>
<li><a href="http://www.taobao.com" target="_blank">6普吉岛快艇相撞	207万</a></li>
<li><a href="http://www.taobao.com" target="_blank">7王一博背影封面新	206万</a></li>
<li><a href="http://www.taobao.com" target="_blank">8汉阳方舱医院启用新	203万</a></li>
<li><a href="http://www.taobao.com" target="_blank">9阿里巴巴告商家书	132万</a></li>
<li><a href="http://www.taobao.com" target="_blank">10复工防疫守则	117万</a></li>
<li><a href="http://www.taobao.com" target="_blank">11寄生虫获最佳剧本	99万</a></li>
<li><a href="http://www.taobao.com" target="_blank">12国航调整中美航线	94万</a></li>
<li><a href="http://www.taobao.com" target="_blank">13伊朗卫星发射失败	90万</a></li>
<li><a href="http://www.taobao.com" target="_blank">14谭松韵发声明	89万</a></li>
<li><a href="http://www.taobao.com" target="_blank">15杨紫工作室声明	84万</a></li>
	</ul>

效果图如下：
在这里插入图片描述

下面是个人信息：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>

<body>
<table border="2">
<tr>
	<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个人信息</td>
</tr>	
<tr>
	<th>用户名</th>
	<th>耗子</th>
</tr>
<tr>
	<th>生日</th>
	<th>00/01/02</th>
</tr>
<tr>
	<th>性别</th>
	<th>男</th>
</tr>
<tr>
	<th>爱好</th>
	<th>女</th>
</tr>
<tr>
	<th>幸运数字</th>
	<th>2</th>
</tr>
<tr>
	<th>邮箱</th>
	<th>123456</th>
</tr>
</table>
</body>
</html>

效果图如下：
在这里插入图片描述
图片和相关资源使用爬虫爬下来的，比较方便。

熬夜耗子在线敲代码

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html制作简易云吸猫网页

我做的是云吸猫网页，主要分为登录界面的实现，注册界面，个人信息页面和主界面。下面是使用表单制作的登录界面：<!doctype html><html><head><meta charset="utf-8"><title>登录界面</title></head><body><form&...
复制链接

扫一扫

专栏目录