<script>
$(function(){
$(".topad").css("display","block");
//在这里修改图片的地址
$(".topad").css("background","url(/yjjskin/images/test.jpg) no-repeat");
//在这里修改图片的高度
$(".topad").css("height","350px");
let headheight=$(".header").height();
let addheight= $(".topad").height();;
$(".header").height(headheight+addheight);
});
</script>上面是顶部图片
一开始想的就是加js代码,后来发现只要header高度设置成auto就不用自己计算高度增加值了,省了不少力气。
下面是顶部加幻灯片样式高度自动计算的js
<div class="flexslider">
<ul class="slides">
<li>
<a href="#">
<!-- 在这里修改第1张图片地址 -->
<img src="/yjjskin/images/test.jpg" alt="">
</a>
</li>
<li>
<a href="#">
//在这里修改第2张图片地址
<img src="/yjjskin/images/20181214logo.gif" alt="">
</a>
</li>
</ul>
</div>
<script>
$(function() {
$(".flexslider1").flexslider({
animation:'fade',
slideshowSpeed: 5000, //展示时间间隔ms
animationSpeed: 1000, //滚动时间ms
touch: true //是否支持触屏滑动
});
$(".topad").css("display","block");
//在这里修改图片的高度
let imgHeight="350px";
$(".topad").css("height",imgHeight);
$(".topad .flexslider .slides li a img").css("height",imgHeight);
let headheight=$(".header").height();
let addheight= $(".topad").height();
$(".header").height(headheight+addheight);
});
</script>同样把高度改成auto就不用单独更新header的高度了。

有话要说...