1. 学成网 页面制作
目标
- 理解
- 能够说写单页面我们基本的流程
- 能说出常见的css初始化语句
- 能说出我们CSS属性书写顺序
- 应用
- 能利用ps切图
- 能引入外部样式表
- 能把psd文件转换为html页面
学成在线的目的就是为了串联前面的所有知识。
1.1 前期准备素材
- 学成在线PSD源文件
- 开发工具 = PS(切图) + sublime(代码) + chrome(测试)
1.2 前期准备工作
欲先善其事,必先利其器。 先把我们的前期准备工作做好, 我们本次采取结构与样式相分离思想。
- 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
- study目录内新建images 文件夹 用于保存图片。
- 新建index.html 首页html 文件(以后我们的网站首页统一规定为index.html)
- 新建style.css 样式文件。 我们本次采用外链样式表。
- 将样式引入到我们HTML页面文件中。
- 样式表写入 清除内外边距样式,来检测样式表是否引入成功。
1.2 CSS属性书写顺序(重点)
建议遵循以下顺序:
- 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;