前端模型 -- 响应式、移动端、兼容性

1. 模型 

    ① 导航条

鼠标悬停后更改样式：
① 使.phone_hidden样式显示
.phone:hover .phone_hidden{
    display: block;
}

② 使.after，.before样式的位置发生改变
.phoneimg>img{
    position: absolute; top:23px ;
    left: 85px;
    z-index = -1;
}
.phoneimg:hover .after{
    left:55px ;
}
.phoneimg:hover .before{
    left:115px ;
}

   ② 轮播图

.lunbotu{
    width: 100%;
    height: 640px;
    background-position: -280px;     margin-top: 104px;
    background-image: url("../jinli_images/01.jpg");
    -webkit-animation:lunbotu 3s infinite alternate ; //三秒换图片
}
@-webkit-keyframes lunbotu  {
    0%{
        background-image: url("../jinli_images/01.jpg");
    }
    100%{
        background-image: url("../jinli_images/02.jpg");
    }
}

③ 光标类型 / 阴影 / 线性渐变 / 径向渐变

cursor：pointer 小手
cursor: help; 问号
cursor: wait; 等待
cursor: crosshair; 十字架

盒子模糊
box-shadow: h-shadow v-shadow blur(模糊程度) spread（模糊尺寸） color outset（外部阴影）;
box-shadow: -5px -5px 10px 10px green;
文字模糊
text-shadow: h-shadow v-shadow blur(模糊程度) color;
box-shadow: -5px -5px 10px green;

线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
.grad{
   height: 200px;
   background: -webkit-linear-gradient(-90deg,red,blue);
   background: -o-linear-gradient(-90deg,red,blue);
   background: -moz-linear-gradient(-90deg,red,blue);
   background: linear-gradient(-90deg,red,blue);/*标准语法*/
}

径向渐变
background: radial-gradient(center, shape， size, start-color, ..., last-color);
.grad{
   width: 400px;
   height: 300px;
   background: -webkit-radial-gradient(closest-side ellipse at 30px 50px ,red,blue);
   background: -o-radial-gradient( closest-side ellipse at 30px 50px ,red,blue);
   background: -moz-radial-gradient( closest-side ellipse at 30px 50px ,red,blue);
   background:radial-gradient(closest-side ellipse at 30px 50px,red,blue);/*标准语法*/
}
 1.中心(at center center)从左上角原点为参考
    x,y是像素(at 30px 50px )；是(at 10% 30%)；是top leftmright center bottom(at left bottom)
 2.大小
  closest-side(最近边);farthest-side(最远边);closest-corner(最近角);farthest-corner（最远角，默认值）
 3.shape形状
   ellipse(椭圆，默认值);circle(圆)

④过度 / 动画 / 透明颜色

transition：过渡属性 时间
a: hoven {
    transition：transform 1s, box-shadow 1s,width 1s;
    transition：all 1s linear 1s; 所有属性匀速过度
}

animation：动画名字 时间
animation：picture 1s ease-in 1s 2 alternate forwards;
keyframes picture{
    0%{}
    100%{}
}

透明颜色
border: 10px solid transparent;

2. 响应式布局

① 媒体查询：针对不同的屏幕尺寸设置不同的样式（min-width, max-width）

<meta name="viewport"  content="initial-scale=1.0,width=device-width" />
/*pc端*/
 @media screen and (min-width: 992px){
  .box{width: 946px;}
}

/*ipad端*/
@media screen and (min-width: 768px) and (max-width: 992px){
  .box{width: 468px;}
  .box>div:nth-child(2),.box>div:nth-child(4){margin-right: 0;}
}

/*移动端*/
 @media screen and (max-width: 768px){
   .box{width: 307px;}
}

② 多列 / 雪碧图 / 滑动门

多列：将文本分成多列显示multi-column
column-count: 3;
column-gap: 30px;
column-rule: 2px solid red;

雪碧图：CssSprite工具
background-image: url("img/img.png");
background-position: -262px 0;

滑动门：适应元素内部的文本内容
a{
   display: inline-block;
   height: 33px;   /*千万不能设置宽*/
   background: url("img/lTcb_ve.png") no-repeat;
   padding-left: 15px;
}
a  span{
   display: inline-block;
   height: 33px;
   background: url("img/lTcb_ve.png") no-repeat  right;
   padding-right: 15px;
}
<a href="#">
   <span>首页</span>
</a>

③ 搜索框 + iconfont 布局

<li class="search">
   <input type="text"/>
   <button  class="iconfont">&#xe6e4;</button>
</li>
.search>input{
    width: 243px;height: 48px;border: 1px solid #e0e0e0;float: left;
    border-right: none;
    outline: none;
    transition: all .3s;
}
.search>button{
    width: 50px;height: 50px;border: 1px solid #e0e0e0;float: left;font-size: 20px;
    background-color: #fff;
    font-weight: bold;
    outline: none;
    transition: all .3s;
}
.search>button:hover{
    background-color: #ff6700;color: #fff;border-color:  #ff6700;
}
.search>input:focus,.search>input:focus+button{
    border-color:  #ff6700;
}