#header {
  padding: 20px;
  background: #ccc;
  }
#sidebar {
  float: left;
  width: 200px;
  padding: 10px;
  text-align: justify;
  }
#content {
  margin-left: 220px;
  background: #eee;
  padding: 20px;
  }
#footer {
  padding: 20px;
  background: #eee;
  }
body {
  text-decoration: none;
  font-family: ����,Songti,Verdana,Tahoma,Arial,Geogia,Sans-serif;
}
li{
  padding: 4px;
}

.tip{
position:relative;
text-decoration:none;
}

.tip span {
display: none;
}


.tip:hover span{
display:block;
position:absolute;
top:15px;
left:10px;
margin-top: 10px; 
margin-left: -10px; 
width:20em;
color:#000000;
padding:8px;
border:1px solid #eee;
z-index:100;
background: #FFFFAA; 
font: 16px "Arial", sans-serif;
text-align: left; 
}
/* 响应式设计 */
@media screen and (max-width: 768px) {
  #sidebar { float: none; width: 100%; padding: 15px; text-align: center; }
  #content { margin-left: 0; padding: 15px; }
  #sidebar img { max-width: 120px; height: auto; }
}
@media screen and (max-width: 480px) {
  #sidebar { padding: 10px; }
  #content { padding: 10px; }
  #sidebar img { max-width: 100px; height: auto; }
  body { font-size: 14px; }
  h1 { font-size: 18px; }
  h2 { font-size: 16px; }
  li { padding: 2px; }
}