HTML标签的应用(新手)
雪碧图(精灵图):
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标签的应用(新手)的更多相关文章
- H5新标签(适合新手入门)
H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...
- 新手前端笔记之--初识html标签
接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...
- 【python小随笔】python 解析xml数据的新手大坑>>抓取多重标签,遍历各标签的数据
xml文档: <GetMatchingProductResult ASIN="B071LF9R6G" status="Success">...< ...
- 使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解(新手必学)
为大家介绍下Python爬虫库BeautifulSoup遍历文档树并对标签进行操作的详细方法与函数下面就是使用Python爬虫库BeautifulSoup对文档树进行遍历并对标签进行操作的实例,都是最 ...
- VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂,适合新手
1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
- VUE3 之 使用标签实现动画与过渡效果(下) - 这个系列的教程通俗易懂,适合新手
1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...
- Vim新手入门资料和一些Vim实用小技巧
一些网络上质量较高的Vim资料 从我07年接触Vim以来,已经过去了8个年头,期间看过很多的Vim文章,我自己觉得非常不错,而且创作时间也比较近的文章有如下这些. Vim入门 目前为阿里巴巴高级技术专 ...
- 【译】Unity3D Shader 新手教程(1/6)
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D ...
- 我所理解的ECMAScript、DOM、BOM---写给新手们
像很多新手一样,我知道js有三部分组成,即ECMAScript.DOM.BOM三部分组成,ECMAScript是核心解释器.DOM(Document Object Model)是文档对象模型.BOM( ...
随机推荐
- 安装完MySQL数据库,在服务列表里找不到MySQL的解决办法
安装MySQL数据库完成后,在控制面板的服务列表里找不到MySQL服务启动项解决方案:(参考以下命令)1.打开cmd,切换到mysql的bin目录下 (dos命令切换目录||1.cd\ 返回到根目录, ...
- 西部数据出现“WD SES Device USB Device”怎么办,而且说明书全是英文。
您好.wd ses device driver这个驱动程序可以在baidu中输入关键词找到,什么驱动之家.驱动人生之类的专业驱动网站也都是有的. western digital的移动硬盘驱动程序安装步 ...
- CentOS 6.6 安装 PHP Memcached 扩展
PHP 的 Memcached扩展使用了 libmemcached 库提供的 api 与 memcached 服务端进行交互.它同样提供了一个 session 处理器(memcached). PHP ...
- IOS 单例模式的写法
iOS的单例模式有两种官方写法,如下: 1)不使用GCD的方式 #import "Manager.h" static Manager *manager; @implementati ...
- Synergy 鼠标和键盘共享软件
http://symless.com/nightly Synergy 正可以让你的多台电脑共享一套键鼠,甚至还可以共享剪贴板,如同一机多屏,并跨平台支持 .
- java中PriorityQueue优先级队列使用方法
优先级队列是不同于先进先出队列的另一种队列.每次从队列中取出的是具有最高优先权的元素. PriorityQueue是从JDK1.5开始提供的新的数据结构接口. 如果不提供Comparator的话,优先 ...
- ASP.NET Page执行顺序【转】
一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...
- sql cross join table
A 表数据如下图所示 B表数据如下图所示
- discuz安装
1.upload文件复制到根目录下,访问,安装 2.数据库需要提前建好 3.数据库地址默认是localhost,我安装时是127.0.0.1 4.最好在本地安装时,配置本地域名和线上域名一样,不然迁移 ...
- mongoose升级后遇到的问题
由于想在mongoose中使用Q,所以将mongoose升级到了4.1.0,而线上mongoDB的版本是2.6.7,升级的时候,node-modules存在mongoose的残渣,所以调用 npm i ...