黑马程序员技术交流社区

标题: 前端技术贴 [打印本页]

作者: 姜会明 时间: 2019-3-18 19:26
标题: 前端技术贴
通过在黑马的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]

  浮动.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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2