一丶
我的网盘:
链接:/s/1m4S3wdKNnPxgY-CpZHLQyw&shfl=sharepset
提取码:mxu1
—————————————————————————————————————————
二丶
环境安装与配置
1.安装Sublimetext3、添加Emmet插件;
(1)安装Sublimetext3安装包,打开Sublimetext3界面–Ctrl+F打开输入框,在界面底部的输入框中把以下代码复制进去–回车符。
import urllib.request,os; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen( ‘/’ + pf.replace(’ ‘,’%20’)).read())
(2)等1分钟后,重启Sublimetext3。
(3)同时按下Ctrl+Shift+P键。弹出如下对话框,点击Install Package
(4)等待几秒后再弹出如下内容,敲键盘emmet,选择如下:
(5)在 Emmet 安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启 Sublime Text 3。
(6)测试。新建页面,输入ul#test>li*4,按下tab键或者Ctrl+e显示如下:
至此,Emmet插件安装成功。
(6)在sublimetext3 下安装JavaScript提示插件。同时按下Ctrl+Shift+P键,点击Install Package,过几秒后在输入框中输入SublimeCodeIntel,等待安装成功,重启sublimetext3。
(7)在sublimetext3 下安装bootstrap提示插件。同时按下Ctrl+Shift+P键,点击Install Package,过几秒后在输入框中输入bootstrap显示如下,选择bootstrap 4 Snippets。装完重启。
2.在Sublimetext3下编辑JavaScript代码,并在火狐浏览器中观察执行:
(1)
(2)
3.如何在火狐浏览器中执行程序。
(1).安装火狐浏览器,并为火狐浏览器装上firebug和Html Validate插件。
几个学习网站:
/
/bootstrap/bootstrap-tutorial.html
/
/
—————————————————————————————————————————
三丶
sublime软件使用Emmet插件快速编写CSS样式
基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin。而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如:
fl → float: left;
而在编写这些CSS样式时,有很多是我们想好的写法,但生成的不是你想要的,比如position: absolute;,我们会输入pa,生成的就不是position: absolute;,这时我们可以:
poa → position: absolute;
一些用-连接的CSS样式和属性值,都可以取首字母:
whscbs → whitewhite-space-collapse:break-strict;
输出默认的CSS样式+,用+操作符,比如:
bg+ → background: #fff url() 0 0 no-repeat;
参数别名,Emmet为几个常用的单位值提供了别名:
p → %
e → em
x → ex
你可以使用别名代替完整的单位:
w100p → width: 100%
m10p30e5x → margin: 10% 30em 5ex
颜色值,Emmet支持十六进制的颜色值:
c#3 → color: #333;
#是一个值分离器,所以不需要使用连字符分隔它,例如:
bd5#0s → border: 5px #000 solid:
你可以写一个,两个,三个或六个字符颜色值,Emmet都会正确解析为十六进制的颜色值:
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
属性值没有单位的CSS缩写:
lh2 → line-height: 2;, fw400 → font-weight: 400;
这些CSS属性有:
z-index, line-height, opacity and font-weight
!important 修饰符的写法:
在我们编写好了CSS样式,需要添加!important时,只需要在后面输入!(!前需要有空格,因为这是在CSS样式基础上),再按Tab键即可:
float: left !; → float: left !important;
在编写Emmet代码时需要添加!important,我们可以这样写:
fl! → float: left !important;
p6! → padding: 6px !important;
对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:
m4-6 → margin: 4px 6px;
p4-6-8 → padding: 4px 6px 8px;
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,而@font-face的结构是比较复杂,有background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性,用Emmet编写可以让它变得相当的简单,快速,只需输入@f+即可生成:
@font-face {
font-family: ‘FontName‘;
src: url(‘FileName.eot‘);
src: url(‘FileName.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘FileName.woff‘) format(‘woff‘),
url(‘FileName.ttf‘) format(‘truetype‘),
url(‘FileName.svg#FontName‘) format(‘svg‘);
font-style: normal;
font-weight: normal;
}
前缀:
CSS3一些新的特性对于我们前端开发人员是一个重要的更新,用几行代码就可以实现强大的功能,这是之前的CSS样式不可能实现的。但这也是一种痛苦,对于不同的浏览器我们需要多次写相同的样式。[/slidenormal]
Emmet的CSS解析器有一个很好的功能,可以大大改善为了解决浏览器兼容性而多次写的属性。例如圆角属性,-bdrs4就可生成:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
对于一些前缀,Sublime Text中也内置了一些属性的前缀,比如输入trf即可得到:
-webkit-transform: |;
-moz-transform: |;
-ms-transform: |;
-o-transform: |;
transform: |;
在Emmet中,在任意两个字符前面添加-操作符,都可以生成带前缀的属性值,比如-float-d:
-webkit-float-d: |;
-moz-float-d: |;
-ms-float-d: |;
-o-float-d: |;
float-d: |;
CSS3一个新的、也相当重要的特性是渐变,渐变的属性值又比较复杂,如果再兼容所有的浏览器,代码量是相当大的。而Emmet有一个CSS3渐变的解析器,可以帮我们把这项复杂的工作快速的完成:
lg(left #f90 20% red)
将生成:
background-image: -webkit-gradient(linear, 0 0, 100% 0, );
background-image: -webkit-linear-gradient(left #f90 20% red);
background-image: -moz-linear-gradient(left #f90 20% red);
background-image: -o-linear-gradient(left #f90 20% red);
background-image: linear-gradient(left #f90 20% red);
在lg()括号中需要有值,不然Emmet会解析成left: ;。
CSS3 更新属性值
background:-webkit-linear-gradient(#f6f8fc,#e6ecf5,#d8e0ee); /* Safari 5.1 - 6.0/
background: -moz-linear-gradient(#f6f8fc,#e6ecf5,#d8e0ee); /Firefox 3.6 - 15/
background: -ms-linear-gradient(#f6f8fc,#e6ecf5,#d8e0ee); /ie/
background: -o-linear-gradient(#f6f8fc,#e6ecf5,#d8e0ee); /Opera 11.1 - 12.0/
background: linear-gradient(#f6f8fc,#e6ecf5,#d8e0ee); /标准的语法 */
更改background里面linear-gradient的第一个属性值#f6f8fc 改成#f65cc2 按住ctrl+shift+r 会更新另外几行数据
background:-webkit-linear-gradient(#f65cc2, #e6ecf5, #d8e0ee); /* Safari 5.1 - 6.0/
background: -moz-linear-gradient(#f65cc2, #e6ecf5, #d8e0ee); /Firefox 3.6 - 15/
background: -ms-linear-gradient(#f65cc2, #e6ecf5, #d8e0ee); /ie/
background: -o-linear-gradient(#f65cc2, #e6ecf5, #d8e0ee); /Opera 11.1 - 12.0/
background: linear-gradient(#f65cc2,#e6ecf5,#d8e0ee); /标准的语法 */
Emmet编写CSS样式还有很多需要注意的地方,而写出来比较困难,到官方网站看看CSS样式的缩写,会更明白。
—————————————————————————————————————————
四丶
emmet(快速开发)的使用
emmet可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。
一、比如、、等,现在你只需要1秒钟就可以输入这些标签。
比如输入“!”或“html:5”,然后按Tab键或ctrl+e:
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型
二、快速写出嵌套代码
+:同级标签符号^:可以使该符号前的标签提升一行:子元素符号,表示嵌套的元素
三、快速定义多个元素
输入a*3 按tab,会自动生成
四、快速定义多个带属性的元素
输入div.item$*3 按tab,会自动生成
———————————————— 五、输入表达式(.foo>h1)+(.bar>h2)按tab或者ctrl+e即可生成下面的代码:
emmet还支持表达式