响应式技能储备

Posted 2020-10-05 南瓜壳

技能储备：（响应式网站使用较多）
1.
background-size: cover;背景图自适应
2.
背景图上面带文字最新写法：
就还是按照 背景图片 和文字这样写啊
只不过这个背景图需要自适应
background-size: cover;
给框加个padding值，文字直接放里面就行了啊
想要保证上下居中的话也可以定位进去，给个固定高度，宽度100%给个padding值，然后居中定位
3.
宽度自己计算：屏幕自己适应宽度
width: calc(100% - 200px);
4.
banner大图嵌套问题
要先初始化banner
//初始化banner
$("#banner .carousel-inner .item:eq(0)").addClass("active");
$("#banner .carousel-indicators li:eq(0)").addClass("active");
5.搜索框代码
原理：1给搜索按钮外面嵌套一层div点击对当前的div进行点击事件
2.让search_box的宽度进行动画
$(function(){
    $(‘.search_icon‘).click(function(){
        $(".search_li").addClass("search_on");
        $(".search_box").animate({width:"300px"},300);
        $(this).hide();
        $(".search_cha").show();
        $(".nav_box>li:lt(7)").animate({opacity:"0"},300);
    })
    $(".search_cha").click(function(){
        $(".search_li").delay(1000).removeClass("search_on");
        $(".search_box").animate({width:"28px"},300).parent("search_li").removeClass(‘search_on‘);
        $(".search_icon").show();
        $(".nav_box>li:lt(7)").animate({opacity:"1"},300);
        $(this).hide();
    });
})