10个非常有用的CSS技巧.docVIP

10个非常有用的CSS技巧 时间:2010-01-04 14:11来源:未知 作者:admin 点击: 169次 10个非常有用的CSS技巧,网页居中,一直在底部等等. 1.?将网页或元素居中??? ? ? ? ? ? ?? ?HTML： ? div?class=wrap?? /div!--?end?wrap?--?? ? CSS： ? .wrap?{?width:960px;?margin:0?auto;}?? ? ? 2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)? ?  ? ? ? HTML： ? div?id=wrap?? ?? div?id=main?class=clearfix?? ?? /div?? ?? /div?? ?? div?id=footer?? ?? /div?? CSS： ? *?{?margin:0;?padding:0;?}??? ?? html,?body,?#wrap?{?height:?100%;?}?? ?? body??#wrap?{height:?auto;?min-height:?100%;}?? ?? #main?{?padding-bottom:?150px;?}??/*?must?be?same?height?as?the?footer?*/?? ?? #footer?{?? ????????position:?relative;?? ?margin-top:?-150px;?/*?negative?value?of?footer?height?*/?? ?height:?150px;?? ?clear:both;}??? ?? /*?CLEAR?FIX*/?? .clearfix:after?{content:?.;?? ?display:?block;?? ?height:?0;?? ?clear:?both;?? ?visibility:?hidden;}?? .clearfix?{display:?inline-block;}?? /*?Hides?from?IE-mac?*/?? *?html?.clearfix?{?height:?1%;}?? .clearfix?{display:?block;}?? /*?End?hide?from?IE-mac?*/?? ? 3.跨浏览器最小高度设置?? ? ? ?? ???? ?CSS： ? .element?{?min-height:600px;?height:auto?!important;?height:600px;?}?? ? ? 4.Box阴影(CSS3)? ?  ? ? ?? ?CSS： ? .box?{?box-shadow:?5px?5px?5px?#666;??-moz-box-shadow:?5px?5px?5px?#666;??-webkit-box-shadow:?5px?5px?5px?#666;?}?? ? 5.文字阴影（CSS3） ? ?  ?? ????? CSS： ? .text?{?text-shadow:?1px?1px?1px?#666;?filter:?Shadow(Color=#666666,?Direction=135,?Strength=5);?}?? ? 6.跨浏览器的CSS透明度? ?  ? CSS： .transparent?{?? ???? ??/*?Modern?Browsers?*/?opacity:?0.7;?? ?? ??/*?IE?8?*/?-ms-filter:?progid:DXImageTransform.Microsoft.Alpha(Opacity=70);?? ?? ??/*?IE?5-7?*/?filter:?alpha(opacity=70);?? ?? ??/*?Netscape?*/?-moz-opacity:?0.7;?? ?? ??/*?Safari?1?*/?-khtml-opacity:?0.7;?? ???? }?? ? ? 7.著名的 Meyer Reset（重置）? ?  ? CSS： ? ??html,?body,?div,?span,?applet,?object,?iframe,?? h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre,?? a,?abbr,?acronym,?address,?big,?cite,?code,?? del,?dfn,?em,?font,?img,?ins,?kbd,?q,