＜＜ Ｗｅｂ ＞＞ 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的语法地址：http://www.w3cplus.com/tools/emmet-cheat-sheet.html
http://www.w3cplus.com/tools/emmet-cheat-sheet.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
链接：a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */
图像
<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