1.position定位属性
四个定位方法,如下:
a.绝对定位absolute h2{
top:100px;
left:50px;
position:absolute;
}
b.相对定位 relative .h2-pos-right{
left:-20px;
position:relative; //相对正常范围的向右移动;
}
c.固定定位 p.two{
position:fixed;
top:30px;
right:5px;
}
d.z-index 结合position一起使用
代码如下:
z-index默认值为0;当z-index=-1时,优先级过低;z-index=1时,优先级过高;
img.x{
position:absolute;
left:0px;
top:0px;
z-index:1
}
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
2.阴影区域——shadow
a.文本阴影:text-shadow
b.元素块周边阴影:box-shadow
注意:box-shadow 存在浏览器兼容的问题,
//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Safariand Google chrome10.0-
-webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
3.文本垂直对齐时,采用两个属性
a.行高:line-height
b.高度:height
设置对齐时,a和b的值必须保持一致。
4.对checkbox复选框的大小设置,采用position定位模式
代码如下: input [type="checkbox"]{
top:5px;
left:0px;
width:18px;
height:18px;
font-size:18px;
position:absolute; //绝对定位;
}
5.cursor: pointer;
表示鼠标经过button时,会显示出手掌的形式。
6.写代码css时,需要注意将css样式进行简便式样的书写,即需要联合css代码
代码如下:*{
margin:0;
padding:0;
list-style-type:none;
}
7.写样式表时,对于字体大小的设置font-size
一般对于input譬如“checkbox,text,password”,
需要将字体设置为14px,以达到界面的美观度。