CSS页面制作-5

1. 学成网 页面制作

目标

• 理解
  • 能够说写单页面我们基本的流程
  • 能说出常见的css初始化语句
  • 能说出我们CSS属性书写顺序
• 应用
  • 能利用ps切图
  • 能引入外部样式表
  • 能把psd文件转换为html页面

学成在线的目的就是为了串联前面的所有知识。

1.1 前期准备素材

• 学成在线PSD源文件
• 开发工具 = PS（切图） + sublime（代码） + chrome（测试）

1.2 前期准备工作

欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。

1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
2. study目录内新建images 文件夹 用于保存图片。
3. 新建index.html 首页html 文件（以后我们的网站首页统一规定为index.html)
4. 新建style.css 样式文件。 我们本次采用外链样式表。
5. 将样式引入到我们HTML页面文件中。
6. 样式表写入 清除内外边距样式，来检测样式表是否引入成功。

1.2 CSS属性书写顺序(重点)

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
   
    display: block;
    position: relative;
    float: left;
    width: 100px;