蓝色新闻资讯网站手机静态页面模板下载-乐分享

模板描述：手机新闻资讯蓝色风格模板下载，手机新闻资讯蓝色风格的模板下载html模板下载

代码部署教程

1. 引入CSS

<link rel="stylesheet" href="assets/css/amazeui.min.css">

<link rel="stylesheet" href="assets/css/app.css">

2. 引入JS

<script src="assets/js/jquery.min.js"></script>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>

<script src="assets/js/amazeui.ie8polyfill.min.js"></script>

<script src="assets/js/amazeui.widgets.helper.js"></script>

<script src="assets/js/amazeui.min.js"></script>

3. HTML代码

<!–header–>

<header data-am-widget="header" class="am-header am-header-default am-header-fixed">

<div class="am-header-left am-header-nav">

<a href="#left-link" class="">

<img class="am-header-icon-custom" src="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path d="M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z" fill="%23fff"/></svg>" alt=""/>

</a>

</div>

<h1 class="am-header-title">

<img src="http://s.amazeui.org/media/i/brand/amazeui-cw.png" />

</h1>

<div class="am-header-right am-header-nav">

<a href="#right-link" class="">

<img class="am-header-icon-custom" src="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 26" fill="%23fff"><rect width="4" height="4"/><rect x="8" y="1" width="34" height="2"/><rect y="11" width="4" height="4"/><rect x="8" y="12" width="34" height="2"/><rect y="22" width="4" height="4"/><rect x="8" y="23" width="34" height="2"/></svg>" alt=""/>

</a>

</div>

</header>

<!–header END–>

<!–nav BEGIN–>

<nav data-am-widget="menu" class="am-menu am-menu-offcanvas1" data-am-menu-offcanvas>

<a href="javascript: void(0)" class="am-menu-toggle">

<i class="am-menu-toggle-icon am-icon-bars" style="opacity:0;">

</i>

</a>

<div class="am-offcanvas" >

<div class="am-offcanvas-bar am-offcanvas-bar-flip">

<ul class="am-menu-nav am-avg-sm-1">

<li class="am-parent">

<a href="##" class="" >

公司</a>

<ul class="am-menu-sub am-collapse am-avg-sm-2 ">

<li class="">

<a href="##" class="" >

公司</a>

</li>

<li class="">

<a href="##" class="" >

人物</a>

</li>

<li class="">

<a href="##" class="" >

趋势</a>

</li>

<li class="">

<a href="##" class="" >

投融资</a>

</li>

<li class="">

<a href="##" class="" >

创业公司</a>

</li>

<li class="">

<a href="##" class="" >

创业人物</a>

</li>

<li class="am-menu-nav-channel">

<a href="##" class="" title="公司">

进入栏目 »</a>

</li>

</ul>

</li>

<li class="am-parent">

<a href="##" class="" >

人物</a>

<ul class="am-menu-sub am-collapse am-avg-sm-3 ">

<li class="">

<a href="##" class="" >

公司</a>

</li>

<li class="">

<a href="##" class="" >

人物</a>

</li>

<li class="">

<a href="##" class="" >

趋势</a>

</li>

<li class="">

<a href="##" class="" >

投融资</a>

</li>

<li class="">

<a href="##" class="" >

创业公司</a>

</li>

<li class="">

<a href="##" class="" >

创业人物</a>

</li>

</ul>

</li>

<li class="am-parent">

<a href="#c3" class="" >

趋势</a>

<ul class="am-menu-sub am-collapse am-avg-sm-4 ">

<li class="">

<a href="##" class="" >

公司</a>

</li>

<li class="">

<a href="##" class="" >

人物</a>

</li>

<li class="">

<a href="##" class="" >

趋势</a>

</li>

<li class="">

<a href="##" class="" >

投融资</a>

</li>

<li class="">

<a href="##" class="" >

创业公司</a>

</li>

<li class="">

<a href="##" class="" >

创业人物</a>

</li>

<li class="am-menu-nav-channel">

<a href="#c3" class="" title="趋势">

泥煤 »</a>

</li>

</ul>

</li>

<li class="am-parent">

<a href="##" class="" >

投融资</a>

<ul class="am-menu-sub am-collapse am-avg-sm-3 ">

<li class="">

<a href="##" class="" >

公司</a>

</li>

<li class="">

<a href="##" class="" >

人物</a>

</li>

<li class="">

<a href="##" class="" >

趋势</a>

</li>

<li class="">

<a href="##" class="" >

投融资</a>

</li>

<li class="">

<a href="##" class="" >

创业公司</a>

</li>

<li class="">

<a href="##" class="" >

创业人物</a>

</li>

</ul>

</li>

<li class="">

<a href="##" class="" >

创业公司</a>

</li>

<li class="">

<a href="##" class="" >

创业人物</a>

</li>

</ul>

</div>

</div>

</nav>

<!–nav END–>

<!–Slide BEGIN–>

<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{"controlNav":"thumbnails","directionNav":false}’ >

<ul class="am-slides">

<li data-thumb="http://s.amazeui.org/media/i/demos/bing-1.jpg">

<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">

<div class="am-slider-desc">

<h2 class="am-slider-title">

远方有一个地方那里种有我们的梦想</h2>

<p>

</p>

</div>

</li>

<li data-thumb="http://s.amazeui.org/media/i/demos/bing-2.jpg">

<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">

<div class="am-slider-desc">

<h2 class="am-slider-title">

某天也许会相遇相遇在这个好地方</h2>

<p>

</p>

</div>

</li>

<li data-thumb="http://s.amazeui.org/media/i/demos/bing-3.jpg">

<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">

<div class="am-slider-desc">

<h2 class="am-slider-title">

不要太担心只因为我相信终会走过这条遥远的道路</h2>

<p>

</p>

</div>

</li>

<li data-thumb="http://s.amazeui.org/media/i/demos/bing-4.jpg">

<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">

<div class="am-slider-desc">

<h2 class="am-slider-title">

OH PARA PARADISE 是否那么重要你是否那么地遥远</h2>

<p</p>

</div>

</li>

</ul>

</div>

<!–slide END–>

<!–list START–>

<div data-am-widget="list_news" class="am-list-news am-list-news-default" >

<!–列表标题–>

<div class="am-list-news-hd am-cf">

<!–带更多链接–>

<a href="###" class="">

<h2>

今日精选</h2>

<span class="am-list-news-more am-fr">

更多 »</span>

</a>

</div>

<div class="am-list-news-bd">

<ul class="am-list">

<!–缩略图在标题左边–>

<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">

<div class="am-u-sm-4 am-list-thumb">

<a href="http://www.douban.com/online/11614662/" class="">

<img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重….晒晒旅行中的那些囧！"/>

</a>

</div>

<div class=" am-u-sm-8 am-list-main">

<h2 class="am-list-item-hd">

<a href="http://www.douban.com/online/11614662/" class="">

我很囧，你保重….晒晒旅行中的那些囧！</a>

</h2>

<div class="am-list-item-text">

囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>

</div>

</li>

<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">

<div class="am-u-sm-4 am-list-thumb">

<a href="http://www.douban.com/online/11624755/" class="">

<img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画"/>

</a>

</div>

<div class=" am-u-sm-8 am-list-main">

<h2 class="am-list-item-hd">

<a href="http://www.douban.com/online/11624755/" class="">

我最喜欢的一张画</a>

</h2>

<div class="am-list-item-text">

你最喜欢的艺术作品，告诉大家它们的——名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>

</div>

</li>

<li class="am-g am-list-item-desced">

<div class=" am-list-main">

<h2 class="am-list-item-hd">

<a href="http://www.douban.com/online/11645411/" class="">

“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>

</h2>

<div class="am-list-item-text">

还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。成功参与活动！* 听他们刚才说，上传照片的次</div>

</div>

</li>

</ul>

</div>

</div>

<!–list END–>

<!–Gallery–>

<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2
am-avg-md-3 am-avg-lg-4 am-gallery-bordered" data-am-gallery="{ }" >

<li>

<div class="am-gallery-item">

<a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">

<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="远方有一个地方那里种有我们的梦想"/>

<h2 class="am-gallery-title">

远方有一个地方那里种有我们的梦想</h2>

<div class="am-gallery-desc">

2375-09-26</div>

</a>

</div>

</li>

<li>

<div class="am-gallery-item">

<a href="http://s.amazeui.org/media/i/demos/bing-2.jpg" class="">

<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt="某天也许会相遇相遇在这个好地方"/>

<h2 class="am-gallery-title">

某天也许会相遇相遇在这个好地方</h2>

<div class="am-gallery-desc">

2375-09-26</div>

</a>

</div>

</li>

<li>

<div class="am-gallery-item">

<a href="http://s.amazeui.org/media/i/demos/bing-3.jpg" class="">

<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt="不要太担心只因为我相信"/>

<h2 class="am-gallery-title">

不要太担心只因为我相信</h2>

<div class="am-gallery-desc">

2375-09-26</div>

</a>

</div>

</li>

<li>

<div class="am-gallery-item">

<a href="http://s.amazeui.org/media/i/demos/bing-4.jpg" class="">

<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt="终会走过这条遥远的道路"/>

<h2 class="am-gallery-title">

终会走过这条遥远的道路</h2>

<div class="am-gallery-desc">

2375-09-26</div>

</a>

</div>

</li>

</ul>

<!–Gallery END–>

<!–navbar BEGIN 工具栏–>

<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
id="">

<ul class="am-navbar-nav am-cf am-avg-sm-4">

<li >

<a href="tel:123456789" class="">

<span class="am-icon-home am-secondary">

</span>

<span class="am-navbar-label">

首页</span>

</a>

</li>

<li data-am-navbar-share>

<a href="###" class="">

<span class="am-icon-comment-o">

</span>

<span class="am-navbar-label">

发现</span>

</a>

</li>

<li data-am-navbar-qrcode>

<a href="###" class="">

<span class="am-icon-user">

</span>

<span class="am-navbar-label">

我的</span>

</a>

</li>

</ul>

</div>

<!–navbar END–>

<!–在这里编写你的代码–>

<script type="text/x-handlebars-template" id="amz-tpl">

{{>

header header}}
{{>

menu menu}}
{{>

slider slider}}
{{>

list_news list1}}
{{>

gallery gallery}}
{{>

list_news list2}}
{{>

footer footer}}
{{>

navbar navbar}}
</script>

<!–[if (gte IE 9)|!(IE)]>

<!–>

<!–<![endif]–>

<!–[if lte IE 8 ]>

<![endif]–>

1.《蓝色新闻资讯网站手机静态页面模板下载》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《蓝色新闻资讯网站手机静态页面模板下载》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/html/1747.html

蓝色新闻资讯网站手机静态页面模板下载

代码部署教程

微信活动页面手机静态页面模板下载

律师网站手机端HTML静态页面模板下载