基础web前端网页制作示例

已于 2024-09-22 23:54:34 修改
阅读量458 收藏 2
点赞数
分类专栏： web 文章标签： 前端 html
于 2022-11-11 01:45:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_63386209/article/details/127793498
版权
本文展示了三个HTML网页设计实例，包括用户注册表单、工商银行电子汇款单和热门电影模块。网页设计涵盖了基本的HTML元素如表格、输入字段、按钮、选择框等，以及布局和样式设置，体现了网页的基本结构和信息展示功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实现目的：

实现代码：

<html>
	<head>
		<meta charset="utf-8" name ="author" content = "张某某">
		<meta name = "description" content = "用户注册">
		<meta name = "keywords" content="表格">
		<title>用户注册</title>
	</head>
	<body>
		<div style="border:1px solid white;height:100px">
			<table cellpadding=5 cellspacing=1 style="border:1px solid white " >
				<tr>
					<td width=300 style="text-align:center" bgcolor = "#a2a2a2"  colspan="2">用户注册</td>
				</tr>
				<tr>
					<td width=100 style="text-align:right " bgcolor = "#cbcbcb">用户名</td>
					<td width=200 style="text-align:left " bgcolor = "#cbcbcb">
						<input type = "text" name = "username" width =15 maxlength="20" id = "">
					</td>
				</tr>
				<tr>
					<td width=100 style="text-align:right " bgcolor = "#cbcbcb">密码</td>
					<td width=200 style="text-align:left " bgcolor = "#cbcbcb">
						<input type = "password" name = "userpass"width = 15 maxlength="20" id = "">
					</td>
				</tr>
				<tr>
					<td width=100 style="text-align:right " bgcolor = "#cbcbcb">性别</td>
					<td width=200 style="text-align:left " bgcolor = "#cbcbcb">
						<input type= "radio" name = "sex" checked="checked" id = "man" value = "1" />男
						<input type= "radio" name = "sex" id = "woman" value = "2" />女<br>
					</td>
				</tr>
				<tr>
					<td width=100 style="text-align:right " bgcolor = "#cbcbcb">爱好</td>
					<td width=200 style="text-align:left " bgcolor = "#cbcbcb">
						<input type = "CheckBox" name = "like" id = "" value = "1" />写作
						<input type = "CheckBox" name = "like" id = "" value = "1" />听音乐
						<input type = "CheckBox" name = "like" id = "" value = "1" />体育<br>
					</td>
				</tr>
				<tr>
					<td width=100 style="text-align:right " bgcolor = "#cbcbcb">省份</td>
					<td width=200 style="text-align:left " bgcolor = "#cbcbcb">
						<select name = "province" id = "" >
							<option value = "shanxi" checked="checked">陕西省</option>
							<option value = "shanxi">山西省</option>
						</select>
					</td>
				</tr>
				<tr>
					<td width=100 style="text-align:right " bgcolor = "#cbcbcb">自我介绍</td>
					<td width=200 style="text-align:left " bgcolor = "#cbcbcb">
						<div style="width: 180px;height: 80px; overflow-y:auto;">
						    <textarea name = "intro" id = "" cols = "25" rows = "5" checked="checked">这家伙什么也没留下。</textarea>
						</div>
					</td>
				</tr>
				<tr>
					<td width=300 style="text-align:center" bgcolor = "#a2a2a2"  colspan="2" >
						<button name="send">提交</button>
						<button name="reset">重置</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

运行结果：

作业二：

实现目的：

 实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="author" content="张某某">
		<meta name="description" content="工商银行电子汇款单">
		<meta name="keyword" content="表格">
		<title>工商银行电子汇款单</title>
	</head>
	<body>
		<h1>工商银行电子汇款单</h1>
		<div >
			<table cellpadding=5 cellspacing=0 style="border:1px solid black ">
				<!-- 第一排 -->
				<tr>
					<td width="100" style="text-align:center;border:1px solid black" colspan="2"><b>回单类型</b></td>
					<td width="200" style="text-align:left;border:1px solid black">网上转账汇款</td>
					<td width="100" style="text-align:center;border:1px solid black"colspan="2"><b>指令序号</b></td>
					<td width="300" style="text-align:left;border:1px solid black">HQH0000000000000013878172</td>
				</tr>
				<!-- 第二排 -->
				<tr>
					<td width="30" rowspan="4" style="text-align:center;border:1px solid black"><b>收款人</b></td>
					<td width="70" style="text-align:center;border:1px solid black">户名</td>
					<td width="200" style="text-align:left;border:1px solid black">老牟</td>
					<td width="30" rowspan="4" style="text-align:center;border:1px solid black"><b>付款人</b></td>
					<td width="70" style="text-align:center;border:1px solid black">户名</td>
					<td width="200" style="text-align:left;border:1px solid black">老刘</td>
				</tr>
				<tr>
					<td width="70" style="text-align:center;border:1px solid black"><b>卡号</b></td>
					<td width="200" style="text-align:left;border:1px solid black">000000000001</td>
					<td width="70" style="text-align:center;border:1px solid black"><b>卡号</b></td>
					<td width="200" style="text-align:left;border:1px solid black">000000000002</td>
				</tr>
				<tr>
					<td width="70" style="text-align:center;border:1px solid black">地区</td>
					<td width="200" style="text-align:left;border:1px solid black">南京</td>
					<td width="70" style="text-align:center;border:1px solid black">地区</td>
					<td width="200" style="text-align:left;border:1px solid black">杭州</td>
				</tr>
				<tr>
					<td width="70" style="text-align:center;border:1px solid black"><b>网点</b></td>
					<td width="200" style="text-align:left;border:1px solid black">工商江苏南京业务处理中心</td>
					<td width="70" style="text-align:center;border:1px solid black"><b>网点</b></td>
					<td width="200" style="text-align:left;border:1px solid black">苏州徐州业务中心</td>
				</tr>
				<!-- 第三排 -->
				<tr>
					<td width="100" style="text-align:center;border:1px solid black" colspan="2"><b>币种</b></td>
					<td width="200" style="text-align:left;border:1px solid black">人民币</td>
					<td width="100" style="text-align:center;border:1px solid black"colspan="2"><b>妙汇标志</b></td>
					<td width="300" style="text-align:left;border:1px solid black">钞票</td>
				</tr>
				<!-- 第四排 -->
				<tr>
					<td width="100" style="text-align:center;border:1px solid black" colspan="2"><b>金额</b></td>
					<td width="200" style="text-align:left;border:1px solid black">1:00元</td>
					<td width="100" style="text-align:center;border:1px solid black"colspan="2"><b>手续费</b></td>
					<td width="300" style="text-align:left;border:1px solid black">0.57元</td>
				</tr>
				<!-- 第五排 -->
				<tr>
					<td width="100" style="text-align:center;border:1px solid black" colspan="2"><b>合计</b></td>
					<td width="600" style="text-align:left;border:1px solid black"colspan="4">人民币（大写）：壹元整</td>
				</tr>
				<!-- 第六排 -->
				<tr>
					<td width="100" style="text-align:center;border:1px solid black" colspan="2"><b>交易时间</b></td>
					<td width="200" style="text-align:left;border:1px solid black">2017年6月1日</td>
					<td width="100" style="text-align:center;border:1px solid black"colspan="2"><b>时间戳</b></td>
					<td width="300" style="text-align:left;border:1px solid black">2017-06-01-13.00.00。00000</td>
				</tr>
			</table>
			<p>票据打印时间：2017-06-01  15:00:12</p>
			<del>票据打印单位：苏州徐州业务中心</del>
			<p>操作员：大曾</p>
		</div>
	</body>
</html>

运行结果：

 作业三：

实现目的：

 实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="author" content="张磐月">
		<meta name="description" content="热门电影模块">
		<meta name="keywords" content="表格">
		<title>热门电影模块</title>
	</head>
	<body>
		<h2>热门电影模块</h2>
		<div>
			<hr size=5 color="#dcdcdc" align="left"width="820"/>
			<table cellpadding=5 cellspacing=0 style="text-align:center;border:1px solid white ">
				<tr>
					<td width="100" style="text-align:left "><b>最近热门电影</b></td>
					<td width="60" style="text-align:center ">热门</td>
					<td width="60" style="text-align:center  ">最新</td>
					<td width="80" style="text-align:center ">豆瓣高分</td>
					<td width="80" style="text-align:center ">冷门佳片</td>
					<td width="60" style="text-align:center ">华语</td>
					<td width="60" style="text-align:center ">欧美</td>
					<td width="60" style="text-align:center ">韩国</td>
					<td width="60" style="text-align:center ">日本</td>
					<td width="100" style="text-align:right ">更多>> </td>
				</tr>
			</table>
			<hr size=5 color="#dcdcdc" align="left"width="820"/>
			<table>
				<tr>
					<td >
						<img src="images/功夫熊猫3.jpg" width="200" height="280" >
					</td>
					<td>
						<img src="images/马达加斯加.jpg" width="200" height="280">
					</td><td>
						<img src="images/美食总动员.jpg" width="200" height="280">
					</td><td>
						<img src="images/成龙历险记.jpg" width="200" height="280">
					</td>
				</tr>
				<tr height="50">
					<td width="200"  style="text-align:left ">功夫熊猫3</td>
					<td width="200" style="text-align:left ">马达加斯加</td>
					<td width="200" style="text-align:left ">美食总动员</td>
					<td width="200" style="text-align:left ">成龙历险记</td>
				</tr>
				<tr>
					<td >
						<img src="images/岸上的波妞.jpg" width="200" height="280" >
					</td>
					<td>
						<img src="images/大鱼海棠.jpg" width="200" height="280">
					</td><td>
						<img src="images/寻梦环游记.jpg" width="200" height="280">
					</td><td>
						<img src="images/大护法.jpg" width="200" height="280">
					</td>
				</tr>
				<tr height="50">
					<td width="200" style="text-align:left ">岸上的波妞</td>
					<td width="200" style="text-align:left ">大鱼海棠</td>
					<td width="200" style="text-align:left ">寻梦环游记</td>
					<td width="200" style="text-align:left ">大护法</td>
				</tr>
			</table>
		</div>
	</body>
</html>

运行结果：

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值