Rip by: LiBee KS
HD: Tạo trang HTML và past code dưới đây vào,....
Ko có demo, demo die rùi.
Nhận xét:
- Hình ảnh đẹp, phù hợp với tuổi teen.
- Có tooltip
HD: Tạo trang HTML và past code dưới đây vào,....
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Diễn đàn THPT Trường Chinh</title>
<script type="text/javascript" src="http://thpttruongchinh.info/./index-05-01/jquery.js"></script>
<script type="text/javascript" src="http://thpttruongchinh.info/./index-05-01/supersleight-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://thpttruongchinh.info/./index-05-01/style.css">
<style type="text/css">
.menu2 {
margin: 0 auto;
padding: 0; width:700px;
list-style: none;
}
.menu2 li {
padding: 0;
margin: 0 2px 0px 20px;
float: left; list-style:none;
position: relative;
text-align: center; width:140px;
}
.menu2 a {
padding: 0px 10px 4px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(http://www.webdesignerwall.com/demo/jquery/images/butt-on.gif) no-repeat center center;
behavior:url(iepngfix.htc);
}
.menu2 li em {
font-weight: normal;
background: url(http://gottagettofowa.com/wp-content/themes/fowa/bubble2.png) top center no-repeat;
width: 170px;
height: 65px;
position: absolute;
top: -55px; margin-top:30px;
left: -15px;
text-align: center;
padding: 19px 16px 10px 16px;
font-style: normal;
z-index: 2; font-size:12px;
display: none;
behavior:url(iepngfix.htc);
}
</style>
<!--[if (gte IE 5)]>
<style type="text/css">
.menu2 li em {
background: url(http://gottagettofowa.com/wp-content/themes/fowa/bubble-ie.png) top center no-repeat;
width: 170px;
height: 65px;
position: absolute;
top: -55px; margin-top:30px;
left: -15px;
text-align: center;
padding: 19px 16px 10px 16px;
font-style: normal;
z-index: 2; font-size:12px;
display: none;}
</style>
<![endif]-->
<!--Other than IE7 -->
<!--[if (gte IE 5)&(lt IE 7)]>
<style type="text/css">
.menu2 a {width:100px;}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
#badge {
padding: 11px 10px 10px 0px;
margin: 0px 0px 50px 4px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#badge {
padding: 11px 10px 10px 0px;
margin: 15px 0px 50px -6px;
}
.mbox h5 {width:500px; margin-right:20px}
</style>
<![endif]-->
<script type="text/javascript">
function changeStyle()
{
document.body.style.backgroundImage="url(http://gottagettofowa.com/wp-content/themes/fowa/bg.jpg)";
}
</script>
<link href="http://thpttruongchinh.info/./index-05-01/sharethis.f8aeb821aa52b7af5ae4d3675118594c.css" rel="stylesheet" type="text/css"></head>
<body id="barRefaeli" onclick="if(SHARETHIS.buttonClicked==false){SHARETHIS.stopClosing=false;SHARETHIS.openDuration=0;stClose(100);}">
<!-- Begin Wrapper -->
<!-- Begin Header -->
<div id="header">
</div>
<!-- End Header -->
<div id="wrapper">
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
<h1><a href="http://thpttruongchinh.info/./index-05-01/index.htm"><img src="./index-05-01/get2FOWA.png"></a></h1>
<img src="http://thpttruongchinh.info/./index-05-01/toptext.png" alt="Gotta Get To FOWA" width="509" class="toptext">
<div class="clear"></div>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<a href="http://thpttruongchinh.info/@4rum"><img src="http://thpttruongchinh.info/./index-05-01/characters.png"> </a>
<div class="clear"></div>
</div>
<!-- End Right Column -->
</div>
<!-- End Faux Columns -->
<!-- Begin Footer -->
<div id="navigation">
<ul class="menu2">
<li><a href="/home" title="Tới trang chủ nè :P"><img src="http://thpttruongchinh.info/./index-05-01/icon_passport.png" class="iconbar" alt=""><em style="top: -85px; display: none; ">Tới trang chủ nè :P</em></a></li>
<li><a href="/@4rum" title="Tới diễn đàn nhé!"><img src="http://thpttruongchinh.info/./index-05-01/icon_FOWA_on.png" class="iconbar" alt=""><em style="top: -85px; display: none; ">Tới diễn đàn nhé!</em></a></li>
<li><a href="ymsgr:sendIM?gungoan_ratngoan" title="Liên hệ admin"><img src="http://thpttruongchinh.info/./index-05-01/icon_jet_on.png" class="iconbar" alt=""><em style="top: -85px; display: none; ">Liên hệ admin</em></a></li>
<li><a href="JavaScript:void(0);" title="Designed by Gú ngoan"><img src="http://thpttruongchinh.info/./index-05-01/icon_hotel.png" class="iconbar" alt=""><em>Designed by Gú ngoan</em></a></li>
</ul>
<!--<img src="http://gottagettofowa.com/wp-content/themes/fowa/icons_step1.png" alt="Gotta Get To FOWA" />-->
<img src="http://thpttruongchinh.info/./index-05-01/meter_4.png" alt="Gotta Get To FOWA" class="meter">
<h4 class="statusline">Chào mừng bạn đến với Diễn đàn THPT Trường Chinh </h4>
<img src="http://thpttruongchinh.info/./index-05-01/bubble2.png" alt="bubble" style="display:none;">
</div>
<!-- End Footer -->
<!-- Begin Footer -->
<div id="badge">
<p><a href="http://events.carsonified.com/fowd/2009/london"></a> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- End Footer -->
<!-- Begin nu-Faux Columns -->
<!-- End nu-Faux Columns -->
<!-- Begin Faux Columns -->
<!-- End Faux Columns -->
<!-- Begin Footer -->
<!-- End Footer -->
</div>
<!-- End Wrapper -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./index-05-01/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2897787-6");
pageTracker._trackPageview();
</script>
</div></body></html>
Ko có demo, demo die rùi.
Nhận xét:
- Hình ảnh đẹp, phù hợp với tuổi teen.
- Có tooltip