今天开通了妙味课堂的VIP会员，首先学习了PS在网页设计中的应用，包括一些常用快捷键的使用，然后选择了sublime text 3作为我编写代码的工具。然后我根据今天的学习顺序总结一下知识点：
1、CSS样式有行间、内部以及外部，一般不用行间，工作中使用外部调用较多。
2、知道了background的一些样式，例如添加背景url（）、颜色、背景定位（X,Y）、是否重复（no-repeat）、固定和滚动（fixed和scroll），这些样式可以单独列出来每一行写，也可以写成一句（中间不用加分号）。
3、边框格式为：1px solid red（像素大小 线型 颜色）也可以对边框的上下作用进行单独设置，如border-top、border-left等。
4、切图获取的三种方式：包括设计师给的PSD稿、印屏幕以及在浏览器中按F12找到某个图片的位置，右键以新选项卡打开。
5、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 244px;
height: 289px;
background: white;
border: 1px solid black;
}
#content1{
height: 49px;
background: url(1.gif) no-repeat 21px 17px;
}
#content2{
height: 46px;
border-top: 1px solid #d6d6d6;
background: url(2.gif) no-repeat 21px 16px;
}
#content3{
height: 46px;
border-top: 1px solid #d6d6d6;
border-left: 2px solid #cc6932;
background: url(3.gif) no-repeat 19px 15px;
}
#content4{
height: 46px;
border-top: 1px solid #d6d6d6;
background: url(4.gif) no-repeat 21px 16px;
}
#content5{
height: 46px;
border-top: 1px solid #d6d6d6;
background: url(5.gif) no-repeat 22px 17px;
}
#content6{
height: 51px;
border-top: 1px solid #d6d6d6;
background: url(6.gif) no-repeat 21px 15px;
}
</style>
</head>
<body>
<div id="box">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="content5"></div>
<div id="content6"></div>
</div>
</body>
</html>做这种小案例时，最主要的就是结构，先用DIV划分清楚结构，再对每个DIV进行样式编写，注意的是width和height不包括border边框的宽度，写了border过后它是在原有的大小下在外面加一圈边框。