HTML5-网页布局练习

目录

QQ注册页面

QQ登陆页面

豆瓣电影页面


QQ注册页面

代码如下: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				color: blue;
				font-size: 12px;
			}
			d {
				font-size: 25px;
			}
			c {
				font-size: 6px;
			}
			m {
				font-size: 10px;
			}
			z {
				font-size: 2px;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" align="center">
			<tr>
				<td colspan="3"></td>
				<td><c>简体中文|</c></td>
				<td><m>意见反馈</m></td>
			</tr >
			<tr>
				<td rowspan="9" colspan="2"><img src="../png/QQ图标.webp" height="300px" width="200px"></td>
				<td><d>欢迎注册QQ</d></td>
			</tr>
			<tr>
				<td >每一天,乐在沟通。</td>
				<td><span>免费靓号</span></td>
			</tr>
			<tr>
				<td><input type="text" placeholder="昵称"></td>	
			</tr>
			<tr>
				<td><input type="text" placeholder="密码"></td>
			</tr>
			<tr>
				<td><select name="num">
					<option value="+86">+86</option>
				</select></td>
			</tr>
			<tr>
				<c><td>可通过手机号找回密码</td></c>
			</tr>
			<tr>
				<td><input type="image" src="../png/注册.png" width="180" height="30"></td>
			</tr>
			<tr>
				<z><td><input type="radio">我已阅读并同意服务相关条款和隐私政策</td></z>
			</tr>			
		</table>		
	</body>
</html>

QQ登陆页面

 代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="0" cellspacing="0" align="center" width="800">
			<tr>
				<td colspan="2"><img src="../png/qq1.jpeg" height="150" width="300"></td>
				<td><img src="../png/问号1.webp" height="30" width="30"></td>
				<td>QQ登录 |授权管理 |申请接入</td>
			</tr>
		</table>
		<table border="0" cellspacing="0" align="center" width="800">
			<tr>
				<td rowspan="6"></td>
				<td><font size="5" height="30"><p align="center">账号密码登录</p></font></td>
				<td colspan="4"><font color="blue">腾讯网</font> 将获得以下权限:</td>
				
			</tr>
			<tr>
				<td rowspan="2" width="400" height="50" valign="top"><font size="5">推荐使用<font color="blue">快速安全登录</font>,防止盗号</font></td>
				<td colspan="4" height="20"><input type= "radio" height="10">  全选</td>
			</tr>
			<tr>
				
			</tr>
			<tr>
				<td height="40"><input type="text" placeholder="支持QQ/邮箱/手机号登录"></td>
				<td colspan="4" height="40"><input type="radio">将获得您的昵称、头像、性别及会员信息</td>
			</tr>
			<tr>
				<td height="40"><input type="text" placeholder="密码"></td>
				<td colspan="4">授权后表明你已同意 <font color="blue">QQ登录服务协议</font></td>
			</tr>
			<tr>
				<td height="40"><input type="image" src="../png/登录.png" width="180" height="30"></td>
			</tr>
			<tr>
				<td colspan="2"><p align="right">忘了密码? |注册新账号 |意见反馈</p></td>
			</tr>
			
			
		</table>
	</body>
</html>

豆瓣电影页面

 代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>热门电影板块</h1>
		<hr>
		<table border="0" cellspacing="0" width="1200">
			<tr>
				<td><font size="5"><b>最近热门电影</b></font></td>
				<td align="center"><font size="5">热门</font></td>
				<td align="center"><font size="5">最新</font></td>
				<td align="center"><font size="5">豆瓣高分</font></td>
				<td align="center"><font size="5">冷门佳片</font></td>
				<td align="center"><font size="5">华语</font></td>
				<td align="center"><font size="5">欧美</font></td>
				<td align="center"><font size="5">韩国</font></td>
				<td align="center"><font size="5">日本</font></td>
				<td align="center"><font size="5">更多>></font></td>
			</tr>
		</table>
		<hr>
		<table border="0" cellspacing="0">
			<tr>
				<td><img src="../png/movie1.jpg"></td>
				<td><img src="../png/movie2.jpg"></td>
				<td><img src="../png/movie3.jpg"></td>
				<td><img src="../png/movie4.jpg"></td>
			</tr>
			<tr>
				<td>猜火车  8.1</td>
				<td>贝尔科实验  6.0</td>
				<td>加州公路巡警  6.8</td>
				<td>歌声不绝  6.3</td>
			</tr>
			<tr>
				<td><img src="../png/movie5.jpg"></td>
				<td><img src="../png/movie6.jpg"></td>
				<td><img src="../png/movie7.jpg"></td>
				<td><img src="../png/movie8.jpg"></td>
			</tr>
			<tr>
				<td>明日的我与昨日的我</td>
				<td>速度与激情8 </td>
				<td>极速特工 </td>
				<td>金刚狼3:殊死一战 </td>
			</tr>
		</table>
	</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值