html css 十一条网页设计经典实用的代码片段

一、将填充和边距都设置为零

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;
}

五、设置水平居中

#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代码：
<p class="red bold">同一元素使用两种类</p>

八、隐藏水平滚动条

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}

十、简单的导航菜单

<nav>
 <ul>
   <li><a href="http://www.yangqq.com/" >网站首页</a></li>
   <li><a href="http://www.yangqq.com/download/">个人博客模板</a></li>
    <li><a href="http://www.yangqq.com/news/s/">慢生活</a></li>
 </ul>
</nav>

CSS代码：

nav ul li { display:inline;margin-right:10px;}
nav ul li a {color:#000;display:block;float:left;padding:5px;}
nav ul li a:hover {background:#eee;color:black;}  
}

如果想选中的导航能高亮显示，可以加上一段js代码：

<script language="javascript">
var obj=null;
var As=document.getElementById('nav').getElementsByTagName('a');
obj = As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
obj=As[i];}
obj.id='nav_current'
</script>

提示：为了让js能够获取到菜单的id取值，所以应该给html中的nav标签添加一个id这里写代码片

<nav id="nav">
高亮显示的样式nav_current 也应该在css中写上一段代码，比如：
#nav_current{background:#eee;color:red;}