emmet的html和css使用技巧大全

emmet html使用技巧大全

! 初始化

>:后代
+:兄弟
^:向上
*:乘法
$:数字
():分组
#:id命名
.:类命名

一、id,类命名
p#info
p.info
a[href=#]

二、后代:
div#wrap>ul>li*10

三、兄弟:
div#wrap>p.one + span.two

四、向上提升一行:^
ul>li*10^ol>li*6

五、数字缩写:$
ul>li.item$*3

六、多个数量:*
ul>li.item$*3

七、分组:()
(div.foo>h1>p)+(div.bar>h3>p)

####################

emmet css使用技巧大全
1. w100 -- width:100px;

2. h5p -- height:5%;

3. oh / ovh /ov-h -- overflow:hidden;
zm1 -- zoom:1;

4. o0 -- opacity:0;
op+ -- opacity: ;
filter:alpha(opacity=);
op:ie -- -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

5. db -- display:block;
dib -- display:inline-block;

6. trf -- transform各种兼容
trf:sc -- transform:scale();
trs -- transition
bdrs -- border-radius及各种前缀
bxsh -- box-shadow

7. bdb -- border-bottom
bdt -- border-top
bdl -- border-left
bdr -- border-right

8. fz -- font-size
fw -- font-weight
fw400 -- font-weight:400;
ff -- font-family

9. m-10-2-0-12 -- margin:10px 2px 0 12px;

10. c#0 -- color:#000;
cra -- color: rgba(0,0,0.5);

11. bd1-s-red -- border:1px solid red;
bd+ -- border: 1px solid #000;
bdb+ -- border-bottom: 1px solid #000;

12. m0-auto-0 -- margin:0 auto 0;

13. lh1.6 -- line-height:1.6;
vam -- vertical-align:middle;
tac -- text-align: center;
td -- text-decoration:none;
tdu -- text-decoration:underline;
ti -- text-indent

14. z10 -- z-index:10;

15. bg -- background
bgc -- background-color
bgsz:cv -- background-size:cover;
bg+ -- background:#fff url() 0 0 no-repeat;

16. pos: a -- position:absolute;
pos: r -- position: relative;
pos: f -- position: fixed;

17. fl -- float:left;
fr -- float:right;

18. curp -- cursor: pointer;

原文地址:https://www.cnblogs.com/htmlphp/p/12038453.html

时间: 2024-11-05 11:56:38

emmet的html和css使用技巧大全的相关文章

CSS hack技巧大全

CSS hack技巧大全[转]:http://www.duitang.com/static/csshack.html 常用CSS书写技巧和CSS HACK技巧[转]:http://www.cnblogs.com/pittzh/archive/2009/07/23/1529769.html

转 part2 —— CSS hack技巧大全

--作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 IE8 FF Opera Sarari [*+><] √ √ X X X X _ √ X X X X X \9 √ √ √ X X X \0 X X √ X √ X @media screen and (-webkit-min-device-pixel-ratio:0){.bb{}} X X X X

CSS布局技巧大全

参考资料:http://www.imooc.com/article/2235 单列布局 水平居中 父元素text-align:center;子元素:inline-block; 优点:兼容性好: 不足:需要同时设置子元素和父元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

Web之CSS开发技巧: CSS 居中大全

<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文字,inline 元素,配合 display:table ,display:table-cell,有奇效. line-height 与 height 联手,垂直居中文字 margin:auto 示例: <style> #ex2_container { width:200px; background

HTML标签的命名/CSS标准化命名大全

在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便.许多新手朋友在设计一个HTML文件时,可能只会依据自己的想法随便给一些简单的名称,但若是一味的乱起名称,不仅会让团队的伙伴看不明白,还会导致标签名称混乱,这样会使得代码维护十分困难,是非常不利于管理的.所以我们在设计整个网站,还是一个单独的HTML页面,都应该要有良好的命名规则.在本文中,主要讲解CSS命名规则,这也包括了对HTML标签命名. 文

Emmet的高级功能与使用技巧

前端开发工具Emmet的介绍,Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途,编写HTML代码和CSS样式,今天再来介绍下Emmet的一些高级功能和使用技巧.编写好HTML和CSS代码时,我们也需要修改或添加一些内容,Emmet提供了很多非常独特的工具,可以大大提高编辑体验,下面我们挑选几个常用的功能来介绍.萨龙龙发现在sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不一样,这时我们就要修改Emmet快捷键或者查找在su

CSS颜色代码大全

CSS颜色代码大全 颜色代码表(一): EEEEEE FFCCFF FF66FF FF00FF DDDDDD FFCCCC FF66CC FF00CC CCCCCC FFCC99 FF6699 FF0099 BBBBBB FFCC66 FF6666 FF0066 AAAAAA FFCC33 FF6633 FF0033 999999 FFCC00 FF6600 FF0000 888888 CCCCFF CC66FF CC00FF 777777 CCCCCC CC66CC CC00CC 666666

Photoshop技能167个经典的Photoshop技巧大全

Photoshop技能167个经典的Photoshop技巧大全 学PS基础:Photoshop 技能167个­ 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平.绝对不是广告噢. ­ 1. 快速打开文件­ 双击Photoshop的背景空白处(默认为灰色显示区域)即可打开选择文件的浏览窗口.­ 2. 随意更换画布颜色­ 选择油漆桶工具并按住Shift点击画布边缘,即可设置画布底色为当前选择的前景色.如果要还原到默认的颜色,设置前景色为25%灰度 (R19

Mac预览怎么用 Mac预览功能实用技巧大全

Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具,接下来Pc6苹果小编给大家详细介绍一下Mac预览功能实用技巧. 目前的 Mac 预览程式可以支持 TIFF. PNG. JPEG. GIF. BMP. PDF 等主要文件格式的浏览与编辑,而单纯预览上也可以支持像是 Photoshop 等专业图像处理软件. Office 等专业文书处理软件所产生的特殊文件格