热文推荐
热点推荐
主页>社区>IT 技术与微软技术>网页制作>网页特效>图形特效

纯CSS实现相册滑动浏览_3


 2008/10/9 20:11:54 阅读 393 次


非续读浏览 | 发布资讯 | 评论 | 置顶 | 打印

在ul中我们只应用了一个名为gallery的样式,接下来的CSS都将针对#gallery及其下级元素进行定义。本例中的相册图片都有相同的尺寸320×240,背景图片的尺寸为495×240。注意这里背景图的宽度是根据本例的需要精确定义的,至于如何计算会在例子结束的时候进行说明。现在在浏览器中显示的仅仅是七张带圆点和默认链接边框的图片,接下来看一下#gallery中针对ul的样式设定:

#gallery {
    width:495px;
    height:240px;
    border: 1px solid #888;
    margin:0 auto;
    padding:0;
    list-style:none;
    background:#fff url(windows/win_backh.gif);
}

ul元素的宽和高与背景图的尺寸保持一致,并设置了1px的外边框。本例中通过margin将整个相册居中,消除内填充以及默认的列表圆点符号。原文中#gallery还有一条overflow:hidden;语句,我把它去掉之后,相册效果在IE6和FF中依然正常,不知是不是在其它浏览器中会出现Bug,若你了解个中因由,希望告知本站以及时纠正。



4 页   [1] [2] [3] [4]





相关阅读:
• 模拟跳舞游戏 (2008/12/26 19:59:44)
• 一款FLASH图片切换效果 (2008/12/26 19:59:41)
• 实现网页中图片的半透明效果 (2008/12/26 19:59:40)
• 焦点图片轮换第三季——iFocus (2008/11/26 7:57:56)
• 超酷MSN女性频道缓动图片特效 (2008/10/18 10:45:40)
• 10个能用JavaScript实现的图片特效 (2008/10/9 20:12:04)
• 纯CSS实现相册滑动浏览 (2008/10/9 20:11:54)
• 网页柱状图,CSS实现的网页特效代码 (2008/9/8 21:15:59)
• 强制网页图片自适应大小的网页特效代码 (2008/7/10 13:11:56)
• 刷新一次显示不同图片的特效代码 (2008/7/10 13:11:55)

温馨提示


特别声明
 
最新热点资讯排行

• 李彦宏柳传志等获首都杰出人才奖
• 一盘两用源科千元64GB固态硬盘评测
• SSD性能+HDD价格希捷混合硬盘详测
• 带宽50GbpsIntel宣布激光信号新突破
• SDL为全球技术写作人员推出预测文本技术
• 英特尔展示新传输技术:每秒可传输50GB数据
• 瞻博网络宣布收购移动安全公司SMobile
• 谷歌修复Chrome浏览器7个漏洞
• LG版本WindowsPhone7语音功能初体验
• 1GHz+800万像素HTC版WP7不见Sense踪影
• 苹果发布27英寸LEDCinemaDisplay显示器
• 微软获ARM授权后或独立研发处理器
• 谷歌升级手机版谷歌地图加入Places功能(图)
• 谷歌与中国两大广告代理商解除合同
• 《星际争霸2》美国上市售价60美元
• 网站狂泄驻阿美军情报