DIV+CSS 웹페이지 TIP_CSS/HTML의 간단한 방법

기본 원칙은 표시를 사용하는 것입니다. 표시할 때는 표시되지 않습니다.
예:

코드 복사 코드는 다음과 같습니다.

#infoboxspan{display: none }
#infobox a:hoverspan{display:block;position:absolute ;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">자슈 테스트 팁<title> </title> <style> /* zishu.cn */ *{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;} body{ background: #333} #info{padding:50px;} #infobox{padding:0px 20px;background-color: #640000;} #center{background: #ABBAAC; border-top:2px solid #333; padding:20px;} .c{ clear:both; height:1px; overflow: hidden; background:#333} #infobox li{ border-right:1px solid #000; float:left; margin-right:1px; text-align:center;margin-top:-4px; } a{ width:100px;line-height:28px; display:block;} a:link,a:visited{color:#000;background:#FF9900;text-decoration: none;} a:hover,a:active{ color:#FFFF00;background:#000;} /*以是下显示TIP的内容*/ #infobox span{ display: none; } #infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;} </style> <div id="info"> <div id="infobox"> <ul> <li> <a href="http://www.zishu.cn" target="_blank">여기에서 제 홈페이지에 들어가실 수 있어요! <span>홈페이지</span></a> </li> <li> <a href="http://www.zishu.cn" target="_blank">여기엔 영어도 있고 농담도 있어요! <span>영어 농담</span></a> </li> <li> <a href="http://www.zishu.cn" target="_blank">친구들의 웹사이트는 다음과 같습니다! <span>친절한 링크</span></a> </li> <li> <a href="http://www.zishu.cn" target="_blank">하고 싶은 말이 있다면 여기로 오세요! <span>메시지를 남겨주세요</span></a> </li> <li> <a href="http://www.zishu.cn" target="_blank">는 제가 직접 쓰고 수집한 글입니다! <span>기술 기사</span></a> </li> <li> <a href="http://www.zishu.cn" target="_blank"> 더 이상 가지고 있지 않다면 다이어리에 넣어보세요! <span>인생사진</span></a> </li> </ul> <div class="c"> </div> </div> <div id="center"> </div> </div>
[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]