css最常用和实用的技巧

35顶1踩最常用和实用的CSS技巧1.重置浏览器的字体大小重置浏览器的默认值，然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案，如果你不想下载9MB的文件，代码如下：Java代码1.body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,2.blockquote,th,td{margin:0;padding:0;}3.table{border-collapse:collapse;border-spacing:0;}4.fieldset,img{border:0;}5.address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}6.ol,ul{list-style:none;}7.caption,th{text-align:left;}8.h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}9.q:before,q:after{content:”;}10.abbr,acronym{border:0;}其次，我们重设浏览器字体的大小为10像素，使用如下：Java代码1.html{font-size:62.5%;}这个大小基本合适，然后您可以根据自己的需要调整大小，如标题1为120像素:Java代码1.h1{font-size:2em;}2.设置水平居中大多数的网站目前都是固定宽度的。CSS代码如下：Java代码1.div#container{margin:0auto;}3.控制位置：绝对位置，相对位置假如有两个divJava代码1.divid='parent'2.divid='son'/div3./divdiv有left和top属性,是用来定位的.如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置..如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离.4.将重要元素放置在屏幕中央如果你希望将您想要的东西放在最中央，可以使用以下CSS：Java代码1.div.popup{height:400px;width:500px;position:absolute;top:50%;left:50%;}2.div.popup{margin-top:-200px;margin-left:-250px;}您必须明确的指定宽度和高度，再把top和left属性设为他们的一半，这样就可以是这个部分回到屏幕的中心。5.可以重复利用的规则Java代码1..left{float:left;}2..right{float:right;}3.img.left{border:2pxsolid#aaaaaa;margin:010px00;}4.img.right{border:2pxsolid#aaaaaa;margin:00010px;padding:1px;}设置自己的CSS样式表，就可以在您需要的时候直接的添加标记即可。6.解决IE6的浮动元素的双倍边距问题对一个div设置了float:left和margin-left:100px那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：Java代码1.div{float:left;margin:40px;display:inline;}7.简单的导航菜单在您的设计中预设一个导航栏是非常有益的。可以让别人对你网页的主要内容有一个大致的了解。第一次来的XHTML：Java代码1.divid=”navbar”2.ul3.liahref=””PeakflowDesign/a/li4.liahref=””Google/a/li5.liahref=””ZenHabits/a/li6./ul7./divCSS代码：Java代码1.#navbarulli{display:inline;margin:010px00;}2.#navbarullia{color:#333;display:block;float:left;padding:5px;}3.#navbarullia:hover{background:#eee;color:black;}8.不使用table的form表单正如我们现在进行网站设计的table-free，把重点是放在使用DIVs上。不再对表的列和域进行约束，所以我们需要一些好用的CSS，在JeddHowden.com发现Java代码1.XHTML:2.formaction=”form.php”method=”post”3.fieldset4.legendPersonalInformation/legend5.div6.labelfor=”first_name”FirstName:/label7.inputtype=”text”name=”first_name”id=”first_name”size=”10″value=”/8./div9.div10.labelfor=”last_name”LastName:/label11.inputtype=”text”name=”last_name”id=”last_name”size=”10″value=”/12./div13.div14.labelfor=”postal”Zip/PostalCode:/label15.inputtype=”text”name=”postal”id=”postal”size=”10″value=”/16./div17./fieldset18./formJava代码1.CSS:2.formdiv{clear:left;display:block;width:400px;zoom:1;margin:5px000;padding:1px3px;}3.formdivlabel{display:block;float:left;width:130px;padding:3px5px;margin:005px0;text-align:right;}9.让footer总是停留在页面的底部在网页的底部总是保留着公司的版本信息，如何是这部分信息来实现呢？这是一个很古老的技术，这都要归功于TheManinBlue。Java代码1.XHTML：2.body3.divid=”nonFooter”4.divid=”content”*Placeallpagecontenthere*/div5./div6.divid=”footer”*Placeanythingyouwantinyourfooterhere*7./div8./bodyJava代码1.CSS:2.html,body{height:100%;}3.#nonFooter{position:relative;min-height:100%;}4.*html#nonFooter{height:100%;}5.#content{padding-bottom:9em;}6.#footer{position:relative;margin-top:-7.5em;}10.在同一元素上使用多种类随着有用的功能越来越多的，大多数的人都忽略了内部CSS的选择。一个元素可以套用很多的类，例如：Java代码1..red{color:red;}2..bold{font-weight:strong;}我们可以运用它：Java代码1.pclass=”redbold”Thistextwillberedyetalsobold!/p