当前位置: 首页 > 图文教程 > 网页特效 > 图片特效 > 独具个性的网页相册
No. « ‹ 1 2 »
关键字
完全用CSS+Javascript制作的网页相册。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>相册 v4.0</title> <style> *{ margin:0; padding:0; list-style:none} body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.8;} img{ display:block; border:0;} h1,h2{ background:#85B829; line-height:2.5; font-size:14px; padding-left:10px; color:#fff;} #pics{ border-left:3px solid #468C50; border-right:3px solid #99CC99; background:#B5DF63; float:left; width:750px;} li{ float:left;} a{ display:block; background:#fff; border:1px solid #A4D742; text-align:center; color:#598628; text-decoration:none; padding:5px; margin:10px;} a:hover,a:active{ background:#99CC33; border:1px solid #85B829; border-left:1px solid #fff; border-top:1px solid #fff; color:#fff} #showpic{ border:1px solid #85B829; padding:5px; display:none; clear:left; background:#FFF; text-align: center} ul,#showpic{ margin:10px;} h2{ color:#598628; background:none; text-align:left} #showpic img{ margin:auto} </style> </head> <body> <div id="pics"> <h1>我的动物园</h1> <ul> <li><a href="/upload/tech/20091010/20091010012657_0bb4aec1710521c12ee76289d9440817.jpg" title="四只长颈鹿"><img src="/upload/tech/20091010/20091010012658_ab88b15733f543179858600245108dd8.jpg" />长颈鹿</a></li> <li><a href="/upload/tech/20091010/20091010012659_e7b24b112a44fdd9ee93bdf998c6ca0e.jpg" title="绿色的小青蛙"><img src="/upload/tech/20091010/20091010012701_6a9aeddfc689c1d0e3b9ccc3ab651bc5.jpg" />青蛙</a></li> <li><a href="/upload/tech/20091010/20091010012702_ffeabd223de0d4eacb9a3e6e53e5448d.jpg" title="小狗狗会汪汪"><img src="/upload/tech/20091010/20091010012704_20f07591c6fcb220ffe637cda29bb3f6.jpg" />小狗狗</a></li> <li><a href="/upload/tech/20091010/20091010012705_37693cfc748049e45d87b8c7d8b9aacd.jpg" title="小老鼠兄弟"><img src="/upload/tech/20091010/20091010012709_dc5689792e08eb2e219dce49e64c885b.jpg" />鼠小弟</a></li> <li><a href="/upload/tech/20091010/20091010012710_e5f6ad6ce374177eef023bf5d0c018b6.jpg" title="烫发的白天鹅"><img src="/upload/tech/20091010/20091010012712_b6edc1cd1f36e45daf6d7824d7bb2283.jpg" />白天鹅</a></li> <li><a href="http://www.ruanchen.com/"CURSOR: hand" onfocus="this.blur()" onclick="runEx('code')" type="button" value="运行代码" /> <input style="WIDTH: 95px; CURSOR: hand" onfocus="this.blur()" onclick="cycode(code)" type="button" name="Submit" value="复制到剪贴板" /> <input style="CURSOR: hand" onfocus="this.blur()" onclick="svcode(code)" type="button" value="另存代码" /> [ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]</p> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/36791/p/2/" title="土豆网首页轮换图片特效代码">土豆网首页轮换图片特效代码</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/36793/p/2/" title="鼠标感应的网页图片展示特效">鼠标感应的网页图片展示特效</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '36792'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('36792')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">
登陆 还没注册？
繁體中文
图片特效 中的 独具个性的网页相册
