广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

web前端中国石化油企业网站html网页设计主题?html源码文件(轮播图效果,tab切换选项卡,倒计时效果)
发布日期:2024-10-25 17:32:45 浏览次数: 857 来源:学博星辰


文章目录

  • 网站主题

  • 网站描述

  • 网站介绍

  • 网站演示

  • 学习理念

  • 更多干货


一、网站主题


html网页作业,html企业网站主题设计、html中石化企业网页、html企业网站宣传网页设计、web网页设计与制作。




二、网站描述

编码:A34、页数:03页,技术:div+css+js网页设计制作布局。

中国石油化工集团有限公司,2023年收入3.21万亿元,简称“中国石化”或“中石化”,是1998年7月国家在原中国石油化工总公司基础上重组成立的特大型石油石化企业集团,是国务院国资委直属的副部级中央企业。公司注册资本3265亿元,董事长为法定代表人,总部设在北京。

网页简介:div+css学生网页布局,html网页源码,html网页制作,html网页作业,html期末网页大作业,作品为学生中国石化企业宣传网页设计题材,运用html+css布局制作。

网页模块:头部板块,html导航条制作 、当前时间效果(js)、banner轮播图效果(js)、网站首页、新闻中心(html列表页)、新闻详情页(三级文章页)、底部版权等。

知识运用:实战项目运用网页所需技术知识点,div+css布局、float(浮动布局)、flex(弹性布局),js(轮播图效果)。

网页文件:html(超文本标记语言)、css(层叠样式表)、js(脚本语言)、img(网页所有图片资源)。

开发工具:网页作品代码简单工整纯手工敲写,可使用任意HTML网页编辑器软件(如:Dreamweaver、HBuilder、Vscode 、Sublime Text 、Webstorm、Text 、Notepad++等任意html编辑器开发工具进行运行及修改编辑等操作)。


三、网站演示


作品如下(示例):以下展示部分网页截图仅供参考~~


1、网站首页


2、视频欣赏




四、网站源码

代码如下(示例):以下展示部分代码仅供参考~~

1、HTML结构源码

<div class="header"><div class="userwater"><div class="center"><div class="user left">您好,欢迎<span>王先生</span>回来~~</div><div class="water right"><span id="he-plugin-simple"></span></div><div class="newtime right"></div></div></div><div class="top"><div class="logo left"><h1>中国石化海南炼化公司</h1><p>Sinopec Hainan refining and chemical company</p></div><div class="time right"><ul><li><p>乙烯投产倒计时:</p><span class="time01"></span></li><li><p>大检修倒计时:</p><span class="time02"></span></li></ul></div></div><div class="nav"><ul><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><li><a href="#">通讯录</a></li><li><a href="#">信息发布</a></li></ul></div></div>

2、CSS层叠样式表

.header {width: 100%;height: auto;}
.header .userwater {width: 100%;height: 40px;line-height: 40px;border-bottom: 1px solid #ddd;margin: 0 auto;}
.header .userwater .center {width: 1200px;height: 40px;margin: 0 auto;}
.header .userwater .user span {color: #c4000f;}
.header .userwater .water {height: 40px;width: 180px;}
.header .top {width: 1200px;height: auto;padding: 20px 0;overflow: hidden;margin: 0 auto;}
.header .top .logo {width: 550px;height: 98px;background: url(../img/logo.jpg) no-repeat left;}
.header .top .logo h1 {text-indent: 160px;letter-spacing: 6px;margin: 20px 0 5px;font-size: 25px;}
.header .top .logo p {text-transform: uppercase;font-size: 14px;text-indent: 160px;}
.header .top .time {float: right;margin-top: 25px;}
.header .top .time ul li {float: left;width: 220px;background: url(../img/time.png) no-repeat left center;padding-left: 40px;margin-left: 20px;}
.header .top .time ul li p {font-size: 16px;}
.header .nav {width: 100%;height: 60px;background: #0d63ae;}
.header .nav ul {width: 1200px;height: 60px;margin: 0 auto;}
.header .nav ul li {float: left;width: 150px;border-right: 1px solid #666;}
.header .nav ul li:first-child {border-left: 1px solid #666;}
.header .nav ul li a {font-size: 18px;color: #fff;display: block;width: 150px;height: 60px;line-height: 60px;text-align: center;}
.header .nav ul li a:hover {background: #c4000f;}


五、学习理念


前端学习是一个既充满挑战又极具成就感的过程,它要求学习者不断掌握新技术、提升设计思维与用户体验意识

1、持续学习与社区参与


持续学习‌:前端技术更新迅速,保持学习的热情和动力至关重要。关注行业动态、参加技术会议、阅读技术博客和书籍,都是提升自我的有效途径。‌让学习成为一种习惯,你将永远走在技术的前沿

社区参与‌:加入前端社区,与同行交流心得、分享经验,可以拓宽视野、激发灵感。同时,参与社区建设、贡献开源项目,也能提升你的影响力和知名度。‌社区是成长的沃土,珍惜每一次交流的机会。

2、项目实践与项目经验


动手实践‌:理论知识是基础,但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等,都是很好的实践方式。‌实践过程中遇到的问题和解决方案,将是你最宝贵的财富。动手实践‌:理论知识是基础,但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等,都是很好的实践方式。‌实践过程中遇到的问题和解决方案,将是你最宝贵的财富。

项目经验‌:通过参与实际项目,可以学习到团队协作、项目管理、需求分析等技能。同时,项目经验也是求职时的重要加分项。‌尽量找机会参与真实项目,哪怕是从简单的功能模块开始。


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询