技能储备:(响应式网站使用较多)
1.
background-size: cover;背景图自适应
2.
背景图上面带文字最新写法:
就还是按照 背景图片 和文字这样写啊
只不过这个背景图需要自适应
background-size: cover;
给框加个padding值,文字直接放里面就行了啊
想要保证上下居中的话也可以定位进去,给个固定高度,宽度100%给个padding值,然后居中定位
3.
宽度自己计算:屏幕自己适应宽度
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({"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({"28px"},300).parent("search_li").removeClass('search_on');
$(".search_icon").show();
$(".nav_box>li:lt(7)").animate({opacity:"1"},300);
$(this).hide();
});
})
5.box-shadow用法
div{box-shadow: 10px 10px 5px #888888;}