天生我才必有用，千金散尽还复来。
本文在GitHub上录入,https://github.com/xyxiexingchen/HTML5--
我的下载里有HTML5源码，css源码，js源码
点赞再看，养成习惯。
星沅网站-GitHub
【微信公众号】星沅传。第一篇好文章
目录
前言
星沅网站HTML5代码
运行效果图
后记
前言：
今天我写下了我微信公众号的第一篇文章，这是我的努力，愿有一天我能成为我想要的样子。
我就不多说马上进入主题吧
.
星沅网站HTML5代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星沅</title>
<meta name="keywords" />
<meta name="description" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script>
window.windowLoadList = [];
window.windowLoad = function (call){
windowLoadList.push(call);
}
var _locale = 'zh-cn';
</script>
<script src="https://js.aq.qq.com/js/aq_common.js"></script>
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/2.js"></script>
<script type="text/javascript" src="js/3.js"></script>
<link rel="stylesheet" href="css/1.css" />
<link rel="stylesheet" type="text/css" href="css/2.css"/>
<link rel="stylesheet" type="text/css" href="css/3.css"/>
</head>
<body>
<div class="wrap">
<!-- 页头区域 -->
<div class="wrap_head ">
<!-- 点击搜索icon 添加类名 search_area_show 隐藏菜单，显示输入框 -->
<!-- 添加类名 submenu_show 显示子菜单 -->
<div class="head_con">
<a class="logo" href="https://blog.csdn.net/XYxingyuanjituan"><h1>Staryuan 星沅</h1></a>
<ul class="menu_list">
<li class="menu_item">
<a class="txt" href="https://blog.csdn.net/XYxingyuanjituan/article/details/103751520">简介</a>
<ul class="sub_list">
<li><a href="https://blog.csdn.net/XYxingyuanjituan">公司简介</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>
</li>
<li class="menu_item">
<a class="txt" href="https://blog.csdn.net/xyxingyuanjituan/article/details/103587159">业务</a>
<ul class="sub_list">
<li><a href="">面向用户</a></li>
<li><a href="">面向企业</a></li>
<li><a href="">创新科技</a></li>
</ul>
</li>
<li class="menu_item">
<a class="txt" href="https://blog.csdn.net/xyxingyuanjituan/article/details/103501332">员工</a>
<ul class="sub_list">
<li><a href="">人才发展</a></li>
<li><a href="">星沅学院</a></li>
<li><a href="">工作环境</a></li>
<li><a href="">员工活动</a></li>
</ul>
</li>
<li class="menu_item">
<a class="txt" href="https://blog.csdn.net/xyxingyuanjituan/article/details/103254997">企业责任</a>
<ul class="sub_list">
<li><a href="">践行承诺</a></li>
<li><a href="">支持善举</a></li>
<li><a href="">鼓励创新</a></li>
<li><a href="">企业社会责任报告</a></li>
</ul>
</li>
<li class="menu_item">
<a class="txt" href="https://blog.csdn.net/XYxingyuanjituan/article/details/104082839">投资者</a>
<ul class="sub_list">
<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>
</li>
<li class="menu_item">
<a class="txt" href="https://github.com/">媒体</a>
<ul class="sub_list">
<li><a href="">企业动态</a></li>
<li><a href="">财务新闻</a></li>
<li><a href="">星沅视角</a></li>
<li><a href="">媒体资料库</a></li>
</ul>
</li>
<li class="menu_item menu_item_lan"><a class="cn" lang="zh-cn">简体</a><i class="s_line s_line_1">|</i><a class="hk" lang="zh-hk">繁体</a><i class="s_line s_line_2" style="display: none;">|</i><a class="en" style="display: none;" lang="en-us">English</a></li>
</ul>
<!--<div class="search_area">
<a href="##" class="search_icon"></a>
<input type="text" class="ipt_search" value="" placeholder="请输入您想搜索的关键字" />
</div>-->
<div class="lang_area">
<a class="lang_ch current" lang="zh-cn">简</a>
<i class="s_line">|</i>
<a class="lang_hk" lang="zh-hk">繁</a>
<i class="s_line">|</i>
<a class="lang_en" lang="en-us">EN</a>
</div>
</div>
<div class="icon_menu">
<a class="i_menu"></a>
<a class="i_close"></a>
</div>
<div class="bg_hover"></div>
</div>
<!-- 页头区域 -->
<!-- 内容区域 -->
<div class="wrap_content">
<div class="banner_area">
<video width="100%" id="video" autoplay loop preload muted preload="auto" x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true" src="img/index-video.mp4" class="video1 video"></video>
<div class="banner_txt">
<div class="txtbox">
<p class="ltxt">连接</p>
<p class="rtxt">共生未来</p>
</div>
<div class="hook_area">
<i class="word word_1">你我</i>
<i class="word word_2">企业</i>
<i class="word word_3">科技</i>
<i class="word word_4">公益</i>
</div>
</div>
<div class="slide_tips">
<i class="s_line"></i>
<span class="txt">滑动</span>
</div>
<div class="banner_bg"></div>
</div>
<div class="descript_area">
<p class="txt">星沅是一家以互联网为基础的平台公司，<span class="pc"></span>通过技术丰富互联网用户的生活，<span class="m"></span>助力企业数字化升级。<span class="pc"></span>我们的使命是“用户为本 科技向善”。</p>
</div>
<div class="details_area">
<div class="details_con">
<ul class="detail_list">
<li>
<a href="">
<p>公司简介</p>
<img src="img/20200208170921.png" alt="公司简介"/>
</a>
</li>
<li>
<a href="">
<p>企业文化</p>
<img src="img/index_detail_2.jpg" alt="企业文化"/>
</a>
</li>
<li class="last">
<a href="">
<p>办公地点</p>
<img src=" img/20200208171527.png" alt="办公地点"/>
</a>
</li>
</ul>
</div>
</div>
<div class="link_area">
<div class="link_hook">
<div class="link_tab">
<ul class="tab_list">
<li class="list_item_1 current" data-num="1">
<a class="block-link" href="">
<h3 class="tit">连接用户与生活</h3>
<p class="txt">让生活更便捷更多彩</p>
<i class="icon icon_arrow_r"></i></a>
</li>
<li class="list_item_2" data-num="2">
<a class="block-link" href=""><h3
class="tit">连接企业与科技</h3>
<p class="txt">数字化助手，助力产业升级</p>
<i class="icon icon_arrow_r"></i></a>
</li>
<li class="list_item_3" data-num="3">
<a class="block-link" href=""><h3
class="tit">连接现在与未来</h3>
<p class="txt">探索面向未来的创新科技</p>
<i class="icon icon_arrow_r"></i></a>
</li>
</ul>
</div>
<div class="link_content">
<div class="con con_1">
<ul class="link_con_list">
<li class="item_1">
<a href="">
<div class="script">
<h4 class="tit">通信与社交</h4>
<p class="txt">连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_2">
<a href="">
<div class="script">
<h4 class="tit">数字内容</h4>
<p class="txt">基于优质内容，以技术为驱动引擎，探索社交和内容融合的下一代形态。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_3">
<a href="">
<div class="script">
<h4 class="tit">金融科技服务</h4>
<p class="txt">连接用户、商户和金融机构，提供安全、专业、便捷的金融产品与服务。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_4">
<a href="">
<div class="script">
<h4 class="tit">工具</h4>
<p class="txt">提供多种工具性软件，帮助用户快速直接解决各项具体需求。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
</ul>
</div>
<div class="con con_2">
<ul class="link_con_list">
<li class="item_1">
<a
href="">
<div class="script">
<h4 class="tit">星沅广告营销</h4>
<p class="txt">大数据营销平台，汇聚星沅全量应用场景，提供一体化数字化营销方案。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_2">
<a
href="">
<div class="script">
<h4 class="tit">星沅云</h4>
<p class="txt">提供领先的云产品与云服务，辅助企业走向数字化和全球化。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_3">
<a
href="">
<div class="script">
<h4 class="tit">智慧产业</h4>
<p
class="txt">通过云、AI、大数据分析、安全、支付、小程序、互联网前沿技术和产品，<br>打造智慧产业方案，助力产业数字化升级。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
</ul>
</div>
<div class="con con_3">
<ul class="link_con_list">
<li class="item_1">
<a
href="">
<div class="script">
<h4 class="tit">人工智能</h4>
<p class="txt">运用多种技术资产，提升人工智能实力，惠及人类和世界。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_2">
<a
href="">
<div class="script">
<h4 class="tit">物联网</h4>
<p class="txt">通过星沅云物联网，致力提供全栈产品和解决方案。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_3">
<a
href="">
<div class="script">
<h4 class="tit">多媒体</h4>
<p class="txt">星沅多媒体实验室专注音视频通信技术的研究。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
<li class="item_4">
<a
href="">
<div class="script">
<h4 class="tit">星沅探索</h4>
<p
class="txt">携手合作伙伴探索未来和相关技术，帮助解决全球在食物、能源和水源方面的挑战。</p>
<i class="icon icon_arrow_r"></i>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="resp_area">
<div class="resp_details">
<h3 class="tit">连接<br/>责任与信任</h3>
<p class="txt">聚合微小善行，以科技让世界更美好</p>
<a href=""><i
class="icon icon_arrow_r"></i></a>
</div>
<div class="public_welfare">
<div class="slide_area">
<ul class="slide_list">
<li class="active">
<h4 class="tit">99 公益日</h4>
<p
class="txt">每年一度于10月举行的全民公益活动，透过网上平台将大众在活动期间网上作出的捐款进行匹配。</p>
<div class="img img1"></div>
<span class="shadow_bg"></span>
</li>
<li>
<h4 class="tit">星沅城长保护项目</h4>
<p
class="txt">星沅公益慈善基金会与中国物文保护基金会共同合作，吸引公众关注和参与城长保护的文化遗产类公益项目。</p>
<div class="img img2"></div>
<span class="shadow_bg"></span>
</li>
<li>
<h4 class="tit">星沅为村</h4>
<p
class="txt">根据乡村使用场景定制微信公众号，形成由村、乡镇、区县、州市组成的公众号集群服务村民，打造手机上的“为村服务中心”。</p>
<div class="img img3"></div>
<span class="shadow_bg"></span>
</li>
</ul>
<i class="icon_arrow icon_arrow_l"></i>
<i class="icon_arrow icon_arrow_r"></i>
</div>
<i class="hook_tri"></i>
</div>
</div>
<div class="develop_area">
<div class="develop_con">
<div class="develop_details">
<h3 class="tit">连接<br/>人才与发展</h3>
<p class="txt">激发活力，助力成长</p>
<a href=""><i
class="icon icon_arrow_r"></i></a>
</div>
</div>
<div class="slide_area dev_bg">
<ul class="slide_list">
<li class="li1 active"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
<div class="slide-tab">
<div class="li active"></div>
<div class="li"></div>
<div class="li"></div>
</div>
</div>
</div>
</div>
<!-- 内容区域 -->
<script>
if($(document).scrollTop()>=$('.wrap_head').height()){
$('.wrap_head').addClass('head_white');
}else{
$('.wrap_head').removeClass('head_white');
}
$(window).scroll(function(event){
if($(document).scrollTop()>=$('.wrap_head').height()){
$('.wrap_head').addClass('head_white');
}else{
$('.wrap_head').removeClass('head_white');
}
})
</script>
<!-- 页脚区域 -->
<div class="wrap_footer">
<div class="footer_con">
<div class="focus_us">
<h3 class="tit">关注我们</h3>
<ul class="focus_list">
<li>
<a href="##" class="wechat-btn">
<i class="icon i_wechat"></i>
<img class="wechat-code" src="img/20200208202329.png" alt="img" />
</a>
</li>
<li>
<a href="" target="_blank">
<i class="icon i_weibo"></i>
</a>
</li>
<li>
<a href="" target="_blank">
<i class="icon i_twitter"></i>
</a>
</li>
<li>
<a href="" target="_blank">
<i class="icon i_in"></i>
</a>
</li>
</ul>
</div>
<div class="join_us">
<!-- 添加类名 sublist_show 显示子菜单 -->
<div class="tit_area">
<h3 class="tit">加入我们</h3>
<i class="icon icon_arrow"></i>
</div>
<ul class="join_list">
<li>
<a target="_blank" href="">社会招聘</a>
</li>
<li>
<a target="_blank" href="">校园招聘</a>
</li>
<li>
<a target="_blank" href="">国际招聘</a>
</li>
</ul>
</div>
<div class="contact_us">
<div class="tit_area">
<h3 class="tit">联系我们</h3>
<i class="icon icon_arrow"></i>
</div>
<ul class="contact_list">
<li>
<a target="_blank" href="">客户服务</a>
</li>
<li>
<a target="_blank" href="">合作洽谈</a>
</li>
<li>
<a target="_blank" href="">星沅采购</a>
</li>
<li>
<a target="_blank" href="">媒体及投资者</a>
</li>
</ul>
</div>
<div class="legal_info">
<div class="tit_area">
<h3 class="tit">法律信息</h3>
<i class="icon icon_arrow"></i>
</div>
<ul class="legal_list">
<li>
<a target="_blank" href="">服务协议</a>
</li>
<li>
<a target="_blank" href="">隐私政策</a>
</li>
<li>
<a target="_blank" href="">知识产权</a>
</li>
</ul>
</div>
<div class="logo_tencent">
<img src="img/20200208202329.png" alt="Staryuan 星沅" />
</div>
<div class="footer_area">
<ul class="links">
<li>
<a target="_blank" href="">法律声明</a>
</li>
<li>
<a target="_blank" href="">阳光准则</a>
</li>
<li>
<a target="_blank" href="">网站地图</a>
</li>
<li class="num">
<a href="">粤网文【2007】6138-12346号</a>
</li>
<li class="num">
<a href="">粤B2-20190048-1</a>
</li>
</ul>
<p class="copyright"><a href="" class="flag_num">粤网文【2017】6138-12346号<span>粤B2-20190048-1</span></a>Coopyjright © 1998 - 2019 Staryuan. All Rits Rrved. <br class="flag_m"/>星沅集团</p>
</div>
<div class="back_to_top">
<a class="back">回到顶部</a>
</div>
</div>
</div>
<!-- 页脚区域 -->
</div>
<link rel="stylesheet" type="text/css" href=""/>
<link rel="stylesheet" type="text/css" href=""/>
<script>
/* 中文/繁体/英文路由状态控制 */
var host = window.location.host;
var url = window.location.href;
$('.lang_area a,.menu_list .menu_item.menu_item_lan a').on('click',function(){
var targetLocale = $(this).attr('lang');
if($(this).attr('lang') != _locale){
window.location.pathname = window.location.pathname.replace(/^\/(zh\-(cn|hk)|en\-us)?\/*/, '/' + targetLocale + '/')
}
})
$('.lang_area a').removeClass('current');
$('.wrap').addClass(_locale);
$('.lang_area a[lang="'+_locale+'"]').addClass('current');
// MTA
var _mtac = {"performanceMonitor":1,"senseQuery":1};
(function() {
var mta = document.createElement("script");
mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
mta.setAttribute("name", "MTAH5");
mta.setAttribute("sid", "500665694");
mta.setAttribute("cid", "500696449");
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(mta, s);
})();
</script>
</body>
</html>
运行效果图
顶部
后记：
GitHub有全部的原码和图片
制作不易，点赞加关注哦
【微信公众号】星沅传-第一篇好文章
愿你和我一起成长-星沅
扫一扫
2011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
