CSS基本概念

1> CSS网页布局：

    1.固定布局
    2.流动布局 （是百分百布局）
    3.弹性布局（可用于移动APP开发）

2> 定位

   1.相对定位（占位置）
   2.绝对定位（不占位置）
   3.固定定位 (不占位置）
   4.使用弹性盒子，让子元素绝对居中很好用
   
   相对定位和绝对定位使用较多，
   并且两者可以混合使用，
   一般是将绝对定位套进相对定位中使用，
   即给父元素使用相对定位，给子元素使用绝对定位。

3> 悬停伪类

   用属性：hover表示，当鼠标放置需要悬停的文字或图片上时，
   会显示出所设置的属性样式，如字体颜色，子集，背景色等等

4> 分享如何设计页面

---

一、框架
页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。

二、布局（以下用#ID表示页面元素）

将#Main里的内容分成几大块。#Main里典型的左右结构，我们用#Layout_1，#Layout_2表示

三、模块

   布局#Layout_1，#Layout_2里的块就是模块了，
   模块至少要有一个ID，Class则要视页面设计，给需要重用的加上。
   关于模块的ID名称，要取个有意义的名字，可以用#Col_1，#Col_2，。。。
   模块的Class名称用.cols_1，.cols_2，。。。

模块内部的如下图

四、列表和数据块

   模块的主体是由列表组成的，而列表里则包含数据块。
   按我的理解，页面上的信息其实就是不同类型的列表。
   我们应将典型的列表方式提取出来，放在公用样式里（public.css）。
   数据块其实是微格式的一个变相应用，给不同的数据元素定义固定的结构。

五、一些用于公共定义的ID和Class名称。

  1 #B-* // Body用
　　2 #Head, #Main, #Foot //布局用ID
　　3 #Message // 系统消息用
　　4 #Logo 图标, #Toolbar 工具条, #Search 搜索框, #Menu 菜单 // Head内元素
　　5 #Layout_*, #Group_*, #Col_* // Main内元素
　　6 #Links, #CopyRight // Foot内元素
　　7 #B*   // 广告位，与class=”b”结合使用
　　8 #Plugin // Banner用
　9 .txt, .btn, .label_checkbox, .label_input, .handle // 表单内元素
　　10 .meat // 模块主体元素
　　11 .list_*(.list_v, .list_h, .list-t, .list_top, …) // 列表元素，详见“列表”
　　12 .m  more// 更多，可延伸至“绝对定位于右上角”的元素
　　13 .s1, .s2, … // 用于子单元块需各自定义样式的元素，如菜单、排行榜等
　　14  .s // 特殊元素，如果一个元素相对于兄弟节点特殊，则用之
　　15 .b // 广告位
　　16 .p, .d, .d_*, .h // 数据块内元素，分别为图片、详细、详细内元素、操作
　　17 .handle // 操作元素
　　18 .m_*(.mVideo, .mComment, .mUser, .mSubject, …) // 数据块元素
　　19 .*_fix // *元素的补丁元素
  20  .current // 当前元素
  22  .new 最新
  23  .hot 热门