33-蓝色简洁大气船舶运输企业官网模板.zip资源-CSDN文库

共35个文件

png：17个

jpg：12个

js：2个

版权申诉

164 浏览量 2022-11-13 05:28:34 上传评论收藏 2.15MB ZIP 举报

这篇内容主要介绍的是一个以蓝色调为主的船舶运输企业官网模板，设计风格简洁而大气，适合于展示企业形象、服务信息以及提升在线业务。这个模板包含了完整的网页结构和元素，可以帮助企业在构建官方网站时快速搭建出专业且吸引人的界面。我们要理解“蓝色简洁大气”的设计概念。在网页设计中，蓝色通常传递出专业、信任和稳定的感觉，是许多企业和机构首选的颜色。简洁大气则意味着设计注重用户体验，避免过多复杂元素，以清晰、直观的方式呈现信息。这样的设计风格对于船舶运输企业来说尤其重要，因为它能够反映出行业的可靠性和安全性。这个模板可能包含以下部分： 1. **首页**：作为网站的第一印象，首页通常会有一个引人注目的横幅，展示公司的船舶或运输场景，配以简短的公司介绍和联系方式。下方可能有导航栏，方便用户浏览其他页面。 2. **关于我们**：详细介绍企业的历史、团队、愿景和使命，以增加用户对公司的了解和信任。 3. **服务项目**：列出船舶运输的各种服务，如集装箱运输、散货运输、国际海运等，并提供详细的服务说明。 4. **航线网络**：展示公司的航线分布和覆盖范围，可能包括地图和时间表，帮助客户了解运输路线。 5. **案例展示**：通过成功案例来证明公司的专业能力和经验，增强客户的信心。 6. **新闻与活动**：发布公司最新动态、行业资讯或市场分析，保持网站的活跃度。 7. **联系我们**：提供公司的联系方式，包括电话、邮箱、地址，可能还包括在线留言表单。 8. **底部**：包含版权信息、隐私政策、条款与条件等链接，以及社交媒体图标，便于用户关注公司的社交媒体账号。在使用这个模板时，企业可以根据自身需求进行定制，调整颜色、字体、图片等元素，以更好地体现品牌特色。同时，确保网站的响应式设计，适应不同设备的浏览，提高用户体验。此外，合理优化SEO（搜索引擎优化）也是必不可少的，以提高网站在搜索结果中的排名，吸引更多潜在客户。这个蓝色简洁大气的船舶运输企业官网模板提供了一个坚实的基础，帮助企业快速建立专业形象，有效传达服务信息，同时简化了网站开发的过程。只需适当调整和填充内容，就能打造出一个符合企业需求的高质量官网。

资源推荐

资源详情

资源评论

收起资源包目录

33-蓝色简洁大气船舶运输企业官网模板.zip （35个子文件）

33-蓝色简洁大气船舶运输企业官网模板

css

style.css 9KB

代码库.url 321B

images

newnext.png 1KB

next.png 17KB

ywly.png 2KB

nbg.png 1KB

p3.jpg 48KB

lm.png 1KB

prev.png 17KB

banner3.jpg 317KB

index_kv1.jpg 167KB

index_kv3.jpg 136KB

weizhi.png 1KB

search.png 1KB

index_kv4.jpg 130KB

about.png 3KB

ban.jpg 195KB

jt.png 981B

p2.jpg 61KB

p1.jpg 44KB

banner2.jpg 292KB

newprev.png 1KB

logo.png 14KB

tel.png 2KB

hykx.png 1KB

banner1.jpg 358KB

jta.png 1KB

index_kv2.jpg 228KB

more.png 1KB

new1.jpg 106KB

index.html 10KB

js.js 116KB

jquery.easing.js 8KB

about(1).html 5KB

20170525175520.png 50KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>蓝色简洁大气船舶运输企业官网模板 - 代码库</title> <meta name="keywords" content="蓝色,简洁,大气,船舶运输,企业官网,模板下载" /> <meta name="description" content="蓝色简洁大气船舶运输企业官网模板下载，下载文件包含index首页和about关于我们两张静态网页。" /> </head> <link href="css/style.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/js.js"></script>  <body> <div class="inner"> <div class="logo"> <img src="images/logo.png" /> <b>常州阅海船舶服务有限公司</b> <em>changzhou yuehai Marine service co., LTD</em> </div> <div class="sea">  <form> <input type="text" value="" id="" onblur="if(this.value=='') this.placeholder='搜索';" onfocus="if(this.placeholder=='搜索') this.placeholder='';" class="sousuo1" placeholder="搜索" /> <input class="sousuo" type="button"> </form> <em><i>:</i>0519-85325235</em> <img src="images/tel.png" /> </div> <div class="clear"> </div> </div>  <nav> <ul> <li><a href="index.html">网站首页</a></li> <li><a href="about.html">关于我们</a> <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> </ul> </li> <li><a href="#">新闻中心</a></li> <li><a href="#">业务领域</a></li> <li><a href="#">招贤纳士</a></li> <li><a href="#">联系我们</a></li> </ul> <div class="clear"> </div> </nav>  <div class="flexslider"> <ul class="slides"> <li style="background:url(images/banner1.jpg) 50% 0 no-repeat;"></li> <li style="background:url(images/banner2.jpg) 50% 0 no-repeat;"></li> <li style="background:url(images/banner3.jpg) 50% 0 no-repeat;"></li> </ul> </div>  <div class="inner"> <ul class="hykx"> <li><a href="#">航运快讯：中国对外投资逆势上扬，存量将升至全球第六…… </a> <span>[2016-6-30]</span></li> </ul> <div class="clear"></div> <script type="text/javascript" src="js/jquery.easing.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var kv_num = 0; function nextKv(){ $(".control").attr("style","pointer-events:none"); kv_num++; if(kv_num==4){kv_num=0;} $(".kv_pic").animate({ left:-600*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){ $(".control").attr("style","pointer-events:auto"); }}); $(".kv_word>ul").stop().animate({ left:-600*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){}}); $(".kv_dot ul li").removeClass("action").eq(kv_num).addClass("action"); } function prevKv(){ $(".control").attr("style","pointer-events:none"); kv_num--; if(kv_num==-1){kv_num=3;} $(".kv_pic").animate({ left:-600*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){ $(".control").attr("style","pointer-events:auto"); }}); $(".kv_word>ul").stop().animate({ left:-600*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){}}); } $(".control .next").on("click",nextKv); $(".control .prev").on("click",prevKv); // 自动轮播 setInterval(nextKv,3500); }); </script> <div class="main"> <div class="kv"> <ul class="kv_pic"> <li><img src="images/new1.jpg" alt="" /></li> <li><img src="images/new1.jpg" alt="" /></li> <li><img src="images/new1.jpg" alt="" /></li> <li><img src="images/new1.jpg" alt="" /></li> </ul> <div class="kv_word"> <ul> <li> <h3 class="tit1">中远集运、达飞轮船、长荣海运和东方海外组建联盟</h3> <h3 class="tit2">2016-6-30</h3> <a href="#"><img src="images/more.png" width="27" height="27" alt=""/></a> </li> <li> <h3 class="tit1">中远集运、达飞轮船、长荣海运和东方海外组建联盟1</h3> <h3 class="tit2">2016-6-30</h3> <a href="#"><img src="images/more.png" width="27" height="27" alt=""/></a> </li> <li> <h3 class="tit1">中远集运、达飞轮船、长荣海运和东方海外组建联盟2</h3> <h3 class="tit2">2016-6-30</h3> <a href="#"><img src="images/more.png" width="27" height="27" alt=""/></a> </li> <li> <h3 class="tit1">中远集运、达飞轮船、长荣海运和东方海外组建联盟3</h3> <h3 class="tit2">2016-6-30</h3> <a href="#"><img src="images/more.png" width="27" height="27" alt=""/></a> </li> </ul> </div> <div class="control"> <div class="prev"><img src="images/newprev.png" alt="" /></div> <div class="next"><img src="images/newnext.png" alt="" /></div> </div> </div> </div>  <div class="new"> <div class="newa"> <a href="#">公司新闻</a> <a href="#">行业新闻</a> <a href="#">公司公告</a> </div><div class="clear"></div> <ul class="newb"> <li> <span> <i>30</i> 06月<br> 2016</span> <b><a href="#">克拉克森：亚太船东重掌世界船队</a></b> <a href="#" class="more">更多+ </a> </li> <li> <span> <i>30</i> 06月<br> 2016</span> <b><a href="#">中国对外投资逆势上扬，存量将升至全球第六 </a></b> <a href="#" class="more">更多+ </a> </li> <li> <span> <i>30</i> 06月<br> 2016</span> <b><a href="#">中国对外投资逆势上扬，存量将升至全球第六 </a></b> <a href="#" class="more">更多+ </a> </li> </ul> </div><div class="clear"></div>  <div class="ywly"> <div class="lya"> <h2>业务领域</h2> <a href="#">更多+</a> </div> <ul class="lyb"> <li class="p1"> <img src="images/p1.jpg" alt=""/> <div><h2> 01/ 校企委培包就业特色班</h2> <p>常州阅海船舶服务有限公司联合国内多家海事院校开展国际海乘、国际海员的校校加企业合作订单委培就业班，学生进校之前直接和我公司鉴定就业合同，确保学生毕业后100%就业。</p> <a href="#">了解详情>></a></div> </li> <li class="p2"> <img src="images/p2.jpg" alt=""/> <div> <h2> 01/ 校企委培包就业特色班</h2> <p>常州阅海船舶服务有限公司联合国内多家海事院校开展国际海乘、国际海员的校校加企业合作订单委培就业班，学生进校之前直接和我公司鉴定就业合同，确保学生毕业后100%就业。</p> <a href="#">了解详情>></a></div> </li> <li class="p3"> <img src="images/p3.jpg" alt=""/> <div> <h2> 01/ 校企委培包就业特色班</h2> <p>常州阅海船舶服务有限公司联合国内多家海事院校开展国际海乘、国际海员的校校加企业合作订单委培就业班，学生进校之前直接和我公司鉴定就业合同，确保学生毕业后100%就业。</p> <a href="#">了解详情>></a></div> </li> </ul> <div class="clear"> </div> </div> <div class="clear"></div> </div>  <div class="about"> <div class="aba inner"> <h2>业务领域</h2> <a href="#">更多+</a> </div> <p>随着世界航运市场蓬勃发展以及国家海事局对船舶船员配备和船员持证上岗的规定要求，我公司与国内各大海运专业学校及航海院校，携手联合面向社会长年招收有志从事航海事业的优秀青年。入学前首先与公司

评论收藏

内容反馈

版权申诉