<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的高度了。
有话要说...