大学生静态HTML网页设计--公司官网首页

news/2024/5/20 7:22:33/文章来源:https://blog.csdn.net/m0_65484028/article/details/127904837

源码获取 文末联系

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"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>赛瓦软件</title><!-- 引入css --><link rel="stylesheet" href="css/style.css">
</head><body><!-- 顶部导航栏 --><div id="top"><video src="file/1213.mp4" autoplay="" loop=""></video><div id="title"><img class="logo" src="picture/logo.png" alt=""><ul id="waicengbox"><li class="tile"><ul id="littlebox"><li><a href="">首页</a></li></ul></li><li class="tile"><ul id="littlebox"><li><a href="">智能制造</a></li></ul><div class="xialacaidan"><p>数字孪生工厂</p><p>车间可视化监控</p><p>中小制造业数字化改造</p></div></li><li class="tile"><ul id="littlebox"><li><a href="">智慧园区</a></li></ul><div class="xialacaidan" style="width: 120px;left: -10px;"><p>通用园区</p><p>智能楼宇</p><p>工业园区</p><p>变电站房</p><p>港口码头</p></div></li><li class="tile"><ul id="littlebox"><li><a href="">数据中心</a></li></ul></li><li class="tile"><ul id="littlebox"><li><a href="">工具与服务</a></li></ul><div class="xialacaidan" style="width: 180px;left: -40px;"><p>电信界面开发组件</p><p>3D图形开发工具</p><p>可视化服务</p></div></li><li class="tile"><ul id="littlebox"><li><a href="">关于</a></li></ul><div class="xialacaidan" style="width: 120px;left: -10px;"><p>关于我们</p><p>成功案例</p><p>最新动态</p><p>联系我们</p></div></li></ul><p class="phont"><img src="picture/ph.png" alt=""> 400-8659-625</p></div></div><!-- 交付 --><div id="jiaofuubox"><div id="jiaofu"><div><span> 1,000+</span><br> 服务客户</div><div><span>500+</span><br> 交付项目</div><div><span> 10,000+</span><br> 管理数字孪生体</div><div><span>6,000+</span><br> 从事数字孪生行业</div></div></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;">数字孪生,掀起制造革命,创造新生价值</h1><img src="picture/xia.png" alt=""><span>我们在这些业务领域为您提供数字孪生体建设服务</span></div><!-- 中间内容区域 --><div id="main_msg"><ul><li><img src="picture/li1.jpg" alt=""><div class="neirong"><h2>智能制造<span>Intelligent Manufacturing</span></h2></div><img class="msggengduo" src="picture/gengduo.png" alt=""></li><li><img src="picture/li2.jpg" alt=""><div class="neirong"><h2>智慧园区<span>Smart Park</span></h2></div><img class="msggengduo" src="picture/gengduo.png" alt=""></li><li><img src="picture/li3.jpg" alt=""><div class="neirong"><h2>智慧城市<span>Smart City</span></h2></div><img class="msggengduo" src="picture/gengduo.png" alt=""></li><li style="width: 530px;"><img src="picture/li4.jpg" alt=""><div class="neirong"><h2>数据中心<span>Data Center</span></h2></div><img class="msggengduo" style="left: 241px;" src="picture/gengduo.png" alt=""></li></ul></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;">应用场景架构图</h1><img src="picture/xia.png" alt=""></div><!-- 架构图 --><div id="jiagoutu"><img src="picture/tu.png" alt=""></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;">典型应用系统</h1><img src="picture/xia.png" alt=""></div><!-- 中间内容区域 --><div id="main_msg2"><ul><li style="height: 322px;"><img src="picture/li1.jpg" alt=""><div class="neirong"><h2>工厂数字孪生系统</h2></div></li><li style="height: 322px;"><img src="picture/li2.jpg" alt=""><div class="neirong"><h2>产线可视化监控系统</h2></div></li><li style="height: 322px;"><img src="picture/li3.jpg" alt=""><div class="neirong"><h2>产线可视化监控系统</h2></div></li><li style="width: 530px;height: 322px;"><img src="picture/li4.jpg" alt=""><div class="neirong"><h2>泛智慧园区IOC可视化系统</h2></div></li></ul></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;">客户案例</h1><img src="picture/xia.png" alt=""><span>每一个项目,我们都全力以赴</span></div><div id="kehuanli"><ul style="width: 1280px;"><li><img src="picture/11.png" alt=""><p>制造</p></li><li><img src="picture/22.png" alt=""><p>电力</p></li><li><img src="picture/33.png" alt=""><p>通信</p></li><li><img src="picture/44.png" alt=""><p>金融</p></li><li><img src="picture/44.png" alt=""><p>政府</p></li><li><img src="picture/66.png" alt=""><p>交通</p></li><li><img src="picture/77.png" alt=""><p>其他</p></li></ul><div id="clear2"></div></div><!-- 项目内容 --><div id="xiangmu"><img src="picture/bg.jpg" alt=""><div id="xiangmuneirong"><div id="xiangmuneirongbox"><div id="xiangmuneirongbox_left"><div class="main_text"><h2>汽车零部件制造数字孪生工厂项目</h2><img src="picture/heng.png" alt=""><p class="fiesttxt">实现智能制造是工业制造业走向数字化转型的必由之路,数字孪生作为实现智能制造的通用技术,通过建设数字孪生工厂、车间可视化综合监控方案等助力制造业智能化发展。</p><p class="lasttxt">查看更多+</p></div></div><img src="picture/right.jpg" alt=""></div></div></div><!-- 客户案例 --><div style="position: relative;"><div class="bgimg"><img src="picture/bg2.jpg" alt=""></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;color: #fff;">我们的最新动态</h1><img src="picture/xia.png" alt=""><span style="color: #fff;">极速响应,开拓创新</span></div><div id="dongtaititle"><span>公司新闻</span><span>行业动态</span><span>最新文章</span></div><div id="dongtai_list"><ul><li><img src="picture/li11.png" alt=""><h2>华为智慧园区一行莅临赛瓦,再商智慧园区建设</h2><p>近日,华为智慧园区交付与服务总经理王作鹏一行莅临赛瓦软件进行了参观考察,我司对华为领导一行的来访表示了热烈的欢...</p><h3><img src="picture/time.png" alt="">2021-12-24</h3></li><li><img src="picture/li22.png" alt=""><h2>赛瓦软件正式落户G60科创走廊总部研发功能区</h2><p>11月23日上午,中山街道举行G60科创走廊总部研发功能区投资项目集中签约仪式。赛瓦软件作为专注于数字孪生赛道的高新...</p><h3><img src="picture/time.png" alt="">2021-12-23</h3></li><li><img src="picture/li33.jpg" alt=""><h2>赛瓦软件参编《数据中心数字孪生技术规范》</h2><p>2021年10月20日,由赛瓦软件(上海)有限公司参编的《数据中心数字孪生技术规范》以团体标准的形式正式发布,该规范...</p><h3><img src="picture/time.png" alt="">2021-11-01</h3></li></ul></div></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;">客户和伙伴</h1><img src="picture/xia.png" alt=""><span>成就客户和伙伴,就是成就我们自己</span></div><div id="hezuo"><div id="hezuolist"><ul><li><img src="picture/h1.png" alt=""></li><li><img src="picture/h2.png" alt=""></li><li><img src="picture/h3.png" alt=""></li><li><img src="picture/h4.png" alt=""></li></ul><ul><li><img src="picture/h5.jpg" alt=""></li><li><img src="picture/h6.png" alt=""></li><li><img src="picture/h7.png" alt=""></li><li><img src="picture/h8.jpg" alt=""></li></ul><ul><li><img src="picture/h9.png" alt=""></li><li><img src="picture/h10.jpg" alt=""></li><li><img src="picture/h11.png" alt=""></li><li><img src="picture/h12.jpg" alt=""></li></ul><span>查看更多</span></div></div><!-- 小标题 --><div id="little_title"><h1 style="font-weight: normal;">获取方案</h1><img src="picture/xia.png" alt=""></div><div id="countsus"><div id="countsus_box"><h2>请选择您的需求,我们会在第一时间与您联系。</h2><ul id="fields" class="fields"><li><label class="desc"><span class="shouizmu">*</span>企业/组织名称</label><div class="content"><img src="picture/re.png" alt=""><input type="text"></div></li><li><div class="name"><div class="name_left"><label class="desc"><span>*</span>您的姓名/称呼</label><div class="content"><img src="picture/re.png" alt=""><input type="text"></div></div><div class="name_right"><label class="desc"><span>*</span>联系电话</label><div class="content"><img src="picture/re.png" alt=""><input type="text"></div></div></div></li><li><label class="desc"><span>*</span>需求类型</label><div id="fuxuan"><input type="checkbox" name="running" value="run"><span>智能制造类</span><input type="checkbox" name="reading" value="read"><span>智慧园区类</span><input type="checkbox" name="shopping" value="shop"><span>数据中心类</span><input type="checkbox" name="shopping" value="shop"><span>数据中心类</span><input type="checkbox" name="shopping" value="shop"><span>能源电力类</span><input type="checkbox" name="shopping" value="shop"><span>开发工具类</span><input type="checkbox" name="shopping" value="shop"><span>其他类</span></div></li><li><div class="name"><div class="name_left"><label class="desc"><span>*</span>电子邮箱</label><div class="content"><img src="picture/re.png" alt=""><input type="text"></div></div><div class="name_left"><label class="desc"><span>*</span>所在城市</label><div class="content"><input type="text"></div></div><div class="name_right"><label class="desc"><span>*</span>其他联系方式</label><div class="content"><input type="text"></div></div></div></li><li><label class="desc">详细需求描述</label><div class="content" style="border: 0px;height: 100px;"><textarea name="" id="" cols="30" rows="10"></textarea></div></li><div class="tijiaobox"><span class="tijiao">提交</span></div></ul></div></div><div id="footer"><div id="youqinglinajie"><div><h1>关于我们</h1><ul><li>公司概况</li></ul><ul><li>客户案例</li></ul><ul><li>新闻资讯</li></ul><ul><li>联系方式</li></ul></div><div><h1 style="width: 107px">快速入口</h1><ul><li>技术论坛</li></ul><ul><li>文档中心</li></ul><ul><li>演示中心</li></ul></div><div><h1 style="width: 176px;">解决方案</h1><ul><li>智能制造</li></ul><ul><li>智慧园区</li></ul><ul><li>数据中心</li></ul><ul><li>可视化开发工具</li></ul></div><div id="conts"><h1 style="width: 285px;">联系我们</h1><ul><li><span><img src="picture/l1.png" alt=""></span><span>服务咨询:400-8659-626</span></li><li><span><img src="picture/l2.png" alt=""></span><span>商务合作:<br>marketing@servasoft.com</span></li><li><span><img src="picture/l2.png" alt=""></span><span>技术支持:<br>tw-service@servasoft.com</span></li><li><span><img src="picture/l4.png" alt=""></span><span>总部地址:上海市松江区梅家浜路<br>800弄35号双高广场12楼</span></li></ul></div><div id="guanzhu"><h1 style="width: 189px;">联系我们</h1><ul><li><img src="picture/gongzhong.jpg" alt=""><p>微信公众号</p></li><li><img src="picture/weixin.jpg" alt=""><p>微信小助手</p></li></ul></div></div><div id="banquanxinxi"><p>赛瓦软件(上海)有限公司 | Copyright © 2022 Servasoft All Rights Reserved 沪ICP备10200962号-1</p><p>主营:数字孪生可视化 智慧园区可视化 3d可视化平台 三维可视化</p><p>技术支持:上海网站建设</p><img src="picture/dianzi.gif" alt=""></div></div>
</body></html>

学的反而越迷茫

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

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

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

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


学习更多

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


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringIoc依赖查找-5

1. 依赖查找的今世前生: Spring IoC容器从Java标准中学到了什么? 单一类型依赖查找 JNDI - javax.naming.Context#lookup(javax.naming.Name) JavaBeans - java.beans.beancontext.BeanContext 集合类型依赖查找 java.beans.beancontext.BeanContext 集合查找方法 层…

sqli-labs/Less-51

这一关的欢迎界面依然是以sort作为注入点 我们首先来判断一下是否为数字型注入 输入如下 sortrand() 对尝试几次 发现页面并没有发生变化 说明这道题的注入类型属于字符型 然后尝试输入以下内容 sort1 报错了 报错信息如下 我们从报错信息可以知道这道题的注入类型属于单…

期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

#边学边考 必修5 高项:对人管理 第2章 项目沟通管理和干系人管理

答题报告 自我分析 有可能是间隔时间太长&#xff0c;本章节从开始学习到今天&#xff08;11.24&#xff09;学完&#xff0c;中间至少停止了1周以上&#xff0c;造成对基本知识记忆不牢固。对重点知识没有重点记忆&#xff0c;走马观花&#xff0c;以至于混淆。 答题解析 关…

MySQL 进阶 图文详解InnoDB储存引擎

前言 SQL 语句的最终执行者是存储引擎。存储引擎在经解析器、优化器处理后被执行器调用其接口执行优化后的执行计划。MySQL 存储引擎包括 InnoDB、Myisam、Memory、Archive、CSV 存储引擎等&#xff0c;其中最常用也是MySQL 默认的存储引擎是 InnoDB。 写入缓冲池&#xff08;…

用DIV+CSS技术设计的水果介绍网站(web前端网页制作课作业)

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

软件测试面试技巧有哪些?可以从这2个方面去进行准备

面试所有只职场人&#xff0c;通往工作岗位的第一道关卡&#xff0c;也是最重要的一道门槛。而面试中&#xff0c;如何回答HR提出的问题很大程度上决定了面试能不能成功。所以这些软件测试的面试技巧你可不能错过了。 首先是自我介绍 自我介绍的时间不能太短&#xff0c;几十秒…

(附源码)计算机毕业设计JavaJava毕设项目财务管理系统的设计与实现

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

【Flutter】shape 属性 ShapeBorder,形状

文章目录前言一、shape 是什么&#xff1f;二、不同的形状1.BeveledRectangleBorder2.Border3.CircleBorder圆形4.ContinuousRectangleBorder连续圆角5.StadiumBorder 体育场边界 &#xff0c;药丸形状6.OutlineInputBorder外边框可以定制圆角7.UnderlineInputBorder下划线总结…

Springboot Security 前后端分离模式自由接口最小工作模型

但凡讲解Springboot Security的教程&#xff0c;都是根据其本身的定义&#xff0c;前后端整合在一起&#xff0c;登录采用form或者basic。我们现在的很多项目&#xff0c;前后端分离&#xff0c;form登录已经不适用了。很多程序的架构要求所有的接口都采用application/json方式…

复制集群架构设计技巧

Redis Sentinel设计技巧 Redis Sentinel基本架构 Monitoring Sentinel可以监控Redis节点的状态 Notification Sentinel可以通过API进行集群状态通知 Automatic failover Sentinel实现故障自动切换 Configuration provider Sentinel为client提供发现master节点的发现功能…

Java项目:JSP校园运动会管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目包含三种角色&#xff1a;运动员、裁判员、管理员&#xff1b; 运动员角色包含以下功能&#xff1a; 运动员登录,个人信息修改,运动成绩…

【优化求解】粒子群算法求解干扰受限无人机辅助网络优化问题【含Matlab源码 230期】

⛄一、粒子群简介 1 粒子群优化算法 粒子群优化算法( PSO)是指通过模拟鸟群觅食的协作行为,实现群体最优化。PSO是一种并行计算的智能算法,其基本模型如下: 假设群体规模为M,在D维空间中,群体中的第i个个体表示为XD ( xm1,xm2…xm D)T,速度表示为VD ( vm1,vm2…vm D)T,位置( …

一个简单的音乐网站设计与实现(HTML+CSS)

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星音乐演唱会主题 | 爵士乐音乐 | 民族音乐 | 等网站的设计与制作 | HTML期末大学生网页设计作…

【生成模型】Diffusion Models:概率扩散模型

---前言一、Diffusion Model 基本介绍二、生成模型对比三、直观理解Diffusion model四、形式化解析Diffusion model五、详解 Diffusion Model&#xff08;数学推导&#xff09;1.前向过程(扩散过程)2.逆扩散过程3.逆扩散条件概率推导4.训练损失六、训练、测试伪代码1. 训练2.测…

大一学生WEB前端静态网页——旅游网页设计与实现-张家口 6页

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作| HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&#xff1a;样式 在操作方面上运…

string类(一)

目录 一、 string类对象的常见构造 二、string类对象的容量操作 2.1 size(返回字符串有效字符长度) 2.2 capacity(返回空间总大小) 2.3 reserve扩空间​编辑 2.4 resize初始化不会覆盖本来的空间​编辑 2.5 对于test_string7中每一句代码进行调试运行 三、string类对象的…

如何给PDF解密?建议收藏这些方法

我们在传输接收文件的时候&#xff0c;经常都是以PDF格式进行的&#xff0c;因为PDF格式具有很强的稳定性。那小伙伴们平时接收的时候&#xff0c;会不会发现有些PDF文件为了保密性会进行加密&#xff0c;如果我们经常需要使用它&#xff0c;就需要不断地输入密码&#xff0c;这…

ISCSLP 2022 | NPU-ASLP实验室8篇论文被录用

作为语音处理技术领域的旗舰国际会议&#xff0c;ISCSLP2022&#xff08;International Symposium on Chinese Spoken Language Processing&#xff09;将于12月11-14日在新加坡举办。 西工大音频语音与语言处理研究组(ASLPNPU)本届会议将携合作伙伴宣读论文8篇&#xff0c;涉…

计算机网络复习——第六章网络层

hhhhh 还是今天的我&#xff0c;今天把这两个肝了&#xff0c;准备27考试&#xff0c;耶耶耶&#xff01;&#xff01;&#xff01;小h加油&#xff01; 《计算机网络》&#xff08;谢希仁&#xff09;内容总结 (javaguide.cn) 重点知识&#xff1a; 域名系统&#xff08;DN…