右下角聊天窗 下拉菜单 手风琴效果

1.右下角广告：

h3
span关闭
textarea
input

2.下拉菜单：

先写个横向导航（ul li加左浮动）
在每个li中定义一个div，再在div里写几个p标签
给div加css属性：display：none；
li:hover div{
    display: block;
}
li div{
    background
}
    display（显示方式）;
        block(块级)
        inline-block（行内块级）
        inline（行内）
        none（不显示）不占空间
        +表示下一个兄弟

3.手风琴效果

li{
    height:
    float:left;
    width:100px;
}
ul；hover li{
    width:100px;
}
li；hover{
    width:800px;
}

4.css3新增属性，没标准之前都要写五遍

1.-moz-border-radius:
  -o-
  -ms-
  -webkit-
  border-radius:
2.box-sizing:border-box;
3.字体@font-face{
    font-family:webfont;
    src:url(../font/xxx.otf)
}
4.text-shadow(文字阴影):x方向的偏移量 y方向的偏移量 模糊 颜色
  box-shadow:x方向的偏移量 y方向的偏移量 模糊 大小 颜色 内/外阴影
  可以写两个偏移量，用“，”隔开
5.overflow:auto/hidden/scroll(滚动条)/visible/
  text-overflow:ellipsis(多出的文本以省略号显示)/clip(裁切)
  white-space:nowrap;(不换行 )
  三个得一起写。
6.background-image:(渐变)linear-gradient(to top/to left/...,red,yellow);线性渐变  
                         radial-gradient(red,yellow);圆形渐变
7.background:url(),url(),..添加多个背景图像，渐变可以写在逗号后面
8.background-clip:padding-box;裁切
  background-origin:padding-box/content-box;设置起始点
  background-size:20px;设置背景图像的尺寸，设置一个值是等比例缩放
9.border-image:url() 30上边距 25右边距 下边距 左边距 fill;边框图像
  border-width:30px；选最大边距。
  display:inline-block（行内块级）

5、属性选择器：

input[type=text]{
}
input[type=button]{
}