web网页设计期末课程大作业__公司官网 (曼谷科技 1页)带psd文件

news2024/11/27 12:31:13

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

在这里插入图片描述

HTML结构代码



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>曼谷科技</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="top">
		<div class="width clearfix">
			<form class="right biaoge" action="shuju.html" method="post">
				<input class="search1 left" type="text" name="搜索" value="搜索...">
				<input class="search2 right" type="submit" name="提交" value="   ">
			</form>
			<a href="###"><img class="right" src="picture/weixin0.png"></a>
			<a href="###"><img class="right" src="picture/weibo.png"></a>
		</div>
	</div>
	<div class="nav width clearfix">
		<h1><img src="picture/logo.png"></h1>
		<ul>
			<li><a href="###" class="act">网站首页</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="###">新闻动态</a></li>
			<li><a href="###">关于我们</a></li>
		</ul>
	</div>
	<div class="main .bgcolor1">
		<div class="banner">
			<div class="dingwei">
				<div class="aa a1">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
				<div class="aa a2">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
				<div class="aa a3">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
				<div class="aa a4">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main1">
			<div class="prodoctus clearfix width">
				<div class="prod">
					<div class="icon i1"></div>
					<p>物联网手持终端</p>
				</div>
				<div class="prod">
					<div class="icon i2"></div>
					<p>物联网手持终端</p>
				</div>
				<div class="prod p3">
					<div class="icon i3"></div>
					<p>物联网手持终端</p>
				</div>
			</div>
		</div>
		<div class="main2">
			<div class="jjfz width">
				<div class="title clearfix">
					<h2>解决方案<span>SOLUTIONS</span></h2>
					<div class="bg"></div>
				</div>
				<div class="jjfa_main clearfix">
					<div class="mulu left">
						<div class="wenzi jt left">交通行业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mulu left">
						<div class="wenzi sf left">司法行业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mulu left">
						<div class="wenzi zf left">政府相关企业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mulu left">
						<div class="wenzi qt left">其他行业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main3">
			<div class="news width">
					<div class="title clearfix">
					<h2>新闻动态<span>NEWS</span></h2>
					<div class="bg"></div>
				</div>
				<div class="news_main clearfix">
					<div class="yinying"><div></div></div>
					<ul class="clearfix left">
						<li class="one">
							<a href="###"><h3>青岛量谷无线科技有限公司(简称量谷科技)</h3></a>
							<p>公司秉承引领前沿信息、创新突破,自强务实的企业理念,不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司(简称量谷科技)</h3></a>
							<p>公司秉承引领前沿信息、创新突破,自强务实的企业理念,不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司(简称量谷科技)</h3></a>
							<p>公司秉承引领前沿信息、创新突破,自强务实的企业理念,不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
					</ul>
					<ul class="clearfix left right_ul">
						<li class="one">
							<a href="###"><h3>青岛量谷无线科技有限公司(简称量谷科技)</h3></a>
							<p>公司秉承引领前沿信息、创新突破,自强务实的企业理念,不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司(简称量谷科技)</h3></a>
							<p>公司秉承引领前沿信息、创新突破,自强务实的企业理念,不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司(简称量谷科技)</h3></a>
							<p>公司秉承引领前沿信息、创新突破,自强务实的企业理念,不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main4 clearfix">
			<div class="hzhb width">
				<div class="title clearfix">
					<h2>合作伙伴<span>PARTNERS</span></h2>
					<div class="bg"></div>
					</div>
					<div class="hzhb_main clearfix">
						<a href="###"><img src="picture/hzhb1.png" alt="tupian1"></a>
						<a href="###"><img src="picture/hzhb2.png" alt="tupian2"></a>
						<a href="###"><img src="picture/hzhb3.png" alt="tupian3"></a>
						<a href="###"><img src="picture/hzhb4.png" alt="tupian4"></a>
						<a class="last" href="###"><img src="picture/hzhb5.png" alt="tupian5"></a>
					</div>
				
			</div>
		</div>
	</div>
	<div class="footer clearfix">
		<div class="list width clearfix">
			<ul>
			<li class="first"><a href="###">产品中心</a></li>
			<li><a href="###">手持终端</a></li>
			<li><a href="###">产品线</a></li>
			<li><a href="###">附件</a></li>
			<li><a href="###">软件</a></li>
		</ul>
		<ul>
			<li class="first"><a href="###">技术与服务</a></li>
			<li><a href="###">技术支持</a></li>
			<li><a href="###">售后服务</a></li>
		</ul>
		<ul>
			<li class="first"><a href="###">解决方案</a></li>
			<li><a href="###">交通行业</a></li>
			<li><a href="###">司法行业</a></li>
			<li><a href="###">政府及其相关</a></li>
			<li><a href="###">其他行业</a></li>
		</ul>
		<ul class="last_ul">
			<li class="first"><a href="###">联系方式</a></li>
			<li class="sec"><a href="###">电话:0532-83887966 / 83887967</a></li>
			<li class="thi"><a href="###">邮箱:Services@langcoo.com</a></li>
			<li class="four"><a href="###">微信:青岛量谷无线科技</a></li>
		</ul>
		</div>
		<div class="xian"></div>
		<div class="lianjie width">
			<p><span>友情链接:</span><a href="###">物联中国</a><a href="###">物联网世界</a><a href="###">青岛市江苏商会</a><a href="###">青岛物联网协会</a></p>
		</div>
	</div>
	<div class="bottom">
		<p>&copy; 2021 版权所有 青岛量谷无线科技有限公司 Qingdao Langcoo Wireless Technologies Co.,Ltd 地址:青岛市市南区芝泉路6号        电话:0755-83316336 </p>
	</div>
</body>
</html>




学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/47873.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于CCE Kubernetes网络与持久化存储实战

✅作者简介&#xff1a; CSDN内容合伙人&#xff0c;全栈领域新星创作者&#xff0c;阿里云专家博主&#xff0c;阿里云问答板块版主&#xff0c;华为云享专家博主&#xff0c;掘金后端评审团成员 &#x1f495;前言&#xff1a; 最近云原生领域热火朝天&#xff0c;那么云原生…

2022年NPDP新版教材知识集锦--【第四章节】(4)

【初始设计与规格阶段】(全部获取文末) 产品设计规格旨在&#xff1a; 明确产品设计并提供量化和客观性; 将产品设计要求传达给设计团队的其他成员; 推进产品从设计到制造的开发。 1、功能性设计(DesignforFunctionality,DFF) 功能设计决定了产品的最终性能&#xff0c;功…

小猴吃苹果-第12届蓝桥杯Scratch选拔赛真题精选

[导读]&#xff1a;超平老师计划推出Scratch蓝桥杯真题解析100讲&#xff0c;这是超平老师解读Scratch蓝桥真题系列的第90讲。 蓝桥杯选拔赛每一届都要举行4~5次&#xff0c;和省赛、国赛相比&#xff0c;题目要简单不少&#xff0c;再加上篇幅有限&#xff0c;因此我精挑细选…

JCTC:基于PWmat中的混合溶剂模型精确计算离子溶解自由能

溶液环境中溶质离子或中间体的自由能计算是电化学研究中最棘手的问题之一。目前单纯的实验手段并不能对发生在溶液中的化学反应过程/机理进行直接探测&#xff0c;许多信息仍主要依赖于理论模拟。对于这一问题&#xff0c;目前很多研究者采用经验势场的溶剂模型方法&#xff0c…

Casein-PEG-Rhodamine B 络蛋白-聚乙二醇-罗丹明B Casein-RB

产品名称&#xff1a;络蛋白-聚乙二醇-罗丹明B 英文名称&#xff1a;Casein-PEG-Rhodamine B 质量控制&#xff1a;95% 原料分散系数PDI&#xff1a;≤1.05 存储条件&#xff1a;-20C&#xff0c;避光&#xff0c;避湿 用 途&#xff1a;仅供科研实验使用&#xff0c;不用于诊…

SAP 电商云 Spartacus UI Configurable Product 的页面设置

关键字 CPQ&#xff0c;Product Configuration&#xff0c;Product Configure&#xff0c;Product Variant 变体是在某些方面彼此不同但基于相同基本模型的产品。 变体的一个示例是 T 恤的颜色和尺寸。 在 Spartacus 中启用变体功能&#xff0c;并在 SAP Commerce Cloud 中配…

基于python的pulp库使用,从基础模型到复杂模型,从一维变量到二维变量

写在前面 学习笔记&#xff0c;仅作参考。 个人觉得配合步骤和建模&#xff0c;直接看代码就能入门pulp&#xff0c;所以没有啥解释&#xff0c;见谅。 参考 https://blog.csdn.net/youcans/article/details/116371416 步骤 1、安装PuLp &#xff08;pip install pulp) 2…

HRD特征及其检测方法简介

HRD特征及其检测方法简介1、HRD背景知识介绍1.1 HRR通路简介1.2 HRR基因突变可导致通路失活和HRD1.3 HRD高发癌种2、HRD的两类主要标志物2.1 致病基因2.2 基因组瘢痕3、HRD检测方法4、全景变异分析&#xff08;CGP&#xff09;5、关键信息6、参考文件1、HRD背景知识介绍 1.1 H…

(4)点云数据处理学习——其它官网例子

1、主要参考 &#xff08;1&#xff09;视频&#xff0c;大佬讲的就是好啊 【Open3D】三维点云python教程_哔哩哔哩_bilibili &#xff08;2&#xff09;官方的github地址 GitHub - isl-org/Open3D: Open3D: A Modern Library for 3D Data Processing &#xff08;3&#…

BUUCTF Misc 被偷走的文件 snake

被偷走的文件 下载文件 wireshark打开&#xff0c;搜索flag字符串 可以看到一个带有flag.rar的FTP包进行TCP流追踪 看来流量中有flag.rar&#xff0c;使用kali中的foremost进行文件分离 发现一个文件夹内有一个需要密码的压缩包 密码是5790&#xff0c;解压 得到flag …

Redis数据结构和类型

Redis 包含五种数据类型&#xff0c;分别为String、List、Hash、Set、ZSet 底层实现的数据结构包SDS、双向链表、压缩列表、哈希表、整数集合、跳表 redis结构图数据类型和数据结构的关系Redis六种数据结构 一、动态字符串(SDS) Redis 是用 C 语言实现的&#xff0c;但是它…

Kotlin高仿微信-第12篇-单聊-图片

Kotlin高仿微信-项目实践58篇详细讲解了各个功能点&#xff0c;包括&#xff1a;注册、登录、主页、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)、群聊、个人信息、朋友圈、支付服务、扫一扫、搜索好友、添加好友、开通VIP等众多功能。 Kotlin高仿…

STC 51单片机45——51单片机对脉冲计数 汇编 16位除法

部分代码&#xff1a; ORG 0000H LJMP INIT ORG 0003H //外部中断0 LJMP INT0SUB ORG 0013H //外部中断1 LJMP INT1SUB ORG 0100H INIT: CLR P1.0 //控制端复位 …

D-019 EEROM硬件电路设计

EEROM硬件电路设计1 简介1.1 存储器的分类1.2EEPROM的特性2 接口介绍2.1 IIC接口2.2 SPI接口2.3 MicroWire 接口3 EEPROM 和 FLASH4 电路设计实战5 电路设计要点1 简介 1.1 存储器的分类 按照掉电数据是否丢失的特性&#xff0c;存储器可划分为&#xff1a; 易失性存储器&…

快排图文详解:快速排序算法的实现 - 【双边循环法与单边循环法 递归与非递归(栈的方式)的实现】

1.基本介绍 同冒泡排序一样&#xff0c;快速排序&#xff08;Quicksort&#xff09;也属于交换排序&#xff0c;通过元素之间的比较和交换位置来达到排序的目的。但快速排序是对冒泡排序的一种改进。 2.基本思想 关于基本思想&#xff0c;我们在这里先不考虑是如何具体实现的…

nuxtjs生命周期、项目创建、声明式导航与编程式导航、动态路由、嵌套路由、配置式路由、定制默认应用模板、扩展默认布局

文章目录1. 介绍2. 生命周期3. 项目创建4. 声明式导航和编程式导航5. 动态路由参数和验证6. 嵌套路由7. 404页面8. 配置式路由9. 定制默认应用模板10. 扩展默认布局10.1 默认布局10.2 自定义布局10.3 显示错误的布局1. 介绍 Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对…

离线解锁 CodeCombat 全关卡教程 使用docker安装实现

背景 暂时还没收入&#xff0c;想玩顺便&#xff0c;但官方的有点贵&#xff08;是真的贵&#xff0c;扛不住&#xff09; 前期准备 下载安装docker desktop https://www.123pan.com/s/fmvUVv-HqApH&#xff0c; 这个安装不会的随便搜一个教程&#xff0c;挺多的。我随便找了一…

创建实例化新表格及新行

这期讲一下如何创建创建实例化新表格及行进行添加数据&#xff0c; 在上图可以看到先实例化DataTable表格&#xff0c;用于接收数据&#xff0c; Columns 获取此表的列的集合&#xff0c; Add 创建并添加DataColumn对象&#xff0c; Typeof 数据类型 创建并添加表头。 接下来…

Java定时器选择

java计时器和死循环哪个好&#xff1f;哪个建议使用&#xff1f; 计时器性能更好&#xff0c;但是写起来稍微复杂一点。如果是非常短暂的延迟&#xff0c;用死循环也未尝不可。一般来说能不用死循环的尽量不用死循环&#xff01;如果你使用的是JDK1.5以上的&#xff0c;可以使…

PyQt5可视化编程-控件

控件就像是应用这座房子的一块块砖。PyQt5有很多的控件&#xff0c;比如按钮&#xff0c;单选框&#xff0c;滑动条&#xff0c;复选框等等。我们将介绍一些很有用的控件&#xff1a; QCheckBox,ToggleButton,QSlider,QProgressBar, QCalendarWidget,QPixmap,QLineEdit,QSplitt…