• CSS拾遗(二)


    接CSS拾遗(一)。

    4. 不透明度

                opacity: 0.8;
                filter: alpha(opacity=80);

      opacity: 0.8是标准的写法;filter: alpha(opacity=80)是IE6-9的写法,IE9之前不支持opacity。

    5. 链接样式顺序

      a:link, a:visited, a:hover, a:focus, a:active

      记忆口诀:love-hate,其中focus最好加上,表示用键盘移动到链接上时,与鼠标悬停一样的概念。

    6. line-height

      这个还是看《CSS权威指南》吧,相关的东西挺多的。

    7. 纯CSS提示工具

      通过定位技术,可以创建纯CSS工具提示。

    a.tooltip {
      position: relative;
    }
    
    a.tooltip span {
      display: none;
    }
    
    
    a.tooltip:hover span {
      display:block;
      position:absolute;
      top:1em;
      left:2em;
       8.5em;
      padding: 0.2em 0.6em;
      border:1px solid #996633;
      background-color:#FFFF66;
      color:#000;
    }
    
    </style>
    </head>
    
    <body>
    <p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>
    
    </body>

     8. 流式布局min-width、max-width理解

      使用流式布局时,尺寸是用百分数一类设置的,这使流式布局能够相对于浏览器窗口进行伸缩。流式布局也不是没有问题,

    在窗口宽度很小的时候,行变得非常窄,难以阅读。因此,有必要添加以像素或em为单位的min-width,从而防止布局太窄。

    .wrapper {
      width: 76.8%; 
      margin: 0 auto; 
      text-align: left;
      max-width: 125em;
      min-width: 62em;
    }

      对于图像,为了防止布局过大导致图像太大失真,可如下使图像不超过其原始尺寸。

            img {
                width: 80%;
                max-width: 646px;
            }

       也可仅使用max-width:xx%,使其一直占用父级固定比例的宽度,且不超过其原始尺寸。

      

     img {
                max-width: 80%;
            }

     9.@font-face

      @font-face让我们可以使用任何字体,而不需要考虑用户机器上是否安装了这种字体。

      

            @font-face {
                font-family: "My font";
                src: url(css/Myfont.otf);
            }
            /*然后,就可以引入字体;*/
            h1 {
                font-family: "My font";
            }

      

  • 相关阅读:
    基于poi的Excel文件导出(简单表头、固定模板)
    maven 程序包sun.plugin.util不存在
    基于poi的Excel文件导出(固定表头、固定模板)
    java.lang.NoClassDefFoundError: org/apache/poi/ss/usermodel/Workbook
    String字符串转List<JavaBean>
    spring项目打包,包含java下的各种配置文件
    代理客户端请求本地调试方法
    故障排除:"log file sync"等待 (文档 ID 1626301.1)
    package.json-属性详解
    excel 制作图加入latex
  • 原文地址:https://www.cnblogs.com/zhansu/p/6367530.html
Copyright © 2020-2023  润新知