1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div align="center" style="text-align:left"><br /> <br /> <br /> <br /> <TABLE align="center" cellPadding=0 cellSpacing=0> <TBODY> <TR> <TD style="PADDING-RIGHT: 10px" vAlign=top width=566> <DIV id=TodayBookContainer style="Z-INDEX: 1; LEFT: 0px; BACKGROUND-IMAGE: url(images/bg_tb.gif); OVERFLOW: hidden; WIDTH: 566px; POSITION: relative; TOP: 0px; HEIGHT: 249px"> <DIV id=LeftTodayBook style="LEFT: 0px; POSITION: absolute; TOP: 0px"> <TABLE id=Table1 height=249 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD vAlign=top width=369><TABLE id=Table2 style="MARGIN-TOP: 10px; MARGIN-LEFT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD><a href="#" target="_blank"><img src="images/t081029_1.jpg" width=138 height=132 border="0"></a></TD> <TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 25px; PADDING-BOTTOM: 0px; PADDING-TOP: 15px" vAlign=top rowSpan=2><SPAN class=bodytitle>听杨绛谈往事</SPAN><BR> <SPAN class=Read>北的一生。 </SPAN></TD> </TR> <TR> <TD style="PADDING-RIGHT: 0px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px"><A class=pdname href="#">听杨绛谈往事</A><BR> 本书记录了杨绛女士精彩的一生<BR> <SPAN class=priceB>22,5</SPAN> <BR> <SPAN class=price>(10%<IMG src="images/i_dc.gif">+10%<IMG src="images/i_p.gif">)</SPAN><BR> <SPAN class=couponB></SPAN></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </DIV> <DIV id=RightTodayBook style="LEFT: 376px; WIDTH: 410px; POSITION: absolute; TOP: 0px"> <TABLE id=Table1 height=249 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD><IMG id=todayBookImg style="CURSOR: hand" height=249 src="images/b_tbLeft.gif" width=17></TD> <TD vAlign=top width=379 background="images/bg_tbup.gif"><TABLE id=Table2 style="MARGIN-TOP: 10px; MARGIN-LEFT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD><A href="#" target="_blank"><IMG src="images/t081029_2.jpg" width=138 height=132 border="0"></A></TD> <TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 25px; PADDING-BOTTOM: 0px; PADDING-TOP: 15px" vAlign=top rowSpan=2><SPAN class=bodytitle>鲤·嫉妒</SPAN><BR> <SPAN class=Read>嫉妒是一种黑暗的情绪化的视野。 </SPAN></TD> </TR> <TR> <TD style="PADDING-RIGHT: 0px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px"><A class=pdname href="#">妒</A><BR>绪的图书<BR> <SPAN class=priceB>34,2</SPAN><BR> <SPAN class=price>(10%<IMG src="images/i_dc.gif">+10%<IMG src="images/i_p.gif">)</SPAN><BR> <SPAN class=couponB></SPAN></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </DIV> </DIV></TD> <TD vAlign=top width=187></TD> </TR> </TBODY> </TABLE></div>
4、书写css代码。BODY { FONT-SIZE: 9pt; }A:link { COLOR: #444444; TEXT-DECORATION: none }A:visited { COLOR: #444444; TEXT-DECORATION: none }A:active { COLOR: #444444; TEXT-DECORATION: none }A:hover { COLOR: #3a85c7; TEXT-DECORATION: underline }.price { FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #eb5d07; LINE-HEIGHT: 120%; FONT-FAMILY: "verdana"; TEXT-DECORATION: none }.priceB { FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #eb5d07; LINE-HEIGHT: 120%; FONT-FAMILY: "verdana"; TEXT-DECORATION: none }.priceR { FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #0f8ef0; LINE-HEIGHT: 120%; FONT-FAMILY: "verdana"; TEXT-DECORATION: none }.pdtitle { FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ce674b; FONT-FAMILY: "verdana" }
5、书写并添加js代码。<SCRIPT> var x = 'right'; $(document).ready(function(){ $("#LeftTodayBook").mouseover( function(){ if( x == 'left' ) { x = null; $("#RightTodayBook").animate({"left": "+=210px"}, "fast", null, function() { x = 'right'; todayBookImg.src = "images/b_tbLeft.gif"; }); } }); $("#RightTodayBook").mouseover(function(){ if( x == 'right' ) { x = null; $("#RightTodayBook").animate({"left": "-=210px"}, "fast", null, function() { x = 'left'; todayBookImg.src = "images/b_tbRight.gif"; }); } }); $("#todayBookImg").click( function(){ if( x == 'left' ) { x = null; $("#RightTodayBook").animate({"left": "+=210px"}, "fast", null, function() { x = 'right'; todayBookImg.src = "images/b_tbLeft.gif"; }); } }); }); </SCRIPT>
6、代码整体结构。
7、查看效果。
