通过在黑马的10多天的学习，终于对html和css的应用更加了解了。为了加深大家的印象我把课堂上做的笔记分享出来。

表单控件&

input控件（单标签）

[size=18.6667px]placeholder   用于给密码框做提示信息

[size=18.6667px]value     提示信息

[size=18.6667px]nama      区别表单

[size=18.6667px]radio     单选按钮

[size=18.6667px]checkbox    复选按钮

[size=18.6667px]checked    默认选中状态

[size=18.6667px]按钮

[size=18.6667px]button   普通按钮

[size=18.6667px]submit   提交按钮

[size=18.6667px]reset   重置按钮

[size=18.6667px]image   图像提交

[size=18.6667px]file   文件按钮

[size=18.6667px]

[size=18.6667px]

[size=18.6667px]

[size=18.6667px]

  浮动.box1 {    width: 200px;    height: 200px;    background-color: rgba(255, 0, 0, 0.5);    float: left;}.box2 {    width: 150px;    height: 300px;    background-color: skyblue;}
伪元素清除浮动 1.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}  2.clearfix:before,.clearfix:after {   content:"";  display:table; }.clearfix:after { clear:both;}.clearfix {  *zoom:1;}1. jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的2. gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果3. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。

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;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}



定位（position）

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

定位模式

是否脱标占有位置

移动位置基准

模式转换（行内块）

使用情况

静态static不脱标，正常模式正常模式不能几乎不用
相对定位relative不脱标，占有位置相对自身位置移动不能基本单独使用
绝对定位absolute完全脱标，不占有位置相对于定位父级移动位置能要和定位父级元素搭配使用
固定定位fixed完全脱标，不占有位置相对于浏览器移动位置能


类明：

• 项目文件夹：pinyougou
• 样式文件夹：css
• 脚本文件夹：js
• 样式类图片文件夹：img
• 产品类图片文件夹： upload
• 字体类文件夹： fonts
  
  

通过在黑马的10多天的学习，终于对html和css的应用更加了解了。为了加深大家的印象我把课堂上做的笔记分享出来。

表单控件&

input控件（单标签）

[size=18.6667px]placeholder   用于给密码框做提示信息

[size=18.6667px]value     提示信息

[size=18.6667px]nama      区别表单

[size=18.6667px]radio     单选按钮

[size=18.6667px]checkbox    复选按钮

[size=18.6667px]checked    默认选中状态

[size=18.6667px]按钮

[size=18.6667px]button   普通按钮

[size=18.6667px]submit   提交按钮

[size=18.6667px]reset   重置按钮

[size=18.6667px]image   图像提交

[size=18.6667px]file   文件按钮

[size=18.6667px]

[size=18.6667px]

[size=18.6667px]

[size=18.6667px]

  浮动.box1 {    width: 200px;    height: 200px;    background-color: rgba(255, 0, 0, 0.5);    float: left;}.box2 {    width: 150px;    height: 300px;    background-color: skyblue;}
伪元素清除浮动 1.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}  2.clearfix:before,.clearfix:after {   content:"";  display:table; }.clearfix:after { clear:both;}.clearfix {  *zoom:1;}1. jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的2. gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果3. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。

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;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}



定位（position）

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

定位模式

是否脱标占有位置

移动位置基准

模式转换（行内块）

使用情况

静态static不脱标，正常模式正常模式不能几乎不用
相对定位relative不脱标，占有位置相对自身位置移动不能基本单独使用
绝对定位absolute完全脱标，不占有位置相对于定位父级移动位置能要和定位父级元素搭配使用
固定定位fixed完全脱标，不占有位置相对于浏览器移动位置能


类明：

• 项目文件夹：pinyougou
• 样式文件夹：css
• 脚本文件夹：js
• 样式类图片文件夹：img
• 产品类图片文件夹： upload
• 字体类文件夹： fonts