一个特帅的展示图片的js+css

198 阅读 0 评论 131 点赞

我是靠谱客的博主阔达鱼，这篇文章主要介绍一个特帅的展示图片的js+css，现在分享给大家，希望可以做个参考。

<P><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=it dir=ltr xml:lang="it" 
xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<TITLE>CSS+JS控制图片展示</TITLE>
<STYLE>
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 70% </P>
<P>Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000; PADDING-TOP: 0px; TEXT-</P>
<P>ALIGN: center
}
#outer {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/images/bg-outer.gif) </P>
<P>repeat-y center top; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 780px; PADDING-</P>
<P>TOP: 0px; TEXT-ALIGN: left
}
#wrapper {
 BACKGROUND: #fff; MARGIN: 0px 4px
}
#content {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 400px; PADDING-BOTTOM: 20px; </P>
<P>MARGIN: 20px 30px; PADDING-TOP: 0px; POSITION: relative
}
#focus {
 BORDER-RIGHT: #ccc 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 2px solid; </P>
<P>PADDING-LEFT: 0px; MIN-HEIGHT: 188px; BACKGROUND: url(/images/tile.gif) #eee repeat</P>
<P>-y left top; PADDING-BOTTOM: 10px; MARGIN: 25px 0px 30px; BORDER-LEFT: #ccc 2px </P>
<P>solid; WIDTH: 100%; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 2px solid; POSITION: </P>
<P>relative; HEIGHT: 188px
}
#beni {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; </P>
<P>WIDTH: 250px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 15px
}
#beni LI {
 BORDER-TOP: #fff 1px solid; FONT-SIZE: 12px; FLOAT: left; WIDTH: 250px; TEXT-</P>
<P>INDENT: 24px; LINE-HEIGHT: 26px
}
#beni LI.first {
 BORDER-TOP: 0px
}
#beni LI A {
 BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; PADDING-</P>
<P>LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; </P>
<P>BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none
}
#beni LI A:hover {
 BACKGROUND: #f9f9f9
}
</STYLE>

</HEAD></P>
<P><BODY id=home>
<DIV id=outer>
<DIV id=wrapper>
   <DIV id=content>
  <DIV id=focus>
   <UL id=beni>
     <LI class=first>Opere e oggetti d'arte</LI>
     <LI>Architetture</LI>
     <LI>Reperti archeologici</LI>
     <LI>Stampe e matrici di incisione</LI>
     <LI>Fotografie</LI>
     <LI>Beni etnoantropologici</LI>
   </UL>
  </DIV>
 </DIV>
</DIV>
</DIV>
</BODY>
</HTML></P>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]