html引入公共部分(header、footer等)
引入公共部分的好处:把公共部分提取出来,修改代码不需要每个html都去修改,只需要修改一份。
1. 使用iframe标签
解决方法:设置高度足够高,但由于过高会挤压遮盖下面内容,第二步:设置为绝对定位position:absolute; z-index:999;
原因:将 iframe的属性frameborder=”0″ scrolling=”no” 设置为no
属性 值 描述 align 不赞成使用。请使用样式代替。
frameborder
- 1
- 0
规定是否显示框架周围的边框。 height 规定 iframe 的高度。 longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。 marginheight pixels 定义 iframe 的顶部和底部的边距。 marginwidth pixels 定义 iframe 的左侧和右侧的边距。 name frame_name 规定 iframe 的名称。 referrerpolicy 规定 iframe 的名称。 sandbox 启用一系列对 <iframe> 中内容的额外限制。 scrolling 规定是否在 iframe 中显示滚动条。 seamless seamless 规定 <iframe> 看上去像是包含文档的一部分。 src URL 规定在 iframe 中显示的文档的 URL。 srcdoc HTML_code 规定在 <iframe> 中显示的页面的 HTML 内容。 width 定义 iframe 的宽度。
做法:公共部分的页面只需要写<body>的里面的标签(不包括body),不需要写头部标签元素
<!-- 外链css -->
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="font/iconfont.css">
<!-- js -->
<script src="js/jquery-3.6.1.js"></script>
<script src="js/header.js"></script>
<header id="header" class="header_animation">
<div class="header-box">
<div class="logo-box">
<a href="header.html"><img src="images/logo.e4cc2c4.svg"></a>
</div>
<div class="head-list-box">
<ul class="head-list">
<li class="head-item">
<a href="#">全部车型<span class="iconfont">xe600;</span></a>
<ul class="secondlist">
<li class="second-item"><a href="dynasty.html" target="_blank">王朝</a></li>
<li class="second-item"><a href="ocean.html" target="_blank">海洋</a></li>
</ul>
</li>
<li class="head-item">
<a href="#">购车服务<span class="iconfont">xe600;</span></a>
<ul class="secondlist">
<li class="second-item"><a href="#">金融服务</a></li>
<li class="second-item"><a href="#">购车服务</a></li>
<li class="second-item"><a href="#">大客户服务</a></li>
</ul>
</li>
<li class="head-item">
<a href="yuyue.html" target="_blank">预约试驾</a>
</li>
<li class="head-item">
<a href="#">门店查询<span class="iconfont">xe600;</span></a>
<ul class="secondlist">
<li class="second-item"><a href="#">经销商服务</a></li>
<li class="second-item"><a href="#">服务店查询</a></li>
</ul>
</li>
<li class="head-item">
<a href="#">品牌中心<span class="iconfont">xe600;</span></a>
<ul class="secondlist">
<li class="second-item"><a href="#">两个不只</a></li>
<li class="second-item"><a href="#">三大领先</a></li>
<li class="second-item"><a href="#">链接共建</a></li>
<li class="second-item"><a href="#">一路向前</a></li>
</ul>
</li>
<li class="head-item">
<a href="#">集团网站</a>
</li>
</ul>
</div>
<div class="tool-box">
<ul class="tool-list">
<li class="tool-item" id="search-item"><a href="#"><span class="iconfont">xeafe;</span>搜索</a>
</li>
<li class="tool-item"><a href="login.html" target="_blank"><span class="iconfont" style="color: #f5f5f5;"></span>登录/注册</a></li>
<li class="tool-item"><a href="#"><span class="iconfont"></span></a>
<ul class="tool-secondlist">
<li class="tool-second-item"><a href="#">金融服务</a></li>
<li class="tool-second-item"><a href="huiyuan.html">会员礼遇</a></li>
<li class="tool-second-item"><a href="#">汉唐精英萃</a></li>
<li class="tool-second-item"><a href="#">我迪朋友们</a></li>
<li class="tool-second-item"><a href="#">木兰荟</a></li>
<li class="tool-second-item"><a href="#">新闻资讯</a></li>
<li class="tool-second-item"><a href="#">品牌互动</a></li>
</ul>
</li>
<li class="tool-item"><a href="#"><span class="iconfont">
</span>选择地区</a>
<ul class="tool-secondlist">
<span class="area" style="color: #cbc6c6;">选择地区</span>
<span class="area">Asia Pacific</span>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Korea</a></li>
<span class="area">Europe</span>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Europe</a></li>
<span class="area">Latin America</span>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6; ">Ecuador</a></li>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Chile</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="search-box">
<div class="searchDiv">
<h4>搜索</h4>
<form method="post">
<input type="text" placeholder="请输入您想了解的信息" id="shuru"><input type="button" id="search-btn" value="Go!">
</form>
</div>
</div>
</header>
<!-- 顶部导航 -->
<div class="headerpage" style="position:absolute;z-index:999;width: 100%;">
<iframe src="./header.html" frameborder="0" scrolling="no" width="100%" height="500px" ></iframe>
</div>
尾部同理
<!-- 尾部 -->
<div class="footerpage" style="position:relative; width: 100%;">
<iframe src="./footer.html" frameborder="0" scrolling="no" width="100%" height="450px"></iframe>
</div>
完成! ps:当时完成项目时发现导入的js不出效果,但是现在效果出来了,不知道是什么原因。。
2. 使用jquery提供的load方法
<!-- 顶部导航 -->
<div class="headerpage" style="position:absolute;z-index:999;width: 100%; height: 500px;">
</div>
<script>
$(function(){
$(".headerpage").load("header.html");
})
解决方法:
1. load函数里不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,用域名来解决的,或者把本地文件部署到Tomcat
2.在vsCode的插件市场中搜索并安装Live Server插件. 用“
Open with Live Serve
”打开文件
原文地址:https://blog.csdn.net/LUOZONGW/article/details/127419886
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_49587.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。