看别人的代码学习的css

<ul class='y1'>
      <li><a href="#">菜单</a></li>
      <li><a href="#">导航</a></li>
      <li><a href="#">足球</a></li>
      <li><a href="#">篮球</a></li>

</ul>

这里我看别人写的时候，给li , a都给padding.

这里我们可以看到：

但是我们给a背景色，这样子的话，点击的没有文字的背景色其他部分，也有跳转的效果。

=============================================

=============================================

=============================================

img 和background的区别

img 如果width:100%;高度自适应的话，按图形的比例显示；

如果用background的话：

background: url(../../images/01.jpg) 50% 50% no-repeat;
-webkit-background-size:100%;
background-size:cover;

cover确保他的宽度和高度按比例填充满图像的父元素。

#showcase{
background: url(../../images/0.1jpg) 50% 50% no-repeat;
-webkit-background-size:100%;
background-size:cover;
}
下面的这种写法就可以覆盖。
#showcase{
background: url(../../images/01.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size:100%;
background-size:cover;
}
@media (max-width:480px){
#showcase{
background: url(../../images/01s.jpg);
}
}

@media (max-width:480px) and (min-resolution:2dppx),(max-width:480px) and (-webkit-min-device-pixel-ratio:2){}

前面的一个判断像素密度的方法，因为谷歌的老版本可能识别不了， 所以用后边的。

===========================================

===========================================

===========================================

三个span分别用于不同的屏幕

第一个用于，大屏pc的浏览器。

第二个用于，小屏的pc的浏览器。

第三个用于，d