zoukankan      html  css  js  c++  java
  • 看别人的代码学习的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 如果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-480px){
    #showcase{
    background: url(../../images/01s.jpg);
    }
    }

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

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

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

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

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

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

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

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

    第三个用于,d

  • 相关阅读:
    NEO从入门到开窗(4)
    NEO从入门到开窗(3)
    NEO从入门到开窗(2)
    NEO从入门到开窗(1)
    重读大型网站技术架构
    c#并行编程
    关于使用CPU缓存的一个小栗子
    Visual Studio中从应用程序中调试SQL脚本
    JavaScript启示录
    LabVIEW工控二进制数据存储
  • 原文地址:https://www.cnblogs.com/coding4/p/5544958.html
Copyright © 2011-2022 走看看