页面公共头部尾部文件的引用
来源：互联网 发布：淘宝助理无法图片搬家 编辑：程序博客网 时间：2024/04/30 02:53
其实特别简单，第一步先引入AngularJS的js文件、第二步在body处设置一个ng-app，第三步就是设置一个ng-include在一个div中。(特别注意：放到服务器上才可以正常显示)
first：index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/swiper-3.4.1.min.css">
<script type="text/javascript" src="../javascript/angular.min.js"></script>
<script type="text/javascript" src="../javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../javascript/swiper-3.4.1.jquery.min.js"></script>
</head>
<body ng-app="">
<div id="header_id" ng-include="'header.html'"></div>
<!-- 轮播图 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../imgs/sy_tu.jpg" alt=""></div>
<div class="swiper-slide"><img src="../imgs/sy_tu.jpg" alt=""></div>
<div class="swiper-slide"><img src="../imgs/sy_tu.jpg" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<div ng-include="'footer.html'"></div>
<script>
var swiper = new Swiper('.swiper-container', {
//pagination: '.swiper-pagination',
//nextButton: '.swiper-button-next',
//prevButton: '.swiper-button-prev',
paginationClickable: true,
loop: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500
});
</script>
</body>
</html>
second:header.html
<header class='header_top'>
<div class="header_center">
<img src="../images/logo1_03.png" alt="" class="header_logo1">
<img src="../images/logo2_03.png" alt="" class="header_logo2">
<div class="header_right">
<p class="header_search">
<input type="text" placeholder='请输入关键字'>
<i class='search'></i>
</p>
<p class="header_loginAdd">
<a href="" class="header_login">登录</a>/<a href="" class="header_add">注册</a>
</p>
</div>
</div>
</header>
<div class='nav_menu'>
<nav class='nav_menu_center'>
<i class='nav_menu_left'></i>
<ul class="nav_menu_ul clearfix">
<li><h3>首页</h3><p></p></li>
<li><h3>公司介绍</h3><p><a href="">ad</a><a href="">ad</a><a href="">ad</a></p></li>
<li><h3>专项技术</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
<li><h3>产品中心</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
<li><h3>中医名方</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
<li><h3>招商加盟</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
<li><h3>互动社区</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
<li><h3>人才招聘</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
<li><h3>联系我们</h3><p><a href="">sd</a><a href="">dff</a><a href="">dd</a></p></li>
</ul>
<i class='nav_menu_right'></i>
</nav>
</div>
second:footer.html
<footer class='footer'>
<div class="footer_center">
<p class="footer_1">
<a href="">联系方式</a><i></i>
<a href="">网站地图</a><i></i>
<a href="">免责声明</a><i></i>
<a href="">隐私条款</a>
</p>
<p class="footer_2">
CopyRight @ 2015 追梦科技EFKEJI.cn.All Rights Reserved.冀ICP15019676号
</p>
<p class="footer_3">
友情链接：
<a href="">中华中医网</a>
<a href="">古方中医网</a>
<a href="">中医药</a>
<a href="">中医养生</a>
<a href="">中医频道</a>
<a href="">中医世家</a>
<a href="">中医论坛</a>
</p>
</div>
</footer>
- 页面公共头部尾部文件的引用
- html页面引入公共部分，头部和尾部
- phpcms起步 模板公共头部和尾部的调用
- HTML5使用fis3引入公共头部尾部
- 引用公共头部
- dedecms 插件plus文件调用头部尾部的方法
- 把JavaScript文件放在文档的头部还是尾部
- vim跳转文件头部和尾部
- 使用iframe的方式实现共用的头部和尾部页面
- 如何在HTML不同的页面中，共用头部与尾部？
- collection头部和尾部的使用
- recyclerview 添加头部和尾部的优雅
- 自定义带头部和尾部的RecyclerView
- Yii模板头部引入css，尾部引入js文件
- js文件应该放在头部还是尾部？
- 网页头部+尾部
- RecyclerView添加头部尾部
- 公共头部和尾部都是html，怎么通过ajax来实现。
- MVC框架自己封装开启超神之路（上） 3-3composer加载
- Unity中的trigger
- 《Real Time Rendering》第二章 图形渲染管线
- LibLinear（SVM包）使用说明之（三）实践
- Fibonacci(斐波那契数列)
- 页面公共头部尾部文件的引用
- 一个程序员的进化史-第16章
- okhttp的二次封装
- ionic添加cordova插件-Contacts
- angularjs "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
- Scala之高阶函数
- html的meta总结，html标签中meta属性使用介绍
- 03_5Pandas_层级索引
- 常用工具类(来自org.apache.commons)
