<!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>div+css布局控制div定位浮动层在背景图片上的半透明阴影效果</title> <meta name="description" content="div+css布局应用div定位浮动层控制在背景图片上，以半透明阴影效果显示，div内容列表排行序列显示。div css模板和div css教程下载。" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} body{font-size:12px;font-family:"宋体";background:#DFEAF4;} a{color:#333;text-decoration:none;} a:hover{color:#3366cc;text-decoration:underline;} .info{margin:100px auto;height:160px;width:750px;background:#99CCCC url(top10/bg.jpg) no-repeat;text-align:left;border:5px solid #FFFFFF;} /* top10 */ .top10{border:1px solid #336699;width:300px;height:202px;background:#FFFFFF;z-index:10;margin:-20px 0 0 400px;position:absolute;} .top10 ul{padding:5px;} .top10 li{height:18px;line-height:18px;overflow:hidden;padding-left:35px;border-bottom:1px solid #FFF;} .top10 li.li_01{background:#AFCAE4 url(top10/01.gif) no-repeat;} .top10 li.li_02{background:#BFD5EA url(top10/02.gif) no-repeat;} .top10 li.li_03{background:#CFDFEF url(top10/03.gif) no-repeat;} .top10 li.li_04{background:#DFEAF4 url(top10/04.gif) no-repeat;} .top10 li.li_05{background:#EFF4FA url(top10/05.gif) no-repeat;} .top10 li.li_06{background:#EFF4FA url(top10/06.gif) no-repeat;} .top10 li.li_07{background:#EFF4FA url(top10/07.gif) no-repeat;} .top10 li.li_08{background:#EFF4FA url(top10/08.gif) no-repeat;} .top10 li.li_09{background:#EFF4FA url(top10/09.gif) no-repeat;} .top10 li.li_10{background:#EFF4FA url(top10/10.gif) no-repeat;} .mask{width:300px;height:202px;background:#000;border:1px solid #000;-moz-opacity:0.2;filter:alpha(opacity=20);opacity:0.2;margin:-15px 0 0 405px;position:absolute;} </style> <body> <div class="info"> <div class="top10"> <ul> <li class="li_01"><a href="http://www.jsfoot.com/css3/layout/2011-09-22/199.html">div+css制作非常实用的24款分页页码css代码</a></li> <li class="li_02"><a href="http://www.jsfoot.com/css3/layout/2011-10-13/215.html">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li> <li class="li_03"><a href="http://www.jsfoot.com/css3/layout/2011-02-21/36.html">CSS如何定位工程</a></li> <li class="li_04"><a href="http://www.jsfoot.com/css3/menu/2011-09-21/197.html">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li> <li class="li_05"><a href="http://www.jsfoot.com/css3/menu/2011-07-23/78.html">用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox</a></li> <li class="li_06"><a href="http://www.jsfoot.com/css3/menu/2011-02-20/22.html">用div+css制作一个CSS3的简约图标导航菜单</a></li> <li class="li_07"><a href="http://www.jsfoot.com/css3/css3/2011-02-20/26.html">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li> <li class="li_08"><a href="http://www.jsfoot.com/html5/tx/2011-08-29/153.html">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li> <li class="li_09"><a href="http://www.jsfoot.com/html5/tx/2011-03-01/66.html">制作CSS3和HTML5的一个单页网站模板</a></li> <li class="li_10"><a href="http://www.jsfoot.com/html5/tx/2011-02-21/42.html">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li> </ul> </div> <div class="mask"></div> </div> </body> </html>
2609
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
