HTML/css碎片知识

1.http-equiv 属性 -- HTTP协议的响应头报文

此属性出现在meta标签中
此属性用于代替name，HTTP服务器通过此属性收集HTTP协议的响应头报文
此属性的HTTP协议的响应头报文的值应使用content属性描述

[code]<

meta

http-equiv

=

"

content-type

"

content

=

"

text/html; charset=utf-8

"

/>

[/code]

[code]<

meta

http-equiv

=

"

content-language

"

content

=

"

zh-CN

"

/>

2.the total width and height of an element is the sum of its width, border, margin and padding

由外到内

margin：外边距

border：边距

padding：内边距

content：内容

3.ul 横向排列

<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。

<style type="text/css">
#menu li { 
float:left; /* 往左浮动 */
}
</style>

4.hover

hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

在此基础上，定义onmouseover和onmouseout方法。

5.导航思想

略过时，显示隐藏子列表

<script language="javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace(" over", "");
 }
 }
 }
 }
}
window.onload=startList;
</script>
<style type="text/css">
<!--
body {
  font: normal 11px verdana;
  }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }
  
ul li {
  position: relative;
  }
  
li ul {
  position: absolute;
  left: 149px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-bottom: 0;
  }
  
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

<span style="color:#FF0000;">li:hover ul, li.over ul { display: block; } /* The magic */</span>
-->
</style>
<ul id="nav"> 
 <li><a href="#">Home</a></li> 
 <li><a href="#">About</a> 
 <ul> 
 <li><a href="#">History</a></li> 
 <li><a href="#">Team</a></li> 
 <li><a href="#">Offices</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Services</a> 
 <ul> 
 <li><a href="#">Web Design</a></li> 
 <li><a href="#">Internet Marketing</a></li> 
 <li><a href="#">Hosting</a></li> 
 <li><a href="#">Domain Names</a></li> 
 <li><a href="#">Broadband</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Contact Us</a> 
 <ul> 
 <li><a href="#">United Kingdom</a></li> 
 <li><a href="#">France</a></li> 
 <li><a href="#">USA</a></li> 
 <li><a href="#">Australia</a></li> 
 </ul> 
 </li> 
</ul>