＜＜web＞＞ Sublime /emmet /css

常用插件：Emmet:快捷输入html的插件

Sublime prefixr：css自动补全

Js format:js格式化

Sublimelinter:错误提示高亮

Sublime codeintel：代码自动提示

Bracket highlighter:括号匹配

Package control安装：按ctrl+~调出console,然后再粘贴一下代码

importurllib.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('http://sublime.wbond.net/'+pf.replace('
','%20')).read())
成功安装完后，在preference-packagecontrol，点击后能出现install package.

Package control安装插件的方法

Ctrl+shift+p-----install package----回车-----输入要安装的插件名称XXXXX

Emmet语法规则-----一种快速输入DIV 标签的工具

Emmet的语法地址：/article/1214440.html

/article/1214440.html

E

元素名称(div, p);

E#id

使用id的元素(div#content, p#intro, span#error);

E.class

使用类的元素(div.header,p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

E>N

子代元素(div>p, div#footer>p>span);

E+N

兄弟元素(h1+p,div#header+div#content+div#footer);

E*N

元素倍增(ul#nav>li*5>a);

E$*N

条目编号(ul#nav>li.item-$*5);

!

初始化

E#name\E.name

补全

{}

文字内容

.

Css代码

body{

padding:0;

margin:0;

background:#cbd4da;

font-size:12px;

}

/*播放器面板容器*/

.box{

width:320px;

margin:100px auto;

background:#fff;

border:solid 1px #979797;

border-radius:6px;/*制作圆角*/

box-shadow:0 0 5px 6px rgba(0,0,0,0.05);/*面板阴影*/

}

/*播放器面板头部*/

.boxt{

height:40px;

line-height:40px;

padding:0 16px;

}

.boxt .minitxt{

font-size:bold 14px Arial;

color:#7e97ab;

}

/*播放器面板左边按钮（仿mac窗口按钮效果）*/

.boxt .circle em{

display:inline-block;

background:#e4e4e4;

border:solid 1px #c7c9cb;

border-radius:8px;

width:12px;

height:12px;

margin-right:8px;

border:none;

border-radius:6px;

cursor: pointer;

}

/*关闭面板按钮*/

.boxt .circle .close{

box-shadow:inset0px 1px 1px rgba(83,11,8,.5);

background:-*-radial-gradient(top center, circle, #fff, #af2b24,#ec8e89);

}

/*面板最大化按钮*/

.boxt .circle .max{

box-shadow:inset 0px 1px 1px rgba(117,38,27,.5);

background:-*-radial-gradient(top center, circle, #fff, #ce712d,#fcdf7d);

}

/*面板最小化按钮*/

.boxt .circle .min{

box-shadow:inset 0px 1px 1px rgba(34,75,15,.5);

background:-*-radial-gradient(top center, circle, #fff, #74a94e,#bbdd83);

}

/*面板中间内容*/

.boxm{

border:solid 1px #dedede;

border-width:1px 0;

padding:20px 16px;

overflow:hidden;

}

/*面板播放按钮*/

.boxm .boxml{

float:left;

padding-top:5px;

}

/*面板控制按钮基本样式*/

.boxm .boxml .btn{

display:inline-block;

width:45px;

height:40px;

padding-top:5px;

border:none;

border-radius:25px;

text-align:center;

font-size:0;cursor:pointer;

box-shadow:inset 0 1px 1px rgba(100,100,100,.3);

background:-*-linear-gradient(top,#e6e6e6,#f2f1f1);

}

/*font face 制作icon*/

@font-face{

font-family:"playericon";

src:url(font/fontello.eot);

src:url(font/fontello.eot#iefix) format("embedded-opentype"),

url(font/fontello.woff) format("woff"),

url(font/fontello.ttf) format("truetype"),

url(font/fontello.svg) format("svg");

font-weight:normal;

font-style:normal;

}

.btn:after{

font-family:"playericon";

display:inline-block;

width:35px;

height:35px;

border:none;

border-radius:20px;

font-size:18px;

line-height:35px;

text-align:center;

box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);

background:-*-linear-gradient(top,#fff,#e9e9e9);

}

/*播放icon*/

.on:after{

content:"\25B6";

color:#475057;

}

/*停止icon*/

.stop:after{

content:"\25A0";

color:#cf6767;

}

/*中止icon*/

.pause:after{

content:"\2389";

color:#475057;

}

.btn:hover:after{

color:#19a6e4;

box-shadow:0 -1px 0px 1px #ccc;

}

/*面板时间部分*/

.boxm .boxmr{

font-family:Arial;

color:#666;

text-align:right;

overflow: hidden;

}

.boxm .taketime{

font-size:30px;

}

.boxm span{

display:inline-block;

padding:0 10px;

font-size:9px;

-webkit-text-size-adjust:none;

}

/*面板底部样式*/

.boxb{

height:40px;

line-height:40px;

padding:0 16px;

border-top:solid 1px #fff;

background:#eee;

font-size:14px;

font-family:Arial;

color:#999;

border-radius:6px;

}

.fr{float:right;}

CSS

背景的颜色backgroud:XXXXX

内嵌模块的位置margin:0 1,0代表上下，1代表左右。

Margin:1.all方向

Margin:1 2 3.上 ，左右，下

Margin:100 auto;上规定，左右均分。

宽度：width

边框：border : border-width || border-style || border-color

颜色方法：#000

#000033

Rbg(

Box盒子模型：box-shadow

Filer:滤镜

Liquid layout流式布局

字体:

font: font-style || font-variant || font-weight ||font-size || line-height || font-family

Font: caption | icon | menu | message-box | small-caption |status-bar

Em:?????

Display:inline默认blockinline-block.三种效果不一样。分别是内容和对象一起，分离等。

Cursor：光标类型

span行高：Line-height(不受限制)

em

链接：[code]a:link

{color: #FF0000} /* 未访问的链接 */[/code]

a:visited

{color: #00FF00} /* 已访问的链接 */[/code]

a:hover

{color: #FF00FF} /* 鼠标移动到链接上 */[/code]

a:active

{color: #0000FF} /* 选定的链接 */[/code]

图像

<img></img>

Align:left right bottom top middle

Width:100px/调整图像大小

Height:200px/调整图像大小

Alt:big/显示图像的文字

<a><img></a>:/图片链接

<map><area></area></map>/设置图片的链接

块元素

例子：<h1>, <p>, <ul>, <table>,<li>,<div>

内元素

例子：<b>, <td>, <a>, <img>

Bgcolor:背景颜色设置

水平线：</hr>

换行：</br>

表格

表头th

表格 td

标题 caption

<h4>横跨两列的单元格：</h4>

<table border="1">

<tr>

<th>姓名</th>

<th colspan="2">电话</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>横跨两行的单元格：</h4>

<table border="1">

<tr>

<th>姓名</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">电话</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

横跨两列的单元格：

姓名	电话
Bill Gates	555 77 854	555 77 855

横跨两行的单元格：

姓名	Bill Gates
电话	555 77 854
555 77 855

链接

<ahref="http://www.w3school.com.cn/" target="_blank">VisitW3School!</a>新窗口中打开

<ahref="/example/html/lastpage.html">

<img border="0"src="/i/eg_buttonnext.gif" />

border-radius