作家
登录

iphone手机桌面滑动效果使用css3实现

作者: 来源:www.28hudong.com 2013-03-30 00:16:25 阅读 我要评论

iphone手机桌面效果,因为用了css3样式,只测试了谷歌浏览器。 iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none; } body {background: #333; } #iphone {width: 900px; height: 600px; background: url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; } #wrap {width: 240px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; } #iphone ul#zm {width: 1200px; height: 360px; cursor: pointer; position: absolute; top: 0px; left: 0px; background:url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/background.jpg) center center;} #iphone ul#zm li {float: left; width:240px; height:350px;padding-top:10px;overflow:hidden;} #iphone ul#zm li div{float: left; width:60px; height:80px; background-repeat: no-repeat;margin: 10px;position: relative;} #iphone ul#zm li div.icon::after{bottom: -8px;color:#fff;content: attr(title);font-size: 12px;height: 20px;left: -8px;overflow: hidden;position: absolute;text-align: center;white-space: nowrap;width: 74px;text-shadow: 0 0 3px #222;} #iphone ul#btn{position:absolute;left:60px;bottom:5px;width:140px;height:30px;} #iphone ul#btn li{float:left;width:6px;height:6px;border-radius:50%;background:#fff;margin:10px;} #iphone ul#btn li.current{background:#00A2D6;} [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  推荐阅读

  CSS定义Hover实现文字变大的超级链接

强调连接 移动鼠标到任意一个连接上则可放大显示该超连接。 超连接1 超连接2 超连接3 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]>>>详细阅读


本文标题:iphone手机桌面滑动效果使用css3实现

地址:http://www.17bianji.com/kaifa2/JS/22708.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)