CSS

层叠样式表简称CSS，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页元素进行格式化

5css

• ps切图
  • 常见图片格式
    • jpg
    • gif
    • png
    • psd
  • 切图方式
    • 图层切图
    • 切片切图
    • ps插件插图
• 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 …
• 学成在线页面制作
  • 前期准备素材
    • psd源文件+开发工具
      • 开发工具：PS（切图） + sublime（代码） + chrome（测试）
  • 前期准备工作
    • 建目录 和 文件
  • 页面布局整体思路
    • 1.必须确定页面的**版心**（可视区），我们**测量**可得知。 2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则. 3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则 4.制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要. 5.所以, 先理清楚**布局结构**,再写代码尤为重要. 这需要我们多写多积累.
  • 页面制作
    • **确定版心**：
      • .w { width: 1200px; margin: auto; }
    • header头部制作
      • - 1号是版心盒子 **header** 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。 - 版心盒子 里面包含 2号盒子 **logo** 图标 - 版心盒子 里面包含 3号盒子 **nav** 导航栏 - 版心盒子 里面包含 4号盒子 **search** 搜索框 search 搜索框的意思: 一个 search 大盒子里面包含 2个 表单。技巧：input和button都，属于行内块元素，会有缝隙，使用浮动，可以去缝隙。 - 版心盒子 里面包含 5号盒子 **user** 个人信息 - 注意，要求里面的 **4个子盒子 必须都浮动**
        • **导航栏注意点:** 实际开发中，**重要的导航栏**，我们不会直接用链接a ，而是**用 li 包含链接(li+a)的做法**
    • banner制作
      • subnav
      • course课程模块
    • 精品推荐小模块
    • 精品推荐大模块
    • 底部模块制作