雪碧图（精灵图）：
sprite
compass-合并（尽量宽高相同）

兼容性：
1.resct重置技术：normalize技术
2.加前缀：-webkit- -moz- -0- -ms-
3.<!DOCTYPE>解析模式
4.css hack 不同浏览器显示不同的页面内容
5.条件注释<LTE...><GTE...>
6.导入包（引入）

------------------------------
1.模糊度：opality(0-1) filter(0-100) -----IE
2.PNG图片-导包插件
3.圆角-导包图片
4.BFC-*ZOOM=1<IE触发BFC> haslayout技术
5.双倍margin的兼容性
6.IE下有3PX的差距
7.font-size 10px 一下审查元素IE最小8px
8.条件注释写在head部分

JS-naviegtor-判断浏览器的版本

SASS:（C盘下都不能为中文，文件也不能为中文）
$变量名：值
默认变量值：！default
无参数混合：@mixin名称{声明}
有参数的混合：@mixin_($opacity:50){声明}

bootstrap框架;屏幕分辨率为1024*768采用界面宽960px
1.栅栏式布局法
-------------------------------
12列 每格60px 3.6.3布局 三格式布局
16列 每格40px 3.3.6.4 四格式布局
24列 每格30px
36列
---------------------------------------------
container容器
下载解压后得到的目录 .min压缩版
bootstrap/css-js-font
------------------------------------
移动端
《meta name="vieport" content="width=device-width;initial-scale=1.0》
加尾后user-scalable=no 禁用放大缩小页面
页面1：1引用手机设备
bootstrap.html
1.在head中link引入<bootstrap.min.css>
2.<meta name="vieport"
3.<script src="../js/jquery-1.11.2-min.js"></script>
4.<script src="../js/bootstrap.min.js"></script>
5.<html lang="zh-CN"
禁用响应式布局
head中不要添加meta vieport

栅栏选项

手机 平板 桌面 超宽桌面
12列 <768px >=768px >=992px >=1200px
class前缀 .col-xs- .col-sm- .col-md- .col-lg-
槽间距 30px左右均有15px每列

bootstrap:
css响应式布局-----手机-----平板-------桌面------超宽
自适应 国外：自适应响应式布局

@media 媒体查询
scree(width:值)
屏幕 768px

Bootstrap(值为rem）
针对APP端字体大小

1px=1px
1em=16px(浏览器默认值）
1rem=16px

em相对body会继承
rem相对的是根元素HTML不会继承
让字体进行自适应

HTML{font-size:20px}

@media媒体查询
PC端
@media screen and (min-width:992px){CSS}
平板
@media screen and (min-width:768px)and (max-width:991px){css}
APP
@media screen and (max-width:767px){css}

HTML标签的应用（新手）的更多相关文章

  1. H5新标签(适合新手入门)

    H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...

  2. 新手前端笔记之--初识html标签

    接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...

  3. 【python小随笔】python 解析xml数据的新手大坑>>抓取多重标签，遍历各标签的数据

    xml文档: <GetMatchingProductResult ASIN="B071LF9R6G" status="Success">...< ...

  4. 使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解（新手必学）

    为大家介绍下Python爬虫库BeautifulSoup遍历文档树并对标签进行操作的详细方法与函数下面就是使用Python爬虫库BeautifulSoup对文档树进行遍历并对标签进行操作的实例,都是最 ...

  5. VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手

    1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...

  6. VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手

    1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...

  7. Vim新手入门资料和一些Vim实用小技巧

    一些网络上质量较高的Vim资料 从我07年接触Vim以来,已经过去了8个年头,期间看过很多的Vim文章,我自己觉得非常不错,而且创作时间也比较近的文章有如下这些. Vim入门 目前为阿里巴巴高级技术专 ...

  8. 【译】Unity3D Shader 新手教程(1/6)

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D ...

  9. 我所理解的ECMAScript、DOM、BOM---写给新手们

    像很多新手一样,我知道js有三部分组成,即ECMAScript.DOM.BOM三部分组成,ECMAScript是核心解释器.DOM(Document Object Model)是文档对象模型.BOM( ...

随机推荐

  1. demo工程的清单文件及activity中api代码简单示例

    第一步注册一个账户,并创建一个应用.获取app ID与 app Key. 第二步下载sdk 第三步新建工程,修改清单文件,导入相关的sdk文件及调用相应的api搞定. 3.1 修改清单文件,主要是加入 ...

  2. isset 和empty 两个函数的用法

    关于用php 获取当前脚本的url很多朋友会说很简单,但是要获取很详细的就要经过多次判断哦. $PHP_TIME = time();$PHP_SELF = isset($_SERVER['PHP_SE ...

  3. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  4. DevExpress GridView加入DevExpress中的右键菜单PopuMenu

    1. 添加一个Barmanager控件 2. 加入popumenu控件,点击该控件右上角的黑色三角号,编辑选项,点击编辑的选项,选择事件,编辑事件. 3. 在使用该右键菜单的控件添加MouseUp事件 ...

  5. 【ionic】微信表情设置教程

    NO.0 前提你的下载我的App :超级逗表情 Andorid:http://fir.im/chaojidbq Ios:https://github.com/apanly/chaojidbq (源码, ...

  6. [archlinux][hardware] 查看SSD的使用寿命

    因为最近把16GB的SSD做成了HDD的cache,所以比较关系寿命问题. 使用smartctl工具. 参考:https://www.v2ex.com/t/261373 linux 下面只有 smar ...

  7. JBoss和Tomcat版本、及Servlet、JSP规范版本对应一览 【转】

    原文地址:http://blog.csdn.net/hills/article/details/40896357 JBoss和Tomcat版本.及Servlet.JSP规范版本对应一览 JBossAS ...

  8. Android百分比布局支持库介绍——com.android.support:percent（转）

    转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...

  9. PRAGMA AUTONOMOUS_TRANSACTION

    转自 http://blog.csdn.net/pan_tian/article/details/7675800 这段时间遇到一个问题,程序里明明插入了一条记录,但在后边的一段Procedure中却查 ...

  10. DNS视图以及日志压力测试

    1    访问控制列表 配置在/etc/named.conf文件的最顶端    acl innct {        192.168.1.0/24;        127.0.0.0/8;    }; ...