1.鼠标样式

商品位于图像上鼠标的十字变换cursor:move，轮播图中鼠标位于小圆点时 变换为小手cursor:hand,

文本样式 cursor:text

2.轮廓线

强调表单输入文本，点击边框，显示边框颜色。若点击时不想显示边框颜色，设置 outline:none;

3.文本域

在一些留言中会遇到textarea,防止文本域拖拉放大影响其他元素，设置 resize:none;

4.垂直对齐vertical-align

只针对行内元素和行内块元素，特别是文本和表单。

常常用来设置图像 的属性， 解决图像与文本的排列。vertical-align ：baseline(默认与文本基线对齐)，top(文字顶端对齐)

middle（文本中线对齐），bottom（文本底端对齐）。

效果为：左侧为图像，右侧文本基线（顶端、中线、底端对齐）

和基线对齐，会有一点小错误，图像等表单行内块元素 会与父盒子产生一定间隙（即使没有文本），

解决方案：

4.1

image{

vertical-align:top ;

border 0;     /*图像去边框；*/

}

4.2

img{

display:block;

}(缺陷：可能会影响其他元素)

5.多余文字处理（如新闻li标题）

默认情况，当文本超过父盒子大小，自动换行到下一行显示。

若想让其在一行显示，设置 white-space:nowrap;

若想让其隐藏，设置 overflow:hidden;

若想让多余文字... 显示，设置3属性，缺一不可。

white-space: nowrap;overflow:hidden; text-overflow:ellipsis;

注意：浏览器会与默认的样式，可能会影响小点的显示。因此，要先清除格式。

*{

padding:0;

margin:0;

}

li {

list-style:none;

}

6.精灵图定位出网页所有背景图像。

利用background-position. 其属性与父盒子左上角的位置为起点，向右为x轴正方向，向下为y轴正方向。给父盒子所需图片宽高，移动精灵图，得到当前背景图像。

7.滑动门,制造圆角效果。

在网页中，样式随着内容变化而变化。注意，样式不能设置宽度。给定指定的高度。eg:在a 标签中嵌套span, 背景图像与a 标签左对齐，与span 标签右对齐。当鼠标悬浮在网页上，有凹陷效果，则是通过更改背景图像为同大小浅色系，达到视觉上的凹陷。

8、display,visibility,overflow 属性设置的差别。

display:none (表示不显示元素，并不占用位置，其后元素会“顶”上来)。

visibility:visible(元素可见)， hidden（元素不可见），占有位置。

overflow：visible（内容超出盒子大小范围，可见） hidden(超出隐藏) scroll(不管内容有没有超出) auto（xuy）