HTMLCSS网页设计中技巧.docx

HTMLCSS网页设计中技巧HTMLCSS十条网页设计中实用的技巧web开发。不管是在工作还是在学习中，掌握一些实用的开发小技巧，你的效率都会大大提升哦！下面就来和小编一起看看HTMLCSS十条网页设计中实用的技巧吧。一、将填充和边距都设置为零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;}也有使用通配符*{padding:0;margin:0;}网站利弊端都各有其说法，对于*号这种，是把所有元素的内外边距都设置为了0，可能有些会出现些小细节的.问题，所以选择你适用的方案吧二、重置浏览器的字体大小body{font:12px"宋体",Arial,Helvetica,sans-serif;color:#000;}不保证所有的用于都安装有你设置的字体，所以通常会在后面加上几个通用的web安全字体三、元素/标签选择器h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}table{border-collapse:collapse;border-spacing:0;}img{border:0;}ol,ul{list-style:none;}p{word-wrap:break-word}四、站点链接站点链接的样式必须保持此顺序，包括用于创建悬停效果的选择器组在内a:link{color:#42413C;text-decoration:none;}a:visited{color:#6E6C64;}a:hover,a:active,a:focus{text-decoration:underline;}五、设置水平居中1）固定宽度大多数的网站目前都是固定宽度的代码如下：#container{width:1000px;margin:0auto;}2）如果是用百分百来定义宽度的话，可以这样使用：#container{width:80%;max-width:1260px;/*最大宽度，IE6不遵循max-width、min-width此声明。*/min-width:780px;/*最小宽度*/margin:0auto;/*如果将#container宽度设置为100%，则不需要此设置。*/}六、可以重复利用的规则.left{float:left;}.right{float:right;}七、在同一元素上使用多种类加粗的红色字体，使用了两种类CSS代码：.red{color:red;}.bold{font-weight:bold;}Html代码：同一元素使用两种类八、隐藏水平滚动条为了避免出现水平滚动条，在body里加入overflow-x:hiddenbody{overflow-x:hidden}九、解决IE6的浮动元素的双倍边距问题对一个div设置了float:left和margin-left:100px那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：div{float:left;margin:40px;display:inline;}IE6下图片也会产生3像素的空白距离，也用到displayimg{display:block}十、简单的导航菜单用html5css3的新语义标签来写一下这段导航菜单代码html代码：网站首页个人博客模板慢生活CSS代码：navulli{display:inline;margin-right:10px;}navullia{color:#000;display:block;float:left;padding:5px;}navullia:hover{background:#eee;color:black;}}如果想选中的导航能高亮显示，可以加上一段js代码：varobj=null;varAs=document.getElementById('nav').getElementsByTagName('a');obj=As[0];for(i=1;i=0)obj=As[i];}obj.id='nav_current'提示：为了让js能够获取到菜单的id取值，所以应该给html中的nav标签添加一个id高亮显示的样式nav_current也应该在css中写上一段代码，比如：#nav_current{background:#eee;color:red;}