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)