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: 0 auto;}
2）如果是用百分百来定义宽度的话，可以这样使用：
#container {
width: 80%;
max-width: 1260px; /* 最大宽度，IE6 不遵循max-width、min-width 此声明。 */
min-width: 780px; /* 最小宽度 */
margin: 0 auto; /* 如果将 #container 宽度设置为 100%，则不需要此设置。 */
}
六、可以重复利用的规则
.left{float: left;}
.right{float: right;}
七、在同一元素上使用多种类
加粗的红色字体，使用了两种类
CSS代码：
.red{color: red;}
.bold{font-weight: bold;}
Html代码：
同一元素使用两种类
八、隐藏水平滚动条
为了避免出现水平滚动条，在body里加入overflow-x:hidden
body{overflow-x:hidden}
九、解决IE6 的浮动元素的双倍边距问题
对一个div设置了float:left和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：
div {float:left;margin:40px;display:inline;}
IE6下图片也会产生3像素的空白距离，也用到display
img{display:block}
十、简单的导航菜单
用html5 css3 的新语义标签来写一下这段导航菜单代码
html代码：
网站首页
个人博客模板
慢生活
CSS代码：
navulli{ display:inline;margin-right:10px;}
navulli a {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;}
【HTMLCSS十条网页设计中实用的技巧】相关文章：
CSS网页设计中实用的技巧11-28
HTML CSS网页设计中实用的技巧10-27
网页设计中的小技巧12-02
网页设计中的模糊技巧11-29
网页设计中颜色的使用技巧11-27
网页设计中字体应用的技巧11-22
网页设计中图片常用的技巧09-30
网页设计中的常见模糊技巧09-25
网页设计中的图片使用技巧09-04