zoukankan      html  css  js  c++  java
  • 浏览器兼容、雪碧图及less技术

    浏览器兼容性
    1,<!DOCTYPE>技术
    2,reset技术:normlizi技术
    3,加前缀: -webkit- -o- -ms-
    4,css hack技术
    5,条件注释
    6,导入包(导入插件)

    解决浏览器兼容的方法:
    1、opacity——falter(0~100)/
    2、png背景——导包(插件)
    3、圆角——导包图片
    4、BFC——zoom1(无限制 在ie下触发bfc环境)
    5、双倍margin兼容性问题
    6、IE下3px差距(像素差距)
    7、font-size设置为10px以下,然后查看审核元素(正常显示16px,火狐最小10px,一般的浏览器显示12px)

      

    js中-用navigator 去判断浏览器版本

    【haslyout】
    不同的浏览器显示不同的内容
    www.helv,org.com

    软件:IEtester
    使用方法新建IE个版本 一般选择IE6,IE7,IE8

    9
    hack技术

    雪碧图技术sprate(精灵图)应用的是:背景定位和背景图片
    雪碧图合并:compass(将页面上 来选取里面的某一张图)
    充分利用定位方式来写
    网站上用到的一些图片正合到一张单独的图片中,从而减少你的网站的http请求
    数量该图片使用css background和
    【图片雪碧图时,所有的图片宽高相同】
    默认显示第一张图片,后面会循环显示

    避开(关键字)less sass的名称
    less是一种扩展技术,基于css来的, 变量 ,混合(也叫mixin),函数 ,运算, 简化了css 的代码,降低维护成本,必须用到解析器,目前用的是考拉 后缀名是.less的文件 ,必须通过解析器然后供页面使用
    混合


    变量:值可变
    @nice-blue:#数字
    @变量名-变量值(名称随便取,只要自己看得懂就可以)

    1,新建文件夹;2建两个文件,分别是.html .less为后缀名的;3启动考拉;4,配置路径,+号打开文件夹;5,less里写文件,写一部分后考拉再刷新;6,生成用less命名的css 的文件 link只能引入css文件,les 也能引入css文件


    混合mixin
    针对.class id 元素选择器三种


    带参数的混合:.名称(参数)(属性名:参数) backgroundUrl(@url)
    给参数设默认值 border-radins:@length
    不带参数属性值 .名称(){声明}

  • 相关阅读:
    IIS Admin Service安装
    Linux常用命令总结
    Mysql常用命令操作小结
    mysql常用操作
    初识linux
    python基础
    接口测试基础
    MYSQL笔记
    mysql使用存储函数批量添加数据
    linux的基础命令(博客使用测试中 更新中)
  • 原文地址:https://www.cnblogs.com/duanfuying/p/5879439.html
Copyright © 2011-2022 走看看