WebTech-StudyNote

WEB技术学习笔记

HTML

CSS

1. clearfix：解决高度塌陷&外边距重叠问题

2. 绝对定位>stickey

3. 尚硅谷86节京东练习还没做

4. css使用flexbox布局实现让页面的footer始终位于底部

   *{
       margin: 0;
       padding: 0;
   }

   body{
       display: flex;
       flex-direction: column;
       height: 100%;
   }
   header{
       flex: 0 0 auto;
   }
   main{
       flex: 1 0 auto;
   }
   footer{
       flex: 0 0 auto;
   }

js

1. 监视页面滚动并实现“向上滚动显示，向下滚动消失的效果”

   // 上滚显示map，下滚消失
   $(document).ready(function(){  
     var p=0,t=0;  
     $(window).scroll(function(e){  
             p = $(this).scrollTop();  
               
             if(t<=p){//下滚  
               $('#map').fadeOut("slow"); 
             }  
               
             else{//上滚  
               $('#map').fadeIn("slow"); 
             }  
             setTimeout(function(){t = p;},0);         
     });  
   });

2. 鼠标点击按钮后缓慢返回顶部

   // 鼠标点击后缓慢返回顶部
   var btn = $('#map');
   btn.on('click', function (e) {
     e.preventDefault();
     $('html, body').animate({ scrollTop: 0 }, '300');
   });

3. 在html中默认显示一张图片鼠标放在图上图片就换成另一个，当鼠标移开换第三张图片

   <div><img src="picture/picture3/01.jpg" width="100" /></div>

   $("div").hover(function(){
       $(this).find("img").attr("src","picture/picture3/02.jpg");
   },function(){
       $(this).find("img").attr("src","picture/picture3/03.jpg");
   });

Nginx

1. nginx 强制 https 浏览器总是提醒重定向过多不能正常访问网页

   #改为
   if ($scheme = http) {
   return 301 https://$server_name$request_uri;
   }