CSS最常用与实用技巧.docVIP

最常用和实用的CSS技巧 1.重置浏览器的字体大小 重置浏览器的默认值 ，然后 HYPERLINK /wordpress/essential-wordpress-toolkit-for-creating-new-themes/ \t _blank 重设浏览器的字体大小你可以使用 HYPERLINK /yui/reset/ \t _blank 雅虎的用户界面重置的CSS方案 ，如果你不想下载9MB的文件，代码如下： Java代码 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, ?? blockquote,th,td?{margin:0;?padding:0;?} ?? table?{?border-collapse:collapse;?border-spacing:0;?} ?? fieldset,img?{?border:0;?} ?? address,caption,cite,code,dfn,em,strong,th,var?{?font-style:normal;?font-weight:normal;?} ?? ol,ul?{?list-style:none;?} ?? caption,th?{?text-align:left;?} ?? h1,h2,h3,h4,h5,h6?{?font-size:100%;?font-weight:normal;?} ?? q:before,q:after?{?content:”;?} ?? abbr,acronym?{?border:0;?}?? 其次，我们重设浏览器字体的大小为10像素，使用如下： Java代码 html?{font-size:?62.5%;}?? 这个大小基本合适，然后您可以根据自己的需要调整大小，如 标题1为120像素: Java代码 h1?{font-size:?2em;}?? 2.设置水平居中 大多数的网站目前都是固定宽度的。CSS代码如下： Java代码 div#container?{margin:?0?auto;}?? 3.控制位置：绝对位置，相对位置 假如有两个div Java代码 div?id=parent ?? div?id=son/div ?? /div?? div有left和top属性,是用来定位的. 如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置.. 如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离. 4.将重要元素放置在屏幕中央 如果你希望将您想要的东西放在最中央，可以使用以下CSS： Java代码 div.popup?{?height:400px;?width:500px;?position:?absolute;?top:?50%;?left:?50%;} ?? div.popup?{?margin-top:?-200px;?margin-left:?-250px;}?? 您必须明确的指定宽度和高度，再把top和left属性设为他们的一半，这样就可以是这个部分回到屏幕的中心。 5.可以重复利用的规则 Java代码 .left?{float:?left;} ?? .right?{float:?right;} ?? img?.left?{?border:2px?solid?#aaaaaa;?margin:?0?10px?0?0;} ?? img?.right?{?border:2px?solid?#aaaaaa;?margin:?0?0?0?10px;?padding:?1px;}?? 设置自己的CSS样式表，就可以在您需要的时候直接的添加标记即可。 6. 解决IE6 的浮动元素的双倍边距问题 对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下： Java代码 div?{float:left;margin:40px;display:inline;}?? 7.简单的导航菜单 在您的设计中预设一个导航栏是非常有益的。可以让别人对你网页的主要内容有一个大致的了解。第一次来的XHTML： Java代码 div?id=”navbar” ?? ul ?? lia?href=””Peakflow?Design/a/li ?? lia?href=””Google/a/li ?? lia?href=”/”Ze