h5作业5

最新推荐文章于 2024-01-09 11:49:47 发布
最新推荐文章于 2024-01-09 11:49:47 发布
阅读量747 收藏 8
点赞数 2
分类专栏： H5作业集合 文章标签： h5
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/W_C_X/article/details/87914327
版权

页面搭建

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>wcx's homework5</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			#first_banner{
				width: 1520px;
				position: relative;
				left: 5px;
				background-color: #DCDCDC;
			}
			#second_banner{
				position: fixed;
				left: 5px;
				width: 1520px;
				height:63px;
				background-color: #000000;
			}
			#three_banner{
				position: relative;
				top: 65px;
				left: 5px;
				width: 1520px;
				background-color: #DCDCDC;
				height: 15px;
			}
			#four_banner{
				position: relative;
				width: 1520px;
				top: 70px;
				left: 5px;
				background-color: whitesmoke;
				
			}
			#five_banner{
				position: relative;
				top: 70px;
				left: 5px;
				width: 1520px;
				height: 500px;
				background: white;
			}
			#six_banner{
				position: relative;
				top: 70px;
				left: 5px;
				height: 100px;
				text-align: center;
				width: 1520px;
				background-color: #DCDCDC;
			}
			ul
			{
				color: white;
			}
			.banner{
				list-style: none;
				float: left;							
				font-family: "微软雅黑";
				text-align: left;
				margin: 20px 90px;
			}
			#first_table,#second_table,#four_table,#five_table,#six_table{
				position: relative;
				width: 1000px;
				margin: auto;
			}
			
			#four1_table{
				width: 280px;
				text-align: center;
				background-color: #DCDCDC;
				box-shadow: 2px 4px 6px 2px #DCDCDC;
			}
			#five_table{
				height: 350px;
				box-shadow: 2px 4px 6px #000;   
			}
			
			#right_table{
				position: relative;
				left: 200px
			}
			#left_table{
				position: relative;
				top: 13px;
				height: 300px;
			}
			#china{
				float: right;
				margin-right: 0px;
			}
			#person{
				color: black;
			}
			.distance{
				position: relative;
				left: 20px;
			}
			.distance_td{
				position: relative;
				left: 40px;
			}
			#code,#button_code{
				width: 73px;
			}
			#registered{
				width: 157px;
				height: 30px;
				color: white;
				background-color: red;
			}
			#routing,#birthday,#posting,#ElectronicOrder{
				width: 50px;
				height: 50px;
			}
			#routing{	
				background: url(img/11.png) no-repeat;
			}
			#birthday{
				background: url(img/10.png) no-repeat;
			}
			#posting{
				background: url(img/12.png) no-repeat;
			}
			#ElectronicOrder
			{
				background: url(img/9.png);
			}
			#services{
				position: relative;
				font-family: "微软雅黑";
				font-size: 13px;
				font-weight: bold;
				color: #DCDCDC;
				top: -10px;
				left: 12px;
			}
			#last_distance{
				position: relative;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="first_banner">
			<table id="first_table">
				<tr>
					<td id="china">
						中国大陆 Mainland China
					</td>
				</tr>
			</table>
		</div>
		<!--
        	作者：1505889682@qq.com
        	时间：2019-02-23
        	描述：banner
        -->
		<div id="second_banner">
			<table id="second_table">
				<tr>
					<td>
						<ul id="kaozuo">
							<li class="banner">首页</li>
							<li class="banner">在线下单</li>
							<li class="banner">查询服务</li>
			  	  		</ul>
					</td>		   	
			  	</tr>
			</table>
		</div>
		<!--
        	作者：1505889682@qq.com
        	时间：2019-02-24
        	描述：第三行
        -->
        <div id="three_banner">
        	<table id="three_table">
        		<tr>
        			<td></td>
        		</tr>
        	</table>
        </div>
        <!--
        	作者：1505889682@qq.com
        	时间：2019-02-24
        	描述：
        -->
        <div id="four_banner">
        	<table id="four_table">
        		<tr>
        			<td id="person">
        				<table id="four1_table">
        					<tr>
        						<td id="user_zhuce">个人用户注册</td>
        					</tr>
        				</table>
        				
        			</td>
        		</tr>
        	</table>
        </div>
        <!--
        	作者：1505889682@qq.com
        	时间：2019-02-24
        	描述：中间
        -->
        <div id="five_banner">
        	<table id="five_table">
        	
        		<tr>
        			<td>
        				<table id="left_table">
        					<tr>
        						<td class="distance">
        							*用户名    
        						</td>
        						<td class="distance_td">
        							<input type="text" />
        						</td>
        					</tr>
        					<tr>
        						<td class="distance">
        							*手机号
        						</td>
        						<td class="distance_td">
        							<input type="text" />
        						</td>
        					</tr>
        					<tr>
        						<td class="distance">
        							*验证手机
        						</td>
        						<td class="distance_td">
        							<input type="text" id="code" value="输入验证码"/>
        							<input type="button" id="button_code" value="获取验证码"/>
        						</td>
        					</tr>
        					<tr>
        						<td class="distance">
        							*密码
        						</td>
        						<td class="distance_td">
        							<input type="text" />
        						</td>
        					</tr>
        					<tr>
        						<td class="distance">
        							*确认密码
        						</td>
        						<td class="distance_td">
        							<input type="text" />
        						</td>
        					</tr>
        					<tr>
        						<td rowspan="4"></td>
        						<td class="distance_td">
        							<input type="checkbox" />我同意 <服务协议>
        						</td>
        					</tr>
        					<tr>
        						<td class="distance_td">
        							<input type="button" id="registered" value="注册"/>
        						</td>
        					</tr>
        					<tr>
        						<td class="distance_td">
        							拥有账号
        							<a href="">直接登录</a>
        						</td>
        					</tr>
        				</table>
        			</td>
        			<td>
        				<table id="right_table">
        					<tr>
        						<td id="services" colspan="2">
        							注册为环球会员，你会享受更多的服务
        						</td>
        						<td></td>
        					</tr>
        					<tr>
        						<td id="ElectronicOrder"></td>
        						<td>
        							积分奖励，电子运单专项特权
        						</td>
        					<tr>
        						<td id="posting"></td>
        						<td>
        							收寄件积分奖励、积分托运
        						</td>
        					</tr>
        					<tr>
        						<td id="birthday"></td>
        						<td>生日特权、会员专项特色惠购</td>
        					</tr>
        					<tr>
        						<td id="routing"></td>
        						<td>快件路由订阅、快件信息管理、批量下载</td>
        					</tr>
        				</table>
        			</td>
        		</tr>
        	</table>
        </div>
        <!--
        	作者：1505889682@qq.com
        	时间：2019-02-24
        	描述：
        -->
        <div id="six_banner">
        	<table id="six_table">
        		<tr>
        			<td id="last_distance">
        				@ 2015环球速运 版权所有 粤ICP备08034243号
        			</td>
        		</tr>
        	</table>
        </div>
	</body> 
</html>

效果图展示：

保持可爱forever
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
一个简单的网页设计HTML5作业
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
H5期末大作业，H5期末课程设计
11-10
自己写的h5期末作业，主要是介绍英雄联盟的一些电竞选手。 ①使用的技术：HTML5+CSS3+JavaScript，应用HTML5标签和CSS3特效（包括边框、背景、投影、变形、动画、布局、媒介查询等CSS3样式在页面中的应用）进行页面布局和样式的设计，通过JavaScrip进行行为的设置。 ②首页是index页面，登录是login页面，注册是regist页面。
大一学生HTML5期末大作业——基于HTML+CSS制作传统节日美食13页(美食网站设计与实现)
12-21 57
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML网页设计期末课程大作业~旅游住宿酒店的HTML网页设计(14页) ~学生网页设计作业源码 旅游网页代码 学生网页设计与制作期末作业下载 DW旅游网页作业代码下载
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-09 1万+
旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末
利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页
最新发布
qq__3200628753的博客
01-09 1009
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
H5响应式布局期末作业
01-09
本篇将深入探讨“H5响应式布局期末作业”所涉及的核心知识点，帮助你理解和掌握相关技能。 一、HTML5简介 HTML5是HTML的最新版本，它引入了许多新特性，如新的元素、离线存储、拖放功能、媒体元素等，旨在提高网页...
H5作业.zip
11-02
【标题】"H5作业.zip"是一个包含HTML5和CSS3相关练习或项目的压缩文件，很可能是为了在Google环境中展示一些先进的网页设计效果。由于它特别提到在Google环境下表现良好，我们可以推测这个项目可能利用了某些Google ...
白鹭H5游戏框架
01-31
白鹭H5游戏框架，全称为Egret Wing，是一套专为开发HTML5游戏而设计的高效、全面的开发工具集。白鹭引擎（Egret Engine）是这套框架的核心，它提供了一整套解决方案，包括游戏开发、调试、预览、优化等多个环节，...
吴恩达 yolo.h5
03-23
吴恩达卷积神经网络编程作业三最后需要的目标检测的模型文件，亲测可用，有分的可以给分，没分的参考下面自己生成吧。参考：https://github.com/allanzelener/YAD2K#quick-start 1、下载yolo github, ...
HTML期末作业-家乡网站
学生期末作业
06-16 6866
HTML期末作业课程设计期末大作业-家乡网站 <!DOCTYPE HTML> <html> <head> <title>榆林子州</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.
H5课程大学期末实验项目
02-21
大三上学期h5课程期末5人实验项目，因为就自己一个人写的，上传无压力。
HTML期末大作业
11-24
这是我自己做的HTML期末大作业，花了很多时间，稍加修改就可以作为自己的作业了，而且也可以作为学习参考
html 大作业
05-17
一个可以当做期末考核的作品,描述最喜爱的影视演员黄渤
html+css学生期末考试专用
12-17
这个是html静态网页，里面包含两个html+css+div的代码原件
简单的h5代码
08-11
一个小游戏，是用html5写得游戏，连连看！
html css作业
qq_40859235的博客
07-29 6399
根据所给商品图片，做一个类似如下图所示的小米商城的页面 想法： 运用上课学的知识，我决定先建一个主盒子，再在主盒子中分左右两个盒子，右边的盒子再分上下两个盒子，里面的八个商品浮动加间距即可。 大致写出来是这个效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt...
HTML5+CSS大作业——传统节日--中秋节(5页)
12-01 2417
HTML5+CSS大作业——传统节日–中秋节(5页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTM
HTML5期末大作业：设计网站设计——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作 简单静态HTML网页作品 动漫设计作业成品 学生个人网站模板
11-25 244
HTML5期末大作业：设计网站设计——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作 简单静态HTML网页作品 动漫设计作业成品 学生个人网站模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足
学生h5静态网站作业
09-09
学生制作h5静态网站作业是一种很好的学习机会和实践...总而言之，学生通过制作H5静态网站作业可以学习到HTML5、CSS和JavaScript等技术，以及设计和创新能力的培养。这对于他们未来的学习和职业发展都具有重要的意义。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

保持可爱forever

赞赞赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值