盒子阴影

box-shadow{ h-shadow: px;(阴影水平距离) v-shadow: px;(阴影垂直距离) blur: px;模数程度 spread: px; 模糊区域大小 color: ;(阴影颜色) 可加上inset(阴影放在图形内部) 复合写法: box-shadow{ h-shadow v-shadow hurl spread color}

hover的应用

div-hover{ }(当鼠标经过div盒子时发生改变)

文字阴影

text-shadow{ h-shadow v-shadow hurl spread color}(和box-shadow相同)

圆形边框

border-radius: px; (输入的像素 为 方形盒子四个角弧度圆形的半径,半径越大弧度越大) 1.圆形的制作: border-radius为 方形边长的一半 2.圆矩形 border-radius为矩形短边的一半

3.不规则角 border-radius{ 左上角px 右上角px 右下角px 左下角px }

/ // / // / // / / /

浮动

网页布局方法 1标准普通流/文档流: 块级元素独占一行从上向下 行级元素从左往右排列

浮动和定位

浮动的特性 1.脱离标准流,移动到指定的位置 2.不再保留原来的位置,被其他标准流占用 3.浮动的盒子都是在一行显示 4.float可以让元素具有行内块元素的特性:如果没有指定宽度 就会随着内容增减宽度

浮动布局方法

常常和标准流父级相结合: 先用标准流排列上下位置,再用浮动将盒子放在父级盒子中